← 全部文章

Chrome 中的 Lighthouse:用 DevTools 或插件做移动端审计

在 Chrome DevTools、Lighthouse 插件或命令行中运行 Lighthouse 移动端审计:设置方法、如何解读分数、为什么结果会波动,以及应该先修什么。

要在 Chrome 中运行 Lighthouse 移动端审计,请打开 DevTools,选择 Lighthouse 面板,把 Device 设为 Mobile,勾选需要的类别(Performance、Accessibility、Best practices、SEO),然后点击 Analyze page load。Lighthouse 会在模拟的中端手机和限速网络下重新加载页面,生成一份包含 0 到 100 分以及待修复问题清单的报告。请在无痕窗口中运行,因为其他插件可能会干扰结果。

Lighthouse 也是 Google 在下线移动设备友好性测试后推荐的替代工具,见移动设备友好性测试的替代工具。

在 Chrome DevTools 中的步骤

  1. 在无痕窗口中打开页面(Ctrl + Shift + N 或 Cmd + Shift + N)。插件默认不会在无痕窗口中运行。
  2. 打开 DevTools(F12 或 Cmd + Option + I),选择 Lighthouse。如果看不到,在 >> 箭头里找。
  3. 选择 Mode:
    • Navigation(默认):审计一次全新的页面加载,大多数情况下用这个。
    • Timespan:在你操作时进行录制,适合测量菜单或表单。
    • Snapshot:审计页面当前的状态,例如打开弹窗时。
  4. 把 Device 设为 Mobile。
  5. 勾选需要的 Categories。
  6. 点击 Analyze page load,等待约 30–60 秒。

Lighthouse 可以审计 Chrome 能打开的任何页面,包括 localhost 和需要登录的页面,这些是在线工具访问不到的。

Chrome 的 Lighthouse 插件

Lighthouse 也以插件形式上架了 Chrome 应用商店:安装后打开页面,点击 Lighthouse 图标并选择 Generate report。Google 官方文档建议,除非有特殊理由,否则使用 DevTools 面板,因为 DevTools 可以审计本地网站和需要登录的页面,而插件不能。实际使用中,如果只想一键审计某个公开页面而不打开 DevTools,插件很方便;其余情况按上面的步骤操作即可。

通过命令行运行 Lighthouse

需要可重复运行或接入 CI 时,使用 Node 版命令行工具:

npx lighthouse https://example.com --view

命令行默认以移动端模式审计。加上 --preset=desktop 可审计桌面端,--only-categories=performance,seo 可限定类别,--output=json 可在脚本中处理结果。PageSpeed Insights 则在 Google 服务器上对公开网址运行同一个引擎。

如何解读报告

每个类别都有一个分数:90–100 为良好(绿色),50–89 为需要改进(橙色),0–49 为较差(红色)。

Performance 基于实验室指标:First Contentful Paint、Largest Contentful Paint、Total Blocking Time、Cumulative Layout Shift 和 Speed Index。分数下方的 Insights 和 Diagnostics 会列出具体的修复建议,比如图片过大、LCP 图片被发现得太晚、阻塞渲染的资源等。从 Lighthouse 13(2025 年 10 月)起,旧的性能审计项被整合进这些 insights,与 DevTools Performance 面板中显示的内容一致。

Accessibility 会运行自动检查,包括颜色对比度、缺失的标签和 alt 文本、标题顺序、视口缩放设置和点击区域大小等。

Best practices 涵盖 HTTPS、控制台中的浏览器错误、已废弃的 API 和图片宽高比。

SEO 检查基础项:title 和 meta description、返回成功状态码且可被索引的页面、带描述性文字的可抓取链接、图片 alt 文本、有效的 robots.txt,以及 hreflang 和 canonical 标签。Lighthouse 13 删除了旧的“字号清晰可读”审计,并把 viewport 检查移到了性能 insights 中。通过这些检查并不代表页面就能排上名,只说明没有基础性障碍。

为什么移动端分数更低,而且每次都不一样

移动模式模拟的是更慢的手机和网络,所以桌面端 95 分的页面在移动端可能只有 60 分。这个差距正是重点:它更接近许多真实访客的体验。

每次运行的分数也会变化,有时相差 5–10 分,原因包括网络状况、服务器响应时间以及电脑上的后台活动。要得到可靠的数字:

  • 运行三到五次审计,取中位数
  • 关闭其他占资源的标签页和应用
  • 在相同条件下比较(同样的设备设置、同一页面、同一台电脑)

就速度而言,Lighthouse 是实验室测试。真正反映访客体验的是 PageSpeed Insights 或 Search Console 中的真实用户实测数据。两者的区别见移动端页面速度测试指南。

先修什么

  1. Accessibility 和 SEO 中所有标红的项目。 通常都能很快修好:标签、alt 文本、对比度、缺失的 meta description、被屏蔽的爬虫。
  2. LCP 方面最大的优化机会。 往往是头图过大、被设置了懒加载,或被发现得太晚。
  3. 耗时较长的 JavaScript 任务。 第三方脚本经常是罪魁祸首,看看哪些可以延迟加载或删除。
  4. 布局偏移。 为图片、嵌入内容和广告位设置尺寸。

Lighthouse 会列出问题,但不会告诉你页面在手机上长什么样。请配合在手机视图中目测:使用 DevTools 设备模式,或用 Mobile View Extension 以真实手机尺寸和移动 User Agent 重新加载页面。然后按照移动端网页测试清单检查自动审计无法评判的内容,比如导航和表单。

常见问题

如何在 Chrome 中运行移动端 Lighthouse?

打开 DevTools,进入 Lighthouse 面板,把 Device 设为 Mobile,选择类别后点击 Analyze page load。使用无痕窗口可以得到更干净的结果。

Lighthouse 移动端多少分算好?

90 分及以上为良好。就性能而言,重点是让真实用户数据中的 Core Web Vitals 达标;实验室分数是帮助你发现问题的参考。

Lighthouse 和 PageSpeed Insights 是一回事吗?

PageSpeed Insights 在 Google 服务器上运行 Lighthouse,并在有数据时加入 Chrome 用户体验报告中的真实用户数据。DevTools 中的 Lighthouse 在你自己的电脑上运行,可以测试本地和私有页面。

用手机视图查看你的下一个网站。

添加扩展,在你正在使用的标签页中直接打开设备预览。