如何在 Google PageSpeed Insights 中达到 100（在 WordPress 上）

如果有一个工具可以帮助您加快网站速度，那岂不是很棒？ 嗯，有！ Google PageSpeed Insights 就是这个名字，它是一项免费服务，可以解决您网站速度慢的问题。 在本文中，我们将了解它是什么、它是如何工作的，以及如何在 WordPress 中达到难以捉摸的 Google PageSpeed Insights 100 / 100 分数。

什么是 Google PageSpeed Insights？

Google PageSpeed Insights 是一种在线工具，用于测量您网站的速度和用户体验。 它测量网站在桌面和移动设备上的加载时间，并显示有关网站性能的各种指标。 如果指标被判断为次优，该工具会提供有关如何改进它们的建议。

只需转到 Google PageSpeed Insights，输入 URL，然后点击分析。 Google 会在移动设备和桌面设备上判断您的网站。 你可能会发现你在其中一项上的得分高于另一项。

谷歌过去常常给网页打满分 100 分，但现在不会了。

取而代之的是，谷歌测量了三个统计数据，它称之为Core Web Vitals 。 这些都是：

• Largest Contentful Paint (LCP) ：网站主要内容的加载速度。 为了获得良好的用户体验，该时间应为2.5 秒或更短。
• First Input Delay (FID) ：站点对用户输入的响应程度。 FID 应为100 毫秒或更短。
• Cumulative Layout Shift (CLS) ：衡量网页的视觉稳定性。 0.1或更低的 CLS 分数是更可取的。

此外，Google 还会衡量以下内容：

• First Contentful Paint (FCP) ：网页开始在屏幕上呈现所花费的时间。 一个好的 FCP 分数是1.8 秒或更短。
• Interaction to Next Paint (INP) ：衡量页面对用户交互的响应程度。 真正响应迅速的网站的 INP 为200 毫秒或更短。
• Time to First Byte (TTFB) ：服务器请求后发送数据的第一个字节所花费的时间。 0.8 秒或更短的 TTFB 是理想的。

在此之下，在“诊断性能问题”部分，Google PageSpeed Insights 会为您提供四个分数——性能、可访问性、最佳实践和 SEO。 90分以上是好成绩，50到89分表示可以改进，低于50分是不好的。

下面是谷歌的机会和诊断。 这些是您可以间接提高绩效得分的方法。 性能指标对您的网站速度影响最大。

在我们探讨如何提高网站性能之前，让我们先了解一下为什么网站速度很重要。

为什么网站速度很重要？

网站速度对用户和消费者行为有巨大影响。

完全加载移动着陆页所需的平均时间为 22 秒[1] 。

随着页面加载时间从 1 秒增加到 3 秒，跳出的可能性增加 32% [2] 。

如果移动网站的加载时间超过 3 秒，则 53% 的访问会被放弃[3] 。

显然，如果您运营电子商务网站，速度慢的网站会导致转化率下降，这是您需要解决的问题。 转化率随着网站加载时间的延长而下降[4] ：

• 在 2.4 秒内加载的页面有 1.9% 的转化率
• 3.3秒，转化率为1.5%
• 4.2秒，转化率不到1%
• 在 5.7+ 秒时，转化率为 0.6%

高 PageSpeed Insights 分数与实际页面速度

Google 根据实验室数据（在受控条件下收集）和现场数据（从野外的真实用户收集）计算 PageSpeed Insights 分数。

要测试您的实际页面速度，您可以使用在线工具，例如 GTmetrix 或 Pingdom 的速度测试。

使用这些工具，您可以在不同位置测试您的网站。

您可以在 GTmetrix 上看到德克萨斯州圣安东尼奥的测试服务器的页面加载时间为 666 毫秒——这是一个非常好的分数。

在香港，页面加载时间稍长一些——1.4 秒。

Pingdom 还在华盛顿特区的测试中显示了 850 毫秒的快速加载时间，但在日本东京的测试加载时间较慢，为 1.06 秒。

上升趋势工具可让您跨移动设备和桌面设备进行测试。 这是来自法国巴黎的 WP Shout 网站在 iPad Air 上的结果——加载时间为 1.9 秒：

