压缩HTML的工作原理以及为什么需要压缩HTML

如果您经营一个网站，则应该已经知道如何使用正确的图像格式并优化网络图像。然而，尽管图像压缩是一种众所周知的做法，但HTML压缩却往往被人们忽略，这是令人遗憾的，因为这样做的好处是值得的。

在本文中，我们将介绍两种主要的收缩方法HTML文件，为何应缩小HTML文件以及如何处理。

压缩与缩小

就优化HTML文件而言，有两种主要方法： 压缩和缩小。它们在表面上听起来很相似，但是实际上是两种不同的技术，所以请不要混淆它们。

您可以将缩小看作是去除源代码中不必要的字符和行。想想缩进，注释，空行等。HTML不需要这些，它们的存在使文件更易于阅读。修剪这些详细信息可以减少文件大小，而不会影响任何内容。

示例HTML页面：

示例HTML页面，已缩小：

原始大小：354。最小大小：272。节省：82（23.16％）。

许多Web开发人员和网站所有者都为仅JS和CSS文件，但是这种过时的做法是一个错误。 HTML缩小也很重要。

在2000年代，缩小工具很少见。每次更改时，您都必须手动缩小文件。由于HTML文件的更改频率要比JS和CSS文件的更改频率更高，因此太麻烦了，以至于无法每次都最小化。如今，这是一个有争议的话题。

当用户访问您的网站时，他们使用HTTP协议进行访问。浏览器向您的Web服务器发送针对特定页面的请求，您的Web服务器找到该页面，然后将该页面的内容发送回访问者的浏览器。

但是由于HTTP协议支持压缩，因此您的Web服务器可以在将页面发送给访问者之前对其进行压缩（假设在服务器的设置中启用了压缩），然后访问者的浏览器可以将页面解压缩回其原始状态。

最常见的压缩方案是 GZIP ，它是一种使用称为DEFLATE的无损压缩算法的文件格式。

该算法在HTML文件中查找重复出现的文本，然后将这些重复出现替换为引用先前的事件。每个参考文献都是两个数字：参考文献有多远，我们参考了多少个字符。

请考虑这样的文本字符串（示例取自GZIP网站）：

Blah blah blah blah blah.

该算法可识别以下重复项：

B{lah b}{lah b}{lah b}{lah b}lah.

第一个匹配项是我们的参考，因此保留为：

Blah b{lah b}{lah b}{lah b}lah.

第二个匹配项指的是第一个匹配项，五个字符后面和五个字符长：

Blah b[5,5]{lah b}{lah b}lah.

，但是在这种情况下，算法会识别到下一个出现的字符序列相同，因此会将参考长度再扩展五个：

Blah b[5,10]{lah b}lah.

再次：

Blah b[5,15]lah.

该算法足够聪明，可以意识到接下来的三个字符是引用中的前三个字符，因此可以扩展为三个：

Blah b[5,18].

不利之处在于，每次出现以下情况，Web服务器都需要更多的CPU来执行压缩页面被请求。但是，由于当今CPU不再是一个大问题，即使启用入门级Web托管，启用GZIP几乎总比没有启用更好。

为什么要压缩和缩小

有两个主要优点，这两个优点在当今移动设备繁多的Web环境中都是至关重要的。

使用基本设置，HTML压缩程序平均可以将文件大小减少约3％。 。通过可选的高级设置，HTML文件可以再减少3％至7％，最多可减少10％。

比方说，您有10个文件，每个文件的大小从50 KB缩小到45 KB，总压缩量为50 KB。假设您的网站平均每天有1000位访问者，每次访问平均有10页。仅HTML缩小功能每天就能减少50 MB带宽（每月1.5 GB）的带宽使用量。

如您所见，HTML缩小功能非常有用，尤其是当您的站点越来越大，文件越来越大时，并且流量增加。请注意，Google的PageSpeed指南建议缩小HTML，因此，如果您对此表示怀疑，请以其他方式说服您。

但是HTML优化的优点在于，您不必选择缩小还是缩小压缩。您可以同时做！实际上，您应该同时执行这两项操作。

平均而言，您可以预期GZIP压缩会将HTML文件压缩70％至90％。使用上面的示例以保守的压缩估计，缩小的HTML文件将从每个45 KB扩展到13.5 KB，总压缩为365 KB。与未压缩/未压缩相比，您的站点带宽现在每天减少365 MB（每月11 GB）。

除了节省带宽外，每个页面的加载速度也大大提高，因为仅最终用户的浏览器需要下载13.5 KB而不是每页50 KB。

如何压缩和最小化HTML

幸运的是，这些天都不是很困难，并且您不需要太多技术知识，如何设置它们。

如果您运行一个WordPress网站，您所需要做的就是安装一个插件，您就可以获得压缩和压缩的好处。

大多数缓存插件的功能不仅仅只是缓存页面。例如，WP Fastest Cache和W3 Total Cache都具有一键式设置，使您可以打开HTML压缩和GZIP压缩，还有其他功能可以进一步加快页面加载速度并减少带宽使用。

如果您仅想要缩小，我们建议使用Minify HTML插件。它很简单，支持HTML / CSS / JS，并允许您稍微调整缩小方法（例如，是否从URL中删除 http：和 https：）。

如果您的HTML文件是静态的（即不是由CMS或Web框架动态生成的），则您可以维护两套HTML文件：“源"集（为便于编辑而未缩小）和“ minified"集，您可以在更改源文件时随时创建。

要缩小，请使用以下工具之一：

如果您已脱离WordPress之类的CMS，现在使用静态站点生成器，则这是一种可行的技术。

启用GZIP压缩的步骤可能会有所不同，具体取决于您所使用的Web服务器软件。由于Apache是​​最受欢迎的选项，因此我们将介绍如何使用.htaccess启用它。

使用FTP连接到Web服务器，然后在其中创建一个名为 .htaccess 的文件根目录。编辑.htaccess文件以进行以下设置：

<ifModule mod_gzip.c>  mod_gzip_on Yes  mod_gzip_dechunk Yes  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$  mod_gzip_item_include handler ^cgi-script$  mod_gzip_item_include mime ^text/.*  mod_gzip_item_include mime ^application/x-javascript.*  mod_gzip_item_exclude mime ^image/.*  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule><FilesMatch "\.(html?|txt|css|js|php|pl)$">  SetOutputFilter DEFLATE</FilesMatch>

不确定压缩在您的网站上是否有效？

要获得最终的效率，还应该了解如何检查，清理和优化CSS。