HTML-optimized green rules that cannot be ignored

With the continuous development of Web2.0 technology, the optimization of Web Front-end has received more and more attention, especially the discussion of JavaScript and CSS optimization has been a hot topic, and the tools are also relatively rich, while the HTML optimization is ignored, recently, chenminliang, an engineer from Baidu's extensive user experience team, wrote an article emphasizing the importance of HTML optimization and related skills.

Miller first illustrates the fact that HTML optimization is slightly ignored:

In Steve Souders's masterpiece Even Faster Web Sites, he talked about many effective front-end optimization methods, such as loading Javascript, CSS selector, image optimization, gzip, and iframe, I did not elaborate on HTML optimization.

He stressed that although HTML optimization looks tiny, it should not be ignored:

In the entire front-end structure, HTML is an essential part and a real display of "front-end ". Although the size of HTML generally does not account for a large proportion of the page resources compared with Javascript with dozens of K, and there is still Gzip, it turns out that, most pages have a lot of room for compression, even after Gzip, it can still reduce the considerable size...

Miller summarized various HTML optimization methods in the article and divided them into two types: green rules-applicable and harmless and orange rules on various pages-apply or violate standards only in some specific circumstances.

Green rules can be summarized as follows:

• Use relative URLs. If some href and src attributes are in the same domain name as the current page, using relative URLs can save at least one domain name length.
• Delete HTTP or HTTPS. The absolute URL starts with the HTTP or HTTPS protocol header. If you can determine that the URL protocol is consistent with the current page URL protocol, in other words, if the URL is available under multiple protocols, you can consider deleting the protocol header.
• Delete comments. Consider unnecessary IE condition comments, CDATA comments, and custom comments.
• Compress blank spaces. For most tags, you can delete unnecessary blank spaces to reduce the size of HTML, except for pre.
• Compression of inline css & Javascript, whether inline or external, requires compression, which is the most direct way to reduce the volume.
• CSS & Javascript serves as many external links as possible, which not only reduces the volume, but also makes full use of the browser cache mechanism.
• Delete default attributes of an element. In the HTML specification, many attributes of an HTML element have default values, which can be erased without being written.

The orange rules are not listed one by one. Interested readers can view the original text directly.

In addition to optimization techniques, Miller recommends two related tools-Absolute HTML Compressor and PageSpeed1.6:

The ideal HTML optimization tool is Absolute HTML Compressor. In addition, the HTML compression function is also introduced in PageSpeed1.6. However, there are only four simple policies, which are still in the experimental stage.