It is very important from both a web design and an SEO point of view that any website you create should display as fast as possible, giving the user the best experience and catering for those with slower internet connections.
There are quite a number of changes you can make in order for a website to run at it’s fastest and I will try and cover the easiest and most effective here. Before we get started, the most effective tools I have found to measure and improve the performance of a website are 2 plugins for Firebug, which is itself a plugin for Firefox. The plugins are Page Speed, created by Google and YSlow, created by Yahoo. Both are open source and provide excellent information. Watch out for Firebug though as it can slow down Firefox, my advice is only run it when you actually need it and have it disabled the rest of the time.
1. Choose the right hosting
This can often get overlooked in the quest to find the lowest cost hosting service, but it can have a dramatic difference to the website speed, what configuration options you have and how much control you actually get. Shared hosting is great for a budget option, and is usually fine for small to medium websites but you are limited by the way the server is set up as to what you can achieve, for example if Gzip compression (explained later) is not available there is no way to add this function. The other issue with shared hosting is the volume of other sites you are sharing with, which can be upwards of a few hundred or even a thousand in extreme cases.
By far the better option, especially for a larger website is dedicated or virtual dedicated hosting. Dedicated hosting means you have a whole server all to yourself, and your own IP address(es). The speed difference can be incredible and you can control the server completely, making any configuration changes needed and even installing software. Dedicated servers can be a bit on the expensive side though, which is where virtual dedicated servers come in.
Virtual Dedicated hosting offers the best of both worlds, affordable prices along with much faster speeds over shared hosting, and the ability to still have full control over the (virtual) server.
2. Code Smart, Code Clean
The next step is to make sure your code is clean without any errors and ideally has been simplified or reduced in size as much as possible. Don’t use inline CSS and keep all CSS and JavaScript off the page. CSS files should be combined into one where ever possible and referenced from the header. JavaScript should ideally be referenced from the bottom of the page, although this will not work for all JavaScript. For the JavaScript that can’t be placed at the bottom, make sure it is placed below the CSS, always load CSS first.
White space should be kept to an absolute minimum in the pages, the CSS files, and the JavaScript as this will reduce the file sizes.
When actually writing the HTML, try not to use unnecessary containers and keep the code to a minimum, Div’s are much more preferable than using the bulkier TABLES.
CSS should also be used smartly, use ID’s rather than classes wherever possible and try not to nest elements, use “Menu a” rather than “menu ul li a”. Try to keep the CSS on one line wherever possible, so rather than:
body {
margin:0 auto;
padding:0px 0px 0px 0px;
background-color:#253340 ;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#161514;
font-size:13px;
}
Use this:
body {margin:0 auto;padding:0px 0px 0px 0px;background-color:#253340;
font-family:Century gothic, Arial,Tahoma,sans-serif;color:#161514;font-size:13px;}
It may not look as pretty and is a little more difficult to read (although you do get used to it) but it really can reduce the size of the CSS file dramatically.
When creating or using JavaScript, try to avoid inline elements such as “on mouseover”, instead call the JavaScript using an ID.
Any JavaScript or CSS files should also be “minified” after you have finished with them, their are many free utilities that can do this for you and the space saved can be substantial.
3.Optimise Images
Making sure your images are compressed to the best levels can make a big difference in page load speed, Google’s PageSpeed tool will actually compress any images on a page for you, and show you how much of a saving in Kb this will make. When using background images, try using CSS sprites and combine all these images in one as this reduces the number of HTTP requests and improves the speed, you can see how to do this here: How to use CSS Sprites
You should also avoid scaling images in the HTML as this does cause a speed reduction and always make sure that the images height and width are clearly mentioned, along with a descriptive ALT tag.
4.Add Expires Headers
Expires headers make the components of a website cachable by the web browser, this is used primarily for images but this can also be used for scripts, stylesheets and flash components. By using this effectively whenever a visitor either navigates to another page of the site, or returns within the expire period, the website will load substantially faster.
The most effective method I have found in applying this (on a Linux server) is by using the .htaccess file, there a few ways you can do this, depending on what your server supports, at least one of the following should work:
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-javascript A604800
ExpiresByType text/css A604800
ExpiresByType application/x-shockwave-flash A2592000 ExpiresByType text/html A600
If that one doesn’t work, try this one:
ExpiresActive On
ExpiresDefault A29030400 Header append Cache-Control "private"
5.Gzip Components
Gzip is a form of compression that drastically reduces the size of a file, and offers a better compression level than a standard .zip file. Most modern hosts offer support for gzip (although some some shared hosts do not) but if you use a cms there may be obstacles to overcome. WordPress in particular removed support for gzip from version 2.5 upwards but there are a few plugins available to re-instate the support.
The most effective method I have found it a comination of gzipping the CSS and Javascript files and then using our friend .htaccess again to do the hard work. Most modern file compressors will output to the gzip standard, my personal favorite is 7zip, not just because it’s free but it also happens to be just about the best. When saving the files make sure you use the extension “.jgz” rather than the standard “.gz” as this will make our apple friends happy.
php_flag zlib.output_compression On php_value zlib.output_compression_level 5
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType "text/javascript" .js.jgz
AddEncoding gzip .jgz
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.css$ $1\.css.jgz [L]
AddType "text/css" .css.jgz
AddEncoding gzip .jgz
6. Parallelize downloads across hostnames
According to the HTTP 1.1 specification browsers should have only 2 concurrent connections at any one time per hostname and although this is not strictly adhered to, they each do only allow so many. This means that if the HTML page contains references to more resources (CSS, JavaScript, images…) than the maximum per hostname allowed then then those above that threshold are qued until the remaining download.
In other words if the browser can only accept 4 connections from one host at a time, and there are 20 resources on the page then these resources will be downloaded sequentially, 4 at a time.
The way to get around this is to serve the resources from mutliple hostnames, this would mean that the browser will parallize these additional downloads, leading to a faster page load.
For a more detailed overview of this method you can see Google’s explanation, Parallelize Downloads across hostnames.
7. Optional HTML Tags
If you are writing in HTML rather than XHTML you can make your code leaner and meaner by omitting optional HTML tags. As defined in HTML 4DTD, there are many tags that are either no longer required, or do no longer need to be closed. Theandare two examples, how about lists, you no longer need
Google has a wealth of information about this here, there is also a video to go along with it: Optional HTML Tags.
8. Keep Experimenting
There are many other ways you can improve the speed of your webpages including optimising the way the actual code (PHP, ASP.NET etc) works, tweaking the caching and minimising browser reflow, my advice is get the basics in place and then experiment, it really does pay off.