本文为通用技术教程，示例来自可公开验证的审计行为，不针对任何具体站点数据。
类别分是平均数，修复要看审计项
Lighthouse 的四个类别分（Performance / Accessibility / Best Practices / SEO）各自由一组加权审计项平均而来。类别分 92 意味着“有少量审计项没过”，而每一个未过审计项都是一条可执行的修复指令。
读报告的正确姿势不是盯着分数叹气，而是：按 score < 1 过滤审计项，逐条把 details.items 里的元素定位出来。
可访问性：三个高频杀手
1. color-contrast（对比度）
Lighthouse 用计算样式算前景/背景对比度，阈值 4.5:1（大字 3:1）。常见的三种来源：
- 语义 token 没接到元素上（比如按钮文字继承了父级的暗淡色，而不是使用反色 token）；
- 透明度叠加：
opacity: 0.6的文字会让实际对比度跌出阈值； - 彩色文字落在浅色背景上，只顾了品牌色没顾可读性。
修复时注意“继承链”：一个按钮显示错色，问题可能出在三层之外的父元素。
2. label（表单控件无标签）
每个可交互的 <input>/<select>/<textarea> 都需要可访问名称，来源优先级：显式 <label for> > 隐式包裹 label > aria-label > aria-labelledby。
Markdown 渲染的任务清单（GFM task list）是个隐蔽重灾区——- [ ] 会渲染成没有关联 label 的复选框。对纯展示用途的清单，处理方式是禁用并补名称：
document
.querySelectorAll('.task-list input[type="checkbox"]')
.forEach((checkbox, index) => {
checkbox.disabled = true;
checkbox.setAttribute('aria-label', `清单项 ${index + 1}`);
});disabled 让它退出 Tab 序与表单提交，审计也不再检查它。
3. label-content-name-mismatch（可访问名与可见文本脱节）
给控件加 aria-label 本意是更好的无障碍描述，但如果可访问名不包含可见文本，语音控制用户说“搜索”时可能匹配不到那个名字里写的是“全站检索”的按钮。
规则：可访问名必须包含可见文本，额外说明放后面：
<!-- ❌ 可见"搜索"，可访问名里没有"搜索"开头的语境锚点之外的完整匹配 -->
<a href="/search" aria-label="打开站内检索页">搜索</a>
<!-- ✅ 可见文本包含在内 -->
<a href="/search" aria-label="搜索（快捷键 Ctrl K）">搜索</a>Best Practices：控制台错误
errors-in-console 常年躺在报告里没人管，因为它“不影响功能”。但它是四类问题的一站式集合：
- 资源 404（典型：favicon、懒加载图片、写错的预加载链接）；
- 未捕获的 Promise rejection；
- 已废弃 API 警告；
- CSP 违规报告。
修复优先级最高的往往是最无聊的：站点从未配置 favicon，每个访客的浏览器都在请求一个 404。一个 3 行的 SVG 图标加一行 <link rel="icon"> 就能清掉整页每访客一次的报错，同时让书签栏有脸见人。
Performance：区分“指标”与“机会”
性能部分的审计项分两类，处理方式完全不同：
指标（metrics）：LCP、TBT、CLS、Speed Index。它们有数值阈值，修复靠优化手段——预加载关键资源、拆分长任务、给媒体预留尺寸。
洞察（insights）：render-blocking-resources、unminified-javascript、uses-text-compression 这类“机会项”。它们指向确定性的工程动作：
- 渲染阻塞：把非关键 CSS 异步化、脚本加
defer； - 压缩：确认服务器对 JS/CSS/JSON 开了 gzip 或 brotli（自部署站点最常见的失分项是忘了给
.json开压缩）； - 压缩混淆：构建管线里关了 minify 就等于白送几百毫秒。
把审计变成回归门禁
单次跑分是行为，门禁才是习惯。Lighthouse CI 的断言机制可以把每个审计项变成构建门禁：
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.9 }],
"cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }]
}
}
}
}注意事项只有一条：跑分环境必须可复现（固定 Chrome 版本、固定视口、固定节流方式），否则分数的波动会淹没回归信号。
小结
Lighthouse 报告的价值不在那个大分数，而在 score < 1 的审计项列表——每一条都是带着定位信息的修复工单。对比度看继承链，表单看可访问名，控制台 404 顺手清，性能分清“指标”与“机会”。四条走完，类别分会自己回来。