使用 WP Rocket 作为我们 WordPress 代理商的秘密武器

已发表: 2022-11-04

如果我告诉您,您可以创建在 PageSpeed Insights 上得分超过 90% 的快速高效的 WordPress 网站会怎样? 更好的是,如果我告诉你,你可以在移动设备上获得那些令人印象深刻的分数,并且每个项目都通过 Core Web Vitals,那会怎样?

对于使用快速主题、良好托管以及最重要的是 WP Rocket 的客户项目,我们始终如一地这样做。 使用 WP Rocket 是我们 WordPress 机构的秘密武器!

但是,如果您从另一个开发人员或代理机构继承了一个项目并需要提高性能怎么办? 在本文中,我们回顾了一些常见的性能瓶颈,并建议您可以使用 WP Rocket 进行改进以获得出色的结果。

我们的背景和 WordPress 经验

自 2007 年以来,我们的代理机构 Clio Websites 一直在帮助客户推出精美的新网站。

自 2013 年以来,我们一直在使用 WordPress,并且已经看到并解决了几乎所有可能损害网站性能的问题。 从低效的主题到大型图像文件和同一网站上的多个构建器。

我们的核心产品之一是帮助客户提高他们的网站性能,而 WP Rocket 在这方面发挥着关键作用。 我们已经将 WP Rocket 用于使用自定义主题、块编辑器 (Gutenberg) 和流行的页面构建器(如 Elementor 和 WP Bakery)的项目,并获得了出色的结果。 这就是为什么我们将 WP Rocket 称为我们 WordPress 机构的秘密武器。

缓存、缩小和资产延迟——实现出色网站性能的关键

由于其开箱即用的架构,WordPress 在性能方面需要一点额外的爱。 Vanilla WordPress 实现经常访问 SQL 数据库以查找信息,这会导致用户与网站交互时频繁往返服务器。

这种设置的动态特性是 WordPress 作为内容管理系统 (CMS) 的最大优势,也是最大的缺点。

缓存的工作原理

像 WP Rocket 这样的缓存插件会创建您网站的静态版本并将其显示给访问者,而不是往返于数据库和后端服务器。

当您对网站进行更改或添加新内容时,WP Rocket 会缓存该版本并向您的用户显示最新的文件。 要了解有关此神奇插件如何工作的更多信息,请查看 WP Rocket 功能。

缩小如何提高性能

缩小是使网站性能更好的另一个重要功能。 此过程从网站文件中删除所有不必要的字符和空格,使它们对人类可读并创建这些文件的更有效版本。

由于计算机不需要空间来打开和显示文件,因此读取和渲染它们要快得多。 缩小文件有助于提高网站速度,但也必须进行彻底测试,因为它有时会导致问题(我们将在本文的后续部分中介绍)。

什么是资产延迟和递延?

将网站资产从加载延迟到需要时正是它听起来的样子。 使用 WP Rocket,您可以延迟或推迟加载文件或图像,直到用户滚动到该部分或开始与网站功能交互。 这可以显着提高网站性能,因为您可以强制网站仅加载访问者在访问您的网站时需要看到的初始部分。

现在您对缓存和缩小有了更多了解,让我们来看看我们在与客户端合作时看到的常见问题,并向您展示如何使用 WP Rocket 修复它们。

4 常见的网站性能问题

我们在构建和帮助客户提高网站性能方面拥有丰富的经验。

在使用从其他开发人员那里继承的网站时,我们看到的最常见问题如下:

  1. 大且未压缩的图像
  2. 配置错误的缓存插件,或没有缓存插件
  3. 无延迟或延迟功能的未压缩资产(CSS 和 JavaScript 文件)
  4. 低效的主题和插件

如何识别性能问题

您可以使用许多免费工具来诊断和解决网站性能问题。 我们最喜欢的工具是 PageSpeed Insights、GTmetrix 和 WebPageTest。

不要害怕使用所有这三个,因为它们提供了解决问题的独特见解和建议。 我们认为,PageSpeed Insights 是最重要和最可靠的工具。 这是 Google 推荐的用于故障排除和修复在 Google Search Console 中发现的性能问题的工具。

在接下来的几节中,我们将深入研究最常见的性能问题以及如何解决它们。

1.未压缩的图像