因此，Google PageSpeed Insights 得分与实际页面速度之间似乎存在相关性。

如何在 WordPress 上获得理想的 Google PageSpeed Insights 100 分数

现在您知道了为什么高 Google PageSpeed Insights 分数很重要，是时候看看可以改进它的方法了。

提高 Google PageSpeed Insights 得分的方法

1.优化图片

针对 Web 优化图像是提高性能分数的简单方法。

您需要一个图像压缩插件，例如 Optimole。

此插件可以将您的图像压缩到较小的文件大小，以便更快地加载它们。 您可以将它们用于所有新图像上传以及现有图像。 Optimole 的优点在于它还可以通过 CDN 传送您的图像，从而实现更快的传送。

它还可以将您的图像转换为 WebP 格式，这种格式比 JPG 或 PNG 文件更小。 这将帮助您通过Serve images in next-gen formats推荐。 此外，您可以通过为它们设置最大宽度来调整任何较大图像的大小。

确保您的图像具有指定的宽度和高度属性以满足图像元素没有明确的宽度和高度的机会。

Optimole 插件还包括延迟加载，它只在用户向下滚动到图像或视频时才加载它们。 这有助于延迟屏幕外图像机会，如下所示。

另一种减小图像文件大小的方法是使用 SVG 图像。 SVG 是矢量文件，因此可以轻松地重新缩放它们而不会影响其文件大小。 它们在 WordPress 中不受原生支持，但您可以使用 SVG Support 或 Safe SVG 等插件将它们添加到您的媒体库中。

2. 避免过大的 DOM 大小

什么是 DOM？ DOM 代表文档对象模型，是一种树状结构，包含页面的所有 HTML 元素、属性和文本。

减少 DOM 大小的几个策略是将长网页分成较小的部分，并避免在 CSS 中使用 {display:none;} 声明隐藏 DOM 节点。

可以增加 DOM 大小的一个因素是使用页面构建器。 页面构建器倾向于增加页面上 <div> 元素的数量。

如果您使用 Elementor，从 3.0 版开始，一些 HTML 包装器已被删除，这减少了 DOM 的大小。

或者您可以转而使用 Gutenberg 而不是页面构建器，就像 Chris Lema 所做的那样。

您可以在这篇文章中找到更多关于避免 DOM 尺寸过大的提示。

3.优化JavaScript和CSS

