如何缩小 WordPress 网站的 CSS、HTML 和 JavaScript

已发表: 2023-02-28

缩小是一个简单的概念，通常被推荐作为加快网站速度的一个步骤。 但现实是，当许多网站所有者试图缩小文件并最终破坏他们的网站时，他们会感到无尽的沮丧。

那么什么给出呢？

缩小通常需要大量的实验。 虽然有许多可用的解决方案，但它们的行为方式会因站点而异，具体取决于您使用的主题和插件。

在这篇文章中，我们将探讨什么是缩小、它的好处以及一些更流行的缩小解决方案（手动和插件），以帮助您找到适合您网站的正确解决方案。

什么是缩小？

网站由许多不同的文件组成。 如果您使用 Google PageSpeed Insights 测试网站速度，您可能会收到缩小 HTML、CSS 和 JavaScript 文件的建议。

问题？ 作为人类，我们编写这些文件中包含的代码，以便我们可以读取它们，但计算机不关心注释、格式、空格和换行符等字符。 因此，当他们在网站文件中遇到这些不必要的字符时，他们会忽略它们。

这就是缩小的用武之地。 缩小是一个编程术语，基本上意味着删除代码执行不需要的任何不必要的字符。 缩小的工作原理是分析和重写代码以减小文件的总体大小，从而减小网站的总大小，从而使其在用户浏览器中加载得更快。

例如，您可能会在样式表中找到以下一些 CSS： 

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

这是上面 CSS 示例的缩小版本： 

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

看看代码压缩了多少？

在发送响应之前，在 Web 服务器上执行压缩。 压缩后，Web 服务器使用更小的压缩文件（速度更快）来代替原始文件，从而在不牺牲功能的情况下降低带宽。

正如 SEO 专家 Yoast 所解释的那样，缩小文件最多可以节省 30-40%，在某些情况下甚至可以节省 50%。

为什么应该缩小 HTML、CSS 和 JavaScript 文件

拥有一个快速的网站不仅能让 Google 满意，还能帮助您的网站在搜索中排名更高，而且还能为您的网站访问者提供更好的用户体验。

缩小有很多好处：

  • 较小的文件意味着您网站的总下载大小会减少，
  • 网站访问者将能够更快地加载和访问您的页面，
  • 网站访问者将获得相同的用户体验，而无需下载更大的文件，并且
  • 由于通过网络传输的数据较少，站点所有者将获得较低的带宽成本。

如何缩小 HTML、CSS 和 JavaScript 文件

在缩小站点文件之前，最好先进行备份。 更好的是，缩小暂存站点上的文件，以便您可以在对实时站点进行更改之前检查一切是否正常。

在缩小文件之前和之后对页面速度进行基准测试也很重要，以便您可以比较结果并查看缩小是否产生任何影响。

我最喜欢的速度测试网站是 GTmetrix。 它使用 Google PageSpeed Insights 和开源性能测试工具 YSlow 来分析您的页面速度性能。 然后，它会生成分数并提供网站优化改进的建议。

我可以推荐的其他出色的速度测试工具包括 Pingdom 网站速度测试和 WebPageTest 以及测试您的移动速度。

手动缩小文件

手动缩小文件需要花费大量的时间和精力。 我的意思是，谁有时间从文件中删除单个空格、行和不必要的代码？ 无聊的！ 此外，它还为人为错误提供了更多空间。 所以我不推荐这种方法来缩小文件。

幸运的是，有许多免费的在线缩小工具可让您从网站复制代码并粘贴到网站。 这里有一个简短的工具列表，我鼓励您研究可能更适合您的网站的其他选项。

1. Will Peavy 的 HTML 压缩器

Will Peavy 的 Minifier 工具。
Will Peavy 的 Minifier 工具。

HTML Minifier 是一个使用 PHP 构建的免费在线 HTML 缩小工具。 要使用该工具，只需将 HTML 粘贴到文本区域，包括标记中的 JavaScript 的任何 CSS，然后单击“缩小”按钮。 为了确保您的脚本在缩小后可以正常工作，建议您使用分号终止 JavaScript 语句，并使用* *语法进行注释。

2. CSS 缩小器

CSS Minifier 在线工具。
CSS Minifier 在线工具。

另一个免费工具 CSS Minifier 的工作原理是缩小您复制并粘贴到“输入 CSS”文本区域的 CSS。 有一些选项可以将缩小的输出下载为文件。 对于开发者来说，这个工具还提供了API。

3.JS压缩

JS压缩工具。
JS压缩工具。

JScompress 是一款在线 JavaScript 压缩器，可让您将 JS 文件压缩并缩小至原始大小的 80%。 要使用它，请复制并粘贴代码或上传并合并多个文件，然后单击“压缩 JavaScript”。 该工具基于 UglifyJS 3 和 babili-standalone。

供开发人员使用的手动缩小工具

对于寻求更高级选项的开发人员，Google 推荐以下 HTML、CSS 和 JavaScript 缩小资源：

  • HTMLMinifier – 基于 Javascript 的 HTML 压缩器/压缩器（支持 Node.js）。
  • CSSNano – 一个模块化的压缩器，构建在 PostCSS 生态系统之上。
  • CSSo – 具有结构优化的 CSS 压缩器。
  • UglifyJS – JavaScript 解析器、修饰器、压缩器和“美化器”工具包。

Google 的 Closure Compiler 是 JavaScript 的优化工具。 它不是从源语言编译为机器代码，而是从 JavaScript 编译以生成更好的 JavaScript。 它解析您的代码，分析它，删除死代码并重写和最小化剩下的代码。 该工具还检查语法、变量引用和类型，并对常见的 JavaScript 陷阱发出警告。

