Google PageSpeed 的工作原理：提高分数和搜索引擎排名

这篇文章来自我的朋友 Ben，他运营着 Calibre，这是一个用于监控网站性能的工具。我们在 CSS-Tricks 上使用 Calibre 来关注一些事情。事实上，我刚刚去那里查看了一下，并收到了一些小错误的通知，我已经修复了它们。推荐！

在这篇文章中，我们将揭示 PageSpeed 如何计算其关键速度分数。

速度已成为提高收入和降低放弃率的关键因素，这已不是秘密。现在 Google 将页面速度作为排名因素，许多组织都开始专注于性能。

去年，**Google 对其搜索索引和排名算法进行了两次重大更改**

• 3 月份，索引开始基于页面的移动版本，而不是桌面版本。
• 7 月份，SEO 排名算法进行了更新，将页面速度作为移动页面和广告的排名因素。

由此，我们可以陈述两个事实

• 您网站在移动设备上的速度会影响您的整体 SEO 排名。
• 如果您的页面加载速度慢，则会降低您的广告质量得分，并且**广告费用会更高**。

Google 写道

更快的网站不仅可以改善用户体验；最近的数据显示，提高网站速度还可以降低运营成本。与用户一样，我们也高度重视速度——这就是我们在搜索排名中考虑网站速度的原因。

为了了解这些变化如何从性能角度影响我们，我们需要掌握底层技术。PageSpeed 5.0 是之前版本的全面改进。它现在由 Lighthouse 和 CrUX（Chrome 用户体验报告）提供支持。

此升级还带来了一种新的评分算法，这使得获得高 PageSpeed 分数变得更加困难。

PageSpeed 5.0 中发生了哪些变化？

在 5.0 之前，PageSpeed 对给定页面运行一系列启发式算法。如果页面具有大型未压缩的图像，PageSpeed 将建议进行图像压缩。缓存标头丢失？添加它们。

这些启发式算法与一组指南相结合，如果遵循这些指南，可能会带来更好的性能，但它们仅仅是表面的，并没有真正分析真实访客面临的加载和渲染体验。

在 PageSpeed 5.0 中，页面在由 Lighthouse 控制的真实 Chrome 浏览器中加载。Lighthouse 记录来自浏览器的指标，将评分模型应用于这些指标，并提供整体性能分数。改进指南是根据特定指标的分数建议的。

与 PageSpeed 一样，Lighthouse 也具有性能分数。在 PageSpeed 5.0 中，性能分数直接取自 Lighthouse。**PageSpeed 的速度分数现在与 Lighthouse 的性能分数相同。**

现在我们知道了 PageSpeed 分数的来源，让我们深入了解它是如何计算的，以及我们如何进行有意义的改进。

什么是 Google Lighthouse？

Lighthouse 是一个由 Google Chrome 的专门团队运营的开源项目。在过去的几年里，它已成为首选的免费性能分析工具。

Lighthouse 使用 Chrome 的远程调试协议来读取网络请求信息、衡量 JavaScript 性能、观察可访问性标准以及衡量以用户为中心的时序指标，例如 首次内容绘制、互动时间或速度指数。

如果您有兴趣了解 Lighthouse 架构的高级概述，请阅读官方存储库中的本指南。

Lighthouse 如何计算性能分数

在性能测试期间，Lighthouse 记录了许多侧重于用户所见所感的指标。有六个指标用于创建整体性能分数。它们是

• 互动时间 (TTI)
• 速度指数
• 首次内容绘制 (FCP)
• 首次 CPU 空闲
• 首次有意义绘制 (FMP)
• 估计输入延迟

Lighthouse 将对每个指标应用 0-100 的评分模型。此过程通过从 HTTP 档案 中获取移动设备的第 75 个和第 95 个百分位数，然后应用log normal函数来实现。

根据用于计算互动时间的算法和参考数据，我们可以看到，如果页面在 2.1 秒内变得“可交互”，则互动时间指标得分为 92/100。

每个指标评分后，都会分配一个权重，该权重用作计算整体性能分数的修改器。权重如下所示

指标	权重
互动时间 (TTI)	5
速度指数	4
首次内容绘制	3
首次 CPU 空闲	2
首次有意义绘制	1
估计输入延迟	0

这些权重指的是每个指标对移动用户体验的影响。

将来，还可以通过包含来自 Chrome 用户体验报告数据集的用户观察数据来增强此功能。

