WordPress 性能清单

我们一次又一次地看到 WordPress 用户在性能上挣扎。在很多情况下，实现更快的速度并不难。大部分归结为选择正确的技术堆栈并遵循最佳优化实践。在 WordPress 性能行业工作了多年，我们看到了什么有效和不有效。

谷歌使用他们所说的 Core Web Vitals。您网站的移动版本根据最大内容绘画（LCP）、与下一个绘画的交互（INP）和累积布局转移（CLS）等因素的组合获得分数。簡單地說，雖然程式量和總載入時間對性能始終很重要，但您現在還必須考慮您的網站如何載入程式。

以下是我们为节省您的时间而整理的绩效清单！提到的所有工具和服务都是我们 100% 支持并在网站上使用的工具和服务。如果您有问题，我们很乐意回答，无论它是否与我们的插件有关。我们相信，更快的网站等于对每个人来说都有更好的网络。

 

WordPress 主机

没有什么比您选择的 WordPress 主机为您的网站提供动力更重要的了。把这想象成汽车的引擎。你想要一辆科尔维特还是普锐斯？我们总是建议投资 WordPress 主机。这些类型的主机对环境进行了明确的微调，以加快 WordPress 速度。

我们所有的 WordPress 网站都使用 Kinsta。它们包括 PHP 8.5（WordPress.org 推荐 PHP 8.3 或更高版本）、HTTP/3 CDN、APM 监控、DDoS 保护和 WAF、37 多个服务器位置以及谷歌云平台提供的最快的机器。他们使用容器技术，这意味着没有共享资源。每个 WordPress 网站都完全隔离在一个容器中，并有自己的 Nginx、PHP、MySQL 等。

如果您对业务或博客是认真的，请选择您可以信任的主机。Kinsta 提供一流的性能，消除了管理 WordPress 网站的所有压力。您可以专注于发展业务，而不是担心停机或 500 个错误。

其他专注于性能并具有出色实践支持的 WordPress 主机的绝佳替代品是 BigScoots、Rocket.net 和 InstaWP。

WordPress 缓存

如果没有适当的缓存解决方案，您永远不会达到您想要的分数。当用户首次访问您的网站时，缓存会构建并存储在您的服务器上。您网站的所有后续点击量都以闪电般的速度从缓存中传递给用户。

是否见过谷歌发出的“减少初始服务器响应时间”或“使用高效的缓存策略为静态资产提供服务”的警告？这就是缓存修复的。有两种方法可以实现它，在服务器级别或使用WordPress插件。

像 Kinsta 这样的主机服务提供商有服务器级缓存。这方面的一个好处是，您永远不必为缓存插件而烦恼。否则，我们建议使用 WP Fastest Cache、Super Page Cache 或 Cache Enabler 等免费插件。像 WP Rocket 这样的高级插件也运行良好。

另一个提示是增加你的缓存到期时间。与其每 24 小时一次，不如尝试将其延长到更长的持续时间，比如 7 天或 30 天。这增加了您的 HIT缓存率，这意味着更多的用户将从缓存中获取您的网站。

您可能还想考虑预加载或预热缓存。在缓存过期或内容更新后，这可能会有所帮助。像 Warmer 这样的独立插件很出色。

使用 Brotli 或 Zstandard 等较新的压缩形式也有助于进一步缩小资源大小，而不丢失任何数据。

WordPress 主题

无论是高流量博客、WooCommerce 商店还是谷歌 AdSense 网站，GeneratePress 主题始终是我们的首要推荐。它快速、轻便，将确保您的网站始终看起来漂亮。我们在所有的 WordPress 网站上都使用这个，包括这个网站。

GeneratePress 最好的地方是开发人员。Tom Usborne 和他的团队和我们一样真正关心绩效！以下是我们喜欢的 GeneratePress 的一些关键功能：

