This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.
It's a no-brainer: well performing websites enjoy higher visitor engagement, retention and conversion. Given how fickle users can be, plus the fact that mobile devices are very significant these days, never before has the speed of websites been so important! In this article I'm going to highlight ways in which you can improve the performance of your own sites.
Thumbnail from Photodune.net
Increasing Website Performance
The performance of websites and the impact that has, has been well documented over the years. In 2007 Amazon reported that for every 100 ms increase in load time of Amazon.com their sales decreased by 1%. Google also reported similar results in 2006 with their Google Maps product. Google found that by reducing the size of the page from 100KB to 80KB, their traffic shot up by 10% in the first week and then 25% in the following three weeks.
It's clear that monitoring the performance of a website is a must and should not be ignored as being an integral part of your web design workflow.
The above infographic by strangeloopnetworks.com illustrates the effect that a website's performance can have on users.
You may already be using some of the techniques that I'll discuss today, whilst others you may not. Although you can use techniques on the server side to speed up websites, this article is going to focus on ways that we can increase performance from the front end. Let's jump in..
Minimizing HTTP Requests
The way that you include files into your website can have a drastic effect too. For example if you are currently including your CSS like this:
then you should reconsider this approach and use:
<link rel='stylesheet' href='myCSS.css'>
By doing this you are allowing the CSS file to download in parallel with other resources, resulting in faster page load times.
In order to understand the code that we are writing, we often format it in a way that is easier for us to read, in other words it's a more human friendly format. Take a look at the sample code below:
<form action="#" method="post"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" tabindex="1" /> </div> </form>
In the example above we can clearly see that we have a form with label and input element, surrounded by a div. The example above is much clearer than reading it as:
<form action="#" method="post"><div><label for="name">Text Input:</label><input type="text" name="name" id="name" value="" tabindex="1"/></div></form>
Unfortunately, although it may be easier for us to read, the more human friendly version includes a lot of unnecessary characters. It's not too disastrous in the example above, however, if this was a large scale site with thousands upon thousands of lines of code, then it would cost us in performance.
Unnecessary characters can include white space, comments and new line characters. These characters can be removed without affecting the code's performance and by removing these we are reducing the file size of our code, therefore the amount of data that needs to be downloaded to the browser.
One of the most performance hungry assets that the browser needs to download are images, causing some sites to be painfully slow. Wherever possible try to use CSS to generate graphics instead of images. This can be great for items such as buttons, but in some cases CSS maybe not be capable of recreating the design such as in the case of a photograph, or a detailed decorative element. If this is the case then there are some tricks to try.
By properly formatting and compressing images without losing the their look or visual quality you can save on data that needs to be downloaded, resulting in beautiful optimized images for the web.
If you've been designing for a long time then I'm sure you'll already be using sprites. If you're just beginning, however, then here's a quick overview of them.
Earlier on I told you about the key to speeding up websites is to minimize the number of http requests. Each image that you have on your website requires one http request to the server. Usually, browsers can perform only a couple of simultaneous requests (to the same domain) simultaneously, which is why queues form. By combining several images into one single image we can reduce the number of requests.
The down side to creating sprites is that they can be quite tricky for us to create and can often be quite fiddly. Again there's a whole range of online sprite tools to help create sprites. The one that I use though (which has saved me heaps of time over the last six months or so) is SpritePad. With SpritePad you can simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. Good stuff eh?!
Above shows an example of sprite images being used on Facebook's and Google's websites.
Losslessly Compressing Images
If you have, for instance, some form of photography showcase, or lots of photographs on the site you are designing then it may not be convenient or practical to serve them all as a sprite. This is where you will have to 'compress your images'. By properly formatting and compressing images we are able to save many bytes of data.
Often when you save images with tools such as Fireworks or Photoshop the resultant files contain extra data, including color data that may even be unused in the image and even things such as meta data. By compressing images without losing the image's look or visual quality you can save on data that needs to be downloaded. Yahoo's smush.it service is incredibly good at doing this job for you. Simply upload the images that you want to 'smush' and it will losslessly compress them for you.
Another way to reduce the number of http request that images make is to use as data uris. Data URIS can be described as
Encoding both images and fonts into pure data strings that can be directly integrated into your markup and stylesheets
We ran a great tutorial on this early this month with the The What, Why and How of Data URIs in Web Design. Head on over to read more about this topic in full. Just a note though that these should be used wisely and sometimes it might not be beneficial or practical to use this method.
Serving Scaled Images
Images should be served at a their original image size where possible. For example, you should not resize your images using CSS unless you are serving several instances of the same image and that image matches at least one that is the original size. Otherwise you should use something such as photoshop to resize your image, this will result in the saving of bytes.
Of course, this doesn't take into account fluid images (in responsive design) which may well be larger than they're displayed on a small screen.
Ensure that your images are scaled at the correct size using a tool such as Photoshop rather than CSS.
You can also physically remove detail.
The example shown above is taken from the dConstruct archive website. In an optimization technique discussed on his blog Jeremy Keith blurred out the non essential parts of each photo. In doing so, he reduced the image data required, slicing the file size almost in two. The loss in detail is negligible, in relation to the performance gains won.
40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.
Both Web browsers and web servers allow for caching. These caches store previous requests on the browser or server; requests such as images, web pages, CSS/JS files and other data such as cookies. By storing these responses bandwidth use is reduced and it helps improve a website's performance.
Avoid Making Bad Requests
What is a bad request you might ask? Well for example, a broken link on your site would equate to a bad request. A bad request can be classed as anything that would result in a 404/410 error; any request that results in a dead end.
Ramiro Galan's '404 Sadface' illustrates an example of a bad request.
It's inevitable that at times your website will either be changed, moved or updated. These amendments can result in old links that are no longer leading to their correct destination. Although these requests don't cause any data to be downloaded, it is still a wasteful resource as the browser has to initiate the request in the first place. If you find that you have any 'bad requests' on your site then you should aim to fix these as soon as possible by rectifying the mistakes. Google webmaster tools is a useful resource to find out if your website has any broken links.
Content Delivery Networks
Once you've made all the amendments to your site that will give them the best chance of being a 'speedy site' then it's time to look at the server that is hosting it. Traditionally a server will store a copy of your site and then serve it to whichever location the user is viewing it from. The time it takes from the user first requesting the site to the time it takes for the server to respond can vary depending on where the user is located in the world relative to the server.
Content Delivery Networks work a little differently to this. Instead of hosting just one copy of your website they host multiple copies of it on various different servers that are located around the world.
Image courtesy of Wikipedia
When a user sends a request to these servers they are sent to whichever server is found nearest to their location. This optimizes the speed at which the content is delivered to the end user. This is definitely a bonus but should only be used once you have utilized every other method possible.
Google Page Speed
Google have a neat little tool that allows us to monitor the performance of many of the factors thats we have discussed today. If you haven't tried out PageSpeed Insights then you should definitely check it out now. What's more is that they have a whole heap of documentation and examples that will help you monitor and improve your website's performance. Google describe it as:
PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.
I hope that you've learned a few things about optimizing the speed of websites and how you can implement some of the methods into your own projects. By practicing what we've discussed you will encourage visitors to come back, remain on your site and enjoy a rewarding browsing experience whilst there.
The bottom line is: by speeding up your sites you're not just contributing to a better user experience for your users, but a better user experience for the web!
- The Web Performance Working Group
- Web P - A new image format specifically introduced to enhance the performance of images on the web.
- The psychology of website performance and users.
- Quick Tip: Point Visitors in the Right Direction With .htaccess, including a run down of Gzip