SuperAPI AI 工具集

lighthouse-audit

测试与质量

查看项目

更新于 10-16 04:07

技能介绍

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 等)为特定项目在特定时间的审计结果,不代表通用保证。
  • 关于收费、价格、平台支持范围等信息暂未提供。