使用插件缩小文件

有一些很棒的插件可用，无论是免费的还是付费的，它们都可以缩小您的文件，而无需执行手动步骤。

注意：在此列表中，我仅包含 WordPress 插件存储库中提供的免费插件，这些插件是最新的且经过测试与最新版本的 WordPress 兼容。 对于高级选项，请向下滚动。/

1. HTML 缩小

HTML 缩小插件。
HTML 缩小插件。

这个简单、轻量级且无麻烦的插件使您能够缩小网站的 HTML 输出。 要使用它，您所需要做的就是安装并激活该插件，它会自动缩小您的标记，而无需配置任何设置。

2. 缩小 HTML

缩小 HTML 插件。
缩小 HTML 插件。

我喜欢 WordPress.org 对此插件的描述：“有没有看过您网站的 HTML 标记，并注意到它看起来有多么草率和业余？” 该插件清理并缩小了草率的标记。

与 HTML Minify 插件不同，该工具提供了更多选项。 它包括 JavaScript 和 CSS 的可选缩小功能，但不会扰乱文本区域或预格式化文本。 还有用于删除 HTML、CSS 和 JavaScript 注释（保留 MSIE 条件注释）、从 HTML5 void 元素中删除不必要的 XHTML 结束标记以及从链接中删除不必要的相关方案和域的选项。

3.合并+缩小+刷新——WordPress插件

合并+缩小+刷新插件
合并+缩小+刷新插件。

这个插件的作用不仅仅是缩小你的代码。 它结合了 CSS 和 JavaScript 文件，然后使用 Minify（对于 CSS）和 Google Closure（对于 JavaScript）缩小生成的文件。 缩小是通过 WP-Cron 执行的，因此不会影响您的网站速度。

当 CSS 或 JS 文件的内容发生更改时，它们会被重新处理，因此无需清空缓存。 多站点用户会很高兴知道这个插件在网络上运行良好。

4.JCH优化

JCH 优化插件。
JCH 优化插件。

JCH Optimize 拥有许多免费插件的优秀功能：它组合并缩小了 CSS 和 JavaScript，缩小了 HTML，用于组合文件的 GZip 压缩，用于背景图像的精灵生成，并且您可以从组合中排除某些文件以解决冲突。

有一个专业版本提供更多优化功能，包括异步加载 JavaScript、优化 CSS 交付以消除渲染阻塞、CDN/无 cookie 域支持以及图像的延迟加载和优化。

5. CSS 缩小

CSS 缩小器插件。
CSS 缩小器插件。

使用此插件缩小 CSS 非常简单 - 只需安装、激活，转到“设置”>“CSS 缩小”即可启用一个选项：优化和缩小 CSS 代码。

该插件中的代码是从流行的 Autoptimize 插件中派生出来的（更多关于该插件的信息请参见下文）。 该插件的作者 Peter Pfeiffer 有一个类似的 JavaScript 插件，Minify JavaScript。

6. 快速缩小

Fast Velocity Minify 插件
Fast Velocity Minify 插件。

拥有超过 20,000 个活跃安装和五星级评级，这是用于缩小文件的更流行的选项之一。 要使用它，请安装并激活该插件，然后转到“设置”>“Fast Velocity Minify”。 在那里，您将找到一堆用于配置插件的选项，包括开发人员的高级选项 JavaScript 和 CSS 例外、CDN 选项以及服务器信息。 但是，默认设置对于大多数站点来说都可以正常工作。

该插件仅在第一个未缓存的请求期间在前端实时执行缩小。 处理第一个请求后，任何需要相同 CSS 和 JavaScript 集的其他页面都将使用相同的静态缓存文件。

7. 自动优化

自动优化插件
自动优化插件。

Autoptimize 拥有超过 400,000 个活跃安装量，无疑是 WordPress 插件存储库中最受欢迎的缩小工具。

Autoptimize 可以聚合、缩小和缓存脚本和样式，默认将 CSS 注入页眉，还可以将脚本移动和推迟到页脚。 有许多供开发人员使用的高级选项和广泛的 API，因此您可以定制 Autoptimize 以满足您网站的特定需求。

8.蜂鸟页面速度优化

蜂鸟优化插件
蜂鸟优化插件。

Hummingbird 是 WordPress 插件存储库中一个相对较新的插件，最初是一个高级插件。 免费版本具有大量网站优化工具，包括缩小工具，使您能够缩小、定位和组合文件以获得最佳性能。

还有一个很棒的扫描功能，可以让您直接从插件中测试网站的性能并获得可操作的建议来改进您的网站。

缩小作为 WordPress 缓存插件中的一项功能

缩小通常是缓存插件中的一个标准功能。 以下是我测试过并可以推荐的插件：

  • WP火箭
  • W3 总缓存
  • WP超级缓存

结论

我希望本文能够为您揭开缩小的神秘面纱，并让您深入了解它是什么以及如何将其应用到您的网站。

重要的是要记住，缩小更多的是一个微调步骤 - 您可能会看到网站速度略有提高，但不会很显着。 也就是说，除了其他性能和优化技术（例如组合文件）之外，这是值得实施的最佳实践。

另外，请确保在缩小文件时配置、测试、重新配置、重新测试、调整并检查最适合您网站的内容，因为每个网站都是不同的。

如果您喜欢这篇文章，请查看 6 个最佳 WordPress 缓存插件比较，以获取有关如何加快网站速度的更多建议。

您是否尝试过缩小代码？ 您还使用过哪些其他方法来提高您的网站速度？ 请在下面的评论部分告诉我们！