Lighthouse 是 Google 开发的一个“网站体检工具”，它能帮你自动分析你的网站表现，比如加载快不快、对搜索引擎友不友好、手机上好不好用等。
🛠️ 怎么用？
方法一：直接用 Chrome 浏览器自带的（推荐！）
- 用 Chrome 浏览器 打开你要检测的网站
- 按下
F12打开开发者工具 - 看到上面有个 Lighthouse 标签，点进去
- 选择你想测试的内容（一般默认就行）
- 选移动端还是电脑端
- 点 生成报告（Generate report） ，稍等几秒钟，就会看到结果！
方法二：命令行方式（适合技术人员）
npm install -g lighthouse # 安装
lighthouse https://example.com --view # 检测并打开报告
方法三：装个 Chrome 插件也行
- 去 Chrome 应用商店 搜 "Lighthouse"
- 装上插件
- 点浏览器右上角的小图标 → 点 “Generate report”
📊 报告里看什么？
Lighthouse 会给你一个得分（0 到 100 分），下面是几个重点指标：
- 性能（Performance）：网站加载快不快，比如首屏多久出来（FCP）、整页多久加载完（LCP）
- 可访问性（Accessibility）：残障人士能不能顺利访问
- 最佳实践（Best Practices）：有没有一些低级错误
- SEO：搜索引擎能不能正确抓取你的网站
- PWA：你的网站是不是一个“像 App 一样”的网站（可选）
📌 小建议
- 本地开发时：用 Chrome 自带的 Lighthouse 快速检查
- 上线前：多测几次，看看有没有大问题
- 平常维护：定期跑一跑，看看有没有性能退化
用 Lighthouse 就像是给你的网站做“体检”，简单一键就能看出问题在哪里，然后就能对症下药啦！
如果你只想记住一句话：
👉 打开 Chrome → F12 → Lighthouse → 生成报告，就能看到你网站的性能评分！
看看咱写的管理后台需不需要优化😏：
| 指标 | 含义 | 理想值 ✅ | 需优化 ⚠️ | 较差 ❌ | 你的值 |
|---|---|---|---|---|---|
| FCP (First Contentful Paint) | 页面首个内容（文字/图像）出现的时间 | ≤ 1.8s | 1.8s - 3s | > 3s | 3.8s ❌ |
| LCP (Largest Contentful Paint) | 页面主内容加载完成的时间 | ≤ 2.5s | 2.5s - 4s | > 4s | 11.7s ❌ |
| TBT (Total Blocking Time) | JS 等阻塞用户操作的总时间 | ≤ 200ms | 200ms - 600ms | > 600ms | 2,570ms ❌ |
| Speed Index | 页面内容视觉加载速度 | ≤ 3.4s | 3.4s - 5.8s | > 5.8s | 5.8s ⚠️ |
| CLS (Cumulative Layout Shift) | 页面元素跳动的稳定性 | ≤ 0.1 | 0.1 - 0.25 | > 0.25 | 0.115 ⚠️ |
优化着手建议：
- 减少 JS 体积和执行时间：可以用 Code Splitting、懒加载、移除不必要的库。
- 优化图片：使用更小、更现代的图片格式（如 WebP）。
- 使用缓存和 CDN：提升静态资源加载速度。
- 用懒加载（lazy loading）处理下面的内容或图片。
- 避免 CSS/JS 阻塞渲染：关键 CSS 内联，非关键内容延迟加载。
- 使用 LCP 优化指南：官方优化指南
