Loading CSS Asynchronously

When it comes to web page performance, the size and weight of every resource on the page is important. Large JavaScript and CSS files can slow down your page load times and frustrate your users. There are a number of techniques for loading JavaScript asynchronously and many different techniques for loading images asynchronously. However, when it comes to CSS - it seems to be a little neglected.

The problem is that browsers will actually block the rendering of a web page until all external style sheets have been downloaded. It does this so that it will avoid having to redraw the elements of a page if the CSS changes. Some browsers will even leave the user with a blank white page while they are waiting for the file to download. However, this is where the loadCSS plugin comes in. It's been built by the team at Filament Group and is available on Github. I have long been a fan of the work that the guys over at the Filament Group have been doing. If you haven't heard of them before, check out their blog and some of the projects that they have worked on.

LoadCSS will load your CSS asynchronously, which means that your web page won't block the page loading while it is waiting to download and render the CSS. In order to test this out, I downloaded a copy of my home page at deanhume.com and used the script that is available on the loadCSS Github repo. Using the simple code below, I referenced a local copy of the CSS file.

Using the network tab in your browser, you should notice that the CSS gets loaded in a different order than what you would normally expect. It should now appear a lot lower down the list of network resources.

Voila! This plugin is great because you can use it to load your CSS without blocking the page and waiting for larger CSS files to download. While experimenting with this plugin, I did notice a flash of unstyled content (FOUC) when loading the page. Unfortunately, it feels like it takes you back to the old skool days of website design. Depending on your project and the performance boost that you could get from this plugin, the FOUC might not be an issue.

The LoadCSS project seems like a very interesting project and I will definitely be watching it closely. Head over to the Github repo and check out the loadCSS project for yourself!