Ways to simplify Web applications

web| Web | optimization

In recent projects, I have found many pages that are too bloated. This generally does not cause problems for Web sites in the intranet. However, when you publish pages out of the Internet, performance can be a major concern-after all, most users do not access the site through a high-speed connection. This week, I'll analyze how to optimize Web applications.

Common problems and possible optimization scenarios

Loading web pages for too long is just one of the common complaints of web users, but this is also the most obvious issue. The main problem with Web developers is that they think their platform meets a target user base. But the user's computer configuration and Internet connection speed are different, so developers should be able to meet the user's minimum requirements.

The page size affects Web server resources, such as disk space and bandwidth resources, in addition to the download speed. There are a number of ways to simplify a Web page. Experience shows that it's a good way to just keep the necessary content and simplify the images and scripts as much as possible.

Keeping the Web page in the 30-40k range is a common standard for people. So, how do you simplify the Web? The following list provides a sample of possible selections:

• using CSS: CSS can significantly simplify page design and reduce load time. Because using HTML tables increases the characters in the page, you should use CSS and minimize the page.
• using CSS and JavaScript external Files : This facilitates the reuse of files between pages and centralizes maintenance. In addition, the file is cached after the initial request/load.
• less long pages : You can use multiple (smaller) pages to speed response times and reduce file size.
• apply effects only when necessary : loading Java programs and Flash animations often takes a long time and users cannot handle this type of content.
• Avoid using frames : This is experience, because browsers must request and download the framework, first require downloading the main frame, and then ask to download other frames.
• Consider image size : The common standard size for an image is 12K, but you should calculate it within the entire page size.
• avoid or reduce server redundancy transfers : You can solve this problem with Ajax solutions.

Find the problem

It may be tedious to handle the Web sites/Web pages listed in the table above, but there are free web tools to help you find these problems.

These tools work with Web pages (through URLs) and determine the size of the entire page, as well as elements such as objects and images used in the Web page. This information is useful when deciding how to improve the Web page.

The following is part of the report generated by the Web Page Analyzer (Web page Analyzer) tool on websiteoptimization.com. The report is lengthy, so only the following analysis and recommendations are listed:

total_html--, Congratulations! The total number of HTML files (including primary HTML files) on this page is 1, and most browsers can access it multithreaded. Reducing HTTP requests is the key to Web site optimization.

total_objects--Warning! There are 16 objects in this page-consider reducing it to a reasonable range. Assemble, streamline, and optimize external objects. Use CSS rollover instead of graphics tumbling to speed up the display, reducing HTTP requests.

total_images--, watch out! The number of pictures in this page is moderate (10 pieces). Consider using fewer pictures in your site, or try using the same picture on multiple pages to make the most of the cache.

total_css--, watch out! There are 4 external CSS files in this page. Consider reducing it to a reasonable range. Assemble, streamline, and optimize external CSS files. Ideally, there should be only one (or a nested CSS) file in a Web page (or a High traffic page).

total_size--, Congratulations! The entire page is a total of 20067 bytes. At 56Kbps connection speeds, this page can be loaded in less than 8 seconds-or 4.8 seconds. But there is still room for improvement.

total_script--, Congratulations! The total number of external script files on this page is 1. External scripts are not as reliable as CSS files, so consider combining all scripts into a single script or nesting them into high traffic pages.

html_size--, Congratulations! This HTML file has a total of 9441 bytes, less than 20K. If you specify the height and width of the picture, this size allows the page to display in 8 seconds-the average time the user is willing to wait for the page to appear.

images_size--, Congratulations! The total size of the picture is 3732 bytes, less than 15K. Ideally, each picture should be less than 1160 bytes in order to meet the requirements of a TCP-IP package.

script_size--, Congratulations! All external scripts are 2374 bytes and less than 4080 bytes. It meets the requirements of three Tcp-ip packs.

css_size--, watch out! The external CSS total size is 5520 bytes, greater than 4080 bytes but less than 8K. For an external file, try to make it less than 1160 bytes to fit the requirements of a TCP-IP package. Consider optimizing CSS, removing some features, and reducing it to a reasonable size range.

multim_size--, Congratulations! The total size of all external multimedia files is 0, less than 4 K.

As you can see in the sample, it provides details such as the total size of the page and the size of each element. The main contents of the generated report are assessment information (congratulations, caution or warning). Most of the results of the sample page are acceptable, and the comments used by the pictures and objects in the page are warning and/or caution. It is recommended to reduce the number of objects/pictures-This will reduce the overall size of the page and shorten the download time.

Conclusion

If users are unable to accept page load times, they will immediately turn to other sites, so the response time of the Web page is critical to making the most of the application. Page size is an important factor that affects the time the page loads. There are many ways to limit the size of Web pages, including, but not limited to, using smaller pictures, CSS, and external css/javascript resources. A thorough analysis of the Web pages by hand tools provides clues to a simplified application page.