WordPress 页面速度优化终极指南

按照本指南，您将学习大幅加快 WordPress 网站速度的所有技术。 以下是在 WordPress 中拥有出色的页面速度加载时间有利于您的业务的最重要原因：用户不会放弃您的网站，他们会在那里花费更多的时间和金钱，并且搜索引擎会在搜索结果中更好地排名您的网站。 准备好？

介绍

在页面加载时间方面，互联网用户没有太多耐心。 我们单击链接或输入 URL，然后等待一、二、三，仅此而已。 谷歌统计数据表明，50% 的用户希望移动网站在 2 秒内加载，如果页面加载时间超过 3 秒，53% 的用户可能会放弃该页面。 如果您考虑到移动设备上主页的平均加载时间为 19 秒（在 3G 网络上），那么这是一个非常短的时间。 计算机上的加载时间更快，平均加载时间为 5 秒，但这仍然太长了。

以桌面网站基准作为参考不再是借口。 对于当今的大多数网站来说，大部分流量来自移动设备。 在本文中，我们将全面了解 WordPress 网站页面速度优化的最新技术。 遵循本指南，您将能够加速 WordPress 网站，大大减少移动和桌面加载时间，从而使其更加用户友好。

如果您没有 WordPress 网站，请不要关闭该指南。 本分步指南中介绍的大多数速度优化技术可应用于任何类型的网站。

如果您的网站在构建时考虑到了盈利，无论是在线电子商务商店还是销售在线/离线服务，错过潜在客户绝不是一件好事。 你基本上把钱留在了桌子上。 提高页面速度应该会对您的收入产生积极影响。 有趣的事实：奥巴马筹款活动通过优化网站并将页面加载时间从 5 秒减少到 2 秒，将捐赠转化率提高了 14%。

作为网站所有者或开发者，我们希望我们的访问者获得最佳体验。 我们创建具有出色功能的漂亮网站，但我们通常忘记快速网站的重要性。 一个快速的网站与我们的访问者建立信任，它增加了访问者在我们页面上停留更长时间的机会，因此他们可能会花费更多。 另一方面，如果我们的网站速度很慢，访问者可能会放弃，他们甚至不会看到我们很棒的网站，以及我们同样很棒的报价。

如果上面的理由不够有说服力，我还有一个。 谷歌和其他搜索引擎 (SE) 透露，网站速度较慢会降低您的搜索引擎排名，使您的访问者更少。 因此，拥有一个快速的网站意味着谷歌会更喜欢你，这可以极大地改变你的 SE 排名，对你有利。

当然，加载时间会因几个原因而有所不同，例如，访问者的互联网速度、访问者的位置以及我们网站的“沉重”或臃肿程度。 对于访问者的网速我们无能为力，但我们可以照顾其他方面并改善每个人的体验。 在本指南中，我们将了解如何优化我们的 WordPress 网站以提高速度，使其快速而精简，让我们开始吧！

目录

• 基础
  • WordPress 托管
    • 共享主机
    • 托管主机
    • VPS 或专用服务器
  • WordPress 主题
  • WordPress 插件
• WordPress页面速度优化步骤
  • 页面速度工具
    • 谷歌 PageSpeed 见解
    • GTMetrix
    • Pingdom 网站速度测试
    • 网页测试
  • 图像优化
    • 图像优化小指南
    • Google PageSpeed 优化图像
    • 其他图像改进
    • 案例研究改进
  • 浏览器缓存
  • 资源压缩（Gzip 或 Deflate）
  • 删除不需要的 JS 或 CSS 文件
  • 在首屏内容中呈现阻止 JavaScript 和 CSS
  • 服务器端缓存
    • WP Rocket（服务器端缓存插件）
  • 内容交付网络
    • Cloudflare
• 最终结果
• 结论

基础

为了使您的网站尽可能快，我们必须在良好的基础上构建它。 就像盖房子一样，你不想把它建在流沙上，一开始就遇到问题。 你想把它建立在坚实的基础上，所以它会持续很长时间而没有任何问题。 要检查的三个主要事项是：

• 托管
• WordPress 主题
• WordPress 插件

WordPress 托管

托管是您的 WordPress 网站的基础，因此是一个至关重要的组件，即使您已经拥有一个托管，也不应忽视这一点。 切换到更好的托管服务提供商将加快您的 WordPress 加载时间长达几秒钟。

选择正确的网络主机很重要，您不应根据主机价格做出决定。 通常，价格低，性能低，这是我们想要避免的。 让我们看看可用的托管选项并解释它们之间的区别。

共享主机

这是最普遍的托管解决方案，因为它很便宜。 但正如我们所说，价格低，性能低。 在共享主机上，一台物理服务器上有数千个帐户，这意味着服务器资源在这些主机帐户创建的所有网站之间共享。

