Google PageSpeed Insights (PSI) 报告页面在移动设备和桌面设备上的性能，并提供有关如何改进该页面的建议。PageSpeed Insights是一个免费的网站速度测试工具，它可以提供网站的性能评分，并根据实际加载时间给出优化建议。只需输入网站URL，它就会分析网站的内容并提出改进措施。PSI 提供有关页面的实验室和现场数据。实验室数据可用于调试性能问题，因为它是在受控环境中收集的。但是，它可能无法捕获现实世界的瓶颈。现场数据对于捕捉真实的、真实的用户体验很有用 – 但具有更有限的指标集。
使用步骤：
- 访问PageSpeed Insights（https://pagespeed.web.dev/）
- 输入网站URL
- 点击”分析”按钮
- 等待测试完成（通常需要30-60秒）
- 查看移动端和桌面端的评分结果
- 解读测速结果及其意义
真实用户体验数据
PSI 中的真实用户体验数据由Chrome 用户体验报告(CrUX) 数据集提供支持。PSI 报告了真实用户在过去 28 天收集期内的首次内容绘制(FCP)、首次输入延迟(FID)、最大内容绘制(LCP) 和累积布局偏移(CLS) 体验。
为了显示给定页面的用户体验数据，必须有足够的数据才能将其包含在 CrUX 数据集中。如果页面最近发布或来自真实用户的样本太少，则该页面可能没有足够的数据。发生这种情况时，PSI 将回退到原始级别的粒度，其中包含网站所有页面上的所有用户体验。有时来源也可能没有足够的数据，在这种情况下，PSI 将无法显示任何真实的用户体验数据。
评估体验质量
PSI 将用户体验质量分为三个等级：良好、需要改进或较差。PSI 根据Web Vitals计划设置了以下阈值 ：
分布和选定的指标值
PSI 提供了这些指标的分布，以便开发人员可以了解该页面或来源的体验范围。此分布分为三类：良好、需要改进和较差，分别用绿色、琥珀色和红色条表示。例如，在 LCP 的琥珀色条中看到 11% 表示所有观察到的 LCP 值中有 11% 落在 2500 毫秒和 4000 毫秒之间。
在分布条上方，PSI 报告所有指标的第 75 个百分位数。选择第 75 个百分位数是为了让开发人员能够了解他们网站上令人沮丧的用户体验。通过应用上面显示的相同阈值，这些字段度量值被分类为好/需要改进/差。
核心网络生命体征
Core Web Vitals是一组对所有 Web 体验都至关重要的通用性能信号。Core Web Vitals 指标是 FID、LCP 和 CLS，它们可以在页面或源级别聚合。对于在所有三个指标中具有足够数据的聚合，如果所有三个指标的第 75 个百分位数都为“良好”，则聚合通过核心 Web 生命力评估。否则，聚合不通过评估。如果聚合没有足够的 FID 数据，那么如果 LCP 和 CLS 的第 75 个百分位数都为 Good，则它会通过评估。如果 LCP 或 CLS 的数据不足，则无法评估页面或源级聚合。
PSI 和 CrUX 中的字段数据之间的差异
PSI 中的字段数据与BigQuery 上的CrUX 数据集的 区别在于，PSI 的数据每天更新，而 BigQuery 数据集每月更新，并且仅限于原始级别的数据。两个数据源都代表过去 28 天的时间段。
性能诊断
PSI 使用Lighthouse来分析给定的 URL，生成一个性能分数来估计页面在不同指标上的性能，包括： First Contentful Paint、 Largest Contentful Paint、 Speed Index、 Cumulative Layout Shift、 Time to Interactive和Total Blocking Time。
每个指标都被评分并用一个图标标记：
- 好用绿色圆圈表示
- 需要改进用琥珀色信息方块表示
- 差用红色警告三角形表示
表现评分
在该部分的顶部，PSI 提供了一个总结页面模拟性能的分数。该分数是通过运行 Lighthouse 来收集和分析有关页面的诊断信息来确定的。90 或以上的分数被认为是好的。50到90分是需要改进的分数，低于50分被认为是差。
测速结果会显示一个0到100的评分，评分越高表示性能越好。除了总分，PageSpeed Insights还会列出可以优化的具体项目，帮助明确优化方向。评分标准如下：
- 90-100分：优秀，网站速度表现卓越
- 50-89分：需要改进，存在优化空间
- 0-49分：较差，急需优化
审计
Lighthouse 将其审计分为三个部分：
- 机会提供了如何改进页面性能指标的建议。本节中的每个建议都会估计如果实施改进，页面加载速度会快多少。
- 诊断提供有关页面如何遵守 Web 开发最佳实践的附加信息。
- Passed Audits 表示页面已经通过的审计。
提高Google PageSpeed Insights的方法
优化图片和媒体文件
图片和媒体文件往往是网页中体积最大的部分，通过压缩这些文件可以显著提升网站加载速度。使用现代的图片格式，如WebP，也是优化的一部分。专业的网站设计开发团队通常会在建站时就考虑图片优化策略，包括：
- 图片压缩：使用TinyPNG、ImageOptim等工具压缩图片，在不损失画质的前提下减少文件大小
- 延迟加载：实施懒加载（Lazy Loading），只在用户滚动到图片位置时才加载
- 响应式图片：为不同设备提供不同尺寸的图片
- 使用WebP格式：比传统JPEG/PNG格式减少25-35%的文件大小
提升服务器响应时间
服务器响应时间对网站速度有直接影响。优化服务器配置、使用高效的数据库查询和减少HTTP请求都能提升响应速度。理想的服务器响应时间应该在200毫秒以内。改善服务器响应时间的方法包括：
- 选择高性能的主机服务提供商
- 使用最新版本的PHP（推荐PHP 8.0或更高）
- 优化数据库查询，删除不必要的插件
- 启用GZIP压缩
利用缓存提升加载速度
通过浏览器缓存，可以存储已下载的资源，如图片、JS文件和CSS文件，从而在用户再次访问时减少加载时间。对于WordPress网站，推荐使用WP Rocket、W3 Total Cache或LiteSpeed Cache等缓存插件。合理的缓存策略可以将网站速度提升50%以上，这对SEO优化至关重要。
优化CSS和JavaScript
合并、压缩CSS和JavaScript文件，以及删除不必要的代码，可以减少文件大小，加快解析速度。具体优化措施包括：
- Minify代码：删除空格、注释和换行符
- 合并文件：减少HTTP请求次数
- 延迟加载JavaScript：非关键脚本延后执行
- 删除未使用的CSS：使用工具如PurgeCSS清理冗余样式
- 内联关键CSS：将首屏必需的CSS直接嵌入HTML
移动端优化
随着移动互联网的发展，移动端用户的比例不断增加。确保网站在移动设备上也能快速加载，对于提升整体网站性能至关重要。移动端优化要点：
- 采用响应式设计，自动适配各种屏幕尺寸
- 优化触控元素大小，确保易于点击
- 减少移动端不必要的功能和动画
- 优先加载首屏内容
- 避免使用Flash等不兼容的技术
采用CDN加速网站访问
内容分发网络（CDN）可以将网站内容分布到全球的服务器上，让用户可以从最近的服务器加载网站，从而提升速度。
案例分析：针对Shopify网站的速度优化
对于使用Shopify平台的电商网站，速度优化尤为重要，因为每延迟1秒，转化率可能下降7%。专业的Shopify开发服务可以帮助实现：
- 主题优化：选择轻量级主题或定制主题以减少代码冗余
- App精简：卸载不必要的Shopify应用，每个应用都会增加加载时间
- 产品图片优化：批量压缩产品图片，使用Shopify的内置CDN
- 代码优化：清理liquid模板中的冗余代码
- 字体优化：限制自定义字体的使用，优先使用系统字体
定期监控和维护网站性能
网站优化不是一劳永逸的工作，而是需要持续关注和维护的过程。定期使用谷歌PageSpeed Insights等工具检测网站性能，并根据最新的网站发展趋势进行调整，是保持网站竞争力的关键。建议每月至少进行一次全面的速度测试，特别是在以下情况后：
- 更新网站内容或功能
- 安装新的插件或主题
- 网站流量出现异常波动
- 搜索引擎排名下降
网站速度与SEO的关系
网站速度是谷歌核心网页指标（Core Web Vitals）的重要组成部分，直接影响搜索排名。一个加载速度快的网站不仅能提供更好的用户体验，还能获得更高的搜索引擎排名。专业的SEO服务团队会将速度优化作为整体优化策略的核心部分，因为：
- 降低跳出率：快速加载的网站能留住更多访客
- 提高页面浏览量：用户更愿意浏览多个页面
- 改善移动端排名：谷歌移动优先索引更看重移动端速度
- 增强用户信任：快速响应的网站给人更专业的印象
常见问题 (FAQ)
Lighthouse 使用什么设备和网络条件来模拟页面加载？
目前，Lighthouse 模拟移动网络上的中端设备 (Moto G4) 设备的页面加载条件，以及模拟桌面的有线连接桌面。PageSpeed 还在 Google 数据中心运行，该数据中心会因网络状况而异，可以通过查看 Lighthouse Report 的环境块来检查测试所在的位置：
为什么现场数据和实验室数据有时会相互矛盾？
字段数据是关于特定 URL 如何执行的历史报告，代表来自真实世界中用户在各种设备和网络条件下的匿名性能数据。实验室数据基于单个设备上页面的模拟负载和一组固定的网络条件。因此，这些值可能会有所不同。
为什么所有指标都选择第 75 个百分位数？
我们的目标是确保页面适合大多数用户。通过关注我们指标的第 75 个百分位值，这可确保页面在最困难的设备和网络条件下提供良好的用户体验。
为什么 v4 和 v5 中的 FCP 具有不同的值？
v5 中的 FCP 报告第 75 个百分位数（截至 2019 年 11 月 4 日），以前是第 90 个百分位数。在 v4 中，FCP 报告中位数（第 50 个百分位数）。
为什么 v5 中的 FID 有不同的值？
FID 报告第 75 个百分位数（截至 2020 年 5 月 27 日），以前是第 95 个百分位数。
实验室数据的好分数是多少？
任何绿色分数 (90+) 都被认为是好的，但请注意，拥有良好的实验室数据并不一定意味着真实用户体验也会很好。
为什么每次运行的性能得分会发生变化？我没有更改我的页面上的任何内容。
绩效衡量的可变性是通过具有不同影响水平的多个渠道引入的。度量可变性的几个常见来源是本地网络可用性、客户端硬件可用性和客户端资源争用。
为什么真实用户的 CrUX 数据不可用于 URL 或来源？
Chrome 用户体验报告汇总了来自已选择加入的用户的真实速度数据， 并要求 URL 必须是公开的（可抓取和可索引），并且具有足够数量的不同样本，以提供具有代表性的、匿名的 URL 或来源的性能视图。
👋 感谢您的观看！
