Implementation steps of HTML web page optimization and compression

想要对自己的HTML网页实现优化压缩的话需要检查5个方面，分别是，将table改为div布局，缩减精简div、span、ul li等系列标签，删除多余空格，表格类型布局时候适当使用table替代div布局，html网页GZIP压缩，将table改为div布局 。下面给大家详细的介绍一下

尽量将table标签布局html重构div布局，可以节约至少40%的代码量。由于div代码少于table布局的html网页，所以搜索引擎索引权重也优于table布局的html网页。

缩减精简div、span、ul li等系列标签  

布局DIV+CSS网页时候，我们有时候可以节约一些DIV布局代码，减少代码量。

如下案例代码：

<div class="div"> 
　　<ul> 
　　<li>DIV</li> 
　　<li>DIV</li> 
　　<li>DIV</li> 
　　</ul> 
</div> 
可以改为：
<ul class="div"> 
　　<li>DIV</li> 
　　<li>DIVC/li> 
　　<li>DIV</li> 
</ul>

这样可以节约一对div标签，从而减少html代码量，起到压缩html作用。这样直接对ul命名css样式类，可以区别在一个页面不同地方使用ul li列表标签。

三、删除多余空格   -   TOP

删除多余空格换行，可以有效地压缩html代码占用字节，一般在开发完成后可以对html中代码进行删除换行和空格内容。

可以借助于DW软件进行批量删除html内标签之间空格

如：

2664b5c137162ed32cb2c4b60e3a831f 

　　ca532c8fbc0323c93614f1e58a1d475316b28748ea4df4d9c2150843fecfba68 

16b28748ea4df4d9c2150843fecfba68 

可以删除空格与换行后：

2664b5c137162ed32cb2c4b60e3a831fca532c8fbc0323c93614f1e58a1d475316b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

This can save bytes occupied by spaces and newlines.

Note that the published version of the web page can use DW to delete redundant spaces and blank lines. If you want to edit again, go to DW software to format the code.

4. When laying out table types, use table appropriately instead of div layout - TOP

If it is a table data list layout, we'd better choose table. Because using table for table layout is better than div layout, using table layout saves html tag code and saves css style than div layout.

As shown in the table belowData type, it is recommended to use TABLE tag + CSS style layout

html web page code compression table tag layout table

Similar to this list Table table, it is recommended to use the table tag layout

5. Web page GZIP compression - TOP

It is recommended to set the web page Gzip compression function on your own server.

1. What are the benefits of opening GZIP?

Answer: After Gzip is turned on, the data output to the user's browser will be compressed, which will reduce the amount of data transmitted through the network and increase the browsing speed.

2. How to enable the Gzip compression function of IIS:

Answer: First, if you need to compress static files (HTML), you need to create a directory on the hard disk and give it "IUSR_ Write permissions for the user "machine name". If you compress dynamic files (PHP, asp, aspx), there is no need, because its pages are dynamically generated every time and will be given up after compression. Then in the IIS manager, right-click on "Website" - Properties, not a certain site below, but the entire website. Enter the "Services" tab and select Enable dynamic content compression and static content compression. Then select the server extension under the website and create a new server extension. The name doesn't matter, the path to add the file below is: c:\windows\system32\inetsrv\gzip.dll, and then enable this extension. At this time, static content can be compressed, but for dynamic content, aspx files are not within the compression range. Because the default compressible file does not have this extension. And you can't find a place to add an extension in the management interface. At this time, you can only modify its config file. There is a MetaBase.xml file under c:\windows\system32\inetsrv\. You can open it with Notepad and find IIsCompressionScheme. There are three sections with the same name, namely deflate, gzip, and Parameters. Don’t worry about the third section. The two paragraphs have basically the same parameters. Add a line of aspx below the parameter HcScriptFileExtensions in these two paragraphs. If you have other dynamic programs to compress, add them here as well. HcDynamicCompressionLevel is changed to 9, (0-10, 9 is the most cost-effective one). Then you need to restart the IIS service to experience the speed after compression.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed explanation of the difference between html and xhtml

How to use CSS image rotation effect

How to optimize HTML web page

The above is the detailed content of Implementation steps of HTML web page optimization and compression. For more information, please follow other related articles on the PHP Chinese website!