使用大且未压缩的图像是对网站加载速度产生负面影响的最常见问题。 2022 年的平均网站大小为桌面版约为 2.3MB,移动版约为 2MB。

来源:HTTP 存档
来源:HTTP 存档

如果您的网站使用了几张高质量的图片,您可能会很快超过网站的平均大小并减慢速度。 这会导致网站加载速度变慢,图片在文本之后加载,这会给网站带来 1990 年代中期的氛围。

在将图像上传到您的站点之前对其进行压缩是关键。 您可以使用 Imagify 等工具自动执行此过程。 查看这篇文章,了解有关如何在网站上压缩和提供图像的其他建议。

2. 配置错误或缺少缓存插件

由于 WordPress 使用客户端-服务器架构,因此必须启用和配置缓存。 使用缓存插件可以解决 WordPress 网站所有者遇到的许多性能问题。

我们遇到很多完全错过这一步的网站。 这可能会导致网站加载时间很长,尤其是在移动设备上,就网站性能而言,移动设备比桌面设备更不宽容。

缓存插件往往很复杂且容易配置错误。 这是我们更喜欢 WP Rocket 的另一个原因。 它真的很容易配置,它的设置是为了立即获得很好的结果。

3. 无延​​迟特性的未压缩资产

使用正确的工具可以轻松压缩 CSS 和 JavaScript (JS) 文件等其他网站资产,并且可以产生很好的结果。 在下一节中,我们将向您展示如何做到这一点来提高您的网站性能。

这些相同的资产也可以组合、延迟和延迟,以进一步提高性能。 这些问题可能有点难以解决,但这是 GTmetrix 等工具派上用场的地方。

GTmetrix 瀑布图
资料来源:GTmetrix 瀑布图

GTmetrix 有一个瀑布图,可以显示您的网站正在加载的所有资产。 没有压缩和延迟,你会看到加载更多更大的 CSS 和 JS 文件。

请注意:启用压缩和延迟设置有时会破坏您网站的某些部分和功能。 确保您在每一步都彻底测试它们。

4. 低效的主题和插件

低效的 WordPress 主题可能包含大量脚本、臃肿的资产和糟糕的编程实践,这些都会显着影响 Web 性能。 我们建议使用主要是快速高效的主题(如 Hello Elementor、GeneratePress 和 Astra)。

虽然像 WP Rocket 这样的工具可以帮助缓解由不良主题引起的问题,但在构建新项目时使用快速主题更容易完全避免这些问题。

在关注性能和对慢速站点进行故障排除时,避免不必要的插件是另一个好主意。 安装大量插件会显着降低网站速度。

虽然在您应该使用的插件数量方面没有硬性规定,但我们建议您不要使用过多的插件。 并非所有插件都是平等创建的,有些插件肯定比其他插件更好。 当我们与希望提高网站性能的客户合作时,我们会尝试尽可能多地消除不必要的插件。

我们如何使用 WP Rocket 获得 >90% 的分数

没有人喜欢使用速度慢的网站。 尤其是在他们的移动设备上。

在您确定客户网站遇到的性能问题后,您可以使用 WP Rocket 解决这些问题,并在移动设备上得分超过 90%。

这对您的客户和您的代理机构意味着什么

我们最近通过安装和配置 WP Rocket 帮助客户将移动设备的性能从 54% 提高到 97%

我们已经看到性能提高了客户网站的转化率、SEO 和访问者满意度。 事实上,根据研究,超过一半的访问者会放弃加载时间超过 3 秒的网站。

谷歌还表示,快速加载速度是一个排名因素,这意味着如果您的网站比竞争对手快,它将在谷歌搜索中排名更高。

在另一个示例中,我们使用 WP Rocket 将移动性能从 24% 提高到 90% 以上,并帮助他们通过 Core Web Vitals(见下面的屏幕截图)。 在解决了性能问题并清除了 Google Search Console 缓慢错误后不久,我们看到他们的SEO 流量猛增了 55%

作为代理商,我们使用 WP Rocket Infinite 计划并在我们所有的客户网站上安装 WP Rocket,以提高性能。 我们将此作为使用我们的代理而不是其他代理的好处,这可能会迫使您购买自己的高级插件。

