Improving your website load speed is a good idea. Not only does it make for a better user experience (how many times have you left a site which has taken too long to load). But search engines are also using this as a metric for how well a site is built and therefore an indication of its quality (this all counts to improving your search rankings).
Getting your site up to speed is therefore an essential part of its design, build and ongoing maintenance. Here’s our guide to how you can check and optimise your page load times.
How to check your load speed.
The first thing to do in improving your website load speed is to check your own site and find out how quickly your pages are loading. One of the best tools for doing this is the Google Developers PageSpeed Tool. Not only will this useful tool give you a score out of 100 for page load speed, but also provide you with low, medium and high priority items to implement in order to decrease page load times.
How to speed up a slow page.
We used our own homepage as a case study and found there was lots we could do to improve load times. Our homepage loaded in 1.4 seconds so we needed to speed it up by a minimum of about 30 to 40%. If we could manage to cut the load time in half I would be even happier.
1. Page Content
Firstly we took a look at the page itself. Had it been a massively long page we might have simply removed some content, but this was not the case with our homepage. There wasn’t anything we could do about the amount of content so the whole load time reduction would have to be achieved through technical amends.
2. CSS Image Sprites
The first step would be to combine multiple images into one CSS image sprite. For example, the navigation bar has five images plus their rollover states. This means that for the navigation bar alone during loading there are ten seperate calls to the server. We can cut this down to one call for a single image containing all the nav images. Then we display only small sections of the image on the page, using css to tell the browser what area of the image to display and where to display it.
The single large image will naturally have a larger file size footprint than the small individual ones, but because gif compression is good we will actually download fewer bytes of info as well as making fewer calls to the server. Each server call is where much of the speed bottlenecking occurs. Each call goes through a number of back and forth steps before the file is delivered to your browser, translated into a screen and shown to you the web viwer. By cutting out these calls we rapidly diminish the load time.
The picture above shows our homepage with all the elements that could be placed together in one image call to the server rather than the 20 calls we currently make.
3. Leverage Browser Caching
Our next step is to ensure faster load times by optimising browser caching. This is a simple procedure that tells browsers how long to keep previously cached pages that don’t change (such as the stylesheet) in their cache. If they come back to the site within the chosen period they display the cached data rather than going and getting a new page. A simple way to achieve this is to add some code to your .htaccess file. This is a great way to speed up a site. More details on browser caching.
4. Optimise Images
Optimising images is a very important way to speed up load times. An image should be made as small as possible (in terms of file size) whilst keeping the quality acceptable. Obviously the definition of ‘acceptable’ will differ from website to website and from designer to designer. For my own part I find that images rarely suffer from degredation until the compression exceeds around 30%.
Once minified, the files will no longer have comments so editing will be a bit of a pain, but despite this minified files really can help speed things up.
Remember, a faster site is a more productive, friendlier and more profitable site.
Chris Brown is Director at Brown Bear Media and specialises in building fast-loading optimised websites. Get in touch with Chris.