How to analyze and compress site code

With the increasing function of the website, the site's code will become more and more large, and into the Web2.0 rich client, the site's main focus on the site's beautiful and user experience, but to produce such visual effects, picture CSS and JS is to assume a great responsibility, so that the site's page becomes very large, Thus affecting the access speed of the Web site. Just imagine, a 10K page and a 100K page which can be more quickly displayed, the answer is of course 10K page, many studies have shown that users most satisfied with the open Web page time, is under 2 seconds. The maximum waiting time that a user can endure is about 6-8 seconds. That is, 8 seconds is a critical value, and if your site is open for more than 8 seconds, chances are that most visitors will eventually leave you.

Since the size of the site page is so important, how should we optimize our page?

Of course, first of all to ensure that your HTML code writing to standardize, to know the div to show faster than the table, so the layout as far as possible with Div and CSS. JS and CSS code are written in the external file, can be divided into modules to reduce their size, each module refers to the respective modules of JS and CSS, and then each CSS and JS file compression. The picture has no way to compress, but we can use the tool to view the size of all the pictures referenced by the page to optimize.

Let me introduce the tools for analyzing Web sites and compressing code:

Tools for analyzing Web sites: YSlow

YSlow is a Yahoo development to test Analysis website Optimization Firefox tool plug-in, installation must also rely on Firebug. YSlow for the site Speed experience optimization, summed it up to 13, respectively, using the index of F to a to evaluate your website speed and give the data, F represents the worst, a represents the best. We can optimize our website and server by analyzing the data. Not only that, YSlow also counted the HTTP requests and the size of the page that the page originated, and here is an example of statistics:

With this statistic, it can also be a good guide to our Code and media optimization.

The tool of the compression code is also a Yahoo company provides an on-line compressor: Online YUI compressor, this compressor can all JS and CSS compression, after compression will be prompted to compress the proportion, use it is very convenient.

At this point, the page front-end optimization has been completed, more optimization can be based on the requirements of the server, scripts and database to adjust accordingly. Finally, reprint please indicate it station: http://www.ityizhan.com