Improving Page Load Time
It's been a good couple of months since I was asked to write a post about reducing the page load times on this blog. In the meantime there's been a big "will they/won't they" around Google using page load times as a ranking metric, every man and his dog has blogged about the subject and every day Dave's accusing stare is getting harder to ignore.
So, the blog is loading too slowly, apparently. What now?
Measuring Page Load Time
Before you can claim you’ve sped something up, you need to know how fast (or slow) it is in the first place. There are dozens of tools out there that purpose to give you that information. I’m not going to pretend to be an expert on all of them, and I’m sure others have written about them at length. Instead, I’ll just give you my main recommendations.
YSlow
Yahoo’s YSlow is an addon for an addon – the excellent Firebug for Firefox. It’s great. It shows an easy to understand and comprehensive report on how well optimised a page is for load time. Each of the criteria links to a page on Yahoo’s “Best Practices” site. It even gives you a straightforward A to F grade you can pat yourself on the back with after you’re done.
Pagetest
Not such a snappy name but extremely useful, Pagetest is an Internet Explorer based tool developed by AOL. I don’t recommend running it directly though, they have a publically accessible version with a few hosting locations around the world. Give it a try now on your own site. I used a number of other tools before finding this one and wasn’t too impressed – this one uses a real web browser to fetch the content so it’s a much more accurate measure of what a real user would experience.
The Rest
There’s also Google’s Page Speed which is similar to YSlow but I didn’t find it as useful. Plus it’s less pretty and isn’t that the important thing?.
Of course, Google Webmaster Tools now has a “Site performance” section under Labs. It’s presumably a good measure of the real world times users are actually seeing, but it doesn’t give much insight into the reasons for those times. I keep an eye on it but wouldn’t recommend it as your main tool – some of the advice it gives is downright infuriating. “Enable gzip compression for http://www.google-analytics.com/ga.js” repeated ten times. Thanks for that.
What’s Taking So Long?
If you’ve run a Pagetest report on your own site you can probably see it right in front of you.
In short: in short: external content being pulled into the page: images, JavaScript and CSS.
A web browser will have a limit to the number of simultaneous connections it will open to a remote server. If you have more images (or JS, CSS files) referenced on a page than that, some of them won’t even start loading until the first set have finished. You can see that quite clearly on this report. At the bottom of the ‘waterfall view’ in that report, notice that some of the images on the page haven’t even started loading until 7 or 8 seconds after requesting the page. Ouch.
In general, the fewer external files you’re referencing from your page the faster it will load. Unfortunately in the real world, you want lots of pretty images, CSS and dynamic content. So what can you do?
Speeding It Up
Rather than repeat all of the advice you can get from YSlow, I’m just going to list the big things that helped drop the page load time on this blog. In a sort-of descending order of impact:
- Reduced the number of images on the page. I made as many of them as possible in to a CSS “sprite” – essentially, combining small images into one big one and using the CSS background-position property to show the correct part of the image. Take a look at the sprite for this blog and you’ll see what I mean. There’s a very quick and easy way to do this with a bookmarklet called SpriteMe.
- Combined JS and CSS files: rather than one CSS file that imported three others, a big one with the content from all of them. Likewise for the Javascript content we control (not Google Analytics, TweetMeme, etc.)
- Installed the W3 Total Cache plugin. I’ve yet to find anything better for speeding up the performance of a WordPress blog. It’s easy to set up and will cache pages and database queries, allows you to manage CSS and JavaScript files per page, automatically minifies the HTML, and more. It’s running behind some very high profile sites, too.
- Set up some DNS aliases for static content – img.davidnaylor.co.uk, etc. The more hostnames your page requests from the more parallel downloads you get. Up to a limit. And each additional hostname adds an extra DNS query to look up its IP address, which adds up. This has been covered to death in much more detail than I could provide.
- Moved this site to a dedicated server on a faster connection external to our office – at Fasthosts… which is whole other story in itself!
- Made sure the web server was sending out compressed content (on Apache check out mod_deflate) to reduce the amount of data the user has to download, and that sensible “Expires” headers are being sent so caching will work (mod_expires)There are many other things to try that I haven’t even touched on here, but what I will say is that the law of diminishing returns is in effect, as always.
There are of course many other factors and optimisations to try that I haven’t covered here. These are just what I consider the low hanging fruit. If anyone has any easy one I’ve missed please leave a comment below!
Great Success
Of course, after I’d done all of that someone (who shall remain nameless) added a TweetMeme button to every post. That button pulls a JS file from tweetmeme.com that sometimes takes upwards of five seconds to load. A few of them on a page and my shiny new page load statistics go out of the window.
The moral of that story is that every time you embed someone else’s content into a page – be it YouTube, Google Analytics, Tweetmeme… – your total page load time is now at their mercy. Just something to keep in mind. That’s my excuse for not linking to a sub-2-second report at the end of this post.
My personal opinion is that, in the near future, I don’t think page load time is going to be a major ranking factor for search engines. From a user experience point of view though, it’s worth investing some time in.
12 Comments
Dave Ashworth - http://www.webmarketingadvisor.com/about-our-seo-services/dave-ashworth
James, good article and good to see people are carrying out work to get their pages up to speed, I recently ran something similar and have a few tips on lines to include in .htaccess to sort out caching, gzip and ET tag issues:
http://www.webmarketingadvisor.com/SEO-blog/tips-to-improve-your-page-load-speed
In fact, the DEFLATE snippet sorts most things bar the Content Delivery Network with regards offsite optimisation (i.e. not HTML, CSS or JS)
Personally, as a web developer turned SEO bod, I’d love to see factors such as page load speed, valid html etc come into play but not sure how important it will prove to be.
I have got a client website to 92 grade A on YSlow – it currently sits at no.10 for a v competitive term, and sites 1-9 are in the main grade D with the odd C thrown in – so I’ll be keeping a close eye on that one.
Bryan Eisenberg - http://www.bryaneisenberg.com
Dave,
A couple of other websites I would mention is the speed test at http://www.websiteoptimization.com/services/analyze/. I think it is one of the best analysis of page load time available with great recommendations. It was developed by my friend Andrew King who wrote the best book on the topic “Speed up Your Site.” Still a must read.
Also tools like smush.it and dynamic drive which compress the images for you are also must haves. You can take the image urls from the report provided by the websiteoptimization speed test tool, plug them into smush.it, his smush.it button and it will give you all the compressed images so that you can upload them to your server.
Justin Parks - http://www.justinparks.com
Another tip I think I blogged about one time but cant be arsed looking for is this.
Go into the head.php and manually hardcode the meta, title pingbacks, trackbacks, shortcut and canonicla and description tags (or whatever else is relevant) so that you reduce database calls. I did this and shaved about a full seond of the load time.
Pretty obvious but easily overlooked in WordPress case as it uses all these functions via the admin panel and they are not necessary if you can code.
James
Thanks guys. I should have mentioned smush.it at least. I ran all of the suitable images through a similar but command line tool (optipng).
It can be a bit awkward keeping the user-uploaded images on the blog optimised. I haven’t investigated WordPress plugins in this area much. It’s on my (ever increasing) “to do” list.
Ethan Gardner - http://www.ethanandjamie.com/
I agree that speed is important from a user experience perspective. A lot of companies are investing in performance for their high traffic properties, but there aren’t really any jobs in the performance field in my market. It seems like performance is everyone’s responsibility.
One resource I suggest on performance optimizations is http://www.phpied.com/, particularly the articles they just did for their performance advent calendar http://www.phpied.com/performance-advent-calendar-2009/.
NGT Web Site Design
Great post. Just checked some of the old sites and OMG they need a fair bit of work doing. Better get cracking. Thanks for ruining my weekend 😉
Tim - http://nefariousdesigns.co.uk
Steve Souders, who was originally part of the team that created YSlow at Yahoo!, and who has since moved onto the PageSpeed team at Google, has written a couple of excellent books on website download optimisation:
http://www.amazon.co.uk/High-Performance-Web-Sites-Essential/dp/0596529309/
http://www.amazon.co.uk/Even-Faster-Web-Sites-Performance/dp/0596522304/
That said, I wouldn’t take everything he says as gospel; it’s worthwhile using his steps as good starting points and delving a little deeper into documentation to learn more. This is particularly true of server settings, HTTP headers, and caching.
Also, as a little side note, setting up subdomains for serving static files is great (as long as they’re cookieless), but you could also use a publicly available CDN like Amazon CloudFront (http://aws.amazon.com/cloudfront/) or even just straight Amazon S3 (http://aws.amazon.com/s3/).
James
Thanks Tim – I should have mentioned CDNs – they were on my list of “stuff I haven’t talked about but is probably important”.
I didn’t know that about YSlow and PageSpeed, thanks. I didn’t explain my dislike of PageSpeed very well, I know. It didn’t help that it currently doesn’t work in FF 3.6 so I couldn’t (well, wouldn’t) load it up again to take another look.
Dave - http://www.djb31st.co.uk
Little late with the comment…
I recently speeded up my page load speed solely using Google PageSpeed, Just given YSlow another go on the basis of this post and it does appear a lot clearer in what needs to be done that PageSpeed did.
Chris T - http://www.seoproficient.com/
great post … i gotta agree with Brian, the speed test here is great http://www.websiteoptimization.com/services/analyze/
Site Speed: What Does It Mean for SEO? Written by Jaamit Durrani « Smartshoppertv's Blog - pingback
[…] extension for Firebug. Then, maybe head over to some well written guides on speeding up your load times. Then get back to making your site remarkable enough in the first place that its got the kinds […]
Site Speed: What Does It Mean for SEO? - Google, Latest News, SEO, Search Engines, Web Design, - pingback
[…] extension for Firebug. Then, maybe head over to some well written guides on speeding up your load times. Then get back to making your site remarkable enough in the first place that its got the kinds […]