Coding Tips & Tricks


Home > Performance

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.

loadCSS Developer Tools Asynchronous CSS

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!








Comments

Phil Green - 7/4/2014
The idea behind having non-blocking CSS is that you can extract a minimal file (layout, font sizes, etc.) that intentionally blocks the browser and gives you the bare bones "above the fold" styling that gets filled in by the lazy loaded CSS file. This also gets around possible FOUT issues.

Marcel - 10/4/2014
Hi Dean, thank you for your post! I tried it with loadCSS and it seems to work. But Google PageSpeed still recognises my CSS file as blocking. I opened an issue at the projects Github page - we'll see.

Sold Out Activist - 12/9/2014
I add a style to the html and body tag with my desired background color to get around FOUC.

Guilherme Moser de Souza - 12/9/2014
To avoid FOUC: Use the visibility: hidden inlined, then visible in the CSS async file. Render your above the fold inlined, like the header. Example: http://gui-poa.github.io/talks/mobileperf/filament_hidden.html


Add your comment

300 Characters left


Please fill this in to confirm that you are human