It’s common knowledge that Google’s release of Caffeine impacted how your site speed affects your rankings. Faster sites rank better. Google is focusing on user experience as always – good quality content, good navigation, not too many images and now, page load time.
If you’re an Adwords user, you may or may not know that your page load time affects not only your rankings in Google but also your quality score for the purpose of Adwords. If you improve your load time, you’ll see a better quality score and lower first page bids.
Anyway, back to load time. What can you do to improve it?
- Avoid / fix redirects that are slow – check the speed of your redirects – get a precise time using a tool like Fiddler.
- Avoid / fix slow servers – if your site is hosted on a slow server, naturally it will increase your load time. You can use Google’s Webmaster tools to check how long your site takes to fetch. If it’s slow, consider switching your hosts.
- Avoid duplicate scripts – don’t call scripts more than once on your page.
- Avoid interstitial pages – these are pages where your site visitor has to wait a few seconds (for example, to view an advert) before being taking to the page they requested. Get rid of these!
- Avoid multiple redirects – for each one you use, you increase the load time of your page. So get rid of as many as possible.
- Avoid redirects that use multi second meta refreshes – where you have a redirect that is set to happen after several second, reset it to zero seconds so the redirect happens straight away.
- Avoid unnecessarily large page sizes – naturally if your page is huge, it’ll take longer to load. Break up your pages into smaller, faster pages (paginate them for a better user experience). Don’t forget to use htaccess to redirect if you’ve changed their location, to avoid 404 errors.
- Combine images – here’s a way you can really cut down on your HTTP requests. Combine background images into one single image and use
background-image
andbackground-position
properties in CSS to display the section of the larger image that you want to show. - Consider using a content delivery network (CDN) – this is a collection of web servers that are distributed over multiple locations with the aim of delivering content more efficiently to users. These can be quite expensive though, so are more of an option to large sites/companies.
- Keep your CSS and javascript in external files – if you do this, the external files are cached by the browser, and the size of the document itself is reduced.
- Minify javascript and CSS – minify JavaScript using JSMin and YUI Compressor; the latter can also be used to minify CSS.
- Never scale your images in HTML (or CSS) – don’t use a bigger image than you need to and then reduce the size down with ‘width’ and ‘height’.
- Optimise your cookie size – get rid of any cookies that aren’t necessary and keep your cookie sizes to a minimum, so as not to impact the user response time.
- Optimise your images – and of course, keep them to a minimum! To optimise your images, try crunching them using software like Fireworks. You can often get the size right down without significantly reducing the quality. Also, try converting your GIFs to PNGs and see if there is a saving on size – there often is. The icky issues with PNGs, that we used to have as a result of them not being supported by browsers, aren’t so much of a problem nowadays.
- Post-load some of your components – use JavaScript for example to split components before and after the onload event. Don’t load anything that isn’t necessary to initially render your page.
- Put your scripts in your footer – scripts block parallel downloads. Many browsers will download just two components at a time per hostname (if however you server your images from multiple hostnames, you can achieve more than two downloads in parallel). But while your script is downloading, the browser won’t download anything else, even if it’s on a different hostname.
- Put your style sheets in your header – whilst this won’t actually improve your load time, it will appear to, which is better for the user. When you put your style sheets near the bottom of the page, you prohibit progressive rendering in many browsers, which includes IE.
- Reduce the number of HTTP requests – these are requests within your page code to download components such as images, stylesheets, scripts, flash etc. It’s not the size of the components we’re talking about here – it’s the number of them. Get them as low as possible.
- Steer clear of CSS expressions – these are evaluated more often than you think (an example is setting the background colour depending on the time).
- Use GZIP components to compress elements – the reason for this is because compression reduces response times by reducing the size of the HTTP response (Gzipping reduces the response size by about 70%).
If you’re trying to improve your load time, Google’s Webmaster Tools (http://www.google.com/webmasters/tools/) are really handy – they allow you to graph the average download time for your site. Note that they don’t take into account either redirects or interstitial pages (as explained above) which can affect your load time. Another tool that you might find handy is Page Speed which gives you suggestions on why your site may be loading slowly.
Leave a Reply