4 June 2008 | Team Tamar

A few simple ways to reduce webpage loading times

These are a few basic tips to help speed up the time it takes for a web page to load. Particularly useful if you are designing a site for accessibility, because not everyone has access to high-speed broadband.

Ensure images are optimized

This is one of the best ways in reducing page loading times. Image file sizes should be kept as low as possible, but without compromising the images quality too much. You should ideally aim to have images of no larger than a file size of 60k. This can also include choosing appropriate file formats for images. Large uncompressed imaged formats such as bitmap and TIFF formats should not be used, instead compressed image formats such as jpeg, gif, and png should be used instead.

Optimize your css

You can speed up the time that it takes a browser to interpret and display your css by using simple methods such as:

  • Using css shorthand styles e.g. reducing four lines of css into one single line.
  • Using a parent css styles, which is then applied to all child elements. Rather than having a style applied separately for identical child elements.
  • Reducing the amount of white space in your css documents.

Forward slash on the end of links

Having a forward slash on the end of directory links, tells the web server that it is a link to a directory, therefore eliminating the time that is wasted by it trying to figure this out.

Height and width tags

Using height and width tags allows a web browser to construct the rest of the web page around images that have large file sizes, and as a result require more time to download.

Apart from optimising all images and using height and width tags, the other methods will only reduce loading times by only a small fraction.

Team Tamar

  • Robin Winslow

    One very large factor in page loading times not mentioned here is the number of external connections that the page has to make to load the page (CSS and JavaScript files, images etc. – http://ajaxian.com/archives/optimizing-page-load-time). Reduce those connections by including all your CSS and JavaScript in one file each, and that should help a lot.
    Also, if you’re really worried about the size of your CSS files (although I imagine this will be minimal), I would suggest it is better practice to use a CSS compressor (http://www.cssdrive.com/index.php/main/csscompressor/) than to make your code less semantic by reducing commands down to one line.

  • Lavelle hurley

    I chose not to include a point about the number of external files required to be accessed, because what it comes down to, is whether you are willing to compromise work efficiency for slightly quicker loading times?
    Using a single stylesheet is better suited to sites which are very basic in terms of the number css styles required. If however the site requires hundreds of lines of css, it is better to use multiple stylesheets, to separate out the css into groupings such as common styles for headers anchor links etc. A stylesheet containing css that deals primarily with webpage structure, and one that deals with the unique styles that may only appear on the homepage. That way, not only do you know where a specific style is roughly located, but it also keeps the number of lines of css code within acceptable and workable levels.