Lighthouse 报告解读HTML 给人看JSON 给系统看【免费下载链接】lighthouseAutomated auditing, performance metrics, and best practices for the web.项目地址: https://gitcode.com/GitHub_Trending/lig/lighthouseLighthouse 是 Google 开源的自动化网站审计工具跑一次会给你性能、可访问性、SEO 等维度的完整评分。但报告一出来很多人只盯着那个总分。这篇 Lighthouse 报告解读讲清楚一件事HTML 报告是给人看的体检单JSON 报告是给自动化流水线用的原始数据先分清受众再谈怎么读。先判断这次报告是给谁看在敲命令之前先问自己一个问题这份报告最终落到谁手里要给同事、领导、产品看结论 → 选--output html浏览器里点开就能讲要进 CI/CD、存库、做历史对比 → 选--output json结构化字段直接取用两种都要 → 同一次运行可以同时产出后面会讲Lighthouse 的--output参数支持html、json、csv三种取值定义见 cli/cli-flags.js。csv 适合做表格汇总但日常使用较少本文聚焦前两种。这张架构图透露了一个关键事实无论 HTML 还是 JSON源头都是同一份结果数据LHR。HTML 只是给这份数据套了一层可交互的皮所以两者的分数一定一致不存在JSON 里分数更高的情况。把 HTML 报告当体检单拿到 HTML 报告别从头滚到尾。按体检单的顺序看三块第一看顶部的分类圆环。性能、可访问性、最佳实践、SEO 各有一个分数绿橙红三色直接代表健康程度。对外讲解时这一行就够用了。第二看红色审计项。点开红色条目里面通常已经写明了具体原因和建议比如某张图片过大某个链接缺少可点击文本。你可以直接把这一屏截给负责的同学让他按条目认领。第三看每条审计的明细类型。Lighthouse 的审计结果会带不同形式的明细例如源码位置、DOM 节点、URL 或截图缩略图报告里会按类型渲染成对应链接或图片方便你定位到具体元素。给领导汇报时话术可以很简单总分多少、几个红项、最贵的红项修掉能带来什么收益。HTML 报告的价值就在这里——它替你完成了把数据翻译成结论这一步。从 JSON 里挑 3 个字段开始JSON 报告动辄上百 KB一次读完没有意义。它的数据结构在 types/lhr/lhr.d.ts 里有完整定义新手阶段只需要认这几个字段{ lighthouseVersion: 12.0.0, fetchTime: 2026-09-01T08:00:00.000Z, finalDisplayedUrl: https://example.com, categories: { performance: { score: 0.92 } }, audits: { first-contentful-paint: { score: 1, numericValue: 1200 } } }categories各大类的 0–1 分数做阈值判断就看这里audits每项审计的明细注意numericValue存的是原始数值如毫秒score才是换算后的得分两者别混lighthouseVersion和fetchTime跨版本、跨日期对比数据时的对账依据还有一个容易忽略的字段runWarnings。非空时说明本次运行有告警比如页面加载异常这份数据在入库前最好先拦截掉。组合输出与路径控制如果两种报告都需要一次运行可以同时产出不用跑两遍lighthouse https://example.com \ --output html --output json \ --output-path./reports/run--output-path给一个不带扩展名的路径多格式输出时 Lighthouse 会自动补后缀如run.report.html、run.report.json。路径写死了CI 里取文件就不用再猜名字。接进自动化阈值与历史对比JSON 报告进入 CI/CD 后常见的做法分三步设阈值从categories里取你关心的分数低于阈值就失败流水线。阈值建议先按现状定再逐月收紧一步到位往往会卡住所有提交。存历史把每次的 JSON 落盘或上传对象存储文件名带上fetchTime天然形成时间序列。做对比新版本和上个版本的 JSON 逐字段 diff重点看numericValue变化。性能审计里这类原始数值比 0–1 的分数更能反映真实波动。整个过程不需要解析 HTMLJSON 就是为此准备的。报告本身的渲染逻辑在 report/renderer/ 目录可以确认 HTML 里每一块内容都有对应的 JSON 来源。常见误区与下一步几个反复出现的坑提前避开别拿两次 HTML 肉眼对比。HTML 是展示层数值藏在展开项里对比必须回到 JSON 的numericValue。别用score当原始指标。分数是阈值映射结果80 分和 95 分之间可能差很多毫秒也可能只差一点直接看原始值。别忽略测试环境。JSON 里的environment记录了本次的浏览器与模拟设备跨环境的数据不要放一起比。下一步建议你做一件具体的事挑一个你负责的项目跑一次--output html --output json打开 HTML 认领一个红色审计项再打开 JSON 找到它的numericValue。两种格式各摸一遍之后无论写文档还是接流水线都不至于迷路。【免费下载链接】lighthouseAutomated auditing, performance metrics, and best practices for the web.项目地址: https://gitcode.com/GitHub_Trending/lig/lighthouse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Lighthouse 报告解读：HTML 给人看，JSON 给系统看
Lighthouse 报告解读HTML 给人看JSON 给系统看【免费下载链接】lighthouseAutomated auditing, performance metrics, and best practices for the web.项目地址: https://gitcode.com/GitHub_Trending/lig/lighthouseLighthouse 是 Google 开源的自动化网站审计工具跑一次会给你性能、可访问性、SEO 等维度的完整评分。但报告一出来很多人只盯着那个总分。这篇 Lighthouse 报告解读讲清楚一件事HTML 报告是给人看的体检单JSON 报告是给自动化流水线用的原始数据先分清受众再谈怎么读。先判断这次报告是给谁看在敲命令之前先问自己一个问题这份报告最终落到谁手里要给同事、领导、产品看结论 → 选--output html浏览器里点开就能讲要进 CI/CD、存库、做历史对比 → 选--output json结构化字段直接取用两种都要 → 同一次运行可以同时产出后面会讲Lighthouse 的--output参数支持html、json、csv三种取值定义见 cli/cli-flags.js。csv 适合做表格汇总但日常使用较少本文聚焦前两种。这张架构图透露了一个关键事实无论 HTML 还是 JSON源头都是同一份结果数据LHR。HTML 只是给这份数据套了一层可交互的皮所以两者的分数一定一致不存在JSON 里分数更高的情况。把 HTML 报告当体检单拿到 HTML 报告别从头滚到尾。按体检单的顺序看三块第一看顶部的分类圆环。性能、可访问性、最佳实践、SEO 各有一个分数绿橙红三色直接代表健康程度。对外讲解时这一行就够用了。第二看红色审计项。点开红色条目里面通常已经写明了具体原因和建议比如某张图片过大某个链接缺少可点击文本。你可以直接把这一屏截给负责的同学让他按条目认领。第三看每条审计的明细类型。Lighthouse 的审计结果会带不同形式的明细例如源码位置、DOM 节点、URL 或截图缩略图报告里会按类型渲染成对应链接或图片方便你定位到具体元素。给领导汇报时话术可以很简单总分多少、几个红项、最贵的红项修掉能带来什么收益。HTML 报告的价值就在这里——它替你完成了把数据翻译成结论这一步。从 JSON 里挑 3 个字段开始JSON 报告动辄上百 KB一次读完没有意义。它的数据结构在 types/lhr/lhr.d.ts 里有完整定义新手阶段只需要认这几个字段{ lighthouseVersion: 12.0.0, fetchTime: 2026-09-01T08:00:00.000Z, finalDisplayedUrl: https://example.com, categories: { performance: { score: 0.92 } }, audits: { first-contentful-paint: { score: 1, numericValue: 1200 } } }categories各大类的 0–1 分数做阈值判断就看这里audits每项审计的明细注意numericValue存的是原始数值如毫秒score才是换算后的得分两者别混lighthouseVersion和fetchTime跨版本、跨日期对比数据时的对账依据还有一个容易忽略的字段runWarnings。非空时说明本次运行有告警比如页面加载异常这份数据在入库前最好先拦截掉。组合输出与路径控制如果两种报告都需要一次运行可以同时产出不用跑两遍lighthouse https://example.com \ --output html --output json \ --output-path./reports/run--output-path给一个不带扩展名的路径多格式输出时 Lighthouse 会自动补后缀如run.report.html、run.report.json。路径写死了CI 里取文件就不用再猜名字。接进自动化阈值与历史对比JSON 报告进入 CI/CD 后常见的做法分三步设阈值从categories里取你关心的分数低于阈值就失败流水线。阈值建议先按现状定再逐月收紧一步到位往往会卡住所有提交。存历史把每次的 JSON 落盘或上传对象存储文件名带上fetchTime天然形成时间序列。做对比新版本和上个版本的 JSON 逐字段 diff重点看numericValue变化。性能审计里这类原始数值比 0–1 的分数更能反映真实波动。整个过程不需要解析 HTMLJSON 就是为此准备的。报告本身的渲染逻辑在 report/renderer/ 目录可以确认 HTML 里每一块内容都有对应的 JSON 来源。常见误区与下一步几个反复出现的坑提前避开别拿两次 HTML 肉眼对比。HTML 是展示层数值藏在展开项里对比必须回到 JSON 的numericValue。别用score当原始指标。分数是阈值映射结果80 分和 95 分之间可能差很多毫秒也可能只差一点直接看原始值。别忽略测试环境。JSON 里的environment记录了本次的浏览器与模拟设备跨环境的数据不要放一起比。下一步建议你做一件具体的事挑一个你负责的项目跑一次--output html --output json打开 HTML 认领一个红色审计项再打开 JSON 找到它的numericValue。两种格式各摸一遍之后无论写文档还是接流水线都不至于迷路。【免费下载链接】lighthouseAutomated auditing, performance metrics, and best practices for the web.项目地址: https://gitcode.com/GitHub_Trending/lig/lighthouse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
