Lighthouse

Google 开源的自动化 Web 性能审计工具，集成于 Chrome DevTools，支持性能、可访问性、SEO、最佳实践等多维度网站质量评估。

技术简介说明

Lighthouse 是 Google Chrome 团队开发的开源自动化审计工具，旨在帮助开发者提升 Web 页面的质量。它通过模拟真实用户访问（包含网络 throttling 和 CPU 降速），对网页进行全方位的自动化评估，生成包含性能分数、问题诊断和优化建议的结构化报告。

Lighthouse 的核心价值在于其一站式审计能力——一次运行即可同时评估 Performance（性能）、Accessibility（可访问性）、Best Practices（最佳实践）、SEO 和 PWA（渐进式 Web 应用）等多个维度。它不仅支持 CLI 和 Node.js API 调用，还直接内置于 Chrome DevTools 中，是前端开发者进行性能优化的首选工具。

作为 Core Web Vitals 的实验室测量基准，Lighthouse 与 Google 搜索排名直接关联，其评估结果已成为 Web 性能优化的行业标准参考。2025 年的 v13 大版本更新进一步整合了性能洞察体系，强化了 Core Web Vitals 的诊断深度。

基本信息

• 官网：https://developer.chrome.com/docs/lighthouse/overview
• GitHub：https://github.com/GoogleChrome/lighthouse
• License：Apache-2.0
• 最新版本：v13.4.0（2026 年 6 月）
• 主要维护者/公司：Google Chrome 团队（Connor Clark、Adam Raine、Brendan Kenny 等）
• GitHub Stars：30.5k+
• npm 周下载量：约 300 万+
• 主要语言：JavaScript (94.2%)、CSS (2.1%)、TypeScript (1.8%)

快速上手

安装

前置条件

• Google Chrome for Desktop 已安装
• Node.js ≥ 22.19（v13.0+ 要求）

CLI 安装

# npm 全局安装
npm install -g lighthouse
 
# yarn 全局安装
yarn global add lighthouse
 
# 验证安装
lighthouse --version

Chrome 扩展安装

• 访问 Chrome Web Store 安装 Lighthouse 扩展

Chrome DevTools

• 打开 Chrome → F12 打开 DevTools → Lighthouse 面板（无需额外安装）

基础配置

# 常用 CLI 参数
lighthouse <url> [options]
 
# 指定输出格式
lighthouse https://example.com --output=html --output-path=./report.html
 
# 指定输出多个格式
lighthouse https://example.com --output=json,html --output-path=./report
 
# 只运行特定类别
lighthouse https://example.com --only-categories=performance,seo
 
# 桌面模式（关闭移动设备模拟）
lighthouse https://example.com --preset=desktop
 
# 指定节流方法
lighthouse https://example.com --throttling-method=simulate
 
# 传入 Chrome 启动参数
lighthouse https://example.com --chrome-flags="--headless --no-sandbox"
 
# 使用远程 Chrome 调试端口
lighthouse https://example.com --port=9222
 
# 在浏览器中打开报告
lighthouse https://example.com --view

最小示例

CLI 基础使用

# 最简单的使用方式
lighthouse https://example.com
 
# 输出 JSON 格式报告并保存
lighthouse https://example.com --output=json --output-path=./report.json

Node.js API 使用

import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';
 
(async () => {
  // 启动 Chrome
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless', '--no-sandbox']
  });
 
  // 运行审计
  const result = await lighthouse('https://example.com', {
    port: chrome.port,
    output: 'json',
    onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
    logLevel: 'info',
  });
 
  // 获取结构化结果
  const lhr = result.lhr;
  console.log('Performance score:', lhr.categories.performance.score * 100);
  console.log('Accessibility score:', lhr.categories.accessibility.score * 100);
  console.log('SEO score:', lhr.categories.seo.score * 100);
 
  // 查看具体指标
  console.log('LCP:', lhr.audits['largest-contentful-paint'].displayValue);
  console.log('CLS:', lhr.audits['cumulative-layout-shift'].displayValue);
 
  // 保存格式化报告
  const fs = await import('fs');
  fs.writeFileSync('report.html', result.report, 'utf-8');
 
  await chrome.kill();
})();

