Speed up your Web pages
The number of worldwide high-speed Internet users is between 30-46 million (Stellin). The total number of global Internet users is around 220 million (Nielsen/NetRatings). Put these figures together and you can see there are still millions of people who access the Web through slow connections.
Even if you're basking in the glow of high-speed Internet access, you probably remember waiting for Web pages to load over modem lines. Long download times are linked to a variety of technical issues -- server glitches, slow computers, bad software --
but they also stem from non-optimized images and poorly constructed Web pages. You can't control the hardware and software problems, but you can speed up your pages. Below you'll find two techniques that will make your pages faster and easier to download. Implementing these techniques will ease the frustration felt by all those millions of modem-burdened users.
Optimize your images
The majority of the images you encounter on the Web are saved in one of two formats: GIF or JPEG. Browsers automatically read and download these formats, but each has specific strengths.
- GIF (Graphic Interchange Format): Images saved in this format are squeezed into GIF's limited 256-color palette. Because of this, GIF has a hard time handling images with shading or gradients. It works best with large color blocks -- the kind often seen in illustrations, drawings and logos.
- JPEG (Joint Photographic Experts Group): JPEG is a "lossy" format, which means it discards file information and occasionally results in bad quality. The JPEG palette has millions of colors, making it well suited for photographs and graphics with blended colors.
Despite their differences, both of these formats accomplish the same thing: They make images smaller. This is important because images, in their raw form, are unwieldy and bloated. When you create custom graphics or import photos from a digital scanner or camera, the image files you're using have a high resolution. This means they store a lot of information about color and shading, which translates to a large file size. In the print world, you don't have to worry too much about resolution because the end product is a piece of paper that automatically -- and always -- contains the same image. On the Web, images need to be downloaded. The fatter the image, the slower the download.
Fortunately, you can reduce file sizes by saving graphics in the GIF or JPEG formats. This process takes lumbering images and compresses them into small, sleek graphics -- and it does this without destroying the image's quality.
Optimization is performed with a graphics editor like Photoshop or Fireworks. With one of these programs, you can manipulate the resolution and colors of any image. The specific optimization process is slightly different with each software package, but all of these programs accomplish their goal: They find the perfect balance between file size and image quality.
Clean up your HTML code
This section involves interacting directly with HTML code, making it a slightly advanced process. Newcomers will be able to glean useful information, but be aware that this technique becomes more effective as your knowledge of HTML grows.
When a browser visits a Web page it interprets the page's code and displays it on the computer screen. If the code is straightforward and error-free, the page loads quickly. If it's riddled with broken tags, the page downloads much slower.
The best way to guarantee a quick download is to use clean code. If you build pages with a text editor try to make the code on your page as simple as possible. Be efficient with your tags and learn how to construct streamlined HTML tables.
Those of you using layout editors should examine the editor's code every once in a while. Most of the new layout programs produce clean code, but some continue to insert extraneous spacing and font tags. If you're unsure about the tags the editor is using, run the following test:
Copy your HTML code into a Notepad or Simpletext document and save it as a file named test.html. Start up your browser and go to File > Open and select the test.html file you just created. Return to the text file, remove one of the suspicious tags, then save the document. Go back to your browser and click Refresh (or Reload). If the page looks wrong you know the tag is important, but if the page displays normally, the tag you removed is probably unnecessary.
Be warned, this test works best with "flat" HTML files that contain all of your tags and content. If you run server-side includes or other dynamic elements, previewing pages from your hard drive will lead to odd page displays even if your tags are correct. This test only provides you with a sense of your layout editor's code. If you really want to streamline, you need to learn HTML.
Related links
