WordPress网站性能优化:性能检查列表

选择一个优秀的WordPress主机服务提供商，推荐的价格都贵，不过性能方面确实做的很好，所以一句话就是钱多，不差钱，性能问题可以迎刃而解。

推荐的服务提供商如下：

• https://kinsta.com/
• https://www.bigscoots.com/
• https://rocket.net
• https://instawp.com

缓存优化

解决缓存的问题是一个关键，如果你发现Google的性能测试报告中有一项是“减少初始服务器响应时间”或“使用高效的缓存策略提供静态资源”的相关警告，那么此时通过缓存就能够解决大部分问题。

减少初始服务器响应时间

针对减少初始服务器响应时间这个操作最好是花钱解决，意思就是在服务提供商那个层面就把问题解决掉，不能拖到在使用WordPress过程中解决这个问题。

当然了，让服务提供商解决问题，那么就得多花点钱了，例如：Kinsta这样的托管提供商具有服务器级别的缓存，这么做的好处是您永远不必在使用WordPress层面再考虑缓存的问题，再使用缓存插件。

否则，我建议使用免费的插件，如 WP Fastest Cache、Super Page Cache for Cloudflare 或 Cache Enabler。高级收费的插件WP Rocket效果也是不错的。

• https://wordpress.org/plugins/wp-fastest-cache/
• https://wordpress.org/plugins/wp-cloudflare-page-cache/
• https://wordpress.org/plugins/cache-enabler/

另外一个建议是增加缓存过期时间，不要每24小时一次，尝试增加到一个更长的时间，比如七天，这样就会增加命中缓存比率，那么会有更多的用户从缓存中快速访问网站。

选择快速的WordPress主题非常重要

推荐使用赫赫有名的WordPress主题：GeneratePress

• https://generatepress.com/

GeneratePress主题有点如下：

1. GeneratePress 主题的基本安装在移动设备上核心网页指标（Core Web Vitals）得分 100/100。
2. GeneratePress 中加载的每个文件都尽可能小（以 KB 计）。
3. 它是一个模块化系统，因此您不需要的功能永远不会在您的网站上运行任何代码。它还使用动态 CSS。
4. 开箱即用，它使用简化的 SVG 图标而不是较大的 Font Awesome。
5. 系统字体是默认的。
6. 混合全站编辑（FSE）和基于区块的方法。
7. 100% 无障碍，这是一个经常被忽视的重要方面。
8. 最好的部分是没有 jQuery 依赖。

使用CDN

内容分发网络（CDN）通过在全球各地的不同边缘服务器（POPs）上存储您的资源和代码（HTML、JS、CSS、图像）来帮助加速您的 WordPress 网站。当用户访问您的网站时，它从物理上最接近的边缘服务器上的缓存中交付。

推荐的CDN平台：

• https://www.keycdn.com/
• https://bunny.net/
• https://www.cdn77.com/

图像优化（压缩、WebP、延迟加载）

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

首先，需要压缩图像以减小其文件大小，我们推荐使用 ShortPixel 或 Imagify 插件。这些插件可以保证图像被损压缩了且又能保证质量和大小之间的完美平衡。

推荐是将图像保持在100 KB以下，尤其是对于移动设备，如果需要手动微调图像，可以使用免费的Squoosh工具。或者使用SVG Viewer优化SVG（图标和标志）。

其次，就是需要将图像转换为WebP格式，这个格式是由Google创建的文件格式，现在所有现代浏览器都支持。在实际测试过程中，.WebP文件平均比PNG或JPG文件小59%。同样，ShortPixel 可以自动完成这项工作。您甚至可以使用更新的AVIF 格式进一步优化。

第三，应该延迟加载图像。在我们自己的测试中，启用延迟加载使我们的速度提高了33%。

Perfmatters 提供了四种不同的延迟加载选项： 第四，可以通过自动为图像添加缺失的宽度和高度属性来减少累积布局偏移（CLS）。

• https://shortpixel.com/
• https://imagify.io/
• https://caniuse.com/
• https://squoosh.app/
• https://www.svgviewer.dev/

数据库和磁盘空间

随着时间的推移，修订版、垃圾评论、瞬态数据、自动草稿甚至垃圾箱中的内容会逐渐累积，占用数据库中的空间。有一个表，wp_options，如果它变得太大，可能会使您的网站变得缓慢。我们见过这种情况无数次。

Perfmatters 插件的数据库优化选项：