想象一个大披萨（嗯？...），共享主机上的每个网站都得到一个非常小的一块。 但是因为您的网站有很多访问者，所以它需要更多的披萨！ 它仍然很饿，但是没有比萨饼了:(，因为其他网站也很饿……

如果只得到一小块披萨还不够糟糕，那么潜在的安全风险可能会使共享托管情况变得更糟。 共享主机上受感染的网站可能会导致整个服务器的速度和性能问题，并危及您的 WordPress 网站。

共享主机上的服务器配置非常有限，您没有足够的喘息空间来根据自己的喜好对其进行配置。 服务器已预先配置为特定的、通常非常通用的设置，它应该可以毫无问题地运行 WordPress。 稍后会出现问题，以内存不足或 PHP 设置受限的形式，插件需要正常运行。

我真的不能为任何商业网站推荐共享主机，但如果我不得不这样做，我不得不说，它最适合流量非常低的网站。

托管主机

这是共享主机的一次重大升级，因为您的网站获得了更大的比萨饼（整片比萨饼，是的！），但成本更高。

托管主机上的服务器人口较少，这将为您的站点转化为更多的服务器资源。 这些服务器通常经过优化以尽可能顺利地运行 WordPress，它们具有更多的内存、处理能力和缓存系统。

这些托管托管服务器的硬件和软件安装和配置由托管公司完成（因此称为“托管”）。 其他服务，例如备份、负载平衡器、灾难恢复和安全检查/预防，也可以成为托管托管的一部分，具体取决于托管公司的报价。

对于中低流量网站，建议使用托管 WordPress 托管。

VPS 或专用服务器

如果我们坚持披萨的类比，使用 VPS（虚拟私人服务器）你会得到几片披萨，但不是整个披萨，而使用专用服务器，你会得到整个披萨。

这意味着，使用专用服务器，您可以控制整个服务器及其所有资源，而使用 VPS，您可以获得服务器的一部分，因为您仍然与其他人共享物理服务器机器。 当谈到 WordPress 的页面速度优化时，在 VPS 或专用服务器上设置 WordPress 时没有服务器端限制。 您确切地知道有多少资源可用于您的网站，并且可以根据自己的喜好对其进行配置。 您可以在标准托管服务提供商支持它们之前实现尖端功能（这可能落后于服务器软件技术数年）。

这两种选择都提供了更大的控制权和资源，但它们的价格也更高，并且需要更多的技能来设置和长期维护它们。 VPS/专用服务器也可以管理，因此您无需成为服务器专家即可使用。 它们适用于流量大的网站。

如果您不确定要使用哪个托管，我建议使用托管 WordPress 托管选项，如果需要，它还应该能够扩展（从服务器分配更多资源）。

现在每个像样的主机都提供的免费网站优化是将 PHP 版本升级到 7.x。 如果您的 WordPress 网站在低于 7 的 PHP 上运行，例如 5.6 或更早版本，请联系您的托管支持并要求他们将其更新到最新的稳定版本。 如果您正在寻找新的主机，您可以询问他们的支持，如果他们有 PHP 版本 7.x。 他们都应该回答“是”，但如果他们没有使用 PHP 7.x 的选项，那么我建议远离他们。 与旧版本相比，PHP 7 在速度和性能方面有了很大的改进，而且很容易切换到它，所以要好好利用它。

一个好的托管选择将为您节省很多痛苦，如果您遇到问题，一个好的客户支持应该能够帮助您，所以我还要记住选择一个提供良好支持的主机. 您可以利用一个快速技巧：向他们询问购买前的问题并监控他们的响应时间、态度和专业水平。

WordPress 主题

当我们为我们的网站选择 WordPress 主题时，我们总是从主题的设计开始，这没关系。 我们应该首先选择一些我们喜欢的主题，因为我们希望我们的网站很棒，而出色的设计是访问者看到的第一件事。 第二件事可能是主题的功能。 主题或主题推荐的插件是否提供了我们想要的功能？ 如果是这样，那就太好了！ 我们在做生意！ 我们几乎总是忘记检查主题加载的速度。

我们可以测试主题​​演示页面的加载时间，我们将很快看到主题是否针对速度进行了优化。 我们将在下面的部分中检查要使用哪些页面速度工具以及如何使用它们，但现在，我只想让您在购买前了解主题验证的这个额外步骤。 当然，演示页面的加载时间可能会有所改善，所以如果您没有获得满分，请不要担心，没有 WordPress 主题会获得 100% 的满分，除非它的内容很少在其演示页面上。 根据经验，您应该寻找不在红色数字中的主题（在页面速度工具上得分 50 或更低）。

它归结为主题设计和功能与主题速度之间的良好平衡。 例如，一个带有少量文本的空 WordPress 主题加载速度会非常快，但是一个具有很多功能（大部分您可能不需要）、带有大量多媒体内容的臃肿主题加载速度会慢得多。 在选择一个好的和高性能的 WordPress 主题时，达到那个最佳点是目标。

WordPress 插件

我经常看到一个问题是：“有多少插件太多了？”。 这不是WordPress插件数量的问题，而是代码质量和插件对系统的影响。 您可以拥有 50 多个活动插件，每个插件负责一个小的特定功能（具有良好的代码）并且该站点将运行正常。 另一方面，您可以拥有 5 个活动插件，其中一个可能会阻塞您的系统，从而使您的 WordPress 变慢。

查看每个插件的代码是一个好主意，但“没有人有时间去做”，而且您需要良好的编程知识才能这样做。 如果你真的走那条路，需要注意的是插件将许多外部资源排入队列，发出大量 HTTP 请求，进行不必要的（未优化的）数据库查询等等（基本上任何会减慢 WordPress 网站速度的东西，背后没有正当理由）。

我建议不要安装和激活您认为需要的每个插件。

首先想一想，你的网站真的需要这个附加功能吗？ 例如，如果您需要一个按钮简码，请检查您的主题文档，也许主题有一个简码，您不需要安装和激活整个简码捆绑插件，只需使用单个按钮简码。 这是一个简单的例子，但我希望您在安装和激活新插件之前三思。 每个未经验证的插件都可能使您的网站变得更重并因此变慢，而且如果插件编码不当或未维护，还可能导致安全漏洞。

最后，在选择插件时，您可以利用的一件好事是大型 WordPress 全球共享，因此是一个庞大的社区。 由于缺乏编码知识，一个好的经验法则是坚持使用具有大量活跃安装、良好平均评分和积极评价的流行插件。 WordPressers 同行将使您的选择变得更加容易！

WordPress页面速度优化步骤

在我们开始优化之前，我想提几点。

首先，您应该创建 WordPress 网站的备份，这里是有关如何使用 WordPress 插件执行此操作的指南。 安全总比后悔好！

其次，我警告您不要期望我们将在指南中使用的页面速度工具中的 100/100 分数。 在某些网站上追求 100/100 分数并不是一个好主意，甚至是不可能的。 这完全取决于您的网站显示的内容类型。 如果一个网站只有一点文字和一张图片，那么当然，满分是完全可能的。 但如果你的页面很长，有很多多媒体内容和其他 3rd 方应用程序集成，如谷歌地图等，那么 100 分不在你的视线范围内，你也不应该追求它。

为什么选择 100/100 不是一个好主意？ 如果您遵循页面速度工具的说明并按照他们所说的那样优化所有内容，那么您的网站可能无法正常运行。 如果将所有阻塞的 JS 或 CSS 文件移动到页脚，则会出现 CSS 闪烁（无样式的内容会首先出现，当 CSS 加载时，网站会“闪烁”到位），JS 代码也会发生同样的情况，这将在 JS 代码加载后修改任何 DOM 元素。

如果您盲目地遵循说明并不断优化您的 WordPress 网站以获得更好的加载时间，那么您可能会破坏您的网站，只是为了获得满分。 完美的页面速度分数只是一个数字，如果您的访问者最终访问一个损坏的网站，这实际上并不重要。 我们必须寻找页面速度和用户体验的平衡点。

为了演示 WordPress 页面速度优化，我们将使用我的共享主机帐户和我们的医学 WordPress 主题（带有主题推荐插件）。 是的，是的，我知道我基本上说不要使用共享主机，但我们会看到它的能力和限制是什么，另外这只是一个页面速度优化测试，而不是一个实际的商业 WordPress 网站

我已经安装了最新版本的 WordPress、MedicPress 主题、所有主题推荐的插件，并且我已经导入了演示内容。 这是我们测试站点的起点。

页面速度工具

页面速度优化可能很难，但值得庆幸的是，有一些在线工具可以让我们的生活更轻松，并建议我们做什么，以提高我们网站的速度。

优化 WordPress 速度的第一条规则是：始终衡量！

在每个优化步骤之后运行工具（或至少其中一个），我们将在下面的部分中查看这些工具，并跟踪改进。 通过这种方式，您将知道哪些任务带来了最大的改进。 您还应该多次运行测试，以查看真正的平均加载时间。

页面加载方式不同，具体取决于托管服务器所在的位置。 例如，如果您的服务器位于北美，而访问者来自欧洲，那么对于他来说，页面加载速度会比加拿大访问者慢。 这个问题可以通过 CDN（内容交付网络）来解决，但我们稍后会在本文中讨论这个问题。 现在，我只想指出，这个问题存在于世界各地的访问者以及页面速度优化工具中。 一些工具还允许您从不同位置执行测试，因此您可以了解这如何影响加载时间。

我们将看到的页面速度工具是：

• 谷歌 PageSpeed 见解
• GTmetrix
• Pingdom 网站速度测试
• 网页测试

还有其他工具，但这些是最受欢迎的工具，我们会坚持使用它们。

谷歌 PageSpeed 见解

从这个工具的标题可以看出，这是谷歌的产品。 除了分数（分为桌面版和移动版）以及如何改善页面加载时间的有用说明之外，我们还可以得出关于 Google 喜欢在网站上看到的内容的结论。 它希望在网站上优化哪些内容以在搜索引擎结果中排名良好。

如果您有任何未优化的图像或资源文件（JS 或 CSS），它将生成一个 zip 文件及其优化的对应文件，您可以在服务器上替换它。 很整洁，对吧？ 稍后我们将研究图像和代码优化，只要知道 Google PageSpeed 可以帮助您。

Google PageSpeed Insights 不像其他工具那样有很多详细的信息，但它是一个很好的起点，它涵盖了页面速度优化的所有重要方面。 它列出了最能改善您的网站的步骤。

我已经使用我们测试站点的 URL 运行了这个工具，我在台式机上得到了 71 分，在移动设备上得到了 67 分，所以还有改进的余地。 可能的优化建议列表包括：

• 启用压缩（使用 gzip 或 deflate 压缩资源），
• 优化图像，
• 减少服务器响应时间，
• 消除首屏内容中的渲染阻塞 JavaScript 和 CSS，
• 缩小 JavaScript。

GTmetrix

此工具为您提供有关哪些内容已优化和哪些未优化的更详细信息。 每个优化细节都列出并以 0-100 的等级进行评分。 该列表按重要性排序，因此如果您从上到下跟踪任务并优化没有 100% 分数的任务，您将走上一条尽快加快 WordPress 网站速度的好方法。

使用 PageSpeed 和 YSlow 测试工具，GTmetrix 为您的页面生成分数并显示需要改进的任务。 该工具的一个不错的功能是瀑布报告，它将以图形方式表示您的网站是如何加载的，您可以更快地发现瓶颈。 在下图中，您可以看到我的慢速共享主机需要 1.13 秒才能响应第一个信息。 这太长了，但我们将能够改进它。

您还可以从全球 7 个不同的位置测试您的页面，这很好，也是测试的重要内容，我们将在本文后面看到。

我在我们的测试站点上运行了 GTmetrix 工具（位置：加拿大温哥华），PageSpeed 得分为 77，YSlow 得分为 71。使用此工具，我们还可以获得以下有用信息：

• 满载时间：3.1s，
• 总页面大小：803KB
• 请求：54

我最喜欢 GTmetrix 工具，因为您可以在一个地方获得大量相关信息。 在本指南中，我们将主要使用 GTmetrix 工具来衡量我们的优化进度。

Pingdom 网站速度测试

Pingdom 是另一个工具，它显示的优化信息略有不同。 您将获得与 GTmetrix 工具相同的基本汇总数据（没有 YSlow 分数）。 使用 Pingdom，您可以选择在 4 个不同位置测试页面速度。 每个位置的结果都不同，这表明服务器位置很重要，但我们也将能够改进这一点（本文稍后将使用 CDN）。 我们将使用 Pingdom 工具来测试 4 个可用位置的页面加载时间，因为 Pingdom 测试完成得更快。

Pingdom 还显示一些有趣的表格，如内容大小或请求数量，按内容类型或域过滤，它还有一个瀑布报告。

网页测试

WebPageTest 工具比以前的工具具有更多的配置选项。 它有更多位置可供选择，可以选择互联网速度，您可以启用/禁用一些浏览器选项，并且可以测试特定设备。

这是一个很好的工具，它会为每次运行显示详细的瀑布报告（默认情况下它会运行 3 次，但您可以在设置中更改它），它会为每个速度优化因素显示 A 到 F 等级：

• 第一个字节时间（响应时间），
• 启用保活，
• 压缩传输（gzip），
• 压缩图像，
• 缓存静态内容，
• 有效利用 CDN。

您可以通过检查所有结果选项卡来了解详细信息，您会在其中找到很多有用的信息。 如果我需要详细报告或需要测试他们网站上可用的位置，我会使用此工具，否则我认为 GTmetrix 有更简洁的信息。

我为我们的测试站点运行了这个工具。 您可以在下面的屏幕截图中看到结果：

我们查看了更流行的页面速度工具，并进行了初始页面速度测试，所以现在我们终于准备好开始优化我们的 WordPress 网站了。 作为参考，这些是我们将用于衡量我们的速度优化进度的页面速度工具的起点结果：

• 谷歌 PageSpeed 见解
  • 手机：67
  • 台式机：71
• GTmetrix
  • 页面速度：77
  • 慢速：71

图像优化

这可能是网站性能最被忽视的方面，同时它可以为您的网站速度带来最大的提升。 如果您在将图像上传到 WordPress 网站之前从未考虑过优化图像，那么这是您优化 WordPress 加载时间的第一步。

上传大的、未优化的图像，在你网站的一个小地方使用是一个很大的“不”。 示例：您的网站上有一个不大于 600 x 400 像素的图片槽，并且您上传了 1920 x 1080 像素的图片（甚至更大！）。 现在，你重复这个错误几次，你的网站会很慢。

首先要做的是将图像调整为适当的大小。 在我们的示例中，图像槽永远不会大于 600 x 400 像素，因此我们应该将图像调整为该大小。

“就这样，工作完成了，对吧？” 不。 我们可以进一步改善形象。 有很多工具可以优化（压缩）图像而不损失其质量（我们的眼睛无法使用这些工具检测到质量损失）。 这也将大大减少图像文件的大小，使其加载速度更快。

图像压缩可以手动完成，也可以使用 WordPress 插件完成。 我的同事 Marko 为图像优化写了一个非凡的指南，因此我们将使用从他的文章中获得的知识，并快速了解可用于优化图像的技术。

图像优化小指南

选择正确的图像格式——在线使用最流行的图像格式是 JPEG 和 PNG。 通过选择正确的图像格式，您可以节省很多图像文件大小（Marko 在他的文章中节省了 45%）。 你应该使用：

• .jpg格式的照片、带有渐变的图像和具有数百万种颜色的图像。
• 具有有限颜色（徽标）的图像和具有透明度的图像的.png格式。

调整图片大小– 正如我上面提到的，在将图片上传到 WordPress 网站之前，您应该始终调整图片大小。 首先，检查您将使用图像的空间有多大，并相应地调整它的大小。 您可以使用图像处理程序（如 GIMP 或 Photoshop）调整图像大小。

压缩你的图像——这可以通过在线图像压缩工具或 WordPress 插件来完成：

在线压缩工具：Marko 推荐使用 Optimizilla 在线工具。 只需将您的图像上传到 Optimizilla 应用程序，一旦该过程完成，下载优化的图像，然后您应该将其上传到您的 WordPress 网站。 这听起来有点乏味，所以当然有一个 WordPress 插件，可以简化这个过程。

WP 图像压缩插件：Marko 再次测试了最流行的图像压缩插件并宣布获胜：ShortPixel Image Optimizer。 安装插件后，您必须请求 API 密钥才能使用插件（一个非常简单的过程）。 该插件的默认设置非常好，因此您无需进行任何设置，只需转到Media -> Bulk ShortPixel并单击“开始优化”按钮。 任何新上传的图像也将被优化。 注意：此插件的免费版本仅允许每月 100 次图像优化，如果您需要更多，则必须切换到他们的付费计划。 我们希望我们的客户能够使用最好的工具，因此我们与 ShortPixel 合作，现在我们的ProteusClub 成员还可以获得 1,000 积分，可免费使用 ShortPixel WordPress 插件。

最后，我不能推荐您阅读有关 WordPress 图像优化的整篇文章。

Google PageSpeed 优化图像

这是关于如何优化 WordPress 网站上现有图像的另一种方法。 如果您按照上述步骤，在图像优化迷你指南部分，那么您可能已经优化了图像，因此 Google PageSpeed 不会为您提供任何图像。 做得好！ 您仍然可以阅读本节以供参考

我在 Google PageSpeed 工具介绍中提到，Google 会生成一个 zip 文件，其中包含可在您的网站上使用的优化文件。 您可以通过单击此链接下载 zip 文件：

在这个 zip 文件中，您有一个名为image的文件夹，其中包含优化的图像。 您可以通过 FTP 或您的托管文件上传器上传它们。 替换/覆盖正确上传文件夹（.../wp-content/uploads/...）中的图像。 之后，您还应该在 WordPress 网站中生成这些图像的较小版本（缩略图）。 您可以使用 Regenerate Thumbnails 插件来做到这一点。

其他图像改进

在本节中，我们将看到一些关于图像的进一步改进，我们可以利用这些改进来获得一些额外的性能。

延迟加载图像

延迟加载是一种加载图像的技术，其中图像是异步加载的。 不在首屏的图像不会在页面加载时加载（它们在需要时甚至在需要时才加载）。 这意味着，可以在页面顶部看到的图像被加载，而其他图像（未看到）在页面加载后或用户向下滚动页面时（按需）加载。 如果您有一个包含许多图像的长页面，则可以使用此技术节省大量初始页面加载时间。

可以使用一些自定义代码或 WP 插件来实现延迟加载。 稍后我们将使用 WP Rocket 缓存插件，它也具有延迟加载功能。

图片盗链

什么是盗链？ 它正在显示托管在另一台服务器上的图像。 例如，如果您有一个非常受欢迎的帖子，并且在该帖子中，您有一个很好的图像。 访问者（小偷）可能会复制图像源 URL 并在他自己的站点上使用它。 这意味着，将从您的服务器请求和提供图像。 将小偷乘以 100，您的服务器必须响应数千个外部请求，这可能会降低您的服务器速度。

这不是直接的页面速度优化，而是服务器优化。 您可以使用 .htaccess 文件中的一些代码解决盗链问题。 您可以更进一步（有点邪恶）并用另一个可能不是那么好的图像替换被盗的图像:)。 这也可以在 .htaccess 文件中完成。 在您的服务器上打开您的 .htaccess 文件并将此代码添加到其中。 将your-website.com替换为您的域，将google.com替换为您希望允许访问您的图像并替换 http://replacing-stolen-image-url-goes-here.jpg 的任何其他域带有您要为任何被盗图像显示的图像 URL。

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