• GeneratePress 的基本安装在 Mobile 上获得了 100/100 的 Core Web Vitals。
• GeneratePress 中加载的每个文件都尽可能小（我们谈论的是 KB）。
• 这是一个模块化系统，因此您不需要的功能永远不会在您的网站上运行任何代码。它还使用动态 CSS。
• 开箱即用，它使用简化的 SVG 图标，而不是 Font Awesome（相当大）。
• 系统字体是默认的。
• 混合全站点编辑（FSE）和基于块的方法。
• 100% 可访问，这是一个经常被忽视的重要方面。
• 最好的部分是，没有 jQuery 依赖性。

将 GeneratePress 与 GenerateBlocks 插件配对，您将拥有一个强大的网站设计解决方案，该解决方案对 Google Core Web Vitals 具有性能友好和未来。整个网站都是使用块构建的，没有任何额外的代码。

你想使用 GeneratePress 和 GenerateBlocks，但没有时间自己动手吗？可以考虑使用 WP Boosters，他们可以将您的现有网站和设计转换为GeneratePress + GenerateBlocks。

WordPress CDN

内容交付网络（CDN）通过将您的资产和代码（HTML、JS、CSS、图像）存储在全球不同的边缘服务器（POP）上，帮助加快您的 WordPress 网站速度。当用户访问您的网站时，它从物理上最近的边缘服务器上的缓存中传递。我们看到 CDN 的速度提高了 68%！

我们推荐两种不同的方法：

1. 带有自动平台优化（APO）的 Cloudflare。Cloudflare 位于您的网站和互联网之间，并从其边缘服务器提供全页缓存。它导致 TTFB 和服务器响应时间低。这种方法缓存 HTML、JS、CSS 和图像。Kinsta 实际上为所有客户免费提供此（边缘缓存）。
2. 传统的 CDN，如 KeyCDN。将此视为您网站的附加组件，通常使用像 cdn.domain.com 这样的子域名。Perfmatters CDN 重写功能使将传统的 CDN 连接到您的 WordPress 网站变得快速而简单。这种方法缓存 JS、CSS 和图像。

WordPress 图像优化

在移动设备上，图像平均占整个网站页面权重的 48%。这就是为什么图像优化是你不能忽视的。

首先，您需要压缩图像以减少其文件大小。我们建议使用 ShortPixel 或 Imagify 插件。它们的自动有损压缩确保了质量和尺寸之间的完美平衡。最好将图像保持在100 KB以下，特别是对于移动设备。如果您需要手动微调图像，谷歌的免费 Squoosh 工具效果很好。或者用于优化 SVG（图标和徽标）的 SVG 查看器。

其次，您应该将图像转换为 WebP 或 AVIF 格式，现在所有现代浏览器都支持这些格式。在我们的测试中，.webp文件平均比 PNG 或 JPG 文件小 59%，.avif可以再减少约 29%。这将解决来自谷歌的“以下一代格式提供图像”警告。同样，ShortPixel 或 Imagify 可以自动为您完成此操作。

第三，您应该延迟加载图像，以便仅立即下载视口中的图像。在我们自己的测试中，启用惰性加载使我们的速度提高了 33%。你拥有的媒体越多，你收获的好处就越多。它还解决了谷歌发出的“推迟屏幕外图像”的警告。

Perfmatters有四个不同的延迟加载选项，您可以启用：

• 延迟加载图像（WebP 支持）。
• 延迟加载 iframe（YouTube、Vimeo等）。
• 用预览缩略图和 SVG 播放图标交换 iframe，点击即可加载视频。
• DOM 监控。

第四，您可以通过自动向图像添加缺失的宽度和高度属性来减少累积布局偏移（CLS）。最后，您可以自动预加载关键图像或利用获取优先级来帮助减少最大内容绘制（LCP）。

WordPress 数据库

随着时间的推移，修订、垃圾评论、瞬态、自动草稿甚至垃圾等内容开始增加，浪费数据库中的空间。有一个表格，wp_options，如果您的网站太大，它可以使它爬取。我们看过它的次数数不清。

就像你更换汽车机油一样，你也应该定期优化你的数据库。 Perfmatters 插件使用以下選項使此快速而簡單：

