We have known for some time that Google views site performance as important, and recent research shows that on a faster site users are more likely to convert, be that buy a product or fill in a contact form. In a recent video Maile Ohye, Senior Developer Programs Engineer at Google, explains why it is important and that increasing site performance doesn’t require major structural changes.
I have summarised some of her points below along with a number or other hints and tips that you may find useful.
Ordering
Perhaps the simplest thing you can do is to check that the order in which you load CSS and JavaScript is correct. Within the head you should load CSS files first and then the JavaScript files, this is because JavaScript files can be downloaded in parallel with the CSS files but JavaScript files come down in sequence.
Compression
If you enable Gzip compression and a webserver knows this is available, the server notifies the client. You can compress many external resources, such as JavaScript files which have to be loaded each time a request is made by the browser. Using this compression will reduce the amount of data that needs to be loaded and so can increase load time of such elements by around 70%.
Combination
Where possible combine your CSS and JavaScript files so that the browser reduces the number of resources it needs to load. For example if you have three JavaScript, try and combine them so that only one file needs to be downloaded and not three.
Another combination technique is utilising Image Sprites. If a web page has, for sake of argument, 20 common images, then the browser has to request and load twenty separate image files. The idea behind an image sprite is that you put all of the images into one image file and then use CSS to display the relevant image – thus using only the one image file.
Further Information
Spread out downloads
You may be requesting resources (images, maps etc) from many different hostnames. Browsers only allow a maximum number of concurrent connections (should be 2 but newer browsers offer more) at any one time. If you are requesting more resources than this from one hostname, it will only download the maximum number allowed at any time and queue the rest. If you could spread these (evenly) over more hostnames then less will be queued as each hostname is allowed its concurrent downloads.
Further Information
Tidy Up
You should always do this but building sites in a clean and efficient way will undoubtedly improve load times. There are obviously a number of things you can check and these include:
- Specify image dimensions – take the guess work out of it for the browser
- Optimise and scale images – the browser won’t need to do any extra work
- Remove unused CSS and JavaScript – reduces the file size and allows the browser to find information quicker
- Use efficient CSS selectors – keep it simple and don’t over define
- Serve resources from consistent URL – eliminates duplicate downloads
- Avoid bad requests – removes wasteful requests.
Tools
There are a couple of tools that you can utilise to analyse the performance of your site. If you are signed-up for Webmaster Tools you will see a link under ‘Labs’ with the title ‘Site performance’. This will give you information about how long your site takes to load and how that has changed over time. It will also tell you how quick it is to load compared to other sites on the web.
There is also an add-on for Firefox called Page Speed which is provided by Google. This tool will analyse your site and tells you what you are doing well and not so well. Most importantly it doesn’t only give you an overall score, it gives hints and tips that will rectify any problems.
Tags: CSS, Google, HTML, JavaScript, Load time, SEO, Speed
Simon Willans
In regards to the CSS and JavaScript ordering, it’s a good idea to request JS files at the end of the document. This way it won’t affect the loading of the rest of the content.