如何压缩 HTML 和其他网站代码

已发表: 2022-02-25

页面速度是您网站的关键性能指标。 如果您压缩 HTML 和其他类型的代码，您可以获得 40-70% 的收益。 就是这样…

网站用户希望内容质量高且可快速访问。 这对于优化用户体验很重要。 好消息是，通过几行代码和一些小技巧，完全可以将 HTML 和其他网站代码压缩 40% 到 70%（在某些情况下甚至更多）。 在本文中，我将向您展示如何做到这一点。

>> 页面速度优化：如何提高加载时间 <<

为什么要压缩网站代码？

现在你可以问自己一个问题：我为什么要压缩我网站的源代码？ 毕竟，未压缩的大小只有几百千字节。

答案很简单：因为更快的加载网站提供了更好的用户体验，这反过来又对转化率、在页面上花费的时间、网页浏览量和跳出率产生了积极影响。 转化率尤为重要，因为这直接影响到电子商务等领域的成功。

例如，对于电子商务巨头亚马逊来说，100 毫秒的加载时间延迟会使他们损失大约 1% 的销售额。 预计在一个完整的财政年度内，这将导致大约 2.45 亿美元的成本。 这些数字显示了网站加载速度可能产生的巨大影响。

您还应该考虑使用移动设备上网的用户比例。 LTE 和 4G 无线网络的覆盖率在这方面仍有很大提升空间。 这意味着移动互联网通常很慢，这使得更快的页面速度变得更加重要。

例如，通过使用 Gzip 或 Deflate 压缩技术，可以显着缩短加载时间。 这可以节省资金和带宽。

是否可以压缩 HTML、CSS 和 JavaScript？

压缩将请求的数据压缩到客户端，以减少传输时间。 网络上最常见的两种压缩方法是 Gzip 和 Deflate。 压缩过程在文档中定位相似的字符串，并将它们替换为具有相同占位符的临时字符串。

因此，这两种方法非常适合压缩 HTML、CSS 和 JavaScript 文件，因为它们通常包含许多相同的字符串，并且通常包含许多空白行和空格。 这两种方法都可以用相对较少的努力来实施或激活。

网站代码压缩的工作原理

对于要传输的压缩数据，客户端的浏览器必须首先请求数据的压缩传输。 这是通过带有规范“Accept-Encoding: gzip, deflate”的 HTTP 请求完成的。 可以指定一种或几种压缩方法，并且该示例接受 gzip 和 deflate 压缩数据。

重要的是，这只是一个请求，而不是一个需求——因此，服务器不必回复压缩数据。 如果数据不是以压缩形式提供的，它将简单地以未压缩的形式发送给请求的客户端。

大约 90% 的浏览器支持压缩。 通常不存在对“Accept-Encoding”设置或浏览器允许的压缩方法的影响。 浏览器要么支持数据压缩，要么不支持。

服务器使用所谓的“HTTP 响应”响应客户端的 HTTP 请求。 如果服务器支持压缩，则数据会被压缩传输到客户端。 然后，在 HTTP 响应的标头中，服务器会报告例如“Content-Encoding: gzip”。 否则，请求的资源会以未压缩的形式发送给客户端。

如何激活网站代码压缩？

根据服务器，可以使用适当的配置文件激活代码压缩。

Blogbeitrag

图 1： Gzip 压缩示意图

使用 .htaccess 激活代码压缩

在符合 NCSA 的 Web 服务器（例如，使用最广泛的 Web 服务器 Apache）上，可以使用 .htaccess 配置文件安装 Gzip 压缩。 为此，必须将以下代码插入到 .htaccess 文件中：

<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
SetOutputFilter DEFLATE
</文件匹配>
</IfModule>

首先，使用“<IfModule mod_deflate.c>”运行测试以查看是否安装了扩展模块 mod_deflate。 如果是这样，使用“<FilesMatch”\\.(js|css|html|xml)$”>”将确定过滤器应该应用于哪些文件类型。

JavaScript、CSS、HTML 和 XML 文件的示例过滤器。 使用“SetOutputFilter DEFLATE”，然后确定与先前指定的模式匹配的所有文件都使用 DEFLATE 过滤器发送出去。 随后，再次关闭该模块的匹配和查询。

理论上，此过滤器也可以应用于其他数据类型（例如 .jpg、.gif 或 .png 图像文件）。 文件匹配必须进行如下调整：

“<FilesMatch”\\.(js|css|html|xml|png|jpg|gif)$”>”

但是，这里需要注意的是，这些格式通常已经被压缩，并且重新压缩通常会导致图像文件质量下降。 因此，建议在上传二进制文件（例如图像）之前对其进行压缩，并避免使用 gzip 对其进行压缩。 JPEGmini 或 TinyPNG 等工具可用于此目的。

使用 PHP 激活代码压缩

如果您无权访问服务器的 .htaccess 文件，或者您只想传输单个 gzip 压缩文件，您可以选择使用以下代码启用压缩：

<?php ob_start("ob_gzhandler"); ?>

如果可能，这个函数应该放在第一个 HTML 代码之前。

例子：

<?php ob_start ( "ob_gzhandler" ); ?>
<html>
<正文>
<p>这应该是一个压缩页面。</p>
</正文>
</html>

压缩网站代码的 5 个陷阱

压缩 HTML 和其他网站代码也可能导致错误或风险。 你应该考虑以下几点：

