Reducing Web Page File Sizes

Looking at the file sizes and load time of their pages is one of the first thing that should be looked at by people who are experiencing less than satisfactory results with their websites, particularly sales and conversion. It's also one of the easiest elements to correct, often accomplished with only a few simple modifications.

Here are a few simple ways to reduce page file size and download time:

Eliminate Animated Graphics

Animated graphics are often very attractive or "cute" but they're generally huge in size. If an animation would greatly enhance the design for effectiveness or conversion to sales, limit to one or two, but only if they won't push the total page size over the top.

Text vs. Graphics & Image Maps for Navigation

Using graphics for navigation can often increase the size of web pages, and unless justified for compelling design reasons, should be bypassed altogether, or at least reduced in size by graphics software.

For those who surf with images disabled, and considering the possibility that graphic links might not be followed, provide text navigation instead, or as an alternative. If an image map is used, alternate text navigation is a must, and in some cases using image maps is not a good idea altogether, since the file sizes can be enormous.

If the navigation graphics have a small enough file size and enhance the page design, make sure to include "alt" text for the images. This is needed for those surfing with images disabled, for visually impaired visitors who can't "see" the images and use special browsers or aids, and as an added benefit, can help with search engine rankings.

Javascript

Eliminate Javascript that isn't absolutely necessary, such as a scrolling status line messages, trailing cursors, messages scrolling across the page, etc. Some people find those distracting from the content anyway, and some even find them annoying.

For Javascript code that contributes significantly to the design and isn't "too much" move the Javascript code into an external file and link to it.

For those who surf with JS turned off in their browsers, make sure the pages function without the Javascript.

Also keep in mind that if interacting with the pages, such as filling in a form or placing an order, uses JS and needs it enabled in browsers, those who do not have it functioning, which is estimated by some to be around 10% of surfers, won't be able to see the Javascript. In the case of an ecommerce site, orders will be lost.

CSS: Cascading Stylesheets

Dozens and dozens of font tags and other HTML formatting elements can increase the size of the page code tremendously, and negatively impact not only the text-to-code ratio for optimization purposes, but make the pages code heavy enough to slow down the load time in browsers significantly.

Using CSS instead of font tags is not only a time and labor saving device for webmasters, but can often decrease the page file size by 1/3 to 1/2, and consequently speed up load time.

External Stylesheets

Using externally called CSS is even more economical, both in terms of time saved and file size. If there are many lines of CSS, move the stylesheet specifications into an external file and link from the page head section, remembering to check for backward compatibility to ensure that the page looks all right in older browsers that don't support CSS, or for people who have CSS disabled in their browsers.