如果您不想用自定义图像替换被盗图像，请使用此代码。 这将禁用他们网站上的图像：

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

案例研究改进

在优化图像后，让我们看看到目前为止我们在测试站点上取得的进展。 如您所知，我已经为我们的医学主题导入了演示数据，我们将其用作我们的测试站点。 这些演示图像使用了正确的文件格式，并且它们的大小已经正确，所以我可以跳过这两个步骤。 如果我要上传新图片，我不会跳过它们！

所以，我已经安装了 ShortPixel 插件并运行了批量优化器。 该插件报告平均图像优化为 38%。 那太棒了！

我已经运行了 PageSpeed Insights 工具，Google 指出某些图像可以进一步压缩，所以我按照自己的建议，使用 Google 为我准备的图像，然后通过 FTP 将它们上传到我的服务器。

图像排序后，页面速度工具的结果是：

• 谷歌 PageSpeed 见解
  • 手机：72
  • 台式机：77
• GTmetrix
  • 页面速度：81
  • 慢速：71

不是很大的改进，因为演示数据中使用的图像已经非常优化，但我们仍然离我们的目标更近了一步。 如果您的网站上有未优化的图像，那么此图像优化步骤将为您带来巨大的分数增加并降低页面加载时间。

浏览器缓存

当用户通过浏览器访问您的网站时，它必须从您的服务器下载所有资源（HTML、图像、JS、CSS……），以便为访问者显示该网站。 当同一用户访问您网站上的另一个页面时，CSS 和 JS 文件通常保持不变，但如果您没有适当的服务器配置，浏览器可能仍会再次从您的服务器下载它们。

