The web is sort of a reversed highway: you get tickets for going too slow and bonus points for speeding. Whether you’re “just” a blogger or you have an e-commerce site, your site needs to be fast. We’ve written about what to do to speed up Magento before, and I’ve mentioned caching for WordPress more than once, but there’s more.
One of the things I notice very often when performing a site analysis is that sites are loading way too much external files. Reducing the number of files needed to load your site, thereby reducing the number of HTTP requests, makes your site load faster. Faster loading sites have a better user experience, and it’s also a ranking factor these days. So, it’s clear, when you can, you should reduce the number of HTTP requests.
There’s usually three parts to this play:
- Reduce the number of CSS files
- Reduce the number of images
Luckily, Frederick has made a large portion of this very easy in W3 Total Cache, allowing us to tackle 1 & 2 in one fell swoop. But first, let me give you a brief intro into “browser pipelining”.
Browser pipelining and why reducing HTTP requests helps
<head> section of your site, that’s an issue: the browser can’t start rendering until it has all the files that “block” it from rendering. So we actually need to do two things: combine these files and reduce the number of requests and then move all the files that shouldn’t be blocking the page load out of the
<head> section and into the body.
Reducing the number of files to load does help your actual load time: it makes your site faster.
If you’ve added all your CSS and JS file, W3TC will combine these files into one and minify them, meaning it will remove comments, spacing and other unneeded stuff. So you could have 5 js files and combine them into one, effectively saving 4 HTTP requests. As you can see, this is not hard to do, so there’s really no excuse for not doing it.
Reducing the number of images
If you have a complicated theme, your theme might be using a lot of background images. I know this site does. There’s a way to make all these images load as one file though, through a process called CSS spriting. Explaining the full process and history is too long a story for this post, if you’re interested, this article on A List Apart is very good read.
In short: all those background images are combined into one background image. For example, see the sprite we use for social icons on yoast.com:
Now this isn’t an easy thing to do, and if you’re no developer you should really hire one to do this for you. If you know a thing or two about development, you might find SpriteMe, a service / bookmarklet by Steve Souders a very useful tool.
Another nice step is to prevent images that are not currently visible to the visitor of your website (because they’re below his / her fold, or in web designer speak “outside the viewport”) from loading. A jQuery plugin called Lazy Load will help you do this, it’ll automatically load images as the visitor scrolls down and the images are visible to him.
Bonus tip: use a CDN
One of the reasons my site is so fast is because I have not only made a sprite out of all those images, they’re actually loaded from a Content Delivery Network, or CDN. A CDN is a group of servers around the world, optimized for fast delivery of static files and positioned to be as close as possible to your site’s visitors.
The benefit from this is twofold: first of all, as said, those servers are faster and closer to your visitors. Second, they’re also usually on another host, like cdn.yoast.com in my own example. This means your browser will open 8 requests to yoast.com and 8 requests to cdn.yoast.com at the same time. Allowing it to load even more at the same time. The smart among you will now think: “hey, what if I would use 2 hostnames for my CDN, or 3″. Good thinking. W3 Total Cache has full support for that too, in fact, it makes using a CDN ridiculously easy.
I use the Level3 CDN (aff), provided by VPS.net, which has been very good for me the last few months and is reasonably priced.
Conclusion: reduce those HTTP requests
As you can see, some of these steps are pretty easy. That means there’s no good excuse for you not to take them. Just do it, make your site faster and your visitors happier!
Photo from Shutterstock.