您可能想知道每个指标的权重如何影响整体性能分数。Lighthouse 团队创建了一个有用的 Google 电子表格计算器来解释此过程

使用上面的示例，如果我们将（到）可交互的时间从 5 秒更改为 17 秒（全球平均移动 TTI），我们的分数将下降到 56%（即 100 分中的 56 分）。

而如果我们将首次内容绘制更改为 17 秒，我们的得分为 62%。

TTI 对您的性能分数影响最大。因此，要获得高 PageSpeed 分数，您需要快速的 TTI 测量值。

提高 TTI 的方法

从高级别来看，有两个重要因素会极大地影响 TTI

• 传递到页面的 JavaScript 量
• JavaScript 任务在主线程上的运行时间

我们的 互动时间指南详细解释了 TTI 的工作原理，但如果您正在寻找一些无需研究即可快速获胜的方法，我们建议：**减少 JavaScript 的数量**

在可能的情况下，删除未使用的 JavaScript 代码，或者专注于仅提供当前页面将运行的脚本。这可能意味着删除旧的 polyfill 或使用更小、更现代的替代方案替换第三方库。

重要的是要记住，JavaScript 的成本不仅仅是下载它所需的时间。浏览器需要解压缩、解析、编译并最终执行它，这需要相当长的时间，尤其是在移动设备上。

减少页面脚本数量的有效措施包括

• 审查和删除目标受众不再需要的 polyfill。
• 了解每个第三方 JavaScript 库的成本。使用 webpack-bundle-analyser 或 source-map-explorer 来可视化每个库的大小。
• 现代 JavaScript 工具（如 webpack）可以将大型 JavaScript 应用程序分解成一系列小的捆绑包，这些捆绑包会在用户导航时自动加载。这种方法称为 代码分割，并且在**提高 TTI 方面非常有效**。
• 服务工作者将缓存已解析和编译脚本的字节码结果。如果您能够使用此功能，访客将为解析和编译支付一次性性能成本。之后，缓存将缓解这种情况。

监控互动时间

为了成功发现用户体验中的重大差异，我们建议使用性能监控系统（例如 Calibre！），该系统允许至少测试两台设备：一台快速的桌面电脑和一台低端或中端手机。

这样，您就可以获得客户体验的最佳和最差情况的数据。是时候认识到您的客户并没有使用与您相同的强大硬件了。

深入的手动性能分析

为了在 JavaScript 性能分析中获得最佳结果，请使用故意设置缓慢的移动设备测试页面。如果您在抽屉里放着旧手机，这将是它的绝佳“第二春”。

使用 Chrome DevTools 硬件模拟模式是使用真实设备的绝佳替代方案。我们撰写了一份广泛的 性能分析指南，以帮助您开始运行时性能分析。

其他指标呢？

Speed Index、First Contentful Paint 和 First Meaningful Paint 都是基于浏览器绘制的指标。它们受类似因素的影响，并且通常可以同时改进。

客观地说，改进这些指标更容易，因为它们是根据页面渲染速度计算的。严格遵循 Lighthouse 性能审核规则将导致这些指标得到改善。

如果您还没有预加载字体或优化关键请求，那么这是一个开始性能提升之旅的绝佳起点。我们的文章标题为 “关键请求”，详细解释了浏览器如何获取和渲染用于渲染页面的关键资源。

跟踪您的进度并进行有意义的改进

Google 最近更新的搜索控制台、Lighthouse 和 PageSpeed Insights 是了解页面性能的绝佳方法，但对于需要持续跟踪和改进页面性能的团队来说，它们的功能还不够。

持续的性能监控对于确保速度改进持续有效以及团队在出现性能下降时立即收到通知至关重要。手动测试会导致结果出现意外的差异，并且如果没有专门的实验室环境，几乎不可能从不同地区以及各种设备上进行测试。

速度已成为 SEO 排名的关键因素，尤其是在现在近 50% 的网络流量来自移动设备的情况下。

为了避免失去搜索排名，请确保您正在使用最新的性能套件来跟踪关键页面。（悄悄话，我们构建了 Calibre 作为您的性能伴侣。它内置了 Lighthouse。全球数百个团队每天都在使用它。）

相关文章

• 关于 Time to Interactive
• 如何优化 JavaScript 应用程序的性能
• Lighthouse 性能评分计算器