The speed of a website is one of the most important factors, not only for usability, but for search engine rankings, performance, user satisfaction, and profitability. Recently, Google updated their search engine ranking algorithm to take into account the speed of a website, and many advertisers will personally visit a website and see if it is excessively slow before purchasing an advertisement. Users have gotten increasingly trigger happy, expecting sites to load instantly and closing pages that take too long to load.
With all that, it is vital for webmasters to understand how to optimize their site for speed, and to regularly test to ensure proper performance. In this post, Andy Walpole will explain the importance of speed, and how to optimize your site to maximize performance.
It seems like a millions years ago now but when the majority users were connecting to the internet with dial-up, then creating a website that downloaded as quickly as possible was one of the prime concerns of the web designer. Lots of time was spent fussing over whether an extra byte could be taken out of an image or whether the page was too long and needed to be split into two.
Eventually broadband triumphed and most web designers threw these concerns into the dustbin of history together with Web 1.0 – or so it seemed.
Starting a few years ago, the larger sites began to take a real interest again in techniques to ensure efficient page delivery. For a site that has millions of page views per day then shaving off download times not only ensures happy visitors but also means that considerable money can be saved on their massive bandwidth bills.
At the end of 2009, Google threw this issue right into the face of the average webmaster on the net after Matt Cutts announced (source: http://videos.webpronews.com/2009/11/13/matt-cutts-interview/) the importance of page speed and gently suggested that Google would eventually introduce this as part of their algorithm.
As he stated at the time:
“We are starting to think more and more whether speed should be a factor in Google’s rankings because even in Adwords if your site is slow that might be a factor in how much you pay out in Adwords. Historically we haven’t used it in our search rankings but a lot of people in Google think that the web should be fast, it should be a good experience, so it’s fair to say that if you are a fast site then maybe you should have a little bit of a bonus”.
A couple of weeks later Google’s Webmaster Tools introduced a new feature called site performance which details the average time that it takes the Google bots to download your indexed pages.
It looks something similar to the screenshot below:
What’s more, they now have their own special section called Lets Makes the Web Faster (source: http://code.google.com/speed/) in which you can find a number of authoritative articles on the subject and a very comprehensive tools list (source: http://code.google.com/speed/tools.html).
There are two approaches when it comes to optimising your website for speed – frontend and backend engineering.
Correctly configuring your server isn’t something that web designers really need to worry about in any great detail and there are many different techniques for writing efficient scripts whether that is for PHP, Ruby or Python – all of which are best explained on specialist websites dealing with these languages.
It is important though that web designers have some appreciation of techniques to ensure that page download times are kept to a minimum.
Here are some ideas to get you started thinking about this subject if you haven’t already done so.
Header: Cutting down the size of images
Firstly, use Photoship wisely. Is it really necessary to give that JPEG maximum quality when saving it for the web? You are producing content for the World Wide Web, not the print, and users are familiar with low-quality pictures.
Secondly, the greatest asset that Adobe Fireworks provides is that it can produce images with PNG8 alpha transparency which Photoshop, for reasons only known to its creator, is unable to. PNG32 produces fantastic looking images but they are often massive in size. If I use Photoshop I often save them as PNG32 and then open them up again in Fireworks and save them as PNG8 alpha. You’ll lose some quality but it will be fine for most purposes – and you won’t have to use those pain in the arse workarounds to get your PNG32 images looking correct in IE6.
Thirdly, there has been some useful free command line tools floating around the internet for years that allow the shrinking in size of PNGs and GIFs – but without any loss of quality. Thankfully, Yahoo developers decided to put all these tools into one easy to use application called Smush.it (source: http://developer.yahoo.com/yslow/smushit/). This service is free and extremely easy to use. Expect to be able to shrink your non-JPEG images anywhere between 1 and 50%.
Header: GZIP is your friend
This above turns on GZIP in Apache2. DeflateCompressionLevel 9 turns it to maximum (careful, this will produce an error message on some servers), while BrowserMatch ensures that only those browsers that support compression are used.
Header: Adding an expires header
By setting expires headers for the different types of file you are telling the users browser how long to keep them in its cache, ensuring that every single file doesn’t have to be downloaded every time the page is accessed. Yahoo recommends setting this for a minimum of one month. This is okay for pages with static content but I prefer to vary the time frame depending on the resource and type of site.
If I’m handcoding a site here’s what I place in the .htaccess file:
The above code implements different expiry times for browser caching. For further details read this excellent article (source: http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html) on the Ask Apache website.
So here are three examples of website optimization but this article is just an introduction and for further details I would recommend reading Yahoo’s Best Practices for Speeding Up Your Web Site (source: http://developer.yahoo.com/performance/rules.html).
If you are using Firefox and have the Firebug plugin installed you can also download and use Google’s Page Speed (source: http://code.google.com/speed/page-speed/download.html) and Yahoo’s YSlow (source: http://developer.yahoo.com/yslow/). Running either of these tools will automatically assess the page for a variety of optimisation factors, giving you valuable feedback in the process.