我们的客户享受使用市场上一些最好的插件(如 Imagify 和 WP Rocket)的好处。 WP Rocket 还使管理平台中的站点变得超级容易,并在必要时将其删除。 所有使用您许可证的网站都将显示在您的帐户中,您可以轻松删除甚至禁止不再使用您的许可证的网站。

在下一节中,我们将介绍我们在 WordPress 网站上使用的常见 WP Rocket 功能,以提高性能并在移动设备上得分超过 90%。

1.缓存设置

我们总是在 WP Rocket Cache 部分打开“为移动设备启用缓存”。 由于谷歌根据你的网站在移动设备上的表现来判断速度表现,所以这个设置是必须的。

我们优先考虑移动设备的性能改进,因为它们更难实现。 如果您在移动设备上取得了出色的成绩,您还将在桌面设备上体验到出色的性能,因为它们更加宽容(由于更快的家庭互联网和桌面速度)。

缓存设置 - WP Rocket
缓存设置 – WP Rocket

我们通常会增加“缓存寿命”设置以提高性能。 默认为 10 小时,这意味着每 10 小时,网站缓存将被完全删除。

这是不必要的,我们通常会增加此设置,因为 WP Rocket 会自动重新生成和预加载更新的页面。

2.文件优化设置

文件优化部分是 WP Rocket 最重要和最令人印象深刻的部分之一。 但权力越大,责任越大。

我们建议您一一启用这些设置,并在关闭浏览器缓存的情况下在 Chrome Incognito 中进行彻底测试,以确保您的网站不会中断。 如果它确实中断,您可以恢复特定设置或对其进行故障排除。

CSS 优化

顶部的部分处理 CSS 文件的修改和改进,底部的部分处理 JavaScript 文件的改进。

CSS 优化选项卡 - WP Rocket
CSS 优化选项卡 – WP Rocket

打开“缩小 CSS 文件”功能将从您网站的 CSS 文件中删除所有空格和不必要的字符,并使这些资源更快地加载。 我们通常开启这个设置。

我们通常不会合并 CSS 和 JS 文件,因为我们的大多数网站都托管在支持 HTTP2 的服务器上,并且单独加载文件而不是合并文件会更有效。

优化 CSS 交付也是一项很棒的功能,如果您在 PageSpeed Insights 中看到警告,可以尝试一下。 正如您在上面的示例中看到的那样,我们没有启用此设置,并且对于这个特定的客户端站点,移动设备仍然获得 97%。

如果您正在寻求进一步的改进,启用此设置可能会很有帮助。 此设置将从您的网站中删除所有未使用的 CSS 并提高效率,因为您的网站不需要加载和执行尽可能多的代码。

删除未使用的 CSS - WP Rocket
删除未使用的 CSS – WP Rocket

正如您在上面的示例中所见,建议彻底测试此功能,但它可以产生一些令人印象深刻的结果。

JavaScript 优化

JavaScript 优化部分具有类似的选项和功能。

如果您正在运行使用 HTTP2 的服务器,我们建议打开 JavaScript 缩小,但不要关闭“组合”。

JavaScript 优化选项卡 - WP Rocket
JavaScript 优化选项卡 – WP Rocket


延迟和推迟 JavaScript 执行也将显着提高网站性能。 事实上,大多数网站会通过加载大量未延迟和延迟的 JavaScript 文件来体验最大的影响。

推迟和延迟 JS - WP Rocket
推迟和延迟 JS – WP Rocket


延迟和延迟部分可能会导致某些功能中断并停止工作,因此请一一打开并测试您的网站。 如果您确实遇到问题,可以通过一些方法进行故障排除。

打开此设置时,一些流行的主题和插件往往会中断。 最常见的例子之一是 Elementor Pro。 如果您遇到与此类似的问题,WP Rocket 会为您提供保障。 查看他们的 JavaScript 排除故障排除指南了解更多详细信息,并将他们推荐的脚本添加到此部分。

例如,对于 Elementor Pro 网站,您可以找到应该排除的脚本并将它们添加到此部分,并且对于网站的其余 JavaScript 文件仍然可以从此功能中受益。

延迟 JavaScript 执行 - WP Rocket
延迟 JavaScript 执行 – WP Rocket

3. 媒体选项和调整

我们看到的另一个常见问题是未压缩的图像和缺乏延迟加载。

