It’s almost 2013, and I have to wonder why modern browsers still get tripped up over CSS stylesheets when it comes to blocking parallel downloads. Just to make sure we’re on the same page, I’m talking about this sort of thing:
As you can see (you can click for larger images, by the way):
- in the 1st image, the CSS loads all by itself. Everything else is blocked until the stylesheet finishes. What an inefficient use of time!
- in the 3rd image… something looks a little off. One JS file started with the CSS, but the other one is still blocked just like the images! What gives?!
If you’re using WordPress (and to a lesser extent, W3 Total Cache), at least one of the above images probably describe your situation. Let’s face it, you’re reading this for a reason, right?
The really exciting part is that while looking at the waterfall might give you hints as to where you need to make changes, it’s just as likely to totally mislead you.
- The browser gets your html and breaks down all those downloads (css/js/images) into 2 types – for the sake of simplicity, we’ll call them get-now and get-after-css. I’m sure those aren’t the technical names, but they match up nicely with waterfall images.
- Since your style.css is the first thing, it goes in the “get-now” section.
- Next is where “blocking” scripts come into play. Sure, the browser has given up on all your pretty pictures, but if you have any scripts that are of the “blocking” type, the browser may as well get them over with. It searches the entire page and finds them. Blocking scripts are then added to the “get-now” bucket.
Putting it into context
Let’s look at the 1st image again and see what happened:
CSS was clearly the only thing in the “get-now” bucket. What actually happened here was this:
We’ll skip to the 3rd waterfall image now:
So what’s ideal? Well… this:
Don’t those line up beautifully? No time is being wasted here!
So how do we get there?
Here’s the bad news. Your HTML has to look pretty much like this:
other-stuff (no scripts!)
other stuff (no scripts!)
And when I say no scripts, I mean it. Internal, external, blocking, nonblocking, doesn’t matter – the moment you have a script in there, every other image afterwards will go into the “get-after-css” category.
Now for the good news. While it can be tough, in many cases it’s possible to do. If you’re using WordPress, here are a few tips:
- View your website and hit “edit source”. Find the location of your scripts beforehand so that you know what you’re up against.
- Use the minify portion of W3 Total Cache to combine your .js files and choose “Embed before </body>”.
Both are essentially a double-edged sword.
If you choose non-blocking, your .js files will be downloaded rather lazily (they won’t start until your style.css has finished downloading). Not so good for your page-speed tests.