There is nothing more frustrating for a user than waiting an age for a web page to load. Even in today’s world of high speed broadband it is imperative that you build your web pages to load as fast as possible. None of your user’s want to sit waiting for a page to load. In this age when people want everything in an instance you can be sure they won’t return to your site if it doesn’t load fast.

Below are 10 ways in which you can dramatically speed up your website and keep user’s with the slowest of internet connections happy and keep them returning for more.

1. Use clean semantic markup for layout with CSS for styles

I don’t think there are any web designers and developers today that will still be using tables for layouts and if there are then maybe its time for a career change!

Clean semantic markup will not only make your web pages render faster in the browser but it will also make maintenance of your site easier. Semantic markup means that you choose your tags according to there meaning. For example if you tag your main heading on a page h1 then this not only gives meaning to the heading ie, this is the most important heading on the page but it also saves markup over using something like

Example of correct semantic markup

/* correct semantic markup for main heading*/
Main heading goes here

/* Incorrect markup for main heading */
Main heading goes here

In the example above you can see that by using correct markup for the main heading, it not only makes the heading semantically correct but it also reduces the amount of markup needed.

By using CSS to separate the style from the markup it allows you to do more with less.

2. Reduce the number of http requests to the server

When you load a web page for the first time each individual component has to be downloaded. This includes images, style sheets, external scripts and flash. By reducing the number of http requests to the server for these components you can greatly reduce page load time. It is estimated that 40-60% of your daily visitors will arrive with an empty cache. By reducing the number of http requests for these users will result in a faster and therefore happier browsing experience on your site. The common methods of reducing http requests are:

Combine script files

With javascript libraries such as jQuery, Mootools and Prototype becoming increasingly popular and an array of ready built plug-ins available that can give your website that extra functionality it is very easy to end up with multiple javascript file calls in the web page. By combining these files into one single file you would reduce the number of http request dramatically.

CSS Sprites

In a nutshell CSS sprites is a method of combining multiple images into a single image and thus reducing the number of image requests to the server. If you combine background images into a single image and use the CSS properties background-image and background-position to position each element as desired you can reduce the number of http requests dramatically. There is more about CSS sprites below.

3. Combine your images into sprites

CSS image sprites is essentially a technique where you combine multiple images into a single image and by use of the CSS properties background-image and background-position you can display only the relevant part of the combined image. The use of image sprites enables web masters to create a single image that is easy to maintain and update. A great use for images sprites is within a graphical navigation element. By combining all the various states of the menu into a single image, it will not only make the graphic easier to update, it will reduce the number of http requests to the server and speed up your website.

In the example below, the Apple website uses images sprites for the main navigation. By using CSS sprites for the main navigation the number of http requests to the server is reduced from 32 to just 1.

How image sprites work

Lets run through a basic example of how image sprites work. The menu on Natural Retreats has 2 basic states and is designed with images rather than html text.

The CSS image sprite below is the single image used to create the menu and effects. For this example I have cut the number of menu items down.

Now for the markup.

home
locations

and the CSS

ul#top-nav li {
float:left;
display:inline;
list-style-type:none;
width:125px;
display:block;
margin-right:2px;
}

ul#top-nav li a {
width:125px;
height:19px;
display:block;
text-indent:-99999px;
background:url(../img/bg-nav.gif) no-repeat 0 -19px;
overflow:hidden;
}

ul#top-nav li.home a {
background-position:0 -19px;
}

ul#top-nav li.home a:hover, .bd-home ul#top-nav li.home a {
background-position: 0 0 ;
}

ul#top-nav li.locations a {
background-position:-254px -19px;
}

ul#top-nav li.locations a:hover, .bd-locations ul#top-nav li.locations a {
background-position: -254px 0 ;
}

You can see that by setting the background image of the anchor tag on the main nav li to the CSS sprite and using background positioning on each individual li anchor you can set the correct background image for each menu state.

Examples of image sprites

NHS Choices image sprite

Amazon image sprite

Apple image sprite

