企业官网建设流程全解析

如何读懂 Lighthouse 报告：HTML、JSON、CSV 格式怎么选、怎么用的完整指南

【免费下载链接】lighthouseAutomated auditing, performance metrics, and best practices for the web.项目地址: https://gitcode.com/GitHub_Trending/lig/lighthouse

上线前被性能审计"卡脖子"，Lighthouse 报告刷出来一堆红色低分，你从哪下手？这份指南带你三步看懂Lighthouse（Google 开源的网页自动化审计工具，一次跑出性能、可访问性、最佳实践、SEO 四类体检结果）：怎么跑出第一份报告、HTML 和 JSON 格式怎么选、还能直接接进 CI 当质量门槛。

快速上手：一条命令跑出第一份报告

装 Node 22 以上，然后全局安装：

npm install -g lighthouse lighthouse https://你的站点

两个关键参数：

• --output：决定报告格式，可选html（默认）、json、csv，可以传多个值一次全出；
• --view：跑完自动用浏览器打开 HTML 报告，不用自己去找文件。

HTML 和 CSV 报告默认生成在当前目录，文件名按"被测 URL + 日期"命名，双击就能打开；JSON 默认直接打印到终端，要落盘就加--output-path=report.json。不想装 CLI，也可以直接在 Chrome DevTools 的 Lighthouse 面板里点 Generate report，效果一样。

看懂报告：分数、指标和建议到底在说什么

打开报告，第一步看顶部那几个圆环分数。每个 0~100，是这个分类下所有检查项按权重加权平均出来的，不是拍脑袋的。四格分别对应：

• Performance（性能）：页面加载快不快；
• Accessibility（可访问性）：视障、色弱等用户能不能正常用；
• Best Practices（最佳实践）：有没有 HTTPS、控制台报错这类工程规范问题；
• SEO（搜索引擎优化）：Google 爬虫能不能顺利读懂你的页面。

第二步看指标。性能分类里的核心指标，翻译成人话就是：

• LCP（最大内容绘制）：首屏那块最大的图或文字几秒出现，直接决定用户"看到东西"的速度；
• INP（交互到下一帧绘制）：你点按钮后页面多久有反应，衡量"卡不卡"；
• 还有"优化机会"清单：比如压缩一张大图能省 0.5 秒，按预计收益排好序，照着从上往下改就行。

第三步看颜色分档，绿橙红三档：

• 绿（90~100）：这项没问题；
• 橙（50~89）：不算事故，但值得排期处理；
• 红（0~49）：有明确体验问题，优先修。

另外注意，性能类检查大多是数值分——1.2 秒和 4 秒都是"过了"，差距体现在分数上；而可访问性、SEO 里很多是通过/不通过的硬性检查，非 0 即 1。

选对格式：HTML、JSON、CSV 各管什么用

一句话结论：发给人看选 HTML，交给程序选 JSON，做批量横向对比选 CSV，拿不准就--output html,json一次全出，各取所需。

用好报告：两个高频实战

JSON 报告接入 CI 设置质量门槛

CI 里跑 Lighthouse 输出 JSON，再用阈值脚本卡关，低于 90 分直接让流水线失败：

lighthouse https://你的站点 --output=json --output-path=report.json --quiet node -e "process.exit(require('./report.json').categories.performance.score < 0.9 ? 1 : 0)"

注意 JSON 里的 score 是 0~1，和报告里 0~100 的展示分差 10 倍。

定期跑分做历史趋势对比

用一条命令按日期归档，每周跑一次，用脚本抽出 performance 分数存进表格画趋势线，回归一眼就能发现：

lighthouse https://你的站点 --output=json --output-path=lhr-$(date +%Y%m%d).json --quiet

对比时保持同一套模拟条件（移动端、同一网络限速档），否则涨跌说不清原因。

新手最常踩的 3 个坑 + 行动收尾

Q1：分数低 = 网站差？不一定。Lighthouse 默认模拟的是中低端手机 + 慢网络，比真实用户环境严；带登录态、强依赖特定地区的页面也会被误伤。分数是体检单，不是判决书。

Q2：JSON 是不是只有机器能看？不是。它就是一份普通文本，用编辑器打开、丢给 jq 或任何脚本都能取数，categories里存分类得分，audits里存每个检查项的明细，结构比 HTML 直白得多。

Q3：两次跑分不一样，算谁的？波动属正常现象。单次抖动几十分别紧张，看多次跑分的中位数才靠谱。

想深入报告结构可以翻 官方文档，报告渲染逻辑在 report/ 目录。现在就给自己站点跑一次基线报告，存成 JSON 放进仓库，下周再跑一次对比趋势，从第一个红项开始修。

【免费下载链接】lighthouseAutomated auditing, performance metrics, and best practices for the web.项目地址: https://gitcode.com/GitHub_Trending/lig/lighthouse