1.通过 https 使用 Gzip 时，任何安全漏洞都可以被利用。 这可能会导致包含敏感信息的文件出现问题。 因此，不建议使用 Gzip 压缩包含敏感信息的文件类型。

2.压缩只能应用于文件类型或尚未压缩的文件。 图像文件通常已经按比例缩小，因此不应通过 gzip 额外压缩。 重新压缩甚至会产生相反的效果，您最终可能会得到更大的文件大小，或者压缩过程会占用太多内存。

3.压缩只能应用于大小合适的文件。 对于只有几个字节大小的文件，压缩会导致文件变得比原始文件更大。

4.在压缩阶段，注意不要压缩太多。 通常，弱压缩文件、正常压缩文件和高度压缩文件之间的文件大小差异很小。 然而，中等或重度压缩需要更多的计算能力。

5.由于压缩过程会替换相同或重复的字符串，因此使用变量和类名（例如，在 CSS 和 HTML 文件中）比所​​有变量和类命名不同的压缩成功率更高，因此几乎没有可能提供压缩。

细码的进一步优化措施

缩小 HTML 和其他策略

为了保持源代码清晰简洁，开发人员通常使用换行符、空格、缩进和其他使源代码易于阅读的字符。 为了以后更好地维护源代码，通常在注释的帮助下记录特别复杂的结构和部分。

搜索引擎爬虫不需要对开发人员非常有帮助的内容，因此应将其删除。 删除不必要的字符被称为“缩小”，它有助于节省宝贵的字节。 在下面使用免费的 JavaScript 库 jQuery 的示例中，通过缩小节省的字节数量令人印象深刻。

虽然版本 2.1.4 中框架的原始文件大小约为 242kb（jQuery 2.1.4.js（未压缩）），但删除不必要的字符和注释后减小的文件大小仅为约 82kb（jQuery 2.1.4. min.js（压缩））。 只有通过缩小——换句话说，通过减少不必要的字符——文件大小才能减少大约 66%。 一个了不起的结果。

komprimierung-e1438673459868

缩小过程前后的源代码

缩小适用于 HTML、CSS 和 JavaScript 文件的工作。

最重要的是，使用 Gzip 压缩可以将缩小的 jQuery 文件进一步缩小 65%。 从最初的 242kb，到最后只有不可思议的 29.5kb。

减少 CSS 和 JavaScript 代码的工具

为了减少 CSS 代码，您可以使用例如 YUI Compressor 或 cssmin.js。 还有一些工具可用于减少 JavaScript 代码。 Google PageSpeed Insights 推荐使用 Closure Compiler、JSMin 或 YUI Compressor。

提示：由于使用的换行符、空格和注释对于开发人员和快速、简单的维护非常重要，因此建议将文件保持在原始状态（带有不必要的字符）和优化/缩减状态的文件. 因此代码可以很容易地维护，但对于爬虫来说，它的下载速度也相当快。

结合 CSS 和 JavaScript 文件

通常情况下，网站的 HTML 标头中加载了多个 CSS 和 JavaScript 文件。 每次调用这些，这是一个需要浏览器处理的 HTTP 请求。 现代浏览器只能同时处理来自同一域的 2-8 个 HTTP 请求——所有其他请求都必须等待。

由于单个网站可能需要多达数百个 HTTP 请求，这造成了巨大的瓶颈。 例如，可以通过将所有 CSS 文件合并到一个文件中来防止这种情况，从而只表示一个 HTTP 请求。

这同样适用于通过 <script> 元素加载的 JavaScript 文件。 在这里，您还应确保如果技术上可行，则将所有 JavaScript 文件合并为一个文件。

应该注意的是，通常每种页面类型（例如杂志底部与产品详细信息页面）需要不同的 JavaScript 函数，因此需要不同的 JavaScript 文件。 在这种情况下，只加载每个页面类型实际需要的 JavaScript 和 CSS 文件是有意义的。 在这种情况下，将所有 JavaScript 文件组合成一个文件可能会带来不利影响。

此外，使用子域或内容交付网络 (CDN) 可能是有意义的。 不需要立即使用的脚本和资源可以使用 AJAX 重新加载。

压缩网站代码总结

通过使用 Gzip 或 Deflate 交付网站数据，可以显着缩短加载时间。 这两种方法都非常适合压缩 HTML、CSS 和 JavaScript 文件。 此外，缩小是另一种保持代码精简的有用方法。

由于搜索引擎爬虫在源代码中不需要开发者有用的换行、缩进等，因此可以减少这些不必要的字符。 还有一些有用的工具可以减少 CSS 和 JavaScript 代码。 这也可以节省很多字节。

为了防止网站需要过多的 HTTP 请求，可以将 CSS 和 JavaScript 文件组合在一起。 这些只构成一个 HTTP 请求，从而节省了额外的资源。

因此，即使在网站上只需几行代码和少量干预，也可以实现代码的最佳精简。 由于网站的加载时间是一个重要的 SEO 和排名因素，每个网站管理员都应该随着时间的推移处理这个问题。

网站代码的压缩可确保改善用户体验，从而对其他指标产生积极影响，例如转化率或停留时间。 这反过来又代表了整个公司成功的一个重要方面，并带来了满意的用户。

使用 10 天免费 Ryte 试用版分析和优化您的页面速度

现在开始！