与 Puppeteer 集成

import puppeteer from 'puppeteer';
import lighthouse from 'lighthouse';
 
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
 
  // 先执行登录或其他操作
  await page.goto('https://example.com/login');
  await page.type('#username', 'user');
  await page.type('#password', 'pass');
  await page.click('#submit');
 
  // 使用已连接的 Chrome 运行 Lighthouse
  const result = await lighthouse('https://example.com/dashboard', {
    port: new URL(browser.wsEndpoint()).port,
    output: 'html',
  });
 
  await browser.close();
})();

核心概念与架构

工作原理

用户输入 URL
    ↓
Chrome 实例启动（通过 chrome-launcher）
    ↓
CDP（Chrome DevTools Protocol）连接
    ↓
应用网络节流 + CPU 节流（模拟中低端移动设备）
    ↓
加载页面，收集 Trace 数据、网络请求、DOM 信息
    ↓
运行各类审计（Audits）
    ↓
计算分数，生成报告（HTML / JSON / CSV）

审计类别（6 大类）

性能评分系统

Lighthouse 使用**对数正态分布（log-normal distribution）**曲线计算性能分数：

• 基于 HTTP Archive 真实网站数据作为基准
• 控制点：
  • 第 25 百分位 → 分数 50（中位数控制点）
  • 第 8 百分位 → 分数 90（绿色/良好阈值）
  • 0.96 以上 → 收益递减点

性能指标权重（v10+ 至今）

分数颜色编码

核心特性

• 🔍 6 大维度审计：Performance、Accessibility、Best Practices、SEO、PWA、Agentic Browsing 一站式评估
• 📊 多种使用方式：Chrome DevTools 内置、CLI 命令行、Node.js API、Chrome 扩展
• 📱 移动/桌面模拟：默认模拟中低端移动设备和 4G 网络，支持切换到桌面预设
• 🎯 Performance Insights（性能洞察）：v13 新增的精细化诊断体系，包括 lcp-breakdown、cls-culprits-insight、image-delivery-insight 等
• 🤖 Agentic Browsing 审计：v13.2+ 新增，评估网站对 AI 代理的友好度，包括 WebMCP 和 llms.txt 检查
• 📋 多格式报告输出：支持 HTML（可视化报告）、JSON（程序化分析）、CSV（表格数据）
• 🔗 CI/CD 集成：通过 Lighthouse CI 支持自动化性能回归检测
• ⚡ 性能预算支持：可配置 budget.json 进行性能阈值断言
• 🌐 国际化支持：报告支持多语言输出

生态图

Lighthouse 生态系统
│
├── 核心工具
│   ├── Lighthouse CLI（npm 包）
│   ├── Chrome DevTools 内置面板
│   ├── Chrome 扩展（v100.0.0.5）
│   └── Node.js API
│
├── Lighthouse CI（@lhci/cli）
│   ├── GitHub Actions 集成
│   ├── Lighthouse CI Server（历史数据存储）
│   ├── 性能预算断言
│   └── 上传目标（temporary-public-storage / S3）
│
├── 集成生态
│   ├── PageSpeed Insights（底层使用 Lighthouse 引擎）
│   ├── Treo / Calibre / SpeedCurve（商业监控平台）
│   ├── WebPageTest（可调用 Lighthouse 分析）
│   └── GitHub Actions（treosh/lighthouse-ci-action）
│
├── 报告查看器
│   ├── Lighthouse Viewer（在线查看 JSON 报告）
│   └── lighthouse-ci-action 产物
│
└── 相关项目
    ├── chrome-launcher（Chrome 启动器）
    ├── lighthouse-stack-packs（技术栈建议包）
    └── lighthouse-cheat-sheet（速查表）

关键依赖

适用场景

