defer css loading

To Defer CSS loading, use the following script.

Put all your CSS files inside the <noscript> tag

<noscript id=”deferred-styles”>
<link href=css/responsive.min.css rel=stylesheet> Put all your CSS files here
<link href=css/bootstrap.min.css rel=”stylesheet”>
<link href=css/full-width-pics.min.css rel=”stylesheet”>
</noscript>

Copy paste the following as it is in the index.html or our footer.php file(or any other file where you need to defer the CSS file.

<script>

var loadDeferredStyles = function() {
var addStylesNode = document.getElementById(“deferred-styles”);
var replacement = document.createElement(“div”);
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener(‘load’, loadDeferredStyles);

</script

Resource

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

https://github.com/filamentgroup/loadCSS/blob/master/README.md – shows alternate method

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s