性能优化工具Lighthouse操作指南

一、Lighthouse 入门

1. Lighthouse 是什么

• Google 开发的自动化网站检测工具，内置在 Chrome DevTools 里。
• 能生成 4 大类得分：

• • Performance（性能）
  • Accessibility（无障碍/可访问性）
  • Best Practices（最佳实践）
  • SEO（搜索引擎优化）

👉 主要帮助开发者找到网页加载慢、交互卡顿、SEO 不合格等问题。

---

2. 如何使用 Lighthouse

方法一：Chrome DevTools（推荐）

1. 打开 Chrome 浏览器 → 进入你要测试的网页
2. 按 F12 打开开发者工具（DevTools）
3. 切到 Lighthouse 面板
4. 在 "Categories" 里选择要测试的内容（默认全选就行）
5. 在 "Device" 里选择

• • Mobile（更严格，模拟慢网速和低性能手机）
  • Desktop（PC 环境）

6. 点击 Analyze page load
7. 等待几秒钟，生成报告

方法二：命令行

安装 Node.js 后：

npm install -g lighthouse
lighthouse https://example.com --view

方法三：在线工具

访问 PageSpeed Insights（Google 出品），输入网址即可跑出报告。

---

3. 如何看报告

报告会显示一个总分和 4 大类分数：

• Performance（性能） → 加载速度、交互延迟

• • 常见指标：

• • • LCP (Largest Contentful Paint) → 最大内容渲染时间，目标 ≤ 2.5s
    • FID/INP (输入延迟) → 点击/输入响应，目标 ≤ 200ms
    • CLS (Cumulative Layout Shift) → 页面元素抖动，目标 ≤ 0.1
    • TBT (Total Blocking Time) → 主线程被阻塞的时间，目标 ≤ 200ms

• Accessibility（无障碍） → 屏幕阅读器、语义标签、对比度
• Best Practices（最佳实践） → HTTPS、安全 API、资源加载方式
• SEO → meta 标签、标题、可爬取性

👉 报告会给出 问题列表，比如 "图片没有懒加载"、"脚本阻塞了渲染"等，并附带改进建议。

---

4. 常见问题 & 注意点

1. 分数很低（<30）怎么办？

• • 先在 无痕模式 跑一次，因为浏览器扩展可能拖慢速度。
  • 再切换 Mobile 模拟，结果才更接近真实用户体验。

2. 跑一次和跑多次分数不一样？

• • 正常现象，因为网络和缓存会影响结果。
  • 最好跑 3 次，取平均值。

3. 为什么我的本地开发环境分数很差？

• • 本地服务器可能没开压缩、缓存，或者开发模式没做优化。
  • 要用 生产构建版本来测。

---

5. 进阶技巧

1. 保存报告 ：右上角 Export → JSON/HTML
2. 性能瀑布图：点 Performance → "View Trace"，能看到长任务、阻塞时间
3. 持续监控：可以集成到 CI/CD，比如用 GitHub Actions 自动跑 Lighthouse
4. 对比优化前后效果：保存基线报告，再次跑对比分数和指标

---

入门练习

建议你先这样玩一遍：

1. 打开你的个人网站
2. 用 Chrome DevTools → Lighthouse → 选择 Mobile + 全选类别 → 跑一次
3. 看 Performance 下面的 LCP / CLS / TBT 指标
4. 点进 "诊断"部分，看看哪些优化建议最简单（比如"图片未压缩"）
5. 按建议改一项 → 再跑一次 → 体验分数上涨的感觉

---

二、完整操作指南

第 1 步：打开 DevTools

1. 用 Chrome 打开你要测试的网站（建议先跑自己本地的项目，也可以跑任何公开网页）。
2. 在页面空白处右键 → 检查(Inspect) ，或者直接按 F12。
3. 你会看到 Chrome 开发者工具 (DevTools) 出现在右侧/下方。

---

第 2 步：切换到 Lighthouse 面板

1. 在 DevTools 顶部标签栏找到 Lighthouse （有时在 >> 隐藏菜单里）。
2. 点击进入，就能看到一个配置面板。

---

第 3 步：选择检测配置

在 Lighthouse 面板里，你会看到 3 个主要配置区域：

① Categories（检测类别）

• Performance（性能）
• Accessibility（无障碍）
• Best Practices（最佳实践）
• SEO
  👉 初学者建议 全选，这样能生成完整报告。

② Device（设备类型）

• Mobile（默认推荐，模拟 3G 网络 + 低性能 CPU，更严格）
• Desktop （电脑端，分数一般更高）
  👉 建议先选 Mobile，因为它更接近真实用户体验。

③ Options（可选项）

• 默认保持不动就行。

---

第 4 步：运行分析