• 🚀 性能优化诊断：在开发阶段快速识别 LCP、CLS、TBT 等 Core Web Vitals 瓶颈，获取针对性优化建议
• ♿ 可访问性评估：自动化检测 50+ 项无障碍问题（对比度、ARIA 属性、键盘导航等），辅助 WCAG 合规
• 🔍 SEO 审计：检查 meta 标签、canonical URL、结构化数据、移动端适配等 SEO 关键要素
• 🏗️ CI/CD 性能守门：在每次 PR 或部署前自动运行审计，防止性能退化
• 📊 竞品性能对比：对竞品网站进行标准化审计，量化性能差距
• 🎯 性能预算管理：通过 budget.json 设定阈值，自动检测资源大小和加载时间是否超标
• 🤖 AI 代理友好性评估：使用 Agentic Browsing 审计检查网站对 AI 代理的可操作性

开发与工程化

Lighthouse CI 集成

# 安装 Lighthouse CI
npm install -g @lhci/cli
 
# 初始化配置
lhci init
 
# 运行 CI 审计
lhci autorun --collect.url=https://example.com

lighthouserc.js 配置

module.exports = {
  ci: {
    collect: {
      url: ['https://example.com', 'https://example.com/about'],
      numberOfRuns: 3,  // 每次运行 3 轮取中位数
    },
    assert: {
      preset: 'lighthouse:recommended',
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.95 }],
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 3000 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

GitHub Actions 集成

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
 
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
 
      - name: Install Lighthouse CI
        run: npm install -g @lhci/cli
 
      - name: Build & Start Preview Server
        run: |
          npm ci
          npm run build
          npm run preview &
          npx wait-on http://localhost:3000
 
      - name: Run Lighthouse CI
        run: lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

性能预算配置

// budget.json
[
  {
    "path": "/*",
    "timings": [
      { "metric": "interactive", "budget": 3000 },
      { "metric": "first-contentful-paint", "budget": 1500 }
    ],
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "total", "budget": 500 },
      { "resourceType": "image", "budget": 200 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

性能与安全

性能特点

• 审计耗时：单次完整审计约 30-90 秒（取决于页面复杂度和网络条件）
• 资源消耗：审计期间 Chrome 实例会占用较多 CPU 和内存
• 推荐做法：
  • CI 环境中使用 --headless 模式
  • 设置 numberOfRuns: 3 取中位数，减少结果波动
  • 避免在 CI 中使用 --chrome-flags="--disable-dev-shm-usage" 以外的不必要标志

安全注意事项

• Lighthouse 审计的目标页面在隔离的 Chrome 实例中运行，不会影响宿主机
• 审计过程中不会向第三方发送用户数据
• 使用 --no-sandbox 仅在可信环境（如 CI 容器）中使用
• 避免对包含敏感认证信息的 URL 进行公开审计

已知性能瓶颈

• 对于大型 SPA 应用，首次 LCP 可能受 JavaScript 执行阻塞影响
• 大量第三方脚本可能导致 TBT 指标异常偏高
• 动态加载的内容（懒加载、无限滚动）可能影响审计准确性

技术对比

关键差异说明

• Lighthouse vs PageSpeed Insights：PSI 底层使用 Lighthouse 引擎，但额外提供来自 Chrome UX Report 的真实用户数据。PSI 分数通常高于本地 Lighthouse（因真实用户设备/网络通常优于模拟环境）。
• Lighthouse vs WebPageTest：WPT 提供全球多节点测试、真实设备、电影条分析和更精细的网络控制。Lighthouse 更适合开发阶段快速审计和 CI/CD 集成。
• 分数差异原因：Lighthouse 默认模拟中低端移动设备和 4G 网络，而桌面预设或真实用户数据通常产生更高分。

最佳实践

生产环境建议

1. 建立性能基线：首次使用时运行 3-5 次取平均值，作为优化起点
2. 渐进式优化：不要追求满分，关注对真实用户体验影响最大的指标
3. CI 集成策略：
   • 使用 warn 级别先提醒，稳定后再升级为 error 阻断
   • 初始阈值放宽 10-20%，随优化进程逐步收紧
   • 区分不同页面类型设置不同预算
4. 报告管理：
   • JSON 报告用于程序化分析和趋势追踪
   • HTML 报告用于团队沟通和审查
5. 移动端优先：默认移动模拟更接近大多数真实用户场景

常见陷阱

• ❌ 盲目追求满分：100 分不等于实际用户体验好，Google 搜索排名基于真实用户数据（Field Data）
• ❌ 忽略结果波动：网络、广告、A/B 测试、浏览器版本均影响分数，建议多轮运行取中位数
• ❌ 只看本地结果：本地 Lighthouse 无法反映全球不同地区用户的真实体验
• ❌ 忽略真实用户数据：应结合 CrUX 数据验证实验室审计结果
• ❌ v13 升级后仍使用旧审计 ID：如 first-meaningful-paint 等已被移除，需迁移到新的 Insight 体系

推荐模式

• ✅ 开发阶段：Chrome DevTools 内置 Lighthouse 面板，快速迭代验证
• ✅ CI/CD 守门：Lighthouse CI + GitHub Actions，每次 PR 自动审计
• ✅ 线上监控：PageSpeed Insights API + CrUX 数据，持续追踪真实用户体验
• ✅ 深度分析：WebPageTest 补充全球多节点、真实设备测试

技术局限与边界

已知限制

不适用场景

• 需要全球多地区真实用户数据（应使用 CrUX 或 RUM 工具）
• 需要跨浏览器性能对比（Lighthouse 仅使用 Chrome 引擎）
• 需要持续性能监控和历史趋势（应使用 SpeedCurve、Calibre 等监控平台）
• 需要测试需登录/认证页面且不想集成 Puppeteer 的场景

2025 年行业共识

行业正从"追求 Lighthouse 满分"转向"构建实际感觉快速的应用"。Google 搜索排名基于真实用户数据（Field Data），而非合成 Lighthouse 分数。

学习资源

官方文档

• Lighthouse 概览 - Chrome for Developers 官方文档
• Lighthouse 性能评分 - 评分算法详解
• What's new in Lighthouse 13 - v13 更新日志
• Lighthouse GitHub 仓库 - 源码和 Issue 追踪

教程与指南

• web.dev 性能优化指南 - Google 官方性能学习路径
• Lighthouse CI 入门 - CI 集成详细文档
• Monitor Performance with PageSpeed Insights API - Addy Osmani 教程

社区资源

• Chrome for Developers Blog - 版本发布公告
• web.dev - Web 最佳实践和案例
• Stack Overflow [google-lighthouse] 标签 - 技术问答
• Unlighthouse - 全站批量 Lighthouse 扫描工具
• Lighthouse Viewer - 在线查看 Lighthouse JSON 报告

2026 年现状

最新版本

• Lighthouse v13.4.0（2026 年 6 月）：改进 canonical URL 验证、修复 llms-txt 空白处理、性能仪表标签修复
• Chrome 扩展 v100.0.0.5（2026 年 6 月）
• PageSpeed Insights：v13.0 引擎（2025 年 10 月更新）

发展趋势

1. Agentic Browsing 类别：v13.2 新增并加入默认配置，评估网站对 AI 代理的友好度
2. WebMCP 支持：新增表单注解覆盖检查、注册工具列表、Schema 验证等审计
3. Soft Navigations API：Google I/O 2026 宣布，将 Core Web Vitals 测量扩展到 SPA 客户端导航
4. Performance Insights 体系：v13 将分散的性能审计整合为统一洞察，取代旧审计 ID
5. Chrome 2 周发布周期：2026 年 9 月起 Chrome 发布间隔缩短至 2 周，Lighthouse 更新将更频繁

社区活跃度

• GitHub 30.5k+ Stars，持续活跃
• 每月有来自全球的贡献者提交 PR
• v13.x 每个子版本均有新贡献者加入
• Chrome DevTools MCP 集成（2025 年）进一步扩展了 Lighthouse 在 AI 辅助开发中的应用

未来路线图

• 持续增强 Agentic Browsing 审计能力
• 配合 Chrome 快速发布节奏保持同步更新
• Node 26 支持（v13.4 已添加 CI 测试）
• 更多 Performance Insights 审计项的文档和工具支持