WEB DESIGN -- Speeding Up Your Website

Here are some ideas on how to speed up your website:

Introduction

Studies have shown that a lot of people don't wait around for a website that takes too long too load. It is recommended that you first read Page Load Time Is Important.

There are many simple things that can be done to speed up your website and numerous mistakes to be avoided.

First Impressions

A page can start loading immediately, be quickly usable (e.g. navigation), entertaining to watch as it loads and takes 60 seconds. That can be a much better experience than a page that does nothing for 10 or 20 seconds even though total time is much less. Getting that first impression off to a good start is a top priority.

Optimized Graphics

Optimize web graphics by minimizing their size, number and quality (e.g. maximum acceptable JPG Compression) as well as cropping in as close as you can. In some cases GIFs and sometimes JPGs are the better choice.

Text

The more you can do with text instead of graphics the better because of the light weight nature of text on the internet.

Smaller Pages

Don't try to feature too much on a single page, especially the home page. Let the home page be a well designed launching point into the website.

Specify Dimensions

I have visited web sites that take a minute or longer to load and every few seconds the various rectangles re-size so that the entire web page is constantly adjusting itself. You can't start reading because of all the dimensional adjustments going on. All my instincts are screaming at me to escape the scene. Your site will load faster, smoother and be readable much sooner if the table and image dimensions are coded into the HTML.

Tables

Browsers won't start rendering a table until the end of the table is encountered. The header of your page will start to paint much sooner if it is separate from the main body of the page, rather than being part of a table that spans the entire page.

Cascading Style Sheets

With CSS you can code your site design so a single CSS page captures much of what is common to the entire site. One benefit is that subsequent pages will load faster.

With CSS, the page can be made to load very quickly without graphics, with the graphics filling in later to replace various introductory portions of text. The masthead can be quickly displayed with large font text and later replaced with fancy graphics.

Rollovers

Several months ago I exchanging emails with another church webmaster. His website was taking an agonizingly long time to load and he invited me to help him solve the problem. It turned out that 80% of his load time was in the graphical rollover navigation scheme. Each nav button required two images plus the special scripting. Changing to a text based roll over scheme made a dramatic improvement. CSS can also accomplish roll over navigation schemes that work much faster than graphical rollovers.

1x1 pixel GIFs

This site uses several minimum sized GIF files, each of a different color (e.g. black, white, red, yellow). The white GIF is stretched to the desired dimension to establish the minimum width of a column. Place such a stretched GIF at the top and not the bottom of the column.

Image Reuse

Browsers cache the text, graphs and other file entities that make up a web page. When another page on the site uses a cached entity (e.g. a logo), it will load from the local cache much faster. While this does not speed up the first page, it does speed up the subsequent pages.

Load Next Page Faster

Lets say your home page provides a link to a favorite page featuring a large photograph. Here is the trick that will often get that second page to load much faster. The photo is included on the initial page, sized down to a 1x1 pixel size. Locate it in your HTML code so that it is the very last entity encountered. The first page loads up quickly and hopefully your visitor spends time reading and otherwise enjoying the page. The visitor does not realize that the 1x1 photo is loading and is hopefully loaded completely before the visitor goes to page 2. Click to page 2 and the photo is ready to load from cache instead of over the web. Typically the loading will complete even if only half the photo has already been loaded.

Faster Hosting

At work I enjoy high speed internet service. Even so there are sites that, often enough, load slowly. It could be the hosting of the site is being overwhelmed by too many visitors. Some website hosts invest a lot more horsepower into getting your web pages out across the internet. A related problem can be the geographical distance between the web server (e.g. in New York) and the visitor (e.g. in Los Angeles). Some hosting services serve their websites from several locations. Not that the physical distance is the problem, but rather all the internet hand offs along the way. The most popular times of the day will slow down all across the web.

Flash and Javascript

Here are some things that send a lot of people scrambling for the Back button:
 - Loading . . .  Loading . . . .
 - Skip Intro
 - This site may not work unless you use the latest version of . . . . .
 - The site does not even start loading after several seconds

• Dr. Watson for Internet web pages determines how fast your page would load at several different connection speeds. Also does link checking, search engine popularity, etc. Does one page at a time.

Author: David Buxton