5分钟生成10篇英文软文article forge软件试用

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

google广告开户

由于谷歌早就宣布页面速度是桌面和移动设备搜索引擎优化的主要排名因素,因此确保您的网站快速加载比以往任何时候都更加重要。

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

如果您赶时间,这里有一个快速的最佳免费 CSS 和 JavaScript 缩小工具列表:

最佳 JavaScript 缩小工具

最佳 CSS 缩小工具

WordPress 的最佳 CSS 和 Javascript 缩小工具

网站加载速度应该多快?

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

如果您正在寻找更精细的方法来提高您的性能,您需要了解我们如何提高您的 Lighthouse 性能得分并了解所涉及的不同指标。

如果您需要遵循基准,以下是 Google 将 web dev 设置为标准的内容:

WordPress divi主题
好的 贫穷的 百分位数
最大的内容涂料 ≤2500ms >4000ms 75
首次输入延迟 ≤100ms >300ms 75
累积版面偏移 ≤0.1 >0.25 75

CSS 和 JavaScript 缩小工具如何提供帮助?

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

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

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

缩小的缺点是什么?

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

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

最好的 JavaScript 缩小工具

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

闭包编译器

闭包编译器

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

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

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

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

fiverr建站WordPress程序员

丑化JS2

丑化JS2

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

还有一个“Uglify 快速缩小模式”可以更快地缩小你的代码,因为“对于大多数 JavaScript 来说,空白删除和符号修改占缩小代码大小的 95%——而不是复杂的代码转换。”

还有一个 UglifyJS2 演示可用。

YUI 压缩机

YUI 压缩机

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

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

独立站选品工具

但是,自 2013 年以来,它对该工具的维护处于非活动状态,并且可以被视为已停止的项目。

根据发布的 npm 版本节奏、存储库活动等数据点进一步分析 yui-compressor 的维护状态,确定其维护为 Inactive。

JS 压缩

JS 压缩

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

高质量外链购买

最好的 CSS 缩小工具

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

CSSnano

CSSnano

CSSnano 有一种简化的缩小模式以及一种激进的模式,它不仅可以删除空格等方面,还可以重写你的代码。

在任何一种情况下,此缩小工具都会删除空白并压缩颜色、删除注释、丢弃覆盖的 at 规则、规范化 unicode 范围描述符(包括渐变参数)等等。

JasperAI 10000字免费额度试用

如果您不想安装 CSSnano,也可以通过在线版本访问它。

社会保障组织

CSSO:WordPress 的最佳缩小工具

CSSO 通过删除诸如空格之类的冗余来缩小您的 CSS,完成较短形式的替换,并通过合并声明、规则集等来重组您的 CSS。

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

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

联合国CSS

联合国CSS

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

WordPress备份工具updrafplus

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

CSS-缩小器

CSS-缩小器

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

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

  • 最高(无可读性,最小尺寸)
  • 高(中等可读性,较小的尺寸)
  • 标准(可读性和大小之间的平衡)
  • 低(更高的可读性)

还有更多的选择,比如——Discard CSS properties(CSS 3.0, CSS 2.1, CSS 2.0 and CSS 1.0),给最终的CSS添加时间戳。 颜色应该被压缩,字体粗细也应该被压缩。 删除任何多余的反斜杠和最后的分号。

通过插件为 WordPress 提供的最佳 CSS 和 Javascript 缩小工具

如果您运行 WordPress 网站,您很可能不会使用 CSS 或 JavaScript 压缩工具。 有太多的 CSS 和 JavaScript 文件供您考虑。

例如,

看看这个 Divi 主题演示。 如果单击“检查元素”,它会显示 11 个 CSS 文件和 42 个 JS 文件正在加载。

  Divi 主题演示 CSS 文件示例
Divi 主题演示示例和 CSS 文件数量

添加标题和替代文字

  Divi 主题演示 CSS 文件示例
Divi 主题演示示例和 JavaScript 文件数量

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

无论您是使用主题,还是开发自己的主题,您都可以通过使用 WP Rocket 等多个插件,在几次点击中自动缩小您的代码。

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

自动优化

自动优化缩小设置

Autooptimize 是使用最广泛的 WordPress 缩小插件之一。 除了缩小脚本之外,它还可以缓存脚本和样式,自动将 CSS 注入页眉,以及将脚本移动和延迟到页脚。 开发人员有几个复杂的选项以及一个大型 API,可让您根据站点的确切要求调整 Autoptimize。 它也是免费的!

资产清理

资产清理缩小设置

Asset Cleanup 是一个免费插件,带有专业版,它试图帮助您从 WordPress 安装中删除不需要的 CSS 和 javascript。 它在运行中组合、缩小和缓存脚本和样式表。 它旨在与任何 WordPress 主题和插件兼容。

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

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

快速缩小

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

Fast Velocity Minify JavaScript 缩小设置
Fast Velocity Minify JavaScript 缩小设置

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

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

WP火箭

最后,让我们提一下我们的产品 WP Rocket。 这是一个与大多数其他插件一样安装的插件,但我们的主要重点是让任何人都可以轻松使用它。

在您的站点上下载并安装 WP Rocket 后,转到“设置”>“WP Rocket”,然后单击“文件优化”选项卡。

然后,单击缩小 CSS 文件和缩小 JavaScript 文件复选框。

WP Rocket 缩小工具设置

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

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

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

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

有关详细信息,请查看减少缩小文件的数量和解决文件优化问题以获取详细信息。

为什么在这里提到 WP Rocket?

这是一个高级网络性能插件,因此需要付费。 当我们刚刚提到您可以选择的免费插件时,想知道为什么要为插件付费?

如果您只是在寻找缩小 CSS 和 JavaScript 修复程序,您可以选择上面所有推荐的工具。 然而,PageSpeed Insight 或整个网络的性能远不止这些。

WP Rocket 还提供其他选项,例如强大的页面缓存和缓存预加载。 它会定期更新以提高可靠性、安全性和稳定性,它也是一个广受欢迎的选项,拥有超过 2,000,000 次活动安装。

我们在构建插件时考虑了 PageSpeed Insight Score。

例如

它不仅缩小了 CSS 和 JavaScript,而且还是一个完整的 Web 性能即服务插件。

PageSpeed Insight Score 获得 100 分的主要问题之一是针对“删除未使用的 CSS”问题进行优化。

PageSpeed Insight 删除了未使用的 CSS

WP Rocket 收集您网站上的所有样式表和脚本,并使用我们的…

5分钟生成10篇英文软文article forge软件试用
tiktok