应在您的服务器上设置适当的缓存标头和到期日期，以允许将静态资源（JS、CSS 和其他文件）存储在浏览器的缓存中。 这极大地提高了回访者或查看您网站上多个页面的访问者的性能。

通常，托管服务器已经配置好了。 If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. 这要容易得多！

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. 做得好！

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. 这是一个棘手的问题。 Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? 你怎么敢！” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

服务器端缓存

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

让我们看看 WP Rocket 插件必须提供的设置。 WP Rocket 在您的顶部 WP 管理菜单栏中有一个不错的快捷菜单。 从那里，您可以访问设置页面，清除缓存并访问有关此插件的其他有用信息。

在我们继续尝试不同的 WP Rocket 设置之前，我想提一下，在您进行每次更改后，您应该在隐身/私人浏览器选项卡中验证您的网站。 如果您登录到您的 WordPress 站点，那么您将看不到该站点的缓存版本。 在隐身浏览器选项卡中，您将不会登录，并且会获得该站点的缓存版本，因此您可以检查它是否工作正常。

还知道启用每个 WP Rocket 设置可能会对您的 WordPress 速度产生不同的结果甚至负面影响，具体取决于您使用的主题或插件，因此仅启用所有 WP Rocket 设置并不是可行的方法。 您应该尝试每个设置并使用页面速度工具对其进行测量，以查看差异。 正如您将看到的，某些技术不会提高我们的页面速度，因此我们不会使用它们。

