Perfmatters教程：静态资源优化，大幅提速WordPress

本文将介绍Perfmatters优化静态资源的教程。这些功能将是与优化WordPress本身不同，需要根据使用的主题与其它插件的一些情况而定，相对来说适合有一定技术基础的站长。其中包括：JavaScript延迟或推迟加载、删除未使用的CSS或JS、数据库优化等。

继续阅读本教程之前，推荐先阅读《Perfmatters使用教程：优化WordPress》一文，对WordPress先进行一些基础优化。

教程简介

本教程基于 Perfmatters 赖胖站长帮汉化版 v2.1.0，主要是通过插件将网页前端并未使用、多余的JS与CSS剔除掉，同时优化JavaScript的加载方式，提升网页加载速度。如果你不清楚什么是CSS与JavaScript，那么不建议按照本教程操作，因为有可能破坏网页的前端布局。

接下来介绍的内容适合有一定HTML、CSS与JavaScript常识的用户。

脚本管理器

Perfmatters的脚本管理器允许在WordPress网站的每个页面上，通过自定义设置来决定哪些静态资源加载，哪些不加载。因为一些CSS和JS文件并不需要出现在每个页面上，通过这种减少文件加载的方式，可提升网页速度并节约服务器带宽。

启用脚本管理器

开启后，用管理员登录后在WordPress前端页面顶部管理工具条中“Perfmatters>脚本管理器”可查看当前页面加载的所有CSS和JS静态资源。

检查前端页面加载的脚本资源

下面以全新安装的 WordPress v6.2.2 为例，已启用 Contact Form 7 与 WooCommerce 插件，激活默认主题：Twenty Twenty-Three，看看首页加载了哪些CSS和JS文件，如下图：

如上图所示，尽管该页面中不需要 Contact Form 7 与 WooCommerce 插件的任何功能，但它们默认在首页以及其它所有页面均额外加载了大量JS和CSS文件。

其中 Contact Form 7 加载了2个JS文件和1个CSS文件，总计25.4KB，而 WooCommerce 插件则加载了5个JS文件和4个CSS文件，总计51.6KB。

这就是为什么安装了一些插件后，感觉网站越来越慢的重要原因。然而，并不是所有页面都需要这些JS与CSS文件，在没有Contact Form 7表单的页面中，这些额外加载的文件是无用的。同理，在没有 WooCommerce 相关内容或产品的页面加载这些也是多余的。

清理未使用的脚本

将要停止加载的脚本状态切换成禁用后，可选择停用的范围：

• 任何地方：全站停用。
• 当前URL
• 文章：所有单个文章页面
• 页面：所有单个页面
• 产品：所有单个WooCommerce产品页

“例外”则根据停用范围的排除项。

除了上述选项外，还支持用Regex（正则表达式）匹配禁用范围或排除范围。

例如仅在/abc/与/cba/两个页面中禁用脚本，则可以使用正则表达式：/\/(abc|cba)\/$/，如下图：

如果全站禁用，仅排除/a.html以及/b.html两个页面，则可以在停用中勾选“任何地方”，然后在例外中使用正则表达式：/\/(a.html|b.html)/

延迟与推迟加载JS

延迟加载 JavaScript （Defer）是一种目前主流浏览器均支持的技术，将JS脚本与解析页面并行下载，并在页面完成解析后执行脚本。这可以消除阻塞，让网页加载速度提升不少。

推迟 JavaScript，则是在产生用户交互（移动鼠标或滚动页面）之前，暂不加载与执行JS脚本，一旦有交互，立即加载与执行。特别适合繁重的第三方脚本，如谷歌Adsense，谷歌分析、百度联盟等。

最大推迟期限：开启后，如果超过10秒未产生用户交互，则立即加载与执行JS脚本。

不论是延迟加载还是推迟加载，都支持按文件名或URL排除。如menu.min.js或/generatepress/js/menu.min.js（每行一个）。

注意，开启延迟和推迟加载后，需要仔细调试前端网页，如发现有报错或功能无法正常使用，则需将相关JS脚本排除。

删除未使用的 CSS

解决“减少未使用的 CSS”警告的最简单方法是启用 Perfmatters 中的“删除未使用的 CSS”功能，它会自动执行所有操作。已经在数百个 URL 上测试了此功能（使用不同的主题和设置），以下是我们获得的一些结果：

• FCP 平均下降 15.20%。
• LCP平均下降19.66%。
• TTI 平均下降 14.95%。

准备工作

在 Perfmatters 中启用“删除未使用的 CSS”功能之前，建议执行以下操作：

• 删除 Perfmatters 中设置的任何现有 CSS 预加载（不包括 Google 字体样式表）。
• 取消合并CSS，自 HTTP/2 以来，合并CSS 是一种已弃用的优化技术。在某些情况下，合并 CSS 实际上会损害性能。
• 确保没有使用其他插件删除未使用的 CSS，例如WP-Rocket也有类似功能。

使用的CSS加载方法建议选择“文件”加载方式，默认“内联”，这样的好处是可以利用浏览器缓存减少服务器带宽需求，浏览器缓存后用户浏览速度更快。

调试与排除项

同样需要仔细调试前端页面，如发现有排版错乱，需要将相应的样式文件或CSS选择器添加到排除列表中。

排除的样式表：通过添加源 URL 或添加源 URL 的唯一部分，从删除未使用的 CSS 功能中排除特定的 CSS（样式表），每行一个。例如：cdn.laipang.com/test.css

排除的选择器：通过添加元素 ID、类名等 ( #id, .class) 从移除未使用的 CSS 功能中排除特定的 CSS（选择器），每行一个。

例如古腾堡的引用块样式：

.wp-block-quote
blockquote

列

.wp-block-columns

评论

.comment
.comment-content

经典编辑器

.wp-caption

Perfmatters数据库清理＆优化

如上图所示，Perfmatters可以优化/清理数据库，包括自动保存的修订版本、自动草稿、垃圾箱里的帖子、垃圾评论、过期的瞬态等。选择好要优化的内容后，点击“现在优化”按钮即可。

还可以添加自动执行的优化计划，建议设置每周执行一次。

注意：优化/清理数据库之前，请先备份。

总结

根据Perfmatters 优化WordPress及本文介绍的方法优化静态资源后，WordPress网站速度应该提升了一大截，如果再搭配WP Rocket、W3 Total Cache Pro 或 WP Fastest Cache Premium等优秀缓存插件，网页达到秒开甚至300毫秒内加载的速度都是可以轻松实现的。

网页加载速度决定用户体验，也影响SEO，所以Perfmatters 站长帮汉化版这款插件，被推荐为WordPress必装插件之一。

免责声明

1：本站的课程与素材，都是电子版课件，非实物光盘，课件由百度网盘发送.（百度网盘下载教程）2：本站所有涉及视频及素材，软件等由互联网搜索收集而来，本站不拥有此类资料的版权。3：本站所有视频，素材及软件不加密、不限时、可永久观看或使用！禁止二次销售，否则因此引起的一切问题与本站无关。4：本站所有的资源均为免费提供，提供资料的目的是让大家学习和交流，所收取的相关费用非资料销售费用，而是资料收集整理手工费。5：无意侵害您的权益，请发送邮件至 590173@qq.com 或点击左侧 私信：站长反馈，我们将尽快处理。