L-Space Design - Shrinkwrapped and Bespoke Software Development   
 Home Page 
 Customer Login 
 About Us 
 Ask A Question 
 Software Catalog 
 eBooks & Courses 
 DNN Catalog 
 Farewell Package 
 Forums 
 Bespoke Software 
 Useful Links 
 Customer Reviews 
 ClickBank Search 
 Articles 
 Privacy Policy 

   

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><span style="text-align:center;font-weight:bold;background-colour:#CCCCCC;"> <span style="text-align:center;font-weight:bold;background-colour:#CCCCCC;"> <span style="text-align:center;font-weight:bold;background-colour:#CCCCCC;">Quantity<span><span><span><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 <b></b>, 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:

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

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.

Pass this article on to a friend

Friend's First Name

Friend's Email Address

  

   

 

 Home | Login | About | Contact | Catalog | eBooks | DNN Catalog | MJFP | Forums | Bespoke | Links | Reviews | CB Search | Articles
   Valid XHTML 1.0!   Valid CSS!
   

ASP.NET data compression provided by L-Space Design