清除缓存

服务器端缓存将在您激活 WP Rocket 插件后立即开始工作，所以让我们看看如何清除它。 您可以手动清除缓存，如果您单击 WP Rocket 快捷菜单中的菜单项“清除缓存”。 当您更新定制器设置、更改/更新小部件、类别等时，该插件还将自动清除缓存，当您更新页面时，它会部分清除缓存。 有关何时发生自动缓存清除的更多信息，请参阅此 WP Rocket 问题。

缓存的使用寿命可以在 WP Rocket 设置的“基本”选项卡中设置。 我建议将此设置为 1 天。

预加载缓存

WP Rocket 的一个不错的功能是“预加载缓存”，它将预加载您的主页及其链接到的页面的缓存，因此您的用户将始终获得页面的缓存版本。 我可以在运行页面速度工具之前使用此功能，并且不必多次运行这些工具来获取缓存的版本结果。

可以在“预加载”选项卡下的设置页面中访问预加载缓存设置。 寻找“Preload bot”选项，在那里你会找到一个手动和一个自动选项。 如果您启用自动机器人选项，预加载缓存将在您每次更新或创建页面或缓存过期时运行。 此选项会影响服务器的性能，因此如果启用它，请密切注意性能日志。 如果您正在更新和创建大量帖子/页面并且您有共享主机，我建议您不要启用此选项。 您应该只启用手动机器人选项，这将创建另一个 WP Rocket 快捷菜单项，标题为“预加载缓存”，并且仅当您单击它时才会预加载缓存（在您完成编辑帖子和页面之后）。

