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. As explained here 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 HTML and a tiny Javascript

For defer loading JavaScript files there are pure HTML based methods available, namely defer and async. Unfortunately, these pure HTML methods do not work for CSS files. However, the below snippet, which uses just a tiny bit of JavaScript comes to the rescue and will defer any CSS file you want:

<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="style.css"></noscript>
Copy and paste the above script to your page. Replace style.css with the path of the CSS file you want to defer load. When you want to defer load more than one CSS file just copy the link rel snippet and keep pasting copies of the snippet to your page, while replacing style.css with your prefered filename(s).

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

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.

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.