Home > Articles

  • Print
  • + Share This
From the author of

Web Site Speed

Several design techniques can be used to improve the speed of web pages:

  • Create several small pages rather than one large one. Large pages take longer to load than small pages.

  • Use graphics sparingly, as they take longer to load than text.

  • Use the same graphics and background patterns on each web page. Once the first page has been loaded, the subsequent pages will load faster from the hard disk cache.

  • Image tags should contain the pixel size of the graphics. When the pixel height and width of the graphics are not included in the image tag, the browser doesn't know how much space to reserve for the graphics, and has to wait for all the graphics to load fully before anything is displayed on the web page. This can be frustrating to users, who feel that the web page is taking too long to display anything. Displaying some information allows users to start reading while the rest of the web page is being loaded.

  • Save graphics file in JPG format to compress the file size. Be careful not to overdo compression, however; otherwise, you'll degrade the image quality beyond use.

  • If a graphic is saved as a GIF file, consider reducing the number of colors in the image. For example:

    • A 256-color image needs 8 bits per pixel.

    • A 16-color image needs 4 bits per pixel.

    • A 2-color image needs only 1 bit per pixel.

    If an image has very few colors and you use 256 colors for it, the image will still take 8 bits per pixel (and thereby increase the file size) even if you're not using that many colors.

  • Use your graphics editor to interlace GIF graphics. This will make the files slightly larger, but will give them the appearance of loading faster. An interlaced graphic displays a quick rendition of the image that sharpens as the graphic fills in. Users have a quick idea of what the graphic is going to be even before it fills in; they can react faster to the content of the web page.

  • Resize graphics as appropriate to reduce their file size.

  • + Share This
  • 🔖 Save To Your Account