在“预加载”设置选项卡中，您还可以找到从站点地图预加载缓存的设置，因此您可以定义站点地图，它将使用站点地图中的 URL 为这些页面预加载缓存。

延迟加载

我已经在本文的图像优化部分解释了延迟加载图像，但是现在我们已经安装了 WP Rocket，我们实际上可以启用此功能。 转到 WP Rocket 设置的“基本”选项卡并为图像启用 LazyLoad，如果您使用任何视频或 iframe，那么您也可以启用它。

启用此功能后，您应始终检查您的站点并查看图像的加载方式。 LazyLoad 可能会破坏您的站点布局，或者您可能不喜欢图像的加载方式（内容跳转），因此请务必检查您的页面。 此功能非常方便，当您有很多首屏图像时，它将帮助您减少原始页面加载时的图像请求数量。 在我们的测试站点上，我们只有 5 个首屏图像，因此我们节省了 5 个图像请求，我们的页面加载时间现在降至 1.7 秒，而页面速度工具的分数保持不变。 这是一个很好的指标，表明您可以通过工具不建议的某些任务来提高页面速度。

缩小文件

我们仍然可以改进的一些 GTMetrix 建议是缩小 HTML、CSS 和 JS 文件。 因为我们的 WordPress 主题和大多数推荐的插件已经使用 JS/CSS 文件的缩小版本，并且我们在服务器上启用了 Gzip，所以这种 WP Rocket 优化不会为我们的测试站点带来任何重大改进，但您的情况可能是不同的。 转到 WP Rocket 设置中的“静态文件”选项卡，然后检查“缩小文件”选项下的所有 3 个选项。 保存设置并在隐身/私人标签中检查您的网站，以便您可以查找这些选项可能给您的网站带来的任何问题。 在我的测试 WordPress 站点中，CSS 缩小破坏了页面构建器 flexbox css 文件排队，因此我不得不禁用 CSS 缩小文件选项。 HTML 和 JS 选项工作正常。

我问 WP Rocket 支持可能是什么问题，他们很好地在我的网站上调试了这个问题。 这个问题是由我的共享主机上使用的 Varnish 缓存引起的。 他们建议更改我的托管服务器上的 Varnish 配置。 我已经联系了我的托管支持，并且我怀疑，我无法更改共享主机上的 Varnish 配置，但如果我升级到 VPS 托管包，我将能够。 如您所见，使用共享主机不是一个好主意

如果您在 CSS 或 JS 缩小方面遇到一些问题，您可以将导致问题的文件 URL 添加到排除的 JS 或 CSS 文件的框中。 查找导致问题的文件可能很棘手，但通常您知道哪个功能被破坏以及哪个插件负责该功能，因此您检查您的页面源代码并检查该插件包含的文件。 如果插件有多个 JS 或 CSS 文件，那么您可以尝试将它们添加到排除列表中，看看问题是否消失。

合并 JS 和 CSS 文件

GTmetrix 工具中的 YSlow 选项卡告诉我们“减少 HTTP 请求”。 它说我们的 WordPress 使用 9 个外部 JS 脚本，我们应该尝试将它们组合成 1 个，并且页面使用 4 个外部 CSS 文件，我们也应该尝试将它们组合成 1 个文件。 如果您还记得，我们已经在本文的删除不需要的 JS 或 CSS 文件部分中删除了不需要的 JS 和 CSS 文件。

将所有 JS 和 CSS 文件合并到一个文件中并不是一个好主意，因为浏览器可以并行下载 6 个较小的文件，比 1-2 个大文件要快。 另一个原因是某些文件包含在 HTML 文档的头部，而另一些则包含在文档的末尾，因此您必须将它们拆分为至少 2 个文件。

要使用 WP Rocket 合并文件，请转到插件设置中的“静态文件”选项卡并启用合并文件下的选项。 与往常一样，在隐身/私人浏览器选项卡中验证您的网站以检查是否存在任何问题。

在我们的例子中，WP Rocket 又出现了问题，由于上面提到的共享主机 Varnish 配置问题，所以我不得不禁用 JS 合并文件选项。

同样，如果您对 CSS 或 JS 连接有一些问题，您可以将导致问题的文件 url 添加到排除的 JS 或 CSS 文件的框中，就像在上面的缩小步骤中一样。

从静态资源中删除查询字符串

GTMetrix 建议我们从静态资源中删除查询字符串，因为某些代理服务器不会缓存带有查询字符串的资源。

静态资源（通常是 JS 或 CSS 文件）中的查询字符串是一个 URL 属性，它标记了该文件的版本。 它看起来像这样： ?ver=2.5.8并附加在 URL 的末尾： http ://domain.com/css/front-flex.css?ver=2.5.8