上传未经调整的图像会显着影响性能,因此请在将图像上传到您的网站之前对其进行调整和压缩。 您还可以使用 Imagify 之类的插件,以便事后自动压缩它们。 我们将这种方法用于我们的客户站点,因为我们希望自动化这部分并为我们的客户保持良好的性能。 Imagify 与 WP Rocket 集成得很好,因为它是由同一团队开发的。 如果安装在同一网站上,WP Rocket 将识别并使用 Imagify。

我们建议打开“媒体”选项卡下的所有功能,以便为图像和视频启用 LazyLoad。 这将确保仅在访问者滚动到该部分时才加载图像。

您可以通过将它们添加到“排除的图像或 iframe”部分来排除您的徽标或主要英雄部分图像等图像。

媒体标签 - WP Rocket
媒体选项卡 - WP Rocket

添加缺失的图像尺寸也被推荐为良好的 Web 开发和可访问性实践。 由于一些主题和开发人员错过了这一步,WP Rocket 可以通过自动处理没有尺寸的图像来帮助您。 在客户网站上工作时,我们总是使用此设置。

4. 预加载

默认情况下,WP Rocket 中的预加载是打开的,我们建议保持打开状态。 它模拟访问您网站的网站访问者并生成网站的缓存版本,以便在实际访问者到达时缓存已经存在。

预加载选项卡 – WP Rocket

预加载链接也是一项很酷的功能,当用户将鼠标悬停在超链接上时,它会开始加载网站。 一旦用户点击链接,页面将几乎立即加载。

5. 其他 WP Rocket 设置

另一个非常有用但可选的功能是“数据库清理”。 我们在有大量帖子修订和垃圾评论的网站上运行此功能,以加快速度。 还有一个选项可以自动执行此清理并每隔一段时间运行一次。 我们通常建议在备份数据库后手动执行此步骤,以防出现问题。

我们还建议在“心跳”部分下打开默认的“控制心跳”选项。 心跳是一个默认的 WordPress 计划任务,它通过在用户编写修订后自动保存它来提供帮助。 这是一个非常有用的功能,但会导致不必要的服务器资源使用。

心跳选项卡 - WP Rocket
心跳选项卡 – WP Rocket

WP Rocket 会自动将此活动的间隔从 1 分钟减少到 2 分钟,以节省服务器资源并帮助提高性能。

其他附加设置包括打开清漆缓存(由 WP Rocket 自动检测)和 WebP 兼容性。

您可以使用 Varnish 进一步帮助提高服务器端的网站性能。 如果您的托管服务提供商使用 Varnish,如果它没有被自动识别,请打开此设置。

WebP 是所有现代浏览器都支持的相对较新的图像压缩标准和文件扩展名。 为了获得更好的性能,像 Imagify 这样的图像压缩插件可以自动将您的 png 和 jpg 图像转换为 WebP。 WP Rocket 可以自动为您从缓存中提供这些图像。

作为代理商,我们最喜欢的功能之一是将设置从一个站点导出和导入到另一个站点。 由于我们使用的大多数设置和工具在各个项目中都是相似的,因此将设置导出和导入另一个站点可以为我们节省大量时间!

收拾东西

通过打开这些设置并彻底测试您的网站,您可以获得令人印象深刻的客户网站结果。 WP Rocket 使启用和测试这些功能变得超级容易,如果您遇到问题,它还提供了很棒的故障排除技巧。

调整后保持性能结果

一旦您启动了一个快速高效的网站,您的工作并没有就此结束。 将臃肿添加回网站很容易,但会引入不必要的插件、上传大图像或视频、无法保持数据库清洁以及无法使网站保持最新(插件、核心和 PHP 版本)。

我们总是每月使用 PageSpeed Insights 和 GTmetrix 测试一次网站性能,以确保网站继续快速加载。 还建议密切关注新的 WP Rocket 功能和更新,以帮助进一步改进。 WP Rocket 一直在改进和添加可以帮助用户提高网站性能的新功能。

将 WP Rocket 添加到您的代理库可以帮助您创建超快速的网站并帮助您提高现有客户的网站速度。 我们希望这篇文章有助于鼓励您将 WP Rocket 添加为您的 WordPress 代理机构的秘密武器。