1. 删除修订版：删除帖子、页面和自定义帖子类型的修订版。
2. 删除垃圾评论：一键删除 WordPress 垃圾评论。
3. 清理垃圾箱：清理评论和帖子中的垃圾箱。
4. 删除自动草稿：删除编辑内容时保存的旧自动草稿。
5. 删除过期瞬态数据：删除过期的瞬态数据并保持 wp_options 表清洁。
6. 优化数据库表：优化数据库表以回收未使用的空间。

实际生产环境可以根据要求设置每天、每周或每月自动进行优化。在清理数据库之后，重要的是为未来设置限制。例如，禁用或限制帖子修订。这有助于确保数据库的健康。

其他建议：

• 删除旧的和未使用的图像：从媒体库中删除旧的和未使用的图像。免费的 Media Cleaner 插件在这方面做得很好！
  • https://meowapps.com/media-cleaner/
• 清理已卸载插件的残余文件：在删除插件时进行干净卸载（请参阅开发者的文档）。否则，它可能会在数据库中留下不需要的垃圾。如果需要，您可以手动清理数据库表。
• 清理自动加载选项：使用免费的 AAA Option Optimizer 插件清理自动加载选项。
• https://wordpress.org/plugins/aaa-option-optimizer/

谨慎使用网络字体

网页字体在移动设备上平均占网页总重量的 6%。它们影响您的加载时间和页面渲染方式。许多网站使用的字体数量超过了他们的需要。选择几种不同的粗细变化，如正常、粗体等。这将保持文件大小较小。此外，WOFF 2 被超过 97% 的浏览器支持。

• https://caniuse.com/?search=woff2

最佳实践：

1. 本地托管或 CDN：始终将网页字体托管在自己的服务器或 CDN 上。所有现代浏览器都已转向 HTTP 缓存分区。这意味着无论用户浏览器中是否缓存了字体，字体都会为每个网站重新下载。因此，利用更少的 DNS 请求和您服务器的缓存头。
2. Google 字体优化：对于 Google 字体，我们建议使用我们的本地 Google 字体功能。可以自动为 font-display 添加 swap，并在本地托管您的字体。如果需要手动添加它们，可以使用 这个收费插件Perfmatters 预加载字体。这些操作可以优化解决 Google 发出的“在网页字体加载期间确保文本可见”警告。
3. 系统字体：像GitHub、Medium甚至WordPress 管理仪表板这样的大品牌使用“系统字体”。在使用系统字体时，根本不需要加载任何字体。这非常重要！

仅使用您需要的字体图标

Font Awesome 非常出色，数百万个网站使用它来显示网站上的图标。然而，插件和主题的一个常见且有缺陷的实现是它们在整个网站上加载整个字体图标库。

• https://fontawesome.com/

最佳实践：

1. 仅打包使用的图标：从性能角度来看，处理 Font Awesome 的最佳方式是在实际的网站中使用自己下载打包好的图标，然后本地网站使用。实际测试中发现这可以将总大小从 100 KB 减少到不到 5 KB。
2. 如果打包图标然后本地网站调用可参考：

• https://kinsta.com/blog/wordpress-icon-fonts/

CSS 和 JS 优化

不幸的是，许多 WordPress 插件和主题在开发时并没有考虑到性能。它们只是尽可能多地添加功能以增加收入。因此，许多插件和主题会在整个网站上加载脚本（CSS 和 JS），而没有策略性地进行优化。

最佳实践：

