如何分析来自 Google PageSpeed Insights 的结果

由于 Google 将提升速度较快的网站的排名，您可能很想了解更多有关 Google PageSpeed 洞察力的信息？

......我并不感到惊讶，因为它令人困惑！

这篇文章会有所帮助。

为什么网站页面速度很重要？

Google 希望为用户提供最佳的用户体验。

如果您的网站速度很慢，它将使用户感到沮丧并造成糟糕的用户体验。 就这么简单。 性能影响体验。

谷歌最近宣布，核心 Web Vitals 将在 2021 年用作其排名算法的一部分。这些核心 Web Vitals 是速度以及人们与您的页面交互速度的指标。

基本上对于下面的这张表，你不能是“红色”

什么是 Google PageSpeed Insights？

它是 Google 提供的免费工具，可让您输入网页 URL 并快速运行测试以检查与性能相关的各种指标。

然后，该工具会为您的页面提供 0 到 100 分的分数。 分数与速度无关。 如果您使用了谷歌关于提高速度的典型建议，您可以提高分数。

它还向您显示了使您的页面变慢的确切参数，以及有关如何使其变得更好的建议。

这是事情变得技术性的地方，结果有点难以理解。

你如何解释结果？

运行测试后，您首先看到的是分析页面的性能得分（桌面和移动）。

这将是一个介于 0 和 100 之间的数字。

• 0 到 49 - 这很糟糕，你不希望你的分数是 49 或以下
• 50 到 89 – 这还可以，但还有改进的余地
• 90 到 100 – 如果你在这个范围内，那么你就是好书。

向下滚动时，您会看到导致高分或低分的原因：

注意：请参阅每个部分之前的颜色指示器：

• 绿色意味着快
• 橙色表示适中
• 红色代表慢

这就是每个部分的含义：

第一个 ContentFul Paint

这是从浏览器导航到页面到内容开始呈现的时间。

基本上，它是页面开始加载的一个指标。

例如，它可能只是页面背景颜色、显示的图像或一段文本的颜色变化。

这很重要，因为当用户看到某些操作时，他们更有可能等待页面完全加载。

指导方针：

互动时间

此参数显示页面变得交互式的速度。

这意味着页面在屏幕上显示了足够的元素，以便用户可以实际与之交互，例如单击菜单按钮。

有时，网站可以专注于可见性，即在您与内容交互之前显示所有内容，这可能会让用户感到沮丧。

指导方针：

总阻塞时间

您的网站访问者在屏幕上看到内容的时间与他们可以与之交互的时间之间存在差距。

这是总的阻塞时间！

很高兴知道人们在网站交互之前是否不能执行鼠标点击、屏幕点击或关键字按下等操作。

长任务是阻塞你超过 50 毫秒的任务。

任何超过 50 毫秒的时间都被视为阻塞时间。

如果没有长任务，那么您将看到 0 阻塞时间，这就是您在上面的统计信息中看到的。

累积版面偏移

布局移位是指视觉元素显示在屏幕上但随后移动。

例如，您正在阅读新闻并且布局发生了变化，因此新闻文章的位置发生了变化。

从用户的角度来看，这是出乎意料的行为。

分数越高越差。

速度指数

这是一个很难理解但很有价值的问题。

所以想象一下两个网站都在 1.5 秒内加载。

如果您浏览了上图中显示的 2 个网站，哪个会加载得更快？

两者都在 1.5 秒内完全加载，但由于第一个站点较早开始显示一些元素，因此对用户来说似乎更快。

如果您只是测量加载时间，它们是相同的。

速度指数是根据网站完全加载的“速度”计算得出的分数。

加载的视频记录用于在加载位时直观地显示。

在不同的时间间隔，将屏幕上可见的内容量（首屏）与完全加载的网站上显示的内容进行比较，以计算出在特定时间显示的内容百分比。

这个过程重复几次。

时间仅基于用户可以在屏幕上看到的内容（视口）。 首屏下方的内容无关紧要。

所以……尝试不同的视口是件好事。

如果您有 2 个网站，其中一个在另一个之前显示视觉元素，那么它最终的速度指数得分会较低。

越低越好。

最大的内容涂料

这是页面最大元素完全呈现所需的时间。

当页面加载时，第一个元素成为最大的元素，但是随着更大的元素的添加，它会被替换。

页面的最后一个元素可能是页面的最大元素（例如大图像），也可能不是。

注意：我们不是在谈论它在屏幕上占用了多少空间。

这里有2个例子。

从网站开始显示到页面上最后一个图像显示的时间将被认为是最大的内容绘制。 这是因为图像在页面上占据了最多的空间！

但…

在下面的示例中，“Instagram”图像是显示的最大图像，因此最大的内容绘画是在加载倒数第二个屏幕时。

最后一屏打折。 添加到该屏幕的所有内容都是“谷歌播放按钮”，它比“Instagram”更小。

根据 Google 的说法，如果您想提供良好的用户体验，LCP 应该在页面首次开始加载后的 2.5 秒内发生。

指导方针：

机会

机会部分向您展示了有助于缩短页面加载时间的建议。

如果您实施了该建议，每条建议还会显示您估计的页面加载时间减少情况。

诊断

诊断突出了您应该考虑实施的 Web 开发中的最佳实践。

但是，即使您进行了这些改进，它们也不会直接影响您的页面性能得分。

概括

提高网站速度就是为访问者提供更好的体验。 拥有一个快速加载的网站会让用户和搜索引擎都更快乐，但它也会影响您将访问者转化为客户的能力。

像 Google PageSpeed Insights 这样的工具非常有用，因为它可以告诉您从哪里开始以及要关注哪些问题来提高您的网站性能。

希望本文能帮助您了解此工具的工作原理以及测试结果的实际含义，以便您可以开始优化网页，为访问者创造惊人的体验。