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.
Which CSS files should I defer load?
You should defer load all CSS files that are blocking the rendering of your page. You can test your website with our website speed test to see which files are render-blocking.
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.
/* 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'); 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.
<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
Is your website doing it right?
Try our website speed test to check whether any of your CSS files are not being defer loaded.
If there are any CSS files listed under the "Remove or replace render-blocking resources" warning it means that these CSS files aren't being properly defer or asynchronously loaded.