Tuning Your Web Page
Images
Coding the Image's Size Attributes
Coding in the <img> tag (or in the associated style) should also
include the height and width attributes. These tell the browser, in advance of loading
the actual image, how much space the image requires. The browser then more quickly lays
out the page, and then fills in the designated space with the image.
Another advantage of doing this is to not cause the screen to flicker. If the height and width are not laid out, the browser displays text before getting the image and determining how to arrange everything. After the image has been retrieved, it then redisplays all the text to flow around the image. It may do this several times depending on the number of images to load. This is annoying.
Caveat: make sure that the height and width conform exactly to your image size, else, the browser will attempt to expand or shrink your image to that "window". This also makes the image load more slowly. This tactic has been used to load larger images into a small thumb-nail-sized window. It is more effective, speed-wise, to make a separate and smaller image and load that, and, if the viewer wants to view a larger version of the image (e.g., by selecting an option on the page to tell the browser to do so), at that time, the browser can get the bigger image.
Compressing the Image
A bigger issue with images is the size of some of them. Test various compression levels on the image for clarity and use the smallest that gets the job done at the quality you need.
If you are using GIF images, open the image in an image editing program and look at the individual pixels; sometimes the programs dither the backgrounds. This will make your image larger than it needs to be. You will need to clean it up and get all the pixels to be the same color in order to reduce the image's size.
In addition, you can set your export options to reduce the number of colors in the image. This can reduce the size of your image as well.
Using Multiple Images on a Series of Pages
If you have multiple images to display on the page, it might be better to create a series of pages to navigate through. This, of course, depends on your application; it would be most applicable to slide-show or portfolio type applications. If this is done, then the image can be displayed at the maximum quality desired, without creating a long wait for multiple images to load.
Removing Interlacing
Exporting your images in interlaced format makes them larger, and slower to load.
Tables
Pre-defining the Table's Size
When the browser calculates a table's size, it can do so either before loading all of the
information, or afterwards. To speed up the rendering of the table, one should help the
browser determine the table's size beforehand, by using either absolute size (not
recommended) or relative size (recommended) in the table and column descriptions. These
can be coded using the width attribute of the <table> and
<th> or <td> tags, or by using styles. When this is
done, the browser renders the table correctly the first time and fills the table's cells,
without having to redisplay the table after all content has been fetched. This also
eliminates an annoying "flicker" in the display.
Using Smaller Tables
The browser takes more time calculating and rendering larger and more complex tables. If the table can be broken down into multiple and less complex tables, overall, the page can load faster.
Styles
Sometimes, a Web page may be formatted with a huge collection of styles. If styles are
repeated throughout the site, they can be put into an external stylesheet and linked
to the Web page via a <link> statement in the document's head. The
stylesheet will be cached the first time it is loaded, and subsequently, will be fetched
from the cache.
To design well with styles, one should keep in mind their potential for re-use. One should also decide to what extent something needs to be marked up as an individual unit, rather than accepting the default style assigned to the element in the stylesheet.
One should also look at how the element with the style fits in the document's hierarchy, to take advantage of inheritance, and reduce the need for coding styles on each occurrence of the element.
Scripts
When the same scripts are repeated on multiple
pages, they can be stored in an external script file and linked to the page via
a <link> statement in the document's head. Placing reusable scripts
in an external file will keep the scripts consistent among pages, as well as enabling
the scripts to be cached when initially loaded.
Content
Sometimes, the amount of information to be presented makes the page very large. In this case, one needs to make decisions about reducing the content. This can be done by:
- editing the content to use terser language;
- editing the content to retain only the "more important" information;
- breaking up the content into multiple pages.
All three options can be implemented to optimally reduce the content size.
Exported HTML Pages
If a Web page has been generated by a HTML
or XML generator, the underlying file might be
rather large for the amount of information it displays. Some generators put an
extraordinary amount of style coding on individual elements, with numerous
<font> or <style> declarations. This can happen
when saving a Microsoft Word document as an HTML file.
The size of this file be reduced by eliminating all the styles via find/replace in a text editor and then creating new ones where needed, or by figuring out how to write a Perl script to do it.