Lighthouse Audit 是一个专注于运行 Lighthouse 审计、分析 Core Web Vitals、识别性能优化机会并生成性能报告的专业技能。它通过一组 npm 脚本命令,帮助开发者在移动端和桌面端对网站进行性能评估,并输出可交互报告、JSON 数据或 Markdown 诊断报告。
用途 该技能主要用于网站性能审计与优化分析。它覆盖 Lighthouse 的四大评分维度:Performance(性能)、Accessibility(可访问性)、Best Practices(最佳实践)和 SEO。通过运行审计,可以获取 Core Web Vitals 指标、性能机会列表和诊断信息,从而定位性能瓶颈并指导优化。
主要能力
- 移动端审计:npm run lighthouse,默认配置为 4 倍 CPU 降速、150ms RTT、1600 Kbps,屏幕模拟 412x915,并在浏览器中打开交互式报告。
- 桌面端审计:npm run lighthouse:desktop,配置为 1 倍 CPU 降速、40ms RTT、10240 Kbps,无屏幕模拟,同样打开交互式报告。
- JSON 输出:npm run lighthouse:json,生成 lighthouse-report.json,适用于自动化分析和 CI/CD。
- 自动化分析:npm run lighthouse:analyze,在控制台输出指标分析,包括评分、Core Web Vitals 和优化机会。
- 诊断报告:npm run lighthouse:diagnostic 生成 Markdown 格式的详细诊断报告,保存在 lighthouse-reports/ 目录;npm run lighthouse:diagnostic:local 针对 localhost:3000 生成本地诊断。
Core Web Vitals 目标 技能中列出了各项指标的目标值与分级标准:
- LCP:良好 < 2.5s,需改进 2.5s–4.0s,差 > 4.0s。
- FID:良好 < 100ms,需改进 100ms–300ms,差 > 300ms。
- CLS:良好 < 0.1,需改进 0.1–0.25,差 > 0.25。
- FCP:良好 < 1.8s,需改进 1.8s–3.0s,差 > 3.0s。
- TBT:良好 < 300ms,需改进 300ms–600ms,差 > 600ms。
- SI:良好 < 3.4s,需改进 3.4s–5.8s,差 > 5.8s。
使用方式 典型分析工作流为:先运行审计(如 npm run lighthouse:json),再执行自动化分析(npm run lighthouse:analyze),然后查看报告中的优化机会,最后生成诊断报告(npm run lighthouse:diagnostic)。报告会保存在 lighthouse-reports/ 目录,文件名带时间戳,支持 JSON 和 Markdown 格式。
优化机会 技能中列出了常见优化方向,分为高优先级和中优先级。高优先级包括:优化 LCP(如预加载 hero 图片、调整尺寸/格式/质量)、减少主线程工作和 JS 执行时间、延迟屏幕外图片(loading="lazy"、fetchPriority="low")、减少未使用 CSS(检查 Tailwind purge 配置、移除未使用规则、使用 CSS 分块)、减少未使用 JavaScript(懒加载重型组件、动态导入与代码分割、移除未使用依赖)。中优先级包括:最小化主线程工作、减少 JS 执行时间、优化服务器响应时间(数据库查询、索引、缓存)、处理控制台错误和 ARIA 属性问题。
性能评分计算 Performance 评分由以下指标加权计算:LCP 25%、FID 25%、CLS 15%、FCP 10%、TBT 10%、SI 10%、TTI 5%。
持续监控与 CI/CD Lighthouse CI 配置位于 .github/workflows/performance-budgets.yml 和 lighthouserc.js。自动化报告保存在 lighthouse-reports/ 目录,文件名带时间戳。
关键文件
- lighthouserc.js:Lighthouse CI 配置。
- scripts/performance/analyze-lighthouse-results.js:分析脚本。
- scripts/performance/lighthouse-diagnostic.js:诊断脚本。
- lighthouse-reports/:生成的报告目录。
适用场景
- 发布前验证性能是否回退。
- 优化后测量改进效果。
- 定期(每周或每月)监控性能。
- 重大变更(新功能或依赖)后审计。
- 在 CI/CD 中集成性能预算检查。
限制与注意事项
- 审计环境会影响结果:生产环境最准确,预发布环境适合发布前验证,本地环境迭代快但准确性较低。
- 结果可能不一致,建议多次运行取平均、清除浏览器缓存、使用一致的降速设置。
- 审计失败或超时需检查服务器是否运行、URL 是否可访问、超时设置和网络连接。
- 高 LCP 和高 TBT 有对应的排查与优化建议,但具体效果取决于实际项目。
- 技能中提供的当前性能数据(如移动端 Performance 62/100、LCP 7.58s 等)为特定项目在特定时间的审计结果,不代表通用保证。
- 关于收费、价格、平台支持范围等信息暂未提供。