In this article we discuss a very important aspect of developing web pages – Web page optimization. A typical web page that is displayed in a web browser window is not just the HTML document. It also contains images, Flash, multimedia etc. content that is embedded in the HTML web page.
So web page optimization requires not only optimizing the HTML document but also optimizing the images and other included content. We will also learn how to judiciously decide whether multimedia contents and Flash are indeed required for a web page / web site.
Sponsored Links
What is web page optimization and why do we have to optimize web pages?
Web page optimization involves decreasing the file size of the HTML document and any images/multimedia content that are embedded in that web page.
The Internet is a network of computers and these connections transmit a web page from a server to the client computer. A web page (or any file on the web) is not transferred at one go but it is sent from the server in small pieces called packets. (If you want to know more on how a client computer interacts with the server computer, read client server architecture). Any way, the connections on the net can be fast or slow. Fast connections such as broadband connections transmit data quickly while slower connections such as dial-up take a longer time to send packets of data. The connection speeds are measured in bits per second. Let us assume that a broadband connection transfer at 10 kilobytes (kb) per second while a dial-up does the same at 2 kilobytes per second. So a 50kb web page will be downloaded to a client machine in 5 seconds with a broadband connection and 25 seconds with a dial-up.
Web surfers, including you and me, are an impatient lot. We ideally want a web page to load the moment we click on a link. However, in the real world this does not happen. I am sure you would have come across web page that took so long to load that you were too tired or too frustrated to even go through it. Faced with this situation, most of us either close the web page or click on the web browser Back button. And why do we do this? It is because a slow loading web page tests our patience. Our attention span on the net is limited and slow loading pages simply irritate all web surfers. So what can we do?
You cannot dictate the connection a web surfer uses but you can surely decrease the size of your web page so that it loads quickly even on slower connections. A web page that’s not optimized takes a long time to load in a browser – no one has that kind of time on the web. So it’s better to have an optimized page which visitors will at least go through (prompting them to view a few more on your web site).
Remember, web page optimization requires a good amount of effort, but it makes you a better web developer at the end so the time spent is worth it.
I will now detail how you can optimize each component of a web page. Links to related articles are provided if you want to explore further and know more on web page optimization.
HTML optimization
WYSIWYG editors such as FrontPage, DreamWeaver pollute the HTML page with a lot of extra and unwanted tags. To optimize a web page developed in FrontPage or Dreamweaver, open the document in a traditional text editor like Notepad and remove these tags. This, obviously, requires a good working knowledge of HTML. Based on my experience, WYSIWYG HTML editors add a profuse amount of HTML <FONT> and <P> tags and layout a web page with the help of HTML tables that leads to incorporation of tons of <TR> and <TD> tags. These extra tags not only add to the file size of the HTML page but also make the page more complex which makes it slower for the browser to render the web page.
Also, now that cascading style sheets are being supported pretty well by all popular browsers, you should use styles to layout web pages. Style sheets help in cutting down a lot of superfluous HTML code. For example, instead of using <FONT> tags (used a lot by the WYSIWYG editors), use Style Sheets that will affect all document on a web site.
One more point – it’s better to use relative URLs, which are generally be shorter than absolute URLs.
By the by, I have never liked WYSIWYG HTML editors and am a proponent of writing HTML by hand. So I would always advise learning HTML properly and coding it using a text editor.
Further reading: What should be the maximum web page size?
Graphics optimization
Optimization of web graphics involves their resolution, color depth etc.
Resolution for web graphics should be not more than 72 dpi, which is the resolution of most monitors. There are many high end work stations that support higher resolutions (96 dpi) but I guess the users of such high end computers would not use these machines to surf the net often 🙂
Use a graphics program to change the resolution of the image if necessary.
Color depth determines the number of colors present in the image. It’s an important factor when optimizing GIF images. Higher the number of colors, larger the image size. Remember, there is always a trade-off between the image quality and size. For example, look at the following four images… which one would you use?
 GIF image with 4 colors 548 bytes |
 GIF image with 8 colors 781 bytes |
 GIF image with 16 colors 1000 bytes |
 GIF image with 32 colors 2004 bytes |
Thus, it’s best to check the size of a GIF image saved under different color depths. As the color depth decreases so does the quality.
JPEG employs a losy algorithm for compressing images. This means that when you save a high quality image as a jpeg, some information is lost forever. Standard graphics programs allow you change the JPEG compressions levels.
 Highly compressed jpg 6.83 kb |
 Compressed jpg 7.81 kb |
If there is a need to display images of large file sizes, I recommend that instead of including them directly on the web page, you provide a link to these images which can then be displayed in a new browser window. Another way to solve the problem of images with large file sizes is to display a thumbnail or a smaller version of the image which can then be made clickable and the larger image can load in a new browser window using either JavaScript window.open() function or _blank as the value for target attribute of the <a> tag.
There are some programs such as the JPEG Optimizer (www.xat.com) that allow you to apply different compression levels to different parts of the same image.
Understanding when to use gifs and when to use jpgs will help you in optimizing images and graphics on your web site. Further, I have detailed articles on Gif optimizationand JPG optimization to help you in your efforts of optimizing web pages.
Further reading:
- Decreasing Gif image file size
- Understanding color gradients and optimizing Gifs
- Decreasing the file sizes of gif web images
- When to use JPGs
Optimizing Multimedia Content
Audio: First ask yourself whether your site really needs sounds or music! Having a midi file playing in the background is an annoyance (my opinion); visitors come to your page because of its contents and not to listen to music. However, if it’s imperative to include background sounds or music try to use a midi file or a small .wav file that loops seamlessly.
Video: Since video files can be quite large, it’s best to provide a link to the file mentioning the file size and leave the choice of viewing it to the visitor rather than forcing it to load in the page.
Flash: Flash is a vector based program. To keep Flash files at a minimal size try to use fewer fonts, reuse symbols, compress the included sounds, convert bitmaps to vector graphics etc. To judiciously decide whether Flash intros are required for your site, read Advantages and disadvantages of using Flash intros on web sites and Important points to remember when creating Flash intros for web sites.