1. 禁用不需要的脚本：一个插件应该只在实际使用的页面上加载脚本。要想满足此操作懂技术就自己搞，不懂技术就使用插件搞定。
2. 本地托管 Google Analytics：Google Analytics 讽刺地是其有自身的性能问题。它会产生额外的第三方请求并使用较短的缓存过期时间。要想完成此操作，目前市面上我看到的是只有 Perfmatters 这个插件可以轻松的在本地托管 Google Analytics 脚本来解决这个问题。
3. 延迟 JavaScript：一种方式是加快页面绘制速度的方法是延迟所有非关键 JavaScript。通过在每个文件上添加 defer 属性，脚本将在页面其余部分加载后再加载。
4. 延迟 JavaScript：另一种方式是可以使用的另一种技术是在用户交互之前延迟 JavaScript 加载。这是加快核心网页指标页面绘制的简单方法。特别是对于大型第三方脚本，如 Google Tag Manager、Google AdSense、转换像素（FB、Google Ads）等。
5. 压缩 JavaScript 和 CSS：可以通过免费和收费的插件来执行自动压缩 JavaScript 和 CSS。这是从代码中删除不必要的字符（空白、注释、缩短函数和变量名等）以及额外的标记清理的过程。它减少了文件的总体大小并加快了加载时间。
6. 删除未使用的 CSS：当插件或主题加载的代码在页面上不需要或未使用时，会触发“减少未使用的 CSS”警告。开发者通常只在使用的页面上加载样式表。然而，很多时候，也会添加可能不需要的额外样式。这导致了许多未使用的 CSS，这会减慢您的 WordPress 网站速度。它还可能触发渲染阻塞警告。您可以在 Perfmatters 中自动删除未使用的 CSS。
7. 仅在需要的地方加载自定义 CSS/JS：您是否需要为网站或帖子类型的特定部分添加自定义代码？这就是 GeneratePress 主题通过钩子发挥作用的地方。创建一个钩子，添加您的自定义 CSS 或 JS，并选择您希望它加载的位置。这是加载自定义代码的最优方式，并防止来自 Google 的“未使用的 CSS/JS”警告。

推荐一些优秀的插件

虽然WordPress 仓库中有超过 60,000 个插件，还有许多高级插件，但是其中确实有很多质量不佳的插件。许多插件根本不关心性能。您使用的插件数量并不重要，重要的是它们的编码质量。

不过，好消息是，有些开发者确实关心性能。以下有一部分是我测试过的插件强烈推荐给大家：

• GenerateBlocks：放弃沉重的页面构建器，利用区块的优势！让整个网站都是用区块构建的。
• Antispam Bee：轻量级的垃圾邮件保护，符合 GDPR。
• Fluent Forms：轻量且强大的联系表单构建器。我们在我们的网站上使用这个。
• WPCode：轻松、快速且性能友好的方式，向您的网站添加 PHP 代码片段。
• The SEO Framework：轻量级的 SEO 插件，优化速度，没有广告或不必要的功能。
• Wordfence Login Security：精简且免费的插件，用于双因素认证。
• Novashare：社交分享插件，从头开始开发，注重性能。易于使用的界面，分享计数，没有臃肿。
• Lightbox for Gallery & Image Block：如果您离不开灯箱效果，这个插件利用了原生 WordPress 区块，只有 3.7 KB 的 JS，并且没有 jQuery 依赖。

性能建议

以下是一些提示和建议，帮助您快速打造一个 Google 会喜欢的 WordPress 网站：

• 避免重定向：尽量避免重定向。如果您需要添加重定向，请在服务器级别进行。像 Kinsta 这样的托管提供商在 MyKinsta 中提供了重定向工具，使这变得容易。
• 放弃滑块：使用静态标题，避免布局偏移（CLS）和额外的臃肿。
• 避免动画：如果不需要，不要使用动画，特别是像 Elementor 这样的页面构建器。这些会增加 CPU、JS 和渲染时间。例如，如果你见过 Lottie 或 GSAP 的动画在移动设备上使分数下降 15 分以上。使用静态元素总是性能最好的选择。
• 优化视频：如果在滑块中使用视频，最好直接上传并使用CDN技术。
• 不要使用 Google AMP：专注于使您的响应式网站更快，不要将自己锁定在一个控制较少的生态系统中。截至 2021 年，Google 不再对使用 AMP 的网站给予优先处理，并且 AMP 符号不再显示在搜索结果中。查看如何安全地禁用 AMP。
  • https://developers.google.com/search/blog/2021/04/more-details-page-experience
  • https://kinsta.com/blog/disable-google-amp
• Google reCAPTCHA 是性能杀手：最好使用蜜罐解决方案或 Cloudflare Turnstile。
  • https://perfmatters.io/docs/recaptcha-alternative/
• 如果使用 Cloudflare，关闭 Rocket Loader 和 Email Address Obfuscation。
• 在 WooCommerce 网站上，关闭使用情况跟踪并移除 stats.wp.com 请求。
• 从 CDN 加载 Gravatars 并延迟加载。
  • https://woorkup.com/load-gravatars-from-cdn/
• 不要在任何地方加载 Google Maps：可以使用Perfmatters 插件在不应该加载的地方禁用 Google Maps。或者发挥创意，使用图像代替。
• 不要从 CDN 加载库，如 jQuery，除非是您自己的 CDN。由于浏览器隐私和 HTTP 缓存分区，会有问题。