• 删除修订（文章、页面和自定义文章类型）。
• 一扫而就删除 WordPress 垃圾。
• 清理评论和文章中的垃圾。
• 删除编辑内容时保存的旧自动草稿。
• 删除过期的瞬态，并保持 wp_options 整洁。
• 优化您的数据库表，以回收未使用的空间。

如果您愿意，您甚至可以每天、每周或每月自动进行优化。清理完数据库后，为未来设定限制很重要。例如，禁用或限制文章修订。这有助于确保数据库健康。

我们还建议您从媒体库中删除旧的和未使用的图像。如果您的网站已经存在了一段时间，那么您很可能有很多网站。免费的媒体清洁器插件做得很好！

删除插件时，进行彻底卸载也很重要（请参阅开发人员的文档）。否则，它可能会在你的数据库中留下不需要的垃圾。如果需要，您可以手动清理数据库表。免费的 AAA Option Optimizer 也是清理自动加载选项的好方法。

少用网络字体

网页字体平均占网页在移动设备上整体权重的 6%。它们会影响您的加载时间和页面渲染方式。许多网站使用的字体比它们需要的要多。选择几种不同的重量变化，正常、粗体等。这将保持尺寸小。此外，超过 97% 的浏览器（源代码）支持 WOFF 2。

始终在自己的服务器或 CDN 上托管网络字体。每个现代浏览器都已转向 HTTP 缓存分区。这意味着每个网站的字体都会被重新下载，无论字体缓存在用户的浏览器中。因此，利用更少的 DNS 请求和服务器的缓存头。

对于谷歌字体，我们建议使用我们本地的谷歌字体功能。您可以自动为字体显示添加swap，并在本地托管您的字体。如果您要手动添加它们，请用Perfmatters 预加载您的字体。这些优化将解决谷歌的“在网络字体加载期间所有文本仍然可见”的警告。

GitHub、Medium、Ghost 等知名品牌，甚至您的 WordPress 管理仪表盘都使用「系統字型」。这意味着他们利用了您电脑上的字体。几年前，这看起来不太好。但随着当今较新的操作系统，它们都预装了更漂亮的字体。

使用系统字体时，根本不需要加载任何字体。那很大！它消除了任何 FOUT（无样式文本的闪光）或 FOIT（隐形文本的闪光）的丑陋。最好的部分是，您永远不必担心谷歌的渲染阻止警告，因为没有警告。

你知道这个网站使用系统字体堆栈吗？你可能甚至没有注意到。没错；这个网站没有加载一个字体。查看本教程，了解如何在 WordPress 中移动到系统字体堆栈。如果您使用的是像 GeneratePress 这样的推荐主题，这只需单击一下。

仅使用必需字体图标

Font Awesome 令人难以置信，数百万网站使用它来显示您每天在网络上看到的图标。然而，插件和主题的一个常见且有缺陷的实现是，它们在整个网站上加载了整个字体图标库。

从性能角度来说，接近 Font Awesome 的最佳方法是只打包您在网站上实际使用的图标。查看这个关于如何在本地托管字体图标的精彩教程（仅您需要的字体图标）。我们看到这使 100 KB 的总大小减少到不到 5 KB。

或者你可以选择一个更好的解决方案。如果您正在使用像 GenerateBlocks 这样的推荐插件，您可以将您想要的任何图标的 SVG 代码粘贴到 WordPress 区块编辑器中。这太棒了！无需担心包装图标包。只需点击几下，您就可以轻松添加所需的图标。

CSS 和 JS 优化

不幸的是，许多 WordPress 插件和主题的开发并没有考虑到性能。他们只是尽可能多地添加功能来增加他们的底线。因此，许多加载脚本（CSS 和 JS）遍布整个网站，而没有制定如何以不同的方式进行策略。

只有当脚本实际在页面上使用时，插件才应将其列入队列。（来源：谷歌）

禁用不需要的脚本

这正是我们将强大的脚本管理器构建到 Perfmatters 中的原因。这允许您通过单击按钮，轻松禁用每个文章/页面或全站点加载脚本和插件。

