Defer load CSS.


When you are serious about speeding up your website and your web pages require large CSS scripts to load you can’t escape defer loading the larger parts of these scripts to optimize the CSS delivery. Defer loading a CSS script gives you the ability to load CSS files after your web page (the DOM) has fully finished loading.

How to determine which part of a CSS script to defer load?

Before you decide to defer load your CSS script(s) you should learn how to optimize CSS delivery. After extracting the critical rendering path CSS you should now have a smaller CSS script for the above-the-fold content. Inline this CSS script in the header of your web page and defer load the remains of the original larger CSS script.

Do not defer load a small or medium sized CSS script

When your web page loads a small to medium sized CSS script you shouldn’t worry too much about defer loading the script. You’ll benefit more, in the page speed sense, from inlining all your CSS instead.

Only defer load bigger CSS scripts

When it comes to page speed, defer loading CSS scripts is most beneficial when your web pages load large CSS scripts. Now you can’t just stick all your CSS in one file, defer load it, and expect your web pages to turn out well. The first view your visitors (especially ones with slow internet connections or on mobile devices) may get of your website will either be a blank page or look horrible because your web pages will not be styled, simply because the CSS hasn't been loaded yet. This is the reason defer loading all your CSS is not an option. Like explained above, the solution to this is finding out which part of your CSS is used for the above-the-fold initial view of your page. Once you know this you should inline this CSS script in the HTML head and defer load the remainder of your CSS.

How to defer load CSS scripts using a small Javascript

Unlike with CSS files there are HTML based methods for deferring and asynchronously loading Javascript files, namely script Defer and script Async. Unfortunately these HTML solutions do not work for CSS files. But do not worry, the below Javascript snippet comes to the rescue and will defer any CSS file you want:

<script type="text/javascript"> /* First CSS File */ var giftofspeed = document.createElement('link'); giftofspeed.rel = 'stylesheet'; giftofspeed.href = '../css/yourcssfile.css'; giftofspeed.type = 'text/css'; var godefer = document.getElementsByTagName('link')[0]; godefer.parentNode.insertBefore(giftofspeed, godefer);
/* Second CSS File */ var giftofspeed2 = document.createElement('link'); giftofspeed2.rel = 'stylesheet'; giftofspeed2.href = '../css/yourcssfile2.css'; giftofspeed2.type = 'text/css'; var godefer2 = document.getElementsByTagName('link')[0]; godefer2.parentNode.insertBefore(giftofspeed2, godefer2); </script>

Copy and paste the above script preferably in the HTML footer and replace ../css/yourcssfile.css with the path of the CSS file you want to defer load. Remove the snippet for the Second CSS File when you are defer loading just one CSS file. When you want to defer load more than two CSS files you can copy the snippet for yourcssfile2.css and keep pasting copies of this snippet within the script tags. Remember to replace the number 2 in the script with other numbers or letters.


Don't forget to include the following snippet within the HTML head tag, this will ensure that devices or browsers that do not support Javascript can load the CSS files as well.

<noscript> <link rel="stylesheet" type="text/css" href="../css/yourcssfile.css" /> <link rel="stylesheet" type="text/css" href="../css/yourcssfile2.css" /> </noscript>

Optimal For Page Speed

The great thing about the above script is that unlike many similar functioning scripts this one doesn’t make use of the Jquery library or any other Javascript library for that matter. It’s perfectly suited for page speed optimization.