There will be a full tutorial on how to create image sprites coming shortly. Why not subscribe via RSS, twitter or email to get all our latest website submissions, tutorials and articles delivered straight to you.

4. Use CSS shorthand properties

If you don’t already know or use CSS shorthand properties when you are developing web pages they can be a quick and easy way to reduce the load time of your web pages.

For example instead of:

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

use

margin:10px;

There’s a great cheat sheet available for CSS shorthand – CSS shorthand cheat sheet by leigeber.com

5. Put CSS and Javascript into external files and combine

Any use of inline scripts whether javascript or CSS should be avoided, as not only will this increase the load time of your pages but it also makes maintenance more difficult as you have to update scripts in multiple pages.

To place CSS in an external document use:

To place JavaScript in an external document use:

Any external file is called up just once when the user first visits your site and is then cached ready to go next time they visit your site.

With the increased use of Javascript libraries it is very easy to end up with a large number of calls in your page header. By combining each of these javascript files into a single js file you can increase the load time of your pages considerably.

As an example you may have a website where you use multiple jQuery plugins to increase the functionality such as calender, image gallery and slideshow and each of these have a stylesheet. Add these 6 extra calls to your existing stylesheet and Javscript calls and you can see how quickly the number of script calls adds up.

If you combine these plugins into 1 extra javascript file and 1 extra css file you can reduce the amount of server requests greatly and increase page load time for first time visitors ande make them want to revisit your superfast website that they don’t have to wait for.

6. Call decorative images through CSS

Any image that is non informative for a user when they are browsing your page should be called up through CSS as a background image.

This may not be the most obvious technique to improve the download time of your pages but this method works because browsers download background images after everything else. By using this technique, your text will load straight away and your users can start reading the important bits of the page page while your 100kb fancy background image downloads.

Combine this technique with CSS image sprites and you can greatly improve page load time and your users experience of your website.

7. Use compression techniques on your scripts

It should be no surprise that the smaller the file size of a web page and its scripts the faster the page loads. A faster loading web page isn’t the only benefit you will get after you minimize your JavaScript and CSS. You can expect a better end user experience, less demand on your web server(s) and a lower bandwidth bill.

Any external CSS or javascript files can be minified to reduce the file size. There are a number of resources on the web which will allow you to minify your scripts. Here are some of the available minify resources:

YUICompressor

Google minify

Minify Javascript

Js compress

8. Use contextual selectors and avoid divitus

Divitus is a serious condition that affects many websites. It is a something which beginner’s, and those that don’t want to learn the finer details of web page development, in the world of CSS are guilty of. Once they realise that it is possible to control everything by use of id’s and classes they use a lot of unnecessary markup in their pages. Take the code below for example:

This is a header


This is a sub header

Content goes here

This overuse of classe’s and id’s to give the page structure is not needed and adds weight to the page. The above example also goes against correct page semantics so this could be better written as:

This is a header
This is a sub header

Content goes here

9. Don’t use images to display text

There’s no need to use images to display text, as so much can be accomplished through CSS.

When you use images for text, you increase the development time of your website construction, increase the download time of your website and destroy your search engine marketing plan!

A search engine eats text for food. If you don’t have text on your site you risk being nowhere in the SERPS for your chosen keywords, so its not just page load time that will be affected. A webpage will take longer to load once a user finds it but it will be more difficult to find in the first place.

10. Don’t get carried away with Meta tags

Most META tags don’t actually add anything to a web page and including them increases the file size of your page so its best if you just leave them out altoether. The keyword and description META tags are the most important for search engine optimisation, although due to mass abuse the keyword tag has lost a lot of importance in recent times. When using these META tags try to keep the content for each under 160 characters – anything more increases the size of your pages and is not good for search engines because only 160 characters are displayed in the Search Engine Results Pages (SERPS).

Resources

Yahoo Developer Network – Best Practices for Speeding Up Your Web Site
Google Webmaster Central Blog – How fast is your site?
Google Web Performance Best Practices
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Tools

Yahoo YSlow for Firefox Firebug
YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

Google Page Speed
Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.