我们可以使用 WP Rocket 轻松删除这些查询字符串。 转到插件设置的“静态文件”选项卡并启用“删除查询字符串”选项。

启用此选项后，我们的 GTmetrix PageSpeed 分数变为 98，但页面加载时间没有改变。

渲染阻塞 CSS/JS

剩下的唯一 Google PageSpeed Insights 工具建议是“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”。 这意味着有一些 JS 或 CSS 文件阻止了首屏内容中页面的加载。 该工具希望我们做的是延迟或异步加载这些阻塞资源。

再一次，WP Rocket 插件来救援了。 转到“静态文件”选项卡并查找阻止渲染的 CSS/JS选项。 在那里您可以启用可以解决此问题的 JS 和 CSS 选项。 启用 JS 选项后，将出现安全模式（推荐）选项。 此安全模式将在页面头部加载 jQuery 库（WP 默认入队库），将其保留为阻塞文件，但不会破坏页面上具有内联 jQuery 代码的任何页面。 由于 jQuery 仍然加载在头部，PageSpeed 工具仍然抱怨我们有一个渲染阻塞 JS 文件。

因此，如果我为我们的测试站点禁用安全模式，Google PageSpeed 工具会给我们一个满分，移动端 100 分，桌面端 100 分。 太好了，对吧？ 并不真地！ 我们的网站仍然可以正常运行，但让我们看看网站是如何加载的：

无样式内容 (FOUC) 的 Flash 可以通过使用 WP Rocket 设置中的关键路径 CSS选项来修复（就在渲染阻止 CSS/JS 选项下方）。 理论上，您可以添加页面首屏部分所需的 CSS 代码，以便在页面加载时不会出现这种无样式文本的闪光效果。 这比听起来要难。 有一些工具可以为你生成这个关键的 CSS，但我没有用它们取得太大的成功。

生成关键路径 CSS 代码：

1. 在您的网站上禁用 WP Rocket 插件。
2. 转到关键路径 CSS 生成器工具。
3. 输入您的站点 URL 并运行它。
4. 复制关键路径 CSS 代码。
5. 激活 WP Rocket 插件。
6. 将 CSS 代码粘贴到 WP Rocket 设置中的“关键路径 CSS”框。
7. 检查关键 CSS 代码中是否有任何相对 URL 路径并将其更改为绝对路径。

这就是我们的 WordPress 测试站点现在加载的样子：

它更好，但我仍然不喜欢它。 是的，100/100 的 Google PageSpeed 得分很棒，但总加载时间较慢，而且我们还有 2 个请求，因为我们启用了这个渲染阻塞 CSS/JS 选项。 对我来说主要问题仍然是页面加载的用户体验，所以我禁用了这个 WP Rocket 选项。

WP Rocket 绝对是每个 WordPress 网站所有者都应该使用的插件，因为它具有加速您网站的所有功能。 只需激活插件就会给您带来巨大的提升。 必须为每个网站测试其他功能，因为每个主题和插件都可能带来自己的问题。

我们的优化步骤快要结束了。 唯一剩下的就是为我们的网站资产使用 CDN。

内容交付网络 (CDN)

我已经在本文中多次提到，页面加载时间会有所不同，具体取决于服务器的位置和访问者的位置。 例如，我们用于测试的共享托管服务器位于德克萨斯州奥斯汀（美国），在本文的 Pingdom 页面速度工具部分的开头，我们测试了 4 个位置。 结果如下：

• 德克萨斯州达拉斯（美国）= 1.65 秒
• 加利福尼亚州圣何塞（美国）= 2.53s
• 瑞典斯德哥尔摩（欧盟）= 3.06s
• 墨尔本 (AUS) = 5.38s

现在我们已经优化了网站，使用了本文中提到的所有步骤，我们的加载时间是：

• 德克萨斯州达拉斯（美国）= 0.63s
• 加利福尼亚州圣何塞（美国）= 0.76 秒
• 瑞典斯德哥尔摩（欧盟）= 1.21s
• 墨尔本 (AUS) = 2.24s

当我们将网站设置为使用 CDN 时，我们将使用这些时间来比较我们的 WordPress 加载时间。

我们可以看到，这些时代非常不同； 这是因为数据必须从我们的服务器位置传输到澳大利亚访问者，而不是到达达拉斯的访问者。 这就是 CDN 将帮助我们减少加载时间的地方。

CDN 是服务器代理及其数据中心的地理分布网络。 他们的主要目标是将您的网站内容从离访问者最近的服务器分发给访问者。 这意味着，您的网站静态内容（图像、JS、CSS ......）将由他们分布在世界各地的服务器提供服务，从而使您的网站更快地为每个人加载。

使用 WordPress CDN 有很多好处，包括：

• 减少延迟，即距离必须经过的时间和/或延迟。
• 减少第一个字节的时间 (TTFB)，这是衡量浏览器在从服务器接收其第一个数据字节之前必须等待多长时间。
• 从缓存中提供内容，以加快页面加载时间并减少托管（源）服务器的压力。
• 在安全连接上使用 HTTP/2 以利用多路复用、并行性、服务器推送和 HPACK 压缩。
• 使用 GZIP 或 Brotli 压缩数据以确保更小的 HTML、样式表和 JavaScript 文件。

如今，CDN 提供了许多其他功能，尤其是在安全部门。 他们通常提供 DDoS 保护、机器人检测/预防等。

我们将研究一种更流行的 CDN，称为 Cloudflare。 他们提供免费套餐，其中包括使用他们的全球 CDN，而这正是我们所需要的。

Cloudflare

