Page Speed Insights (Lighthouse) 于 2021 年 6 月 1 日进行了升级——有哪些变化？这将如何影响您？

Page Speed Insights 现在运行的是 Lighthouse 8.0，让我告诉你，评分方式的改变真的会严重影响你的分数！

也就是说，如果你没有在浏览器中使用 JavaScript 构建网站，你实际上可能会从中受益！

简而言之：是时候放弃那些笨重的前端框架，让你的网站获得良好的排名了！

这篇文章是写给谁看的？

那些需要提升网站在谷歌排名的人。

随着谷歌搜索算法即将迎来 Web Vitals 更新，并将于 8 月底全面推出，如果您依赖 SEO 来获取流量，那么现在就必须开始着手解决这些问题。

与其他相关文章不同，我假设您至少听说过并使用过 Page Speed Insights 或类似的页面速度检测服务。

综上所述，我将用“灯塔”一词来指代所有这些服务，所以我最好先快速地给你们提供一些信息：

20秒内建成灯塔

对于那些不了解的人来说，Lighthouse是页面速度洞察、web.dev/measure、GT Metrix等工具背后的引擎。

它可能是目前应用最广泛的网站加载速度测试工具。

那么这次他们又做了哪些改变呢？

评分权重已再次更新。

V6/V7 评分

First Contentful Paint        15%
Speed Index                   15%
Largest Contentful Paint      25%
Time to Interactive           15%
Total Blocking Time           25%
Cumulative Layout Shift        5%

V8 计分（新计分）

First Contentful Paint        10% -
Speed Index                   10% -
Largest Contentful Paint      25% 
Time to Interactive           10% -
Total Blocking Time           30% +
Cumulative Layout Shift       15% +

比较

请用英语解释，这些指标对我来说毫无意义！

简而言之，关注点已经转移到页面真正可以使用的时候，而不是内容首次出现的时候。

实际上情况比这要复杂一些，也超出了本文的讨论范围，但以下是您需要了解的内容概要：

使用大量 JavaScript 的网站将会受到冲击。

如果你下载 100kb 的 JS 代码仅仅是为了渲染首屏内容（无需滚动即可看到的初始内容），那么你的分数很可能会下降（又一次！是时候吸取教训了！除非你知道如何 tree shaking 和代码拆分，否则不要再使用 React 来制作宣传册网站了！）。

这与“总阻塞时间 (TBT)”指标相关。它衡量的是你的 JS 代码中有多少任务耗时超过 50 毫秒，然后将所有耗时超过 50 毫秒的任务加起来，再减去最初的 50 毫秒允许值。

为了更清楚地说明这一点：

• 任务 A：30 毫秒（小于 50 毫秒，因此 TBT 增加 0 毫秒）
• 任务 B：55 毫秒（55 毫秒 - 50 毫秒，因此 TBT 增加 5 毫秒）
• 任务 C：10 毫秒（再次小于 50 毫秒，因此 TBT 仍然是 5 毫秒）
• 任务 D：95 毫秒（95 毫秒 - 50 毫秒，因此加上 45 毫秒，使 TBT 总共为 50 毫秒）。

因此，在上述情况下，TBT 为 50 毫秒。

重要提示：这看起来似乎很容易通过，但请记住“移动优先”是谷歌的政策。因此，当您运行 PageSpeed Insights 报告、Chrome 浏览器中的 Lighthouse 标签页等工具时，请务必查看移动端得分。

对于移动端，应用了限速技术来模拟中端手机（CPU 速度降低 4 倍）和较慢的 4G 连接。

您可以在这里找到更多关于 Lighthouse 中限速的信息。

这就是为什么我不建议查看 pingdom.com 和 GT Metrix（除非你有 PRO 帐户），它们都监控桌面速度，很容易在那里获得不错的分数。

将关键 CSS 内联到 CSS 中就显得更加重要了。

关键CSS是渲染首屏内容所需的所有 CSS。

您需要将此代码内联到<style>文档中的标签内，以便页面可以加载并显示，而无需等待第二次网络请求完成。

这有助于提高最大内容绘制效率并最大限度地减少布局偏移。

确保停止布局偏移

人们很容易对这一点感到困惑。基本上，如果页面上有内容正在加载，它不应该移动、放大或缩小，除非是按下按钮等操作的直接结果。

因此，我建议您阅读这篇关于如何防止图片导致布局偏移的文章：

如果你使用 JS 来获取数据，那么请确保你有一个大小合适的占位符……但是如果你这样做是为了首屏内容，那么你已经遇到麻烦了，因为为了获得最快的渲染速度，所有首屏内容都应该在初始 HTML 中提供。

实际上，为了获得极致速度，首屏内容应该控制在 14kb 以内；为了获得超快速度，应该控制在 42kb 以内；为了获得良好速度（勉强算得上）。这都与 TCP 的工作原理以及所谓的TCP 慢启动有关……不过，这又是另一个话题了。

您仍然需要确保您的最大内容绘制 (LCAP) 良好。

最大内容绘制（LCP）其实非常简单。

假设页面上有 4 个元素显示在首屏上方。如果其中一个元素占据了 40% 的空间（元素 A），而其他 3 个元素各占据 20% 的空间（元素 B、C 和 D），那么元素 A 就是“最大绘制元素”。

得分取决于元素在页面上的渲染速度。元素出现得越快，得分就越高。

现在我们已经了解了如何在 HTML 中内联关键 CSS，这样我们就无需等待额外的网络请求即可渲染页面，但如果该元素是图像呢？

一种方法是使用低质量图像占位符 (LQIP)。具体操作方法将在另一篇文章中介绍，但本质上，您可以使用一张很小的低质量图像（例如，对于 16:9 宽高比，尺寸为 32px x 18px），然后使用数据 URI 将其内联。

<img src= "data:image/jpg;base64,[data encoded with base64]" alt="your alt" width="1600" height="900">

然后，在核心页面内容加载完毕后，使用 JS 替换实际图像。

实现这一目标的方法有很多种，因此值得单独写一篇文章。正如我所说，这篇文章的目的是提供一些供您自行研究的内容和建议。

有些事情不会影响你的分数，但需要注意：

近几个月来发布的几乎每一个重大更新都与内容安全策略 (CSP)有关。

本次更新也不例外。

他们在“最佳实践”下引入了一项名为“csp-xss”的审核（该审核不在 Page Speed Insights 中，但可在开发者工具等的 Lighthouse 中找到）。

虽然目前这方面还没有评分权重，但你应该开始考虑它了，因为他们在这方面投入的精力越来越多。

如果您想查看网站安全标头的状态，我建议您使用https://observatory.mozilla.org/来测试您的网站，并开始了解保护客户端免受恶意行为侵害的标头。

结论

这篇文章的目的不是告诉你如何解决所有问题，而是让你了解发生了哪些变化以及这些变化对你意味着什么，即使你并不完全了解 Page Speed Insights。

Lighthouse 试图引导您避免在宣传册网站甚至电子商务网站上使用笨重的 JS 框架，因为在这些网站上，页面速度至关重要，搜索排名也很重要。

如果您在使用网站时遇到具体问题需要帮助，请在评论区留言。