In order to further your understanding of how to optimize your web site it is important to first understand the steps that occur when a web page is downloaded. The first action a web browser makes when loading a web page is to load that web page into your computer's memory. Once this is completed, the browser immediately starts to review the content of the page to see what steps are required to display the contents of that web page. If a web page is using Javascript or Java the browser must prepare to use the Java Virtual Machine in order to process the code. Some browsers prepare this feature when launching and others initialize this upon first request.

If the web page is requesting that an images be displayed, the web browser must go to each one of the image locations on the web and load them into memory. Each time a connection is opened to retrieve an image (which is usually no more than 4 connections at one time) this is known as opening a "socket" to the server that contains the image. The more images you have, the more sockets you web browser is required to open. One factor that slows down page drawing is the sheer number of images regardless of how small or big they are. Each image requires that your computer handshakes with another computer (which can take up to a second) before downloading a copy of the image into your local computer for displaying.

Bottom line is, be aware of the number of non-html items you put on your web pages, and remember that your personal computer has a limit to the number of connections that it can make at one time. If you're designing web pages, make sure to optimize the use of your images. Where possible, combine multiple images into a single images and use Server Side Image Maps to place links in the image.

NOTE: The order in which sockets are opened to retrieve images isn't always consistent. At the same time, it is also up to the web server to determine which image will download faster. Remember, larger images take longer and delay other smaller images from downloading. In addition, smaller images can sometimes sneak under the rug and get displayed first. When building web pages, don't rely on any particular loading order with current day web browsers.

Height and Width tags

When you're web browser is attempting to display a web page, the first thing it must determine is how to layout the images. In the case of images, the web browser has two options: one; wait until it gets a chance to ask the web server how big an image is, or two; use the height and width tags inside the IMG tag to determine how much space to allocate for the image.

For instance, if you had an image on your web page and it was above a line of text, your browser wouldn't know exactly where to display the text, because it wouldn't know exactly how large the image is. Provided the height and width tags are added to all your images, the web browser can insert a place-holder for the image until it gets a chance to download a copy of the image.

Qualify URLs

One of the easiest improvements you can make to your site is to provide the best URL quality possible. When you are specifying URLs to web pages that are the default pages for a directory or when you are linking back to a home page of a particular site, always make sure to include a "slash" (/) at the end of your URL.

For instance, linking to "http://www.stimulus.com/" is twice as fast as linking to "http://www.stimulus.com". Without the extra slash at the end the web browser doesn't know if its being asked to read a file or a directory. This requires the web browser to make two calls to the web server before the desired page is downloaded. This is also true for sub-directories.

Following this rule can add more speed to your page rendering. Each time you don't use this method, you are requiring a person to clog the airwaves even more.

Optimize your images

Probably one of the most underrated areas of optimizing web pages is drawing images that use less colors and thus have smaller file sizes. You can achieve this in 2 primary ways: one; Learn how to draw all your images using less color, or two; Use software thats does this for you! We highly recommend the latter method. Most paint applications such as Adobe Photoshop provide built in methods for optimizing the number of colors used in an image (also known as "color depth"). Photoshop also provides a batch option to process any number of images in a single folder.

Use tables sparingly

Like the look of tables? Like the way they allow you to lay out things more accurately? Then you should also know they slow down web page layout more than any other HTML method out there. We won't preach too much in this area, but know that the more tables you use, the more your user will be viewing nothing, but the background of your web page. It is highly recommended that you master column and row spanning to optimize your table lay out. If you are in the business of having to layout to the pixel, you won't be able to utilize any form of spanning as it throws all precision layout off.

Avoid scaling images

Don't abuse the concept of height and width tags. Some web pages attempt to show users what an image will look like before they actually load the image by showing what is called a "thumbnail" of the image. This is usually a smaller version of the image that allows the user to view many small versions before viewing the larger one. The key to this process is to actually create a smaller version of the image and not to scale the larger image into a smaller place. Scaling the image using height and width tags to reduce the display size, only reduces the display and not the actual image size. The entire image is still downloaded and can drastically delay the final loading time of the web page, thus increasing the chances of a user closing the browser and moving on. SpaceBossImageWorks has a great example of a well done thumbnail page.

Reduce content

Probably one of the most difficult things to convince people who are creating web pages is to reduce the amount of content within a page, and use other sub-pages to display the pertinent information. Most people feel that if the person doesn't see everything including the kitchen sink on the front page, then they won't click through to view the other pages. This couldn't be further from the truth. How many of you have been to Disney Land and wished that a ride had only one room? You go in, you get scared, then you leave. Not likely many. Understand if there is one common denominator in mankind, it is that we love to explore. More pages mean more things to look at. Sub-pages can also allow you to create different color schemes to better inform the user where they are. Long story short, reduce the content in the same fashion you write paragraphs of information. One topic per unit.

When to use GIFs

If you've been a webmaster for any time, you've probably wondered what the big difference is between GIFs and JPEGs. You're also probably aware that GIFs animate and JPEGs don't. If you need animation, GIFs are the only way to go unless you don't mind using Javascript to swap JPEGs.

The spirit of GIFs is that (pronounced JIFS by it's creators) they are great for images that don't require photographic quality. The maximum number of colors a GIF can hold is 256. These 256 colors can be customized, but it still limits the overall quality for photos and images that require high detail. Luckily using GIFs is perfectly fine for most web site graphics.

In regards to compression, which is sometimes used to move images towards JPEGs, the GIF format has a compression technology called "Run Length Encoding" that compresses by design. For instance, if you had a large area of your image that is a solid color, the GIF will store that color by repeating blocks of that particular color. Even a large image of a solid color will be VERY small in GIF format, in comparison to JPEGs that have no internal compression.

Because GIFs only have Run Length Encoding as a form of compression, they are not good for images that change colors every few pixels. This type of image negates the Run Length Encoding process of compressing by recording solid runs of color. If you need to pick and choose which image format to best display your site, you could optimize your images by using GIFs where you have solid runs of a particular color, and JPEGs where you have a lot of varying colors.

Color quality is another concern when using GIFs. A GIF stores a fixed RGB (Red, Green, Blue) color index value that is rendered in the viewer's web browser to display the image as you created it on your computer. Unfortunately your choices don't always match the best RGB color for the viewer's computer. If you need to have an accurate color rendering, high quality JPEGs are your best bet.

When to use JPEGS

JPEG (pronounced J-Peg) is a highly advanced image format that preserves your images quality at the utmost priority. Instead of storing RGB index color values which can be rendered poorly on other people's computers and video cards, JPEGs store light-wave information about the color. When the image is loaded into memory and rendered for display on your computer, your computer generates the most accurate RGB value on the fly to best render the image on your computer monitor. Since this method is very complex, there is no internal compression done to JPEGs before they're saved. In order to combat the problem of file size, the creators of the JPEG format decided to use a form of fractal compression on the saved file to make it smaller. This compression is highly effective, but keeps JPEGs from ever being "interlaced" because the web browser can't begin displaying image information until the entire image is decompressed. It could be argued that JPEGs take longer to render, because they have to be decompressed before being displayed, as where GIFs can begin rendering immediately because their compression is built into their design.

Recommended Books:

 

©Copyright 1996-06, TWIN MONOLITH. All Rights reserved.