可以缩小和压缩CSS 和 JS 文件以提高性能。 缩小会删除 CSS 或 JS 文件中的所有空格，而 GZIP 压缩会删除重复的字符，例如 {.

允许您缩小 CSS 或 JS 的 WordPress 插件包括 Autoptimize（免费）和 WP Rocket（付费）。

缩小可能会破坏您的站点，因此如果您遇到问题，缩小的插件会从缩小选项中排除文件。

WP Rocket 还可以选择将您的 CSS 和 JS 文件合并到一个文件中，从而减少请求。 但是，如果您的 Web 服务器使用 HTTP/2，则您不会想要这样做。 你可以先测试你的服务器是否运行 HTTP/2 来检查。

您可以使用大多数缓存插件激活 GZIP 压缩。 如果您的 Web 服务器是 Apache 或 LiteSpeed，该插件可以直接写入您的 .htaccess 文件或提供行以复制并粘贴到其中。 如果您使用 NGINX 或 IIS，Hummingbird 还提供了在这些服务器上启用压缩的配置。

如果您的网站上有任何未使用的 CSS 或 JS，是时候将其删除了。 您可以使用 Chrome DevTools 查找未使用的 CSS 和 JS，它们很可能来自插件。

您还可以使用 Rapidload 的 CSS Saver 来查看您的网站可能丢失的 CSS：

4.消除渲染阻塞资源

渲染阻塞 CSS 和 JS 是被标记为阻塞网页第一次绘制的文件。

Autoptimize 插件可以解决这个问题，从而提高您的 First Contentful Paint 和 Largest Contentful Paint 分数。

5.减少初始服务器响应时间

服务器响应时间取决于几个因素：您使用的主题和插件，以及您拥有的网络托管类型。

考虑删除您不使用的任何多余插件或切换到轻量级主题，例如 Astra。

对于托管，我们建议通过共享网络托管托管 WordPress 托管。 托管 WordPress 主机包括服务器优化作为服务的一部分。

6.确保文字在网页字体加载期间保持可见

如果您使用网络字体，谷歌的建议将阻止您的页面文本在加载时不可见。

建议建议添加 font-display: swap; 到样式表中的 @font-face 声明。

下面的屏幕截图显示了如何使用 Asset CleanUp 插件添加此属性。

7. 保持低请求数和小传输尺寸

Google PageSpeed Insights 记录网络服务器请求的文件数量和这些文件的大小。

如果这里有大量数字，可以通过以下方式减少它们：

• 优化您的图像和媒体文件。 建议使用视频文件代替 GIF 动画。
• 优化你的 CSS 和 JS
• 优化字体和第三方脚本
• 减小 HTML 文件的大小

8. 避免链接关键请求

关键请求是对加载页面必不可少的请求。 例如，徽标可能是一项关键请求。

长链和包含大量下载的链被认为不利于您的网站速度。 它们会影响 First Contentful Paint 和 Largest Contentful Paint。

根据谷歌的说法，为了避免链接关键请求，你应该：

• 最小化关键资源的数量：消除它们、推迟它们的下载、将它们标记为异步等。
• 优化关键字节数以减少下载时间（往返次数）。
• 优化剩余关键资源的加载顺序：尽早下载所有关键资源，缩短关键路径长度。

您可以通过以下方式做到这一点：

• 通过在引用它们的 HTML 中使用“link rel=”preload”来预加载关键请求、图像和字体。
• 缩小你的 CSS 和 JavaScript。
• 消除渲染阻塞资源。

您可以使用 WP Rocket 之类的插件来为您执行这些任务。

9. 避免长时间的主线程任务并尽量减少主线程工作

长主线程任务是 JavaScript 任务（超过 50 毫秒），它会延迟用户的交互时间。

最小化主线程工作意味着减少解析、编译和执行 JS 的时间。

您可以通过以下方式减少 JavaScript 任务的长度和时间：

• 尽量减少使用臃肿的插件
• 在本地托管您的字体和分析脚本
• 缩小或延迟 JS 和 CSS
• 延迟加载背景图像

有关最小化 WordPress 中主线程工作的更多提示，请参阅以下文章。

10. Avoid large layout shiftsAvoid large layout shifts 避免大的布局偏移

布局偏移有助于累积布局偏移指标，并给用户留下页面跳转的印象。

您可以通过以下方式解决此问题：

• 为您的媒体添加维度
• 预加载字体
• 优化您的动态内容，例如时事通讯注册表单

有关更多信息，请阅读本指南以修复 WordPress 中的累积布局偏移。

11.减少第三方代码的影响

第三方脚本是托管在别处的脚本，例如 Google Analytics 跟踪或 YouTube 嵌入。

在可能的情况下，尝试在本地托管脚本。 你不能用 YouTube 做到这一点，但你可以在本地托管你的分析代码和字体。

您可以使用本地 Google 字体插件在您自己的服务器上托管 Google 字体。

WordPress 的本地 Google Analytics – 缓存外部请求插件将在本地托管您的 Google Analytics。

12. 使用 CDN

内容交付网络是一个远程服务器网络，它为用户存储和提供网络内容。

CDN 可以通过缓存静态文件（例如 HTML、CSS 和 JavaScript）并从用户附近的位置提供这些文件来提高您网站的速度。 这有助于降低您的 First Contentful Paint 和 Largest Contentful Paint 分数。

我们在 WP Shout 中使用 Cloudflare CDN。 您可以免费开始使用它。

详细了解为何应使用 CDN 和最佳选择。

关于如何获得 Google PageSpeed Insights 100 分数的结论

我们已经看到，影响网站速度的因素有很多。 这些技巧将帮助您获得完美的分数。

不过，您不应该过于执着于获得 100 分——90+ 分仍然非常好。 阅读 David 关于优化站点性能的帖子，了解我们为提高分数所做的工作。