压缩的html是如何工作的以及为什么需要它

在本文中，我们将讨论压缩HTML的两种主要方法，为什么要压缩HTML文件，以及如何进行压缩。...

如果你经营一个网站，你应该已经知道如何使用正确的图像格式和优化你的图像为网络。然而，虽然图像压缩是众所周知的做法，HTML压缩往往被忽视，这是一个耻辱，因为好处是值得的。

compressed-html

在本文中，我们将讨论缩小HTML文件的两种主要方法，为什么要缩小HTML文件，以及如何缩小。

压缩与缩小

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

缩小

您可以将缩小视为删除源代码中不必要的字符和行。想想缩进、注释、空行等等，这些在HTML中都不是必需的——它们的存在是为了使文件更易于阅读。修剪这些细节可以在不影响任何内容的情况下缩小文件大小。

HTML页面示例：

<html> <head> <title>Your Title Here</title> </head> <body> <div><img src="clouds.jpg"></div> <h1>This is a Header</h1> <p>Send me mail at <a href="mailto:[email protected]">[email protected]</a>.</p> <p>This is a new paragraph!</p> <p><strong><em>This is a new paragraph in bold and italics.</em></strong></p> </body></html>

示例HTML页面，缩小：

<title>Your Title Here</title><div><img src=clouds.jpg></div><h1>This is a Header</h1><p>Send me mail at <a href=mailto:[email protected]>[email protected]</a>.<p>This is a new paragraph!<p><strong><em>This is a new paragraph in bold and italics.</em></strong>

原版尺寸：354。缩小尺寸：272。节省：82（23.16%）。

许多web开发人员和网站所有者只保留JS和CSS文件的缩小，但这种过时的做法是错误的。HTML缩小也很重要。

早在21世纪，缩小工具就很少见了。每次发生更改时，您都必须手动缩小文件。由于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].

现在想想一个典型的HTML文件以及其中有多少重复。几乎每个标签，例如

<body>

，具有相应的结束标记，如

</body>

. 此外，许多标记在整个过程中重复，例如

<p>

<div>

<img>

<li>

属性也经常重复，包括

class

href

，和

src

. 很容易理解为什么GZIP压缩对HTML如此有效。

唯一的缺点是每次请求页面时，web服务器都需要多一点CPU来执行压缩。但是，由于CPU现在已经不是一个很重要的问题，所以启用GZIP几乎总是比不启用要好，即使您有入门级的web托管。

为什么要压缩和缩小

有两个主要的好处，这两个都是至关重要的，在今天的移动重型网络景观。

更快的页面加载

平均而言，一个HTML浏览器可以减少大约百分之三的文件大小与基本设置。通过可选的高级设置，一个HTML文件可以再减少3%到7%，最多可能减少10%。这直接转化为更快的页面加载时间。

使用的带宽更少

假设您有10个文件，每个文件从50kb缩小到45kb，总压缩量为50kb。假设你的网站每天平均接待1000名访问者，平均每次访问10页。仅HTML缩小就可以减少每天50MB的带宽使用量（每月1.5GB）。

压缩+缩小

正如您所看到的，HTML缩小本身是很有用的，特别是当您的站点变大、文件变大和流量增加时。请注意，Google的PageSpeed指南建议缩小HTML，所以如果你对此持怀疑态度，就让它说服你。

但是HTML优化的好处在于，您不必选择缩小或压缩。你两个都可以！事实上，你应该两个都做。

007Ys3FFgy1h1ok564v0oj30im09bgly

平均来说，GZIP压缩可以将HTML文件压缩70%到90%。使用上面的示例和保守的压缩估计，缩小的HTML文件将从每个45kb变为13.5kb，总压缩量为365kb。与未统一/未压缩相比，您的站点带宽现在每天减少365 MB（每月11 GB）。

除了节省带宽之外，每个页面的加载速度也大大加快，因为最终用户的浏览器只需下载13.5 KB，而每页只需下载50 KB。

如何压缩和缩小html

幸运的是，现在这两种方法都不是很困难，而且您不需要太多的技术知识来设置它们。

wordpress插件

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

大多数缓存插件做的不仅仅是缓存页面。例如，WP Fastest Cache和W3 Total Cache都有一键设置，允许您启用HTML缩小和GZIP压缩，以及其他可以进一步加快页面加载和减少带宽使用的功能。

如果你只想缩小，我们推荐缩小HTML插件。它很简单，支持HTML/CSS/JS，并允许您稍微调整缩小方法（例如，是否删除

http:

和

https:

从URL）。

静态html缩略器

如果您的HTML文件是静态的（即不是由CMS或web框架动态生成的），那么您可以维护两组HTML文件：一组“源”文件集（未统一以便于编辑），另一组“缩小”文件集，您可以在对源文件进行任何更改时创建。

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

HTML压缩程序
HTML缩小器
HTML缩微器（与上面的不同）

如果你已经远离像WordPress这样的cmse，现在使用静态站点生成器，这是一种可行的技术。

启用gzip压缩

启用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。