Advertisement
Workflow

Best Practices for Increasing Website Performance

by

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.

Increase web speed performance infographic
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

One of the most important aspects of improving a web page's performance is minimizing the number of round trips that the browser needs to make to the server. Every file that your website includes (such as CSS, JavaScript or images) all need to be downloaded to the browser. By minimizing these requests you will speed up the page significantly. If you include separate CSS files for different parts of your site then you will find it beneficial to include all the CSS in one stylesheet, likewise for JavaScript or other resources.

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:

@import url('myCss.css');

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.


Minifying HTML, CSS & JavaScript

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.

You can minify HTML, CSS & JavaScript. If you're not doing this then you should start thinking about it now. Fortunately for us there are many online tools that can help both minimize and restore our code such as YUI compressor.


Optimizing Images

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.

optimize images for the web
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.

Sprites

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.

Data URIs

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.

Serve scaled images for the web

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.

dConstruct blurred images

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.


Caching

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.

Caching is often best used on assets that seldom change, such as CSS and JavaScript files. You can set an expiry date for when an asset should change, effectively telling the browser or server to pull in a fresh copy of your assets. Read more on the best practices for leveraging caching over at Google Developers.


Deferring Parsing of Javascript

In order for a web page to be completely shown to the user, the browser needs to download all its associated files. JavaScript files should not be loaded into the head of your HTML document, but rather near the bottom as (although this doesn't reduce the total number of bytes that needs to be downloaded by the browser) it displays the web page content before the JavaScript is fully loaded.

If you were to add it to the head of your document the browser would wait until the JavaScript has loaded in its entirety before displaying the page. Your JavaScript files should be included before the closing body tag.


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.

404 sadface - avoid bad requests

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.

cdn
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.


Conclusion

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!


Further Reading

Related Posts
  • Code
    PHP
    Validation and Exception Handling: From the UI to the BackendProcedural to oop php retina preview
    Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Other
    Client-Side Security Best PracticesSecurity best practices retina preview
    Thanks to HTML5, more and more of an applications' logic is transferred from server-side to client-side. This requires front-end developers to focus more on security. In this article I will show you how to make your apps more secure. I will focus on techniques that you may not have heard about, instead of just telling you that you have to escape HTML data entered in by users.Read More…
  • Code
    Tools & Tips
    Tips to Avoid Brittle UI TestsUi test retina preview
    In the last article I talked about a few ideas and patterns, like the Page Object pattern, that help write maintainable UI tests. In this article we are going to discuss a few advanced topics that could help you write more robust tests, and troubleshoot them when they fail:Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…
  • Code
    Articles
    Web Assets - Tips for Better Organization and PerformanceWeb assets retina preview
    Remember back to when we had to spend a lot of time optimizing our project's assets (images, CSS, etc..)? Well today, users have a much faster Internet connection and it appears that we can afford to use bigger images or bigger flash files with a lot of video and pictures inside. However, with the rise of mobile development, we are again back in that same situation. It is extremely important to create well optimized sites, so that we have faster applications, which download less content and respond immediately. Read More…