html - Optimise CSS Delivery in Wordpress Theme -
when using page speed insights alert
eliminate render-blocking javascript , css in above-the-fold content page has 1 blocking css resources. causes delay in rendering page. approximately 3% of above-the-fold content on page rendered without waiting following resources load. try defer or asynchronously load blocking resources, or inline critical portions of resources directly in html. optimize css delivery of following: http://www.mysite.co.uk/wp-content/themes/mytheme/css/m.min.css
note: removed url working site workplace.
i have tried doing suggested google , using
<script> var cb = function() { var l = document.createelement('link'); l.rel = 'stylesheet'; l.href = 'small.css'; var h = document.getelementsbytagname('head')[0]; h.parentnode.insertbefore(l, h); }; var raf = requestanimationframe || mozrequestanimationframe || webkitrequestanimationframe || msrequestanimationframe; if (raf) raf(cb); else window.addeventlistener('load', cb); </script>
but did not solve problem. have tried removing css link told me remove js files , font awesome files well.
i @ 97/100 on page speed insights appreciate help.
the best way eliminate render blocking css extract "above fold" or "critical" css required render page , inline html. there can asynchronously load remaining css required load rest of page.
the idea behind of resources need in 1 roundtrip server html page. remaining or "non-critical" resources, load asynchronously. more details, see this article on google developers website.
i find best tool use extract critical css grunt plugin called grunt-critical. if you've never used grunt before wordpress, there great tutorial on tuts+ site walk through it.
apart that, can asynchronously load javascript using html async attribute.
Comments
Post a Comment