Improving web page performance

By Roger Willcocks

One of the most common causes of visitors leaving a web site, is a slow loading page. As a general rule, people assume that how fast a page displays is dependent purely on how big the page is. That is not entirely the case, and this article is going to discuss what the various causes are, and how you can take advantage of common tools in order improve your web site's performance.

Factors affecting page display

Size of the page, eg: how many kilobytes is it
What document type does the page match
How well does it comply with that document type
What web browser is the visitor using
How fast is the visitors web connection
Can we send them compressed pages
How is the page structured

The four main functions that this break down into are:

How much data do I have to receive?
Do I have to uncompress it?
How much work do I have to do to understand it?
How much work do I have to do to show it?

These processes are handled by three parts of the web browser. The receiver takes care of the first two. The parser takes care of the third. and the renderer displays the result on the screen.

Take your WYSIWYG editor, and throw it away

Maybe a little extreme? Not quite. If you have an HTML editor that is over 3 years old [eg FrontPage 2000], you would be better off throwing it away and writing pages in a text editor. It's easy. And here's why you should do it, below are before and after examples of a piece of HTML produced by FrontPage, and then manually cleaned up:

BEFORE: <td> Quantity<td>

CLEANED: <th style="background-colour:#CCCCCC;">Quantity<th>

STYLESHEET: <th class="tablesubheading;">Quantity<th>

Between the first and last version, we threw away around two thirds of the generated HTML. In many cases, you can reduce the size of a WYSIWYG edited page by 40% to 60% simply by cleaning it up.

Your basic problem with WYSIWYG editors is a lack of control, and for best results, you need control

Clean up redundant tags

The previous example showed one form of redundant tag, the same tag repeated multiple times, with no net effect. There are other similar patterns, such as , a pair of tags with nothing inside them. All these add size to the page, and extra work to the renderer.

Make sure HTML tags are correctly ordered

To avoid processing issues, make sure your tags follow the LIFO rule [Last In First Out]. For example:

My text would cause a web browser to either read ahead in order to make a decision, or internally convert it into
My text

Again, more tags, and more work for the renderer to do.

If you have existing pages you'd like to clean up, there is a free tool available.

Learn to use style sheets

Style sheets [CSS] allow you to apply the same formatting to an entire web site. Make a change in one place, and it appears everywhere at once. It gets downloaded ONCE for the web site, thereby saving download time. And it makes it much easier to read and edit your HTML documents.

Once you understand how to use stylesheets, and how to put together the HEAD section of an HTML page, you can write the entire body of the document using text, and an understanding of the follow tags:

ul, ol - unordered and ordered lists
li - each item in the list
p - paragraph
span - a piece of text you want to apply different formatting to
img - an image or picture
table, tr, th, td - table, table row, table header [usually in bold], and table data [commonly called a cell]. These elements are used to build display table for showing data or controlling the layout of a page.

Apply a DOCTYPE declaration to your pages

What is a DOCTYPE? A line at the start of your page that tells the web browser what sort of page it is. In common usage, it declares which HTML standard is being used.

This web site uses XHTML Strict 1.0, and MOSTLY complies with it. The one area I consistently break with it is that the Strict declaration does not support the target attribute on hyperlinks. There are many different DOCTYPEs, over 10. I suggest you pick one between HTML 3.2, and XHTML 1.0. Most editors support 4.01 Transitional by default. You can find out more about the different DOCTYPEs at the W3C website, which is an excellent resource for telling you how the web is SUPPOSED to work. Unfortunately, Microsoft and every other browser creator has slightly different interpretations, though they are getting much better at consistency these days.

Now that you've selected a document type, STICK TO IT. A document type allows a web browser to make certain assumptions about how a document is structured, and that means it has a much easier time rendering it.

What happens if I have no doctype?
First the browser reads some of your document, then it makes a guess about the document type. That takes work and slows it down.

What happens if the doctype doesn't match the content?
One of two things. When the browser gets to a point where there is a mismatch, it either forgets everything, and starts using the most basic behaviour it knows, or it works out how the error changes the doctype, works out the new doctype, then goes back and re-interprets the document so far. Most browsers just switch to idiot mode. In either case, the result is slower rendering, and a possibility the page won't show as you intended.

Validate your HTML

What do you mean validate?
The W3C maintains a validation service where you can either enter a URL, or upload a file to check. The validator will report all the errors it can identify in your document so you can fix them.

Validating your HTML means that it is clearer, more consistent, easier to maintain, and more easily understood by the reader applications used by people with visual disabilities.

I have left some deliberate errors in this article so you can see the results of the validation test for this page.

Activate compression on your web site

The HTTP 1.1 standard supports a variety of data compression standards, which any vaguely new [post 1995] web browser supports. This basically allows a file to be 'zipped' or otherwise compressed before being sent, and unzipped by the browser before it is shown to the user. The intention of this is to decrease the amount of data that needs to be transferred over the network, leading to faster download times.

This functionality is provided is most web servers for static [html] pages, but may not be turned on. For dynamic pages, you may need specific software enabled for the web site. For ASP.NET, you can use Bandwidth buddy, there are others available for IIS, Apache, and other major web servers.

So what are the benefits?

More than you expect. If you simply put up a site and leave it, some of these benefits won't interest you, but others will

Reduced effort for maintenance
Better access for people with disabilities
Smaller pages
Search engines prefer pages with simple valid HTML
Faster display once downloaded

This article is shareware. Give this article away for free on your site, or include it as part of any paid package as long as the entire article is left intact including this notice.
Copyright © 2004 L-Space Design.

| | | | | | | | | | | | |