- Use GIFs and JPEGs appropriately
-
GIFs have at most 256 colors, and use a lossless compression scheme; JPEGs are (potentially) full RGB, but are lossy. With images that have large expanses of the same color, or which have sharp boundaries, such as with line art, use GIFs. If the images are full color, with non-line boundaries, such as with photographs, then use JPEGs. If you use the wrong format for a given type of image, not only will the content be muddled, but it will likely take more time to download than the right format.
- Avoid contentless splash screens and entrance pages
-
Don't use introductory pages that provide no other information other than a logo and a "Click to continue" type interface. All these do is put one extra layer of pages between the user and the information they're trying to reach.
- Avoid REFRESH-driven animating chains
-
Don't use the REFRESH tag to drive animating chains of pages which load with a delay one after another. Not only does this put more buffering between the user and the information he's attempting to access, but it makes implicit assumptions about the throughput capabilities of your users, which will not in the general case be true.
- Include trailing slash in directory URLs
-
When a URL represents a directory, and doesn't include the trailing slash (/) to indicate that it is a directory, it requires a double hit to the Web server: first, the server has to tell your browser that the first URL is wrong; and then your browser has to make the request again with the proper URL (that is, with the trailing slash). Save your users the extra time of the unnecessary step; include the trailing slash.
- Be aware of download times for various bandwidths
-
Your customers will not all be running through multiple T3s; nor will they all be running through 28.8k modems. There will be a spread of different bandwidths that are being used; make sure that your site will load in adequate time on either end of the spectrum.
- Use HEIGHT and WIDTH attributes in your images for faster layout
-
With HEIGHT and WIDTH attributes in your <IMG ...> tags, your browser can lay out your pages faster, because it will know the sizes of embedded images without having to load them first. This is particularly important when the images are inside tables, because browsers have to read the whole table in any case before they can choose how to lay them out.
- Use thumbnails instead of shrinking images with WIDTH and HEIGHT attributes
-
Don't use the HEIGHT and WIDTH attributes in your <IMG ...> tag to make thumbnails; this makes the images appear smaller but in fact the browser has to load the entire image in any case. Instead, make separate thumbnails images which are physically smaller.
- Don't rasterize large blocks of text
-
Don't rasterize large blocks of text and represent them as an image. This is fine for banners and logos, but the main text of your site should be in text. Rasterized text, while it may be in the font that you want, takes longer to download and is no longer searchable.
- Avoid reliance on outside servers for inline images
-
Outside servers can be down, or be slow, or take a while to resolve with DNS. Particularly with some versions of some browsers, DNS failures can freeze the browser for seconds or even minutes. Avoiding inline images that are on other servers will eliminate these bottlenecks. (Not to mention that referring inline images that you do not have permission to can get yourself into trouble.)
- Use interlaced GIFs and progressive JPEGs
-
Use interlaced GIFs and progressive JPEGs for gradual viewing while the image is loading. Progressive JPEGs are less widely supported, but have the benefit of still loading in non-progressive browsers.
- Choose appropriately between static and dynamic content
-
Some circumstances call for static content, and some call for dynamic content; choose the method that your site will use appropriately. If your site uses dynamic content which is selected from a finite (and relatively small) set of choices of content, then you might consider pregenerating all of the content, rather than always generating the content on-the-fly.
- Put the submit button in forms in an obvious place
-
Especially with complicated forms, or multiple forms on a page, it's hard to tell where the submit button is, or which controls each submit button belongs to. Choose a consistent look-and-feel, and stick with it. Putting submit buttons to the right or below the controls they are associated with is a good choice.
|
|
