最佳免费 CSS 和 JavaScript 缩小工具

目录

• 网站加载速度应该有多快？
• CSS 和 JavaScript 缩小工具有何帮助？
• 缩小的缺点是什么？
• 最好的 JavaScript 缩小工具
• 最好的 CSS 缩小工具
• WordPress 上最佳 CSS 和 Javascript 缩小插件
• 如何测试 CSS 或 JavaScript 缩小性能比较

右键点我复制链接地址，分享页面有积分。

---

如果您的目标是在Google Pagespeed或 GTMetrix上获得完美的 100/100 分数，那么缩小 CSS 和 JavaScript 将帮助您实现这一目标。

由于Google 早已宣布页面速度是桌面和移动设备 SEO 的主要排名因素，因此确保您的网站快速加载比以往任何时候都更加重要。

在本文中，我们将介绍可用于您自己的项目的最佳免费 CSS 和 JavaScript 缩小工具。 

最佳 JavaScript 缩小工具

• Closure Compiler
• UglifyJS2
• YUI Compressor
• JS Compress

最佳 CSS 缩小工具

• CSSnano
• CSSO
• UNCSS
• CSS-Minifier

适用于 WordPress 的最佳 CSS 和 Javascript 缩小工具

• Autoptimize
• Asset CleanUp Pro
• Fast Velocity Minify
• WP Rocket

---

网站加载速度应该有多快？

网站加载时间受多种因素影响，例如托管服务器、传输带宽量、网站设计、页面组件、浏览器和设备类型。Akamai的研究称 2 秒是电子商务网站“可接受性”的门槛。谷歌还提到，目标是在半秒以内。

如果您正在寻找更精细的方法来提高绩效，您需要遵循我们的如何提高 Lighthouse 绩效分数并了解所涉及的不同指标。

如果您需要遵循基准，以下是Google 的网络开发人员设定的标准：

• 最大内容绘制 (LCP)： LCP 应在页面首次开始加载后 2.5 秒内发生。
• 首次输入延迟 (FID)：页面的 FID 应该为 100 毫秒或更短。
• 累积布局偏移 (CLS)：页面应保持 0.1 的 CLS。或更少。

	好	差	百分位
LCP	≤2500ms	>4000ms	75
FID	≤100ms	>300ms	75
CLS	≤0.1	>0.25	75

---

CSS 和 JavaScript 缩小工具有何帮助？

脚本和样式表都是渲染阻塞资源，会导致首次输入延迟 (FCP) 和最大内容绘制 (LCP) 滞后。虽然还有其他方法可以提高网站的核心 Web 指标，但缩小可以显著增强网站性能和可访问性，从而立即转化为更好的用户体验。 

缩小是一个过程，它需要大量生成的 CSS 和 JavaScript 文件，并将代码压缩成尽可能小的大小，从而减少文件的膨胀，并减少网站的加载时间。 

它将显著提高您的网站性能和可访问性，从而立即转化为更好的用户体验，从而提高整体 SEO 性能。

---

缩小的缺点是什么？

由于主题、插件和服务器环境等特定于站点的因素，缩小可能会破坏其他复杂的脚本。缩小必须与其他性能优化技术结合执行。 

它本身可能无法带来巨额利润。备份您的文件，因为调试缩小的文件会更加困难。如果您使用 WordPress，我建议您跳到底部，了解缩小 CSS 和 JavaScript 文件的最佳方法。

---

最好的 JavaScript 缩小工具

这些 JavaScript 缩小工具都是免费的，可以通过命令行或网络应用程序安装在您的服务器上。它们还经常更新以获得最可靠的结果。

Closure Compiler

Closure Compiler 是 Google 支持的开源 JavaScript 缩小工具，它也可以优化您的代码。它是我们列表中最先进的 Javascript 压缩器。

这是一个值得考虑的可靠选择，解析和分析 JavaScript，在需要时重写代码，然后缩小。 

闭包还搜索类型检查！它检查语法、变量引用和类型，并警告您典型的 JavaScript 错误。这是一个有用的功能，因为从程序中消除死代码将有效减少内存，因此当可读性不是关键优先事项时，优势更大。 

然而，如果优先考虑代码可读性，则不建议使用闭包，因为编译的基础设施可能不够充分。即使 JavaScript 代码的可读性严重下降，但使用 Closure Compiler 服务后，代码的整体稳定性和优化度也会显着提高。

UglifyJS2

UglifyJS2 缩小、解析和优化您的 JavaScript。它是一种流行的 JavaScript 缩小工具，还具有调试设置。

还有一种“ Uglify Fast Minify 模式”，可以更快地缩小代码，因为“对于大多数 JavaScript 来说，空格删除和符号修饰占缩小代码大小的 95%，而不是复杂的代码转换。”

还有一个UglifyJS2 演示可用。

YUI Compressor

YUI Compressor 是独一无二的，因为它既是 CSS 又是 JavaScript 缩小工具。与此处未列出的其他流行 CSS 和 JavaScript 缩小工具相比，它可以平均将页面加载速度额外节省 20%。

它还可以毫无错误地压缩您的代码，因为它被设计为 100% 安全。

然而，自 2013 年以来，该工具的维护已停止，可被视为已终止的项目。

根据发布的 npm 版本节奏、存储库活动和其他数据点进一步分析 yui-compressor 的维护状态，确定其维护处于非活动状态。

JS Compress

JScompress 是一个免费的在线 javascript 压缩器，可以压缩和缩小您的 javascript 文件。压缩的 JavaScript 脚本适用于生产应用程序，因为它们通常可以将文件大小减少 30-90%。大部分文件大小的减小是通过删除不必要的注释和空白字符来实现的。

---

