使用这三个HTML缩小工具切割文件大小

关键要点

• HTML压缩，即去除文档中冗余元素的过程，可以减小文件大小并提高代码可维护性。尽管对其有效性存在一些争议，但Google的PageSpeed Insights仍推荐此方法。
• 三款可自动执行HTML压缩的工具分别是Minimize、Will Peavy的HTML Minifier和Kangax HTML Minifier。每款工具都具有独特的特性和功能，例如删除HTML注释、不必要的属性和空格。
• 将HTML压缩与GZipping（一种用指针替换重复字符串的技术）结合使用，可以进一步减小文件大小。尽管这两种技术的结果不同，但同时使用两者可以节省少量字节。

本文是与SiteGround合作创作的系列文章的一部分。感谢您支持使SitePoint成为可能的合作伙伴。

尽管对HTML压缩的好处没有明确的共识，但如果您在Google的PageSpeed Insights上测试您的网站，您可能会得到的结果一部分是您应该压缩HTML、CSS和JavaScript。

压缩资源意味着去除冗余元素，即浏览器正确处理文档不需要的元素。

将此概念应用于HTML文档，压缩可能包括：

• 删除HTML注释，以及内联CSS和JavaScript代码中的注释
• 删除HTML代码以及内联CSS和JavaScript中的空格
• 删除不必要的引号、空属性等
• 删除CDATA节

这些操作有助于减小文件大小，同时也使保持代码简洁和可维护性更容易。

GZipping与压缩资源的比较

如果您正在使用GZip，是否仍然值得压缩HTML？

反对HTML压缩的一个论点是，压缩HTML页面已经去除了空格并减小了文件大小。这使得压缩变得相当无用。

首先，必须指出的是，这两个操作并不相同，并且不会获得相同的结果。

压缩的结果创建一个由完全有效的代码组成的文件，浏览器可以像相同文件的未压缩版本一样解析和执行它。另一方面，

GZipping查找所有重复的字符串，并用指向该字符串第一个实例的指针替换它们。……在网络上，GZipping是由您的服务器直接完成的。……服务器压缩文件并像那样通过网络发送它。浏览器接收文件并在使用前解压缩它。

Chris Coyer在CSS Tricks上

也就是说，使用这两种技术可以节省少量字节。例如，在《GZipping与压缩HTML文件的效果》中，Mads Kristensen讨论了一个小型实验，该实验包括压缩和压缩四个流行网站（即amazon.com、cnn.com、twitter.com和xbox.com）的HTML文件。结果表明，通过进行压缩和压缩，文件大小减少了9-16%。

以下工具将自动为您执行压缩过程。

Minimize

Minimize是一个基于node-htmlparser2的开源服务器端HTML5压缩器。

此工具：

• 可以压缩HTML5代码（不是旧的HTML草稿，没有内联PHP代码或模板文件）
• 它高度可配置
• 可以区分条件IE注释

……等等。您可以访问GitHub上的项目页面了解更多详情。

Will Peavy的HTML Minifier

HTML Minifier是一个使用PHP构建的HTML压缩在线工具。

要使用它，请将您的HTML粘贴到文本框中，包括您可能添加到标记中的任何CSS和JavaScript，然后单击“压缩”按钮。

为了确保脚本在压缩后仍然有效，Peavy建议您用分号（;）终止JavaScript语句，并使用多行注释(/* */)

Kangax HTML Minifier

Kangax HTML Minifier是一个基于JavaScript的HTML压缩器，具有强大的功能。

这些只是此工具的一些功能：

• 删除HTML注释
• 删除样式和脚本中的注释
• 删除CDATA节
• 删除属性的引号
• 删除不必要的属性
• 删除空白属性
• 通过HTMLLint验证输入

您可以根据自己的需要配置每个选项。

要了解有关HTML Minifier的更多信息，您可以在Kangax的《HTML Minifier实验》和《完美扼杀》中找到所有信息。

结论

虽然不像压缩CSS和JavaScript那样常见，但HTML压缩是Google的PageSpeed Insights建议的一部分。是否值得这样做仍然是一个悬而未决的问题。

在本文中，我列出了三个工具，它们可以帮助您通过自动化许多HTML压缩任务来减少网页的字节数。

您呢，您认为压缩HTML是一个好主意吗？您最喜欢的HTML压缩工具是什么？

关于HTML压缩工具的常见问题解答

什么是HTML压缩，为什么它很重要？

HTML压缩是从HTML文档中删除不必要或冗余数据而不影响其功能的过程。这包括删除空格、换行符、注释和块分隔符。HTML压缩的重要性在于它能够减小HTML文件的大小，从而加快网站加载速度。更快的加载速度可以改善用户体验，并可以提高您网站的SEO排名。

HTML压缩工具是如何工作的？

HTML压缩工具通过分析和重写网站的文本部分来减小其整体文件大小。它们删除不必要的字符，例如空格、换行符和注释，而不会改变网站的功能。有些工具还提供其他功能，例如CSS和JavaScript压缩，以及自动HTML Tidy，这可以进一步优化您的网站。

一些最好的HTML压缩工具是什么？

有几种可用的HTML压缩工具，每种工具都有其独特的特性。一些最流行的工具包括HTMLMinifier、Minify和CleanCSS。HTMLMinifier是一个高度可配置的、经过良好测试的、基于JavaScript的HTML压缩器。Minify是一个PHP5应用程序，可帮助您遵循客户端性能的几条规则。它组合多个CSS或JavaScript文件，删除不必要的空格和注释，并使用gzip编码和最佳客户端缓存标头提供它们。CleanCSS是一个功能强大的CSS优化器和格式化程序。

HTML压缩会影响我的网站功能吗？

如果操作正确，HTML压缩不应影响您的网站功能。它只删除不必要的字符，而不会改变代码的功能。但是，压缩后始终最好测试您的网站，以确保一切正常运行。有些工具还提供“安全模式”功能，确保只进行安全的优化。

HTML压缩是一次性过程吗？

不，HTML压缩不是一次性过程。每次更新或更改HTML文件时，都应再次压缩它们，以确保它们尽可能优化。有些工具提供自动压缩功能，这可以节省您的时间和精力。

HTML压缩会改善SEO吗？

是的，HTML压缩可以改善您网站的SEO。通过减小HTML文件的大小，压缩可以加快网站的加载速度。更快的加载速度可以改善用户体验并提高您网站的SEO排名。

我可以同时压缩CSS和JavaScript以及HTML吗？

是的，许多HTML压缩工具还提供CSS和JavaScript压缩。这允许您优化网站代码的所有方面，进一步提高加载时间和整体性能。

我可以使用HTML压缩将文件大小减少多少？

文件大小的减少量取决于原始HTML文件的大小以及它们包含多少不必要的数据。但是，您通常可以预期将文件大小减少10-20%。

与HTML压缩相关的风险有哪些？

与HTML压缩相关的最大风险是，如果过程操作不正确，则可能出现错误。这就是为什么压缩后始终最好测试您的网站的原因。有些工具还提供“安全模式”功能，确保只进行安全的优化。

所有网站都需要HTML压缩吗？

虽然并非所有网站都严格需要HTML压缩，但它是提高网站加载时间和性能的最佳实践。对于具有大型HTML文件或希望优化其SEO的网站，它尤其有益。

以上是使用这三个HTML缩小工具切割文件大小的详细内容。更多信息请关注PHP中文网其他相关文章！