HTML optimization __html should not be overlooked

With the development of Web2.0 technology, Web front-end optimization has been more and more attention, especially JavaScript and CSS optimization has been a hot topic, tools are relatively rich, and the HTML optimization has been overlooked, recently, from the Baidu Pan-user Experience Team engineer Miller (Chenminliang The author highlights the importance of HTML optimization and related techniques.

Miller first illustrates the fact that HTML optimizations are slightly overlooked: in Steve Souders's masterpiece, even faster Web Sites, there are many effective front-end optimizations, such as JavaScript loading, CSS selectors, picture optimization, gzip, IFRAME, and so on, but did not elaborate on HTML optimization.

He stressed that HTML optimization, although seemingly small, should not be overlooked: in the composition of the entire front-end, HTML is an essential part of the real show "front-end." Although the size of the HTML in the Total page resource is not much larger than the more than 10 k JavaScript, and there are gzip, but the fact that most of the pages have a greater scope of compression, even after gzip can still reduce the considerable volume ...

Miller summed up the various methods of HTML optimization, dividing it into two categories: Green Rules --the applicable and harmless and orange rules in a variety of pages--that apply or violate standards in certain specific situations.

Green rules can be summed up in the following ways: using relativeURLs, some href, src attributes, if they are under the same domain name as the current page, use a relative URL to save the length of at least one domain name. Delete http or https, the absolute URL starts with a protocol header such as HTTP or HTTPS, and if you can determine that the URL's protocol is consistent with the current page URL, or that the URL is available under a variety of protocols, consider deleting the protocol header. Delete Comments , consider unnecessary IE condition comments and CDATA annotations, and custom annotations. compressed whitespace , for most tags, you can reduce the HTML volume by removing extra whitespace, but for the pre and so on is the exception. compression inline CSS & Javascript, regardless of inline or external, all need compression, which is the most direct way to reduce volume. Css&javascript as far as possible outside the chain , not only can reduce volume, but also to take full advantage of the browser's caching mechanism. Delete element Default Properties , in the HTML specification, many HTML elements have default values for their properties, which can be erased and not written.

The orange rule is not listed, and interested readers can see the original text directly.

In addition to the optimization techniques, Miller specifically recommended two related tools--absolute HTML compressor and pagespeed1.6:html optimization tool is currently ideal for absolute HTML compressor, in addition, HTML compression is also introduced in PageSpeed1.6, but there are currently only four simple strategies that are still in the experimental phase.

As Web front-end performance receives more and more attention, including HTML optimization in various areas will be further development, and continuously improve the Web user experience, INFOQ will continue to focus on and report on the progress, interested readers can view the Rich Internet (RIA) topics.

Reprinted from Infoq.