一个常见的用例是联系表单插件。只需单击两次，除了您的联系页面外，您可以在任何地方禁用它。另一个用例是社交媒体插件。大多数时候，你只在博客帖子上加载它。使用脚本管理器，这很容易做到。

使用 Regex 和 MU 模式，您可以禁用几乎任何脚本组合。这包括完全禁用插件（MySQL 查询）及其内联 CSS/JS。这样做将有助于解决来自谷歌的警告，例如“删除渲染阻止资源”、“删除未使用的 JavaScript”和“删除未使用的 CSS”。

脚本管理器的伟大之处在于它不会进行任何永久性更改。如果有些东西看起来不对，你可以简单地把它重新打开。甚至有一个测试模式，因此您可以在应用任何设置之前检查有关的东西。

本地托管谷歌分析

具有讽刺意味的是，谷歌分析有自己的一系列性能问题。它生成额外的第三方请求，并使用短的缓存到期时间。您可以通过使用 Perfmatters 在本地托管您的谷歌分析脚本来解决这个问题。

我们有几个不同的实现供您选择，如最小分析、谷歌分析 4 或我们与 MonsterInsights 的整合。

推迟 JavaScript

加快页面绘色速度的另一种方法是推迟所有非关键的 JavaScript。通过在每个文件上添加一个递延属性，脚本在页面的其余部分加载后加载。您可以在Perfmatters 中轻松地推迟 JavaScript。

延迟 JavaScript

您可以使用的另一种技术是将 JavaScript 从加载到用户交互延迟。这是加快 Core Web Vitals 页面绘制速度的简单方法。特别是对于大型第三方脚本，如谷歌标签管理器、谷歌 AdSense、转换像素（FB、谷歌广告）等。

如果您有一个 WooCommerce 商店，这也是解决购物车碎片问题的快速方法。

缩小 JavaScript 和 CSS

您可以在 Perfmatters 中自动缩小 JavaScript 和 CSS。这是从代码中删除不必要的字符（空格、注释、缩短函数和变量名称等）的过程，以及额外的标记清理。它减少了文件的整体大小，并加快了加载时间。

移除未使用 CSS

当您有不需要或页面上使用的插件或主题加载的代码时，PageSpeed Insights 会触发减少未使用的 CSS 警告。开发人员通常仅在使用样式表时为样式表列队列。然而，很多时候，可能不需要的额外样式也会被添加。这导致大量未使用 CSS，这会减慢您的 WordPress 网站。它还可以触发渲染阻止警告。您可以在Perfmatters 中自动删除未使用的 CSS。

仅在需要的地方加载自定义 CSS/JS

您需要为网站或文章类型的特定部分添加自定义代码吗？这就是我们在 Perfmatters 的代码片段管理器来救援的地方。添加您的自定义 CSS 或 JS，并选择您想要加载的位置。这是加载自定义代码的最佳方法，并防止谷歌发出“未使用的 CSS/JS”警告。

投机性加载

投机性加载是一种令人难以置信的浏览器级优化，它动态地预渲染或预取用户接下来可能需要的 URL。这导致几乎瞬时的加载时间，并显著降低 LCP、INP 和 TTFB（真实用户数据）。它改善了用户体验和感知性能（网站感觉有多快），当过于关注分数时，这往往被忽视。

从 WordPress 6.8 开始，投机加载已添加到核心中，并且已经在幕后在您的网站上运行。然而，它默认为较慢的模式（预取）和渴望设置（保守）。在 Perfmatters 中访问更强大的模式（预渲染）和渴望设置（中度、渴望），因此您可以充分利用投机加载。

推荐的插件、提示和工具

不幸的是，WordPress 存储库上有超过 60,000 个插件和更多高级插件，外面有很多不好的插件。许多人根本不关心表现。您使用的插件数量不如它们的编码程度重要。

好消息是，确实有开发人员关心性能。以下是我们强烈推荐的几个插件：

