目录
您是否正在寻找一种方法来缩小 WordPress 网站的 CSS 和 JavaScript？如果您最近对 PageSpeed Insights 进行了性能审核，您可能已经注意到以下建议：“缩小 CSS”和“缩小 JavaScript”。
如果 PageSpeed Insights 认为您的 CSS 和 JS 文件大于需要的大小，它会标记您的所有内容。
本文解释了 CSS 和 JavaScript 的缩小意味着什么，为什么它对性能很重要，以及您可以使用哪些在线工具和插件来缩小文件。
什么是缩小？
缩小的字面意思是去除 CSS 和 JavaScript 文件中不需要的部分以使其更加紧凑。当开发人员编写代码时，它们将包含换行符、空格和注释，这些使代码更易于阅读，但浏览器不需要这些代码来处理代码。这种优化技术是在不改变通用代码的主要功能和行为的情况下完成的，同时显着减小了它们的文件大小。
缩小的主要好处是减少带宽使用、页面大小和加载时间。
您可以缩小哪些资源？JavaScript 和级联样式表 （CSS） 都是可以进行缩小的资源。让我们回顾一下这两种优化。
什么是 CSS 缩小？
CSS 缩小是指将 CSS 从原始大小最小化到最小大小，而不会影响其主要功能并破坏页面的设计。
什么是 JavaScript 中的缩小？
JavaScript 缩小是使 JS 代码更紧凑的过程，以确保尽快解析和交付文件。
注意：HTML 也可以缩小。生成的 HTML 页面将是原始文件的较小版本，并且它将保持完全有效的代码。
缩小与压缩有什么区别？
缩小和压缩之间的主要区别在于文件大小的减小方式。压缩 （GZIP） 是指将重复代码替换为使用比文本更少的空格的指针。例如，在 GZIP 压缩后，您不会在代码文件中看到每个 <div 或 {。如果 GZIP 发现一些重复的文本或字符，它不会显示所有匹配项。
压缩是一种以较小大小存档文件以加快请求速度并缩短数据传输时间的操作。因此，压缩后的代码在执行前必须解压缩，而缩小后的代码仍然是可以立即运行的有效代码。
通过缩小和压缩，页面将具有更小的资源（由更少的代码组成），但访问者将看到相同的内容。
为什么 CSS 和 JS 缩小很重要
CSS 和 JS 缩小对于减小文件大小、提高页面性能和通过相关的 PageSpeed Insights 审核非常重要。让我们回顾一下缩小的主要好处。
缩小有助于提高性能
CSS 和 JS 缩小在四个不同的层面上提高 WordPress 网站的性能：
- 缩短加载时间
JS 和 CSS 缩小可以提高页面性能并缩短网站的加载时间。例如，在缩小 JavaScript 时，您可以获得较低的 JS 文件负载，从而减少解析脚本所花费的时间。这样可以加快页面加载速度并改善页面体验。
- 改进最大内容绘制 （LCP）
最大内容绘制 （LCP） 是一项 Core Web Vitals 指标，可准确衡量页面的最大元素何时对用户可见。缩小可以帮助解决 LCP 不佳的原因。Web.dev 建议使用这两种技术来缩短服务器响应时间、减少 JS 和 CSS 阻塞时间以及缩短资源加载时间。其他 Core Web Vitals 指标是 Cumulative Layout Shift 和 Interaction to Next Paint。
- 减小文件大小以加快交付速度
根据 CSS 技巧，Gzip 将文件大小减小了大约五倍。建议使用缩小功能，以稍微提升您的网站并加快数据传输速度。
- 减少 CDN 计费带宽使用
缩小可缩短加载时间并优化脚本文件，从而减少网页的 CDN 带宽消耗。CDN 通常根据从服务器传输到客户的数据量向您收费。由于缩小的代码需要较少的带宽，因此它将降低 CDN 的每月成本。
缩小解决了特定的 PageSpeed Insights 审计
在 PageSpeed Insights 上运行性能审计时，您可能会看到一些与缩小相关的建议。
在下面的示例中，PSI 建议“缩小 CSS 和 JS”以节省 2.47 秒和 2.4 秒。它还标记了需要优先优化的 URL。PageSpeed Insights 会触发以下规则，因为您可以通过缩小来减小资源的大小：
如前所述，缩小也会影响最大内容绘制 （LCP） 等级。
现在我们已经解释了什么是缩小对性能至关重要的，让我们回顾一下缩小您网站上的 CSS 和 JavaScript 的技术。
如何在 WordPress 中缩小 CSS 和 JavaScript
您可以使用在线和开发工具或在 WordPress 插件（如 Google 推荐）的帮助下缩小 CSS 和 JS。
如何在没有插件的情况下缩小 CSS 和 JS
让我们回顾一下缩小 JS 和 CSS 的主要技术。
在线工具
- Toptal （以前称为 Javascript 缩小器） – 带有 API 的用户友好工具。
它也适用于 CSS：
- CleanCSS.com – 一个简单的在线资源，用于压缩和缩小 CSS 和 JS。
开发和服务器工具
- UglifyJS – NodeJS 有大量的 CLI 库来缩小代码，UglifyJS 就是其中之一。
- Visual Studio、XCode（Apple 的用户）、Netbeans – 它们都是帮助手动缩小 JS 或 CSS 的 IDE（集成开发环境）。大多数 IDE 和代码编辑器都有允许自动缩小的扩展。例如，这是 Visual Studio 的扩展市场：
- 服务器端缩小 – 一些服务器 Nginx 或 Apache 可以扩展为使用自定义模块进行缩小。让我们来看两个例子。
- Nginx 的自定义模块：Nginx Minify（来自 Github）
- Apache 的自定义模块：Apache 还可以使用带有库的 “mod_ext_filter” 自动缩小。
- 内容分发网络 （CDN） – 其中许多网络支持缩小边缘资产。一个流行的例子是 Cloudflare，它的 “auto minify option”：
想要了解更多信息？查看我们关于最佳 免费CSS 和 JS 缩小工具的指南。
如果您不习惯操作 JavaScript 和 CSS 文件并将其重新上传到您的服务器，您可能更喜欢使用 WordPress 插件来为您完成这项工作。
如何使用 WordPress 插件缩小 CSS 和 JS
PageSpeed 建议使用 WordPress 插件来缩小 CSS 或 Javascript。
在最好的缩小插件中，您会发现：
- WP Rocket – 完整的性能套件，可缩小多个 CSS 和 JS 文件并应用 GZIP 压缩。WP Rocket 也是 WordPress 最好的缓存插件之一。
- Autoptimize – 它可以聚合、缩小和压缩脚本和样式。
- Asset Clean-up – 它缩小 CSS 和 JS 文件，包括样式和脚本标签中的内联代码。
缩小完成后，我们建议进行以下两项验证：
- 检查页面在前端没有损坏（该过程偶尔会破坏脚本的工作方式或样式渲染）。
- 验证缩小是否正常工作。
如何检查缩小是否有效？
- 通过 Google PageSpeed Insights 运行您的 URL 并滚动到 “诊断” 区域。如果 Lighthouse 没有标记任何问题，则您的网站正在缩小代码。
- 转到 SEO Site Checkup 并对您的网站进行快速审核。如果 CSS 被缩小，您将像下面的示例一样传递：
缩小对速度的真正影响是什么？
我们已经看到了缩小如何帮助提高 WordPress 网站的性能（甚至 Google 也建议进行此类优化）。
要了解缩小对性能的重要性，让我们对 PageSpeed Insights 进行审计。将分为三个步骤：
步骤#1 – PageSpeed Insights 审计，没有任何优化
我从 Lighthouse 得到的建议与优化我的 CSS 和 JS 有关，包括它的缩小：
我还看到了一些渲染阻塞问题，估计节省了 1.43 秒。为什么这与缩小有关？PSI 建议缩小 CSS 以消除阻止渲染的资源。缩小是解决此类建议的重要性能技术;但是，您应该做一些其他事情来完全解决这个问题。
整体表现也不是很好，成绩为 69/100：
步骤#2 – WP Rocket 的缩小和 GZIP 压缩
激活 WP Rocket 后，我可以看到性能和 PSI 审计方面的一些即时改进，即：
- “Minify CSS”和“Minify JS”问题已解决，并移至“通过审核”部分。
- 我关于缓存和压缩的警告也得到了修复，因为 WP Rocket 会自动启用页面和浏览器缓存以及 GZIP 压缩：
- 多亏了缩小，我的整体表现从 69/100 上升到 82/100，这是一个不错的进步。
- 我的 LCP 现在是橙色（缩小后为 2.1 秒），而之前为 5.4 秒。
结束语
今天，我们正在构建越来越高级的网站，这些网站需要更多的功能、更多的代码（有时还需要更多的插件）。缩小 CSS 和 JavaScript 的关键在于，它们都是阻碍渲染的资源——如果不进行优化，它们会影响性能。
缩小代码是减小 JS 和 CSS 文件大小的最佳方法之一。较小的文件可以提高下载速度，这在很大程度上取决于您网站的大小。
发表回复