Optimize Web applications with reduced page size

by Tony Patton | Nov 20, 2006 8:00:00 AM

Tags: Channel management, Web application, Tony Patton, Web, Use CSS, Web Development Zone Newsletter

Takeaway: The response time of a Web page is critical to an application being fully utilized since users will quickly navigate to another site when/if load times are unacceptable. In this article, Tony Patton examines ways to optimize Web applications.

In my recent projects, I have noticed a lot of bloated Web pages. This usually isn't a problem with Intranet-based sites, but when you release a page to the world via the Internet, performance can be a major issue�after all, most users are not viewing Web sites via high-speed connections. This week, I examine ways to optimize Web applications.

Common problems and possible optimization solutions

The amount of time it takes for a Web page to load is just one of the common complaints from Web users, but it is the most visible. A common problem with Web developers is assuming their platform matches an application's target user group. Rarely do users possess the same computer power or the Internet connection speed, so developers should be minimalists.

In addition to page size affecting download time, it can also affect Web server resources like disk space and bandwidth resources. There are many ways to reduce the size of a Web page. A good rule of thumb is including only what is necessary and keeping image and script size as small as possible.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

A common measuring stick for optimizing Web pages is keeping them in the 30-40K range in size. So, what can you trim from a page? The following list provides a sampling of possible options:

Use CSS. This provides a clean way to streamline page design and load times. After all, using HTML tables adds characters to the page. The CSS must be loaded, so minimize its size as well.
Use external files for both CSS and JavaScript. This promotes reuse across multiple pages as well as centralized maintenance. In addition, the files are cached after the initial request/load.
Avoid lengthy Web pages. You can use multiple (smaller) pages to increase response time and reduce file size.
Use special effects sparingly and only when necessary. The amount of time often required for Java applets, Flash animations, and such to load are often too much for users to handle.
Avoid frames. This is a good rule of thumb since the browser has to request and download the number of frames plus one since the main frameset is requested once and then each frame is requested.
Be thoughtful about image size. A common guideline for image size is 12K, but you should factor this into complete page size.
Avoid or reduce server roundtrips. You can accomplish this by taking advantage of AJAX-based solutions.

Locating problems

Dealing with the previously covered list of possible Web site/page issues can be tedious, but there are freely available Web-based tools to assist with locating possible issues. The following two sites offer examples of available tools:

These tools process Web pages (via URL) and determine total size of the page along with the objects and images used and so forth. This information is useful for determining where you should focus your attention to improve your site.

Here is a portion of a report generated by the Web Page Analyzer tool available on WebSiteOptimization.com. The report is lengthy, so only the Analysis and Recommendations section is shown:

TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization.

TOTAL_OBJECTS - Warning! The total number of objects on this page is 16 - consider reducing this to a more reasonable number. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.

TOTAL_IMAGES - Caution. You have a moderate amount of images on this page (10 ). Consider using fewer images on the site or try reusing the same image in multiple pages to take advantage of caching.

TOTAL_CSS - Caution. The total number of external CSS files on this page is 4 , consider reducing this to a more reasonable number. Combine, refine, and optimize your external CSS files. Ideally you should have one (or even embed CSS for high-traffic pages) on your pages.

TOTAL_SIZE - Congratulations, the total size of this page is 20067 bytes. This page should load in less than eight seconds on a 56Kbps connection - or 4.80 seconds. But there's always room for improvement.

TOTAL_SCRIPT - Congratulations, the total number of external script files on this page is 1 . External scripts are less reliably cached than CSS files so consider combining scripts into one, or even embedding them into high-traffic pages.

HTML_SIZE - Congratulations, the total size of this HTML file is 9441 bytes, which less than 20K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your page to display content in well under 8 seconds, the average time users are willing to wait for a page to display without feedback.

IMAGES_SIZE - Congratulations, the total size of all your images is 2732 bytes, which is less than 15K. Ideally each image should be less than 1160 bytes, to easily fit into one TCP-IP packet.

SCRIPT_SIZE - Congratulations, the total size of all your external scripts is 2374 bytes, which is less than 4080 bytes. This will fit into three higher-speed TCP-IP packets.

CSS_SIZE - Caution. The total size of your external CSS is 5520 bytes, which is above 4080 bytes and less than 8K. For external files, try to keep them less than 1160 bytes to fit within one higher-speed TCP-IP packet (or an approximate multiple thereof). Consider optimizing your CSS and eliminating features to reduce this to a more reasonable size.

MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 4K.

As you can see from the sample, it provides details on the total size of the page along with the size for each type of item included. A key aspect of a generated report is an evaluation message (congratulations, caution, or warning). Most of the results for the sample page are acceptable with words of warning and/or caution regarding image and object usage on the page. It is advisable to reduce the number of objects/images—this will reduce overall page size and reduce download time.

Conclusion

The response time of a Web page is critical to an application being fully utilized since users will quickly navigate to another site when/if load times are unacceptable. A key aspect affecting a page's load time is its size. There are many considerations for limiting Web page size, including (but not limited to) using smaller image sizes, CSS, and external CSS/JavaScript resources. A thorough analysis of Web pages either manually or via tools can provide clues to streamlining application pages.