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”>

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.


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


Resource – shows alternate method


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s