• GenerateBlocks：抛弃繁重的页面构建器，利用块！我们的整个网站都是用积木建造的。
• Antispam Bee: 轻量级的垃圾邮件保护。符合 GDPR。
• Fluent Forms：轻巧而强大的联系表单构建器。如果您需要一些超级简单的东西，Essential Form 或 Jordy 的 Contact Form Block 也很好用。
• The SEO Framework:  针对速度优化的轻量级 SEO 插件，没有广告或不必要的功能。
• Wordfence Login Security:  用于双因素身份验证的剥离和免费插件。
• Novashare：我们自己的社交共享插件从头开始开发，并考虑到性能。简单的用户界面，共享计数，没有臃肿。
• Lightbox for Gallery & Image Block:  如果您不能没有它，这个插件利用原生 WordPress 区块，只有 3.7 KB 的 JS，并且没有 jQuery 依赖性。

性能提示

每天与客户合作，我们看到了一切。以下是一些提示和建议，可让您快速前往谷歌会喜欢的 WordPress 网站：

• 在页面完全加载之前，利用早期提示来获取资源。
• 延迟加载元素有助于优化 DOM 并减少总阻塞时间（TBT）。
• 不惜一切代价避免重定向。如果您需要添加重定向，请在服务器级别进行。像 Kinsta 这样的主机商使用 MyKinsta 中的重定向工具使这变得简单。
• 抛弃滑块，改用静态标题，以避免布局偏移（CLS）和额外的膨胀。
• 如果没有需要，请不要使用动画，尤其是像 Elementor 这样的页面构建器。这些增加了 CPU、JS 和渲染时间。它加起来真的很快。例如，我们看到 Lottie 或 GSAP 的动画在折叠上方将移动分数降低 15 分以上。使用静态元素总是性能的最佳效果。
• 如果您在滑块中使用视频，最好直接上传它们，并从 CDN 中提供它们。查看这些视频优化技巧。
• 不要使用谷歌 AMP。專注於使您的響應式網站更快，不要把自己鎖定在控制力較差的生態系統中。截至 2021 年，谷歌不再对使用它的人给予优惠待遇（来源），AMP 符号不再显示在 SERP 中。了解如何安全地禁用 AMP。
• 谷歌 reCAPTCHA 是性能杀手。最好使用蜜罐解决方案或 Cloudflare Turnstile。查看这些很棒的免费 reCAPTCHA 替代品。
• 许多 cookie /隐私插件都膨胀了，并加载了大量的 JS 和 CSS。查看一些更好的轻量 cookie 解决方案。
• 如果您正在使用 Cloudflare，请关闭 Rocket Loader 和 邮件地址混淆。
• 在 WooCommerce 网站上，关闭使用跟踪以删除 stats.wp.com 请求。
• 从您的 CDN 加载您的 Gravatars，然后懒惰地加载它们。
• 不要到处加载谷歌地图。您可以使用我們的 Perfmatters 插件在不應該載入的谷歌地圖中停用它。或者发挥创意，改用图像。
• 不要从您自己的 CDN 以外的 CDN 加载 jQuery 等库。由于浏览器隐私和 HTTP 缓存分区，不再有其益处。

工具

以下是我们在日常工作流程中使用的一些第三方工具，在故障排除和提高 WordPress 性能时非常有用。

• DebugBear：找到 LCP 元素、预加载和获取的内容、可能是调试 CLS（屏幕截图和节流视频）的最佳工具的好方法。
• GTmetrix：用于总页面大小和页面请求的优秀瀑布分析和图表。例如，查看占總頁面大小的影象或 JS 的百分比。首先将您的优化工作集中在最大的尺寸上。
• 黄色实验室工具：查看您的字体库（Font Awesome）实际使用了多少，如果您正在加载多个 jQuery 版本等。
• HTML 大小分析器：快速发现您最大的内联代码块，并查看它们为您的总 HTML 页面大小增加了多少。简单地把所有东西都放在内衬里对 FCP 和 LCP 不利。
• 速度生命体征和性能测试：一次从不同位置测量您的 TTFB。衡量 Cloudflare 边缘缓存的积极影响的好方法。

转换网站或获得绩效审计

如果您已经按照我们的清单联系了我们的支持，但仍然对自己的速度不满意，以下是我们推荐的。