最好的 CSS 缩小工具

与上面列出的 JavaScript 缩小工具类似，这些 CSS 缩小工具都是免费的并且定期更新。

CSSnano

CSSnano 具有简化的缩小模式和激进的缩小模式，不仅可以删除空格等方面，还可以重写代码。

无论哪种情况，此缩小工具都会删除空白并压缩颜色、删除注释、丢弃覆盖的 at 规则、规范化 unicode 范围描述符（包括渐变参数）等等。

如果您不想安装CSSnano ，也可以访问它的在线版本。

CSSO

CSSO 通过删除空格等冗余来缩小您的 CSS，完成较短表单的替换，并通过合并声明、规则集等来重组您的 CSS。

调试选项也正在为未来的版本开发。

如果您不想安装CSSO，也可以访问它的在线版本。

UNCSS

UNCSS 是一个独特的缩小工具，因为它的唯一目的是从样式表中删除未使用的 CSS 。

这意味着您可以使用 UNCSS，然后通过其他 CSS 和 JavaScript 缩小工具运行代码以获得最佳结果。请务必事先测试您要使用的工具的兼容性，这样就可以避免错误。

CSS-Minifier

CSSMinifier 是一个在线缩小工具，有多种不同的设置可供选择。 

您可以从以下选项中进行选择：

• 最高（不可读，最小尺寸）
• 高（中等可读性，较小尺寸）
• 标准（可读性和大小之间的平衡）
• 低（可读性较高）

还有更多选择，例如 – 丢弃 CSS 属性（CSS 3.0、CSS 2.1、CSS 2.0 和 CSS 1.0）、向最终 CSS 添加时间戳。颜色应该被压缩，字体粗细也应该被压缩。删除所有无关的反斜杠和最后一个分号。

---

WordPress 上最佳 CSS 和 Javascript 缩小插件

如果您运行 WordPress 网站，您很可能不会使用 CSS 或 JavaScript 缩小工具。CSS 和 JavaScript 文件太多，根本无法考虑。

例如，

看看这个Divi 主题演示。如果点击“Inspect Element”，会显示正在加载 11 个 CSS 文件和 42 个 JS 文件。 

不仅如此，如果主题开发者为您提供更新，一旦您点击更新主题按钮，这些缩小将被替换，您将不得不重新开始。 

无论您使用主题还是开发自己的主题，您都可以使用WP Rocket等多个插件，只需点击几下即可自动缩小代码。

但首先，让我们从一些免费的 WordPress 性能插件开始，我们相信它们可以帮助您获得最佳的缩小效果。

Autoptimize

Autoptimize是最广泛使用的 WordPress 缩小插件之一。除了缩小脚本之外，它还可以缓存脚本和样式，自动将 CSS 注入页眉，并将脚本移动和推迟到页脚。为开发人员提供了多种复杂的选项以及大型 API，可让您根据站点的具体要求调整 Autoptimize。它也是免费的！

Asset Cleanup Pro

Asset Cleanup Pro 旨在帮助您从 WordPress 安装中删除不需要的 CSS 和 javascript。它动态地组合、缩小和缓存脚本和样式表。它旨在与任何 WordPress 主题和插件兼容。

优化 CSS 部分允许您组合样式表以降低网站的整体页面大小。它具有缩小、延迟和合并选项。

JavaScript 优化区域的操作方式与优化 CSS 部分的操作方式相同。JavaScript 可以根据需要进行缩小、组合和内联。但是，内联仅在专业版中可用。

Fast Velocity Minify

Fast Velocity Minify 是一个开源插件，可通过对 CSS 和 JS 资源进行分组来减少 HTTP 请求。这个插件最好的部分是它会自动缩小 CSS、JS 和 PHP 文件。此外，缩小过程是实时且仅在前端进行的。

默认情况下，此插件提供缩小 HTML、JavaScript 和 CSS 的选项。但是，您可以通过前往“设置”中的“Fast Velocity Minify”页面手动禁用其中一个或多个。您还可以选择排除特定文件以使其不被缩小。

通过该插件，开发人员和专家用户可以使用更多定制可能性。然而，默认设置对于绝大多数用户来说已经足够了。

WP Rocket

使用非常简单功能非常强大，供任何人使用。 下载并安装到您的站点后，转到“设置”>“WP Rocket”，然后单击“文件优化”选项卡。

然后，单击“缩小 CSS 文件”和“缩小 JavaScript 文件”复选框。

单击“激活缩小”按钮确认您想要缩小每种类型的文件，然后单击页面底部的“保存更改”。

注意：请注意，有时这些选项可能会破坏您的网站。您需要单独启用这些文件中的每一个，并进行测试以查看哪些文件可能会破坏您的网站。

每次启用缩小功能时，请务必清除缓存，看看它是否会破坏您的网站。您还可以先在测试站点上测试这些选项，然后再在生产服务器上启用它们。

在保存更改之前，请务必备份并测试您的网站。

---

如何测试 CSS 或 JavaScript 缩小性能比较

如果您的目标是在网站速度测试中获得 100% 的分数，您将需要使用 Google 的 PageSpeed 洞察工具和/或 Lighthouse。 

要使用PageSpeed Insight进行测试，请输入您的网站 URL 并单击分析：

您可以在下面看到您的测试结果：

一旦您缩小了 CSS 或 JavaScript，它将从“机会”移至“通过审核”：

PageSpeed 洞察工具使用 Lighthouse 来分析给定的 URL，因此您可以选择其中之一。

要使用 Lighthouse 进行测试：右键单击并检查元素 (PC) 或检查 (Mac)>>单击 Lighthouse 并生成报告

注意事项

为了获得最佳结果，请在隐身模式下运行多项测试：