Google PageSpeed Insights：面向 SEO 与开发者的使用指南
PageSpeed Insights（PSI）通过分析网页的 HTML、CSS、字体与 JavaScript 运行，并给出优化页面性能的建议，包括压缩图片、精简代码、减少页面发出的 HTTP 请求数等。
PageSpeed Insights（PSI）是 Google 推出的免费工具，可分析页面在桌面端与移动端的性能，并就如何提升速度与用户体验给出建议。
PageSpeed Insights 通过分析网页的 HTML、CSS、字体与 JavaScript 运行，并给出优化页面性能的建议，包括压缩图片、精简代码、减少页面发出的 HTTP 请求数等。
下面详细看看 PageSpeed Insights。
如何使用 Google PageSpeed Insights
先打开 PageSpeed Insights，输入网址，然后点击“Analyze（分析）”。
你可以在桌面端与移动端分析之间切换。移动端得分通常比桌面端更差，移动端数据可能暴露出更多需要解决的问题，这也是我建议重点关注的部分。
真实用户数据（Field data）
下一部分是网站真实用户的数据。PageSpeed Insights 从 Chrome 用户体验报告（CrUX） 拉取这些数据，该报告收录了选择共享数据的 Chrome 用户信息。
顶部标签可在页面级与源（origin，类似域名）级数据之间切换，源级数据聚合多个页面的数据。你可能没有所有页面的数据，甚至没有源级数据，这取决于有多少人访问网站并选择共享信息。
截至 2023 年 4 月，CrUX 数据集中约有 2950 万个源（origin）。
下一部分全部关于 核心网页指标（Core Web Vitals，CWV），包括通过／不通过的评估。主要指标为最大内容绘制（LCP）、首次输入延迟（FID）与累积布局偏移（CLS）。这些 CWV 指标正是 Google 用于排名的那几个。
数字以颜色区分：绿色＝良好，橙色＝需要改进，红色＝差。对于某一指标，必须有 75% 的用户体验达到为其设定的阈值，才视为“良好”。以下是这些阈值：
点击“Expand view（展开视图）”，可看到每个指标的分布情况。
CrUX 数据库中还有一些目前未用于排名的额外指标，包括首次内容绘制（FCP）、与下次绘制的交互（INP）与首字节时间（TTFB）。INP 将于 2024 年 3 月取代 FID 成为一个 CWV 指标。
数字以颜色区分：绿色＝良好，橙色＝需要改进，红色＝差。对于某一指标，必须有 75% 的用户体验达到为其设定的阈值，才视为“良好”。以下是这些阈值：
点击“Expand view（展开视图）”，可看到每个指标的分布情况。
最后一部分简要介绍数据来源。数据来自真实用户体验，是 28 天周期内的滚动平均值。
实验室数据（Lab data）
Lighthouse 是一款用于衡量网页性能与质量的开源工具。它可在你自己的浏览器中运行，但在 PageSpeed Insights 场景下，它运行在 Google 的服务器上。
你会看到性能、可访问性、最佳实践与 SEO 这几项的多个分数。这些本质上只是在检查最佳实践，并不会告诉你各自领域里你做得有多好。
同样，这些指标也以颜色区分，让你一眼看出哪些做得好、哪些可能还需要改进。
就本文而言，我们会聚焦“Performance（性能）”部分，因为这正是 SEO 使用该工具的目的所在。首先会看到性能得分与一张页面截图。
你会得到一个 0 到 100 的分数。当前的分数阈值为：
- 良好：90–100 分
- 需要改进：50–89 分
- 差：0–49 分
如前所述，你可能分数不错，但页面依然很慢、无法通过 CWV。网络状况、服务器负载、缓存以及用户设备等因素同样会影响页面加载时间。
在接受测试的页面中，仅 2% 能拿到 100 分。50 分即可让你跻身受测页面前 25%。
每次运行测试时，分数与指标都可能变化，原因可能是网络状况、负载，或浏览器在页面加载过程中做出不同决策。建议运行三到五次测试并取平均值。
分数基于对若干指标加权计算，移动端与桌面端权重不同。以下是移动端当前的权重，请查看 计算器 获取最新信息。
还有另一个指标区域，这次是实验室测试指标。这里能看到 LCP 与 CLS，但看不到 CWV 中的 FID 或 INP 指标：后者需要页面上的点击操作，而实验室测试无法重现。可改用总阻塞时间（TBT）作为可着力改进的替代指标。
也可点击“Expand view（展开视图）”按钮，获得包含指标定义与更多详情链接的扩展视图。
最后一部分简要介绍数据来源。
把鼠标悬停在这些信息上，可看到测试条件的更多细节。多年来 PageSpeed Insights 一直使用 Moto G4 作为测试设备，如今似乎换成了 Moto G Power。还能获取测试位置数据，可能是北美、欧洲或亚洲。
还有一些快照，以可视化方式展示页面在一段时间内的加载过程。
点击“View Treemap（查看矩形树图）”，即可找到最大的文件，以及页面上有多少代码未被使用。
默认情况下会看到与所有指标相关的问题。这里有一些按钮，可筛选出影响特定指标的问题，而这些指标可能正是你想改进的。
“Opportunities（机会）”与“Diagnostics（诊断）”区域会展示有助于提升页面性能的问题。
它们显示的可节省量与改进并不现实。可能还存在其他阻碍，因此未必能得到所展示的改进；某些情况下即便修复了某个问题，也可能完全看不到改善。有时必须修复多个问题，才能真正看到成效。
可以点击展开其中任意一个元素，获得关于如何修复每个问题的指引。建议会根据所测试的系统而变化，例如我测试我们 WordPress 博客上的一个页面时，看到的就是 WordPress 专属的指引。
这些提示有助于把一些问题转换成你可能听过的说法。例如，“defer offscreen elements（延迟加载屏幕外元素）”其实是在提示应对图片做懒加载，随后可在 WordPress 中搜索负责懒加载的插件。
还有一些额外信息会显示 LCP 图片是什么、哪些元素导致了 CLS，以及哪些元素阻塞了主线程（即需要减少以改善 FID/INP 的部分）。这些信息能帮你把修复工作对准这些元素。
还有一个“已通过的审核”区域，展示你已做得不错的地方。你或可进一步改进，但把时间花在其他问题上可能更划算。
把数据规模化拉取到 Ahrefs 中
PageSpeed Insights 提供了一个出色的 API，可拉取来自 CrUX 的真实用户数据与来自 Lighthouse 测试的实验室数据。你还能批量获取页面级 CWV 数据，而这些数据只能通过 PageSpeed Insights 获得。
问题在于，并非每个人都具备批量查询并存储数据的技能。但在 Ahrefs 的 Site Audit（网站审计） 中，这一步已简化。请按抓取设置中关于配置 CWV 的说明操作。
用 Site Audit 抓取并存储你的 PageSpeed Insights 和 CWV 数据
运行一次抓取时，我们会把 PageSpeed Insights 的数据拉取到 Performance（性能） 报告中，你可深入查看有问题的页面。
我们还会展示以往抓取的数据，供长期监控性能变化。此外，你还能看到每个指标各自受影响页面的分布情况。
免费工具：为最多 10 个页面或网站检查桌面端和移动端的 CWV 与 Lighthouse 指标
还有另一个免费工具，可一次检查最多 10 个页面或网站，对比自己与竞争对手的情况。
设置：
- 把你的 Google PageSpeed Insights API 密钥填入指定输入框。（了解如何生成 API 密钥，请点击这里。）
- 添加你想分析的网址（每行一个）。
运行分析：
- 点击 “Test website speed（测试网站速度）” 按钮开始拉取指标。进度指示器会显示请求的状态。
查看结果：
- 使用 Mobile/Desktop 按钮和结果类型菜单在以下内容之间切换：
- 每个指标都用颜色区分，以显示性能表现：
以下是一份示例输出，展示速度记分卡的样子。你可以把它当作一个独立工具使用：网站速度测试。
工作流程
在评估与监控方面，我会像上面展示的那样使用 Ahrefs 查看有问题的页面与趋势，同时查看 Google Search Console（GSC） 中的 Core Web Vitals（核心网页指标） 报告。
GSC 会把相似的网址归为一组。被归到同一组的页面，很可能处于同一套系统或模板中；修复这些问题时，即可一次性修复该组内的所有页面。
一旦明确需要处理哪些页面或模板，就可借助 PageSpeed Insights 的指引进行改进。我还建议阅读我们关于 LCP、FID 与 CLS 的指南，了解如何修复各种问题。
要检查改进效果，可使用 PageSpeed Insights，或在 Site Audit 中再运行一次抓取以批量获取数据。CWV 数据需要更长时间才能反映改动影响，因为它是 28 天平均值，因此请用 PSI 或 Ahrefs 中的 PSI 数据来确认改动是否改善了实验室测试指标。
如有任何问题，可在 Twitter 上给我发消息。