1. 点击 Analyze page load 按钮。
2. 页面会自动刷新，Lighthouse 开始跑测试（过程大约 10~30 秒）。
3. 等待结束后，会生成一个报告。

---

第 5 步：解读报告

报告顶部有 4 个彩色圆圈分数：

• Performance（性能） ：0-49 红色（差），50-89 橙色（一般），90-100 绿色（优秀）
• Accessibility（无障碍）
• Best Practices（最佳实践）
• SEO

点开 Performance，你能看到：

• 关键指标

• • LCP（最大内容渲染时间，目标 ≤ 2.5s）
  • CLS（页面抖动，目标 ≤ 0.1）
  • TBT（阻塞时间，目标 ≤ 200ms）
  • Speed Index / FCP（首屏速度）

• 诊断和改进建议

• • 比如 "图片未压缩"、"JS 包太大"、"没有缓存策略"等等。

---

第 6 步：保存报告

1. 报告右上角有个 Export 按钮。
2. 可以保存为 HTML （直接双击打开）或 JSON（方便做对比/集成 CI）。
3. 建议你保存第一次跑的结果，作为 基线报告，以后优化后再对比。

---

三、注意的坑 & 调试技巧

1. 浏览器扩展影响结果

• 有些 Chrome 插件会注入额外 JS/CSS（广告拦截、翻译、脚本注入），严重拖慢性能。
• 解决方法：

• • 在 无痕模式 (Incognito) 跑 Lighthouse
  • 或者新建一个干净的 Chrome Profile 只装必要扩展。

---

2. 测试环境不稳定

• 本地开发环境（localhost）没有 CDN、缓存、压缩，分数往往很低。
• 解决方法：

• • 跑 生产构建版本 （npm run build 后的结果），而不是开发模式。
  • 尽量在真实部署环境（Vercel / Netlify / Nginx）跑。

---

3. 一次跑和二次跑分数不同

• 因为缓存、网络波动、浏览器后台任务都会影响 Lighthouse。
• 解决方法：

• • 跑 3 次，取平均值或中间值。
  • 关注趋势，而不是单次分数。

---

4. Mobile 模拟和 Desktop 分数差异大

• Mobile 默认模拟 4x CPU Throttle + Slow 4G，分数更苛刻。
• 解决方法：

• • 优先看 Mobile，因为它最接近真实用户体验。
  • Desktop 用来辅助确认性能瓶颈。

---

5. 长任务 (Long Tasks) 隐藏在 JS 中

• 大部分性能问题其实是 JS 包太大，导致 TBT / INP 过高。
• 解决方法：

• • Lighthouse 报告里点击 View Trace，跳到 Performance 面板，找到主线程被占用的长任务。
  • 再结合 Coverage 面板看 JS/CSS 代码使用率。

---

6. 报告分数红色但体感流畅

• 可能是因为 Lighthouse 用的是模拟网络（3G/慢设备）。
• 解决方法：

• • 不要只看分数，要看具体指标（LCP、CLS、TBT）。
  • 如果 LCP/CLS/INP 在目标范围内，即使分数不高也没大问题。

---

调试技巧

1. 强制慢网速 / 慢 CPU

• DevTools → Network → 设置 Fast 3G
• DevTools → Performance → CPU Throttle 设为 4x
  👉 这样跑出来的结果更接近移动用户。

---

2. 定位最大问题资源

• Lighthouse → Performance → "View Original Trace"
• 找到：

• • LCP 元素（哪个图片/标题是最大渲染元素）
  • 哪些请求最慢（网络瀑布图）
  • 哪些 JS 任务阻塞了渲染

---

3. 代码覆盖率分析

• DevTools → Ctrl+Shift+P → 输入 Coverage → 打开 Coverage 面板
• 刷新页面，查看哪些 JS/CSS 只有部分被用到
  👉 比如 1MB 的 JS 只用了 20%，说明需要做 Tree Shaking / Code Splitting。

---

4. 布局抖动（CLS）分析

• DevTools → Rendering → 勾选 Layout Shift Regions
• 页面刷新时，红色矩形就是元素抖动的区域。

---

5. 持续集成（CI）监控

• 可以用 lighthouse-ci 在 CI/CD（GitHub Actions、GitLab CI）里跑 Lighthouse，自动出报告。
• 示例：

npm install -g @lhci/cli
lhci autorun

• CI 可以自动存历史数据，方便对比优化前后。

---

建议的跑分流程

1. 无痕模式 → Mobile + 全选 → 跑 3 次 → 保存最佳/中间分数
2. 打开 诊断 (Diagnostics) → 先处理最容易优化的项（图片压缩、缓存、懒加载）
3. 再用 View Trace → 定位长任务（JS 优化）
4. 改一轮 → 再跑一次 Lighthouse，看改动效果