首先访问 cloudflare.com 并注册一个新的免费帐户。 创建帐户后，您必须在 Cloudflare 上设置您的网站，以便它为您的静态内容（资产）提供服务。

当您登录到新的 Cloudflare 帐户时，系统会要求您添加您的网站（域）以自动检索 DNS 记录。

输入您的域，然后单击“开始扫描”。 即使我使用的是子域（ speed.gregorcapuder.com ），我也只需要输入根域： gregorcapuder.com 。 扫描部分大约需要一分钟才能完成，与此同时，您可以观看一段简短的视频，该视频将解释正在发生的事情。 扫描完成后，您可以单击“继续”按钮。

在下一步中，您将看到 Cloudflare 可以为我们的域找到的所有 DNS 记录。 在这里，您必须添加任何可能丢失的记录，因此请查看列表并检查是否缺少某些内容。 在我们的示例中，缺少 speed 子域，因此我将其添加到列表中。 在名称输入中，我输入了“速度”（我的子域的名称），在IPv4 地址中，我输入了与主域（gregorcapuder.com）相同的 IP 地址，然后单击“添加记录”。 正如您在下面的屏幕截图中看到的那样，我已经为我的主域以及 speed 子域启用了 Cloudflare（由橙色云标记，云后面有一个箭头）。 这意味着，在这两个网站上，流量将由 Cloudflare 处理和保护。

完成 DNS 记录后，您可以继续下一步，选择“免费网站”计划并继续。

为您的网站启用 Cloudflare 的最后一步是登录到您的域名注册商的仪表板（您从那里购买域名）并更改您的域名的名称服务器。 据说，新名称服务器最多可能需要 48 小时才能生效，但就我而言，它在 1 小时内更新。 在此期间不会有网站停机，所以不用担心。

为您的站点更新名称服务器后，您将看到 Cloudflare 网站的状态更改为“活动”。

我将仪表板中的所有 Cloudflare 设置保留为默认设置，我唯一更改的是安全级别。 转到防火墙选项卡并将“安全级别”调整为低。 那是因为我不希望我的访问者在错误的攻击者检测上获得“挑战页面”。

现在，我们设置了 Cloudflare 端，我们还应该在 WP Rocket 插件上启用 Cloudflare 设置。

登录到您的 WordPress 管理仪表板并转到 WP Rocket 插件设置。 导航到“CDN”选项卡，启用“显示 Cloudflare 设置”选项卡并保存设置。 这将在 WP Rocket 设置中显示一个新的“Cloudflare”选项卡，您应该打开它。 您应该在此处输入 Cloudflare 帐户电子邮件、域，还应该复制并粘贴 Cloudflare 全局 API 密钥。 要检索全局 API 密钥，请转到 Cloudflare 仪表板（概览选项卡）并单击“获取您的 API 密钥”链接。 您将在这个新页面上看到“API 密钥”部分，您应该单击“全局 API 密钥”行的“查看 API 密钥”按钮。 将全局 API 密钥粘贴到 WP Rocket 设置中后，我还建议在 WP Rocket 中启用“优化设置”选项。 保存设置，然后单击“清除 Cloudflare 缓存”按钮，以验证一切正常。

现在，配置了 CDN，我们可以再次测试来自不同位置的加载时间并查看改进（Pingdom 测试）。

• 德克萨斯州达拉斯（美国）= 0.54 秒
• 加利福尼亚州圣何塞（美国）= 0.70s
• 瑞典斯德哥尔摩（欧盟）= 0.91s
• 墨尔本 (AUS) = 1.16s

正如预期的那样，欧洲和澳大利亚的装载时间改善最大。 我们所有的加载时间都在 1 秒左右，或者更低。 这是一个很好的加载时间！

当您测试您的网站时，不要只为一个位置运行一次页面速度工具来测试它。 你需要测试它几次。 当您第一次在某个位置运行该工具时，缓存文件必须首先存储在最近的 Cloudflare 服务器上，每个后续测试都应该向您显示缓存版本的真实加载时间。 我建议您测试 3-5 次，以获得您的页面从特定位置加载的平均速度。

最终结果

我们的最终页面速度工具得分是：

• 谷歌 PageSpeed 见解
  • 手机：91
  • 台式机：97

• GTmetrix
  • 页面速度：98
  • 慢速：91

以下是截图：

对比一下优化前后的GTmetrix数据：

我们在各个方面都改进了我们的网站性能。 该网站加载速度更快，向用户显示网站所需的请求更少，占用的带宽更少，并且为世界各地的访问者加载速度更快。 同时，我们将网站的所有功能和样式保持原样。 惊人的！

最后，我们为我们完成的每个优化步骤准备了一个很好的可视化结果表示：

结论

在这个终极的 WordPress 页面速度优化指南中，我们研究了您可以采取的更重要的步骤，以显着提高您的网站性能。 遵循本文中的建议将使您的网站精简和快速，这将改善您的页面加载时间，从而改善用户体验。 这些改进也可能会带来更多的钱，并帮助您节省一些服务器成本，所以这对每个人来说都是双赢的！

我想总结这篇文章，速度不是一切，它是网站拼图的另一块。 我们为人类、潜在客户建立网站，因此请始终牢记这一点。 在内容、多媒体、设计、用户体验和页面速度之间找到一个很好的平衡点。 不要沉迷于页面速度和页面速度工具分数。 只要您改善访问者的体验，您的目标就会实现。

我是否错过了任何网站优化步骤，您认为这些步骤可以显着改善页面加载时间？ 在下面的评论中告诉我！

如果您发现我们的文章有用并且您遵循了它的步骤，请在下面的评论中让我知道您取得了哪些改进。