Precise Java Google
Home  | J2SE  | J2EE  | Book  | Free Books  | Contact
Chapter 1  | Chapter 2  | Chapter 3

Recipe 1.2: Making efficient web pages

Problem

Large web pages take more time to be downloaded and displayed by the browser.

Background

As the world wide web became popular, web pages that initially consisted of simple text and hyperlinks became more intriguing with complex set of web objects like images, java script, css, applets, activeX controls, flash, static/dynamic content. As the complexity of web pages increased so did the size and amount of time for browser to download and display the web page. For example, if browser takes 3 seconds to download 10KB of web page, it may take 30 seconds to download 100 KB of web page. So web page size does matter to web designers.

Another problem is that the browser can make multiple TCP connections to the web server in order to download objects in a web page. Earlier versions of HTTP (HTTP 0.9 and HTTP 1.0) compatible browser established a separate TCP connection with each request. This behavior imposed a noticeable effect on web performance because a web page contains many separate objects and the browser established separate request to retrieve each object. However HTTP 1.1 compatible browser avoid making multiple TCP connections with persistence and pipelining features. Persistence allows the browser to continue to use an existing TCP connection for other requests and pipelining allows the browser to continue to make further requests asynchronously without waiting for responses. Although with these features, a HTTP 1.1 compatible browser avoids multiple TCP connections, it still has to make multiple requests to download all the objects in a web page. An example of multiple requests behavior is seen when you open a web page with lot of images using 56 Kbs modem. Initially you can view a few images/objects in the browser and eventually all the images/objects load one after another as the browser makes multiple request and download them in the background.


So how can you make efficient web pages to ensure a faster browsing experience to the user?


Recipe

The ideal time that the browser takes to download a web page must be between 5 - 10 seconds to give the best browsing experience to the user. You can design web pages using the techniques described in the following Table to make smaller and efficient web pages and to boost web application performance and scalability.


Techniques for efficient web pages
  Technique Description
1 Divide large web pages into small logical pages Dividing large web pages into small web pages reduces web page size and improves download time. You should group web pages into logical categories but avoid too many tiny web pages. Many tiny web pages result in many TCP connections to the web server.
2 Reduce image size and number of images in a web page Images take maximum amount of size in a web page so keep the image size and number of images to be minimum in order to reduce web page size.
3 Replace images with HTML colors In certain areas of web page, you can replace images with HTML color tags to reduce web page size. For example, you can replace BACKGROUND image attribute image with BGCOLOR attribute in BODY tag.
4 Reuse images Reusing same images in multiple web pages reduces browser requests to the web server.
5 Select appropriate image type GIF and JPEG images use different compression techniques. GIF is ideal for vector graphics in which most of are contains same color where as JPEG is ideal for photographs which contains random set of colors. So improper use of image type can effect the size of image because they use different compression techniques.
6 Make static pages as HTML files instead of JSP file. It is improper to create static pages with JSP extension because creating JSP involves dynamic process, which is unnecessary for static HTML pages.
7 Compress downloadable files Although it is common practice to compress big executable files it is also a good practice to compress all the downloadable files like PDF and word documents.
8 Prompt users to upgrade to latest browser versions This allows the use of HTTP 1.1 compatible browsers. These browsers use important performance improvement techniques such as persistence and pipelining connections.


Discussion

Look and feel is important to make users happy but there is no use if it results in poor browsing experience. Web pages should be elegant but with proper speed to attract users to your web application and make web application more successful. The elegance can be achieved with limited graphics and objects.

When you apply above techniques, your overall application become lightweight and you will see excellent performance and scalability. Also design a set of templates and follow them as basic design artifacts. Templates allow you to reuse static content like images and they provide consistent look and feel and easy navigation.

Feed back

We appreciate and welcome your comments on this section. Email commentsZZZ@precisejavaZZZ.com (remove ZZZ which is placed to prevent spam). Please note that we may not be able to reply to all the emails due to huge number of emails that we receive but we appreciate your comments and feedback.

 





Copyright © 2001-2005, Ravi Kalidindi and Rohini Kalidindi. All rights reserved.