 |
|
|
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 </TABLE> 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. |