So you’ve just finished the landing page to your website, and it looks super slick.  There’s only one problem though … it takes over 10 seconds to load!  You only have the attention of people that come to your website for a short period of time, and if their patience runs our before your webpage loads, they could be lost forever.  Plus, page speed is now a ranking factor in several search engines.  In this post, I’ll give a few general tips for speeding up your webpages.

Why is your page slow?

Before you can fix a problem, you need to know where the problem is.  There are a few browser plugins and online tools that will help you identify what’s slowing down your webpage.  My favourites are:

  • YSlow – will analyse your webpage based on Yahoo!’s rules for high performance
  • PageSpeed – a plugin for Google Chrome that analyses pages and suggests performance improvements.
  • http://www.webpagetest.org/ – an online way to test your websites performance.  I find it a good idea to use this a few times to benchmark your website before and after you make changes to it.

I generally use both YSlow and PageSpeed to analyse the performance of a webpage.  They both have different strengths, but combined they will cover almost everything.  PageSpeed is amazing at optimizing the images on your website, so they are much smaller but look almost exactly the same.  YSlow is a bit like a nagging mother; it will complain about everything, but prioritizes problem so you can fix the most important ones first.

Bear in mind though, that occasionally your website will be slow because your hosting provider is slow.  If you’re on a bargain basement hosting package, there’s a chance that you and 250+ other people could be sharing a single machine, which could cause significant slowdown.

How do you make your web pages quicker?

There is a fantastic, in-depth article on SEOmoz about optimizing your webpages.  Here, I’m going to cover what I consider the 2 most important things that you should do; these things made the greatest impact to our website speed.

1. Reduce Requests

 What I’ve found makes the bigest impact on the speed of a webpage are the number of requests a customers browser has to make to render your webpage.  Suppose your webpage includes 3 CSS files, 4 Javascript files and 10 images on your page.  That means it takes a total of 18 requests (1 for the page itself, 17 for the rest) for the browser to render your webpage.  Most browsers only download 2 things at a time from a webpage, so the more requests it has to make, the slower your webpage will load.

Browser Requests on BulletHQ

In order to reduce the number of requests a browser has to make to get your webpage, you can combine CSS files, Javascript files and images.  There are some online tools you can use to combine your CSS/JavaScript files:  http://refresh-sf.com/yui/ and Shrinker.  These tools will also compress the files, making them smaller as well as combining them.

Probably the biggest bang for your buck is combining your images into a sprite.  An image sprite is a collection of images put into a single image. Likely you have a lot more images on your page than CSS/JavaScript files, so combining these will yield the greatest gain.  I’ve used http://csssprites.com/ to generate the sprites before; it’s not bad.  The hardest part of using a sprite is getting the CSS right so that the page looks the same as before you combined the images.  For example, here is the image sprite that Google uses for google.com:

Google Image Sprite

2. Cache, Cache, Cache!

Most of your different webpages will include some of the same resources – the same css files, javascript files or background images. Browsers can cache these files, so if your webpage uses a file that the browser has already downloaded from your site, it will just use this downloaded version. However, browsers will often go and get the latest version of a file from your website if it hasn’t retrieved it in a while.

Ideally, what you want to happen is that once a web browser has downloaded a file from your webserver, it never needs to download it again.  Google has an excellent, detailed post on  configuring your webserver for caching.  Essentially, you want your webserver to tell the customers browser that if they already have a copy of a file, they don’t need to look for a new one again for a month (or longer).  Remember, the less files/images that a customers browser has to download from your site, the quicker your website will be for them.

 

Automated Builds

If, like us, you’re building a web application and your CSS/JavaScript/images are changing regularly, then having to combine them manually before you deploy your will be very cumbersome.  Ideally, you want to automate this stuff as part of your build.  Also, it’s much easier to develop an application using the separated, uncompress files during testing, and only combine/compress files when deploying to your production machine.

The 2 tools I use for this are Jawr, and SmartSprites – Jawr does the CSS/Javascript combining and compression, while also giving each file a unique path so that it can be given a very long expiry time for caching.  SmartSprites is great for reading your CSS files, looking for images in them and combining them into a sprite.  It will also modify the CSS automatically to use the newly generated sprite.

I had one issue with Jawr, and SmartSprites, but once I worked around those they work very well and automate the process nicely.

Results

Using Jawr and SmartSprites, we were able to halve the number of CSS/JavaScript/Image files used on our homepage, and while the amount of data transfered actually increased slightly because of the image sprites, we saw pagespeed increases of about 50% (2-3 seconds).  Every second counts when you’re looking for a customer!

Do you know any good tools for optimizing web pages that we haven’t covered here?  What have your experiences been of webpage speed?  We’d love to hear – leave us some comments!

Pin It on Pinterest

Share This