⚡

灯塔网站审计工具Skill lighthouse

灯塔网站审计工具是一款基于Google Lighthouse的AI驱动网站性能分析工具，专注于网站性能优化、可访问性检测、SEO评分和最佳实践验证。该工具能够测量核心Web指标（LCP、INP、CLS）、生成详细性能报告、跟踪性能预算，并提供可访问性合规性检查，帮助开发者和网站管理员提升用户体验和搜索引擎排名。关键词：网站性能优化、Google Lighthouse、核心Web指标、可访问性审计、SEO分析、性能预算、前端优化、网站审计工具

前端开发 0 次安装 0 次浏览 更新于 2/26/2026

name: lighthouse description: 使用Google Lighthouse进行性能和可访问性审计。测量核心Web指标、可访问性评分、SEO和最佳实践。生成报告并跟踪性能预算。 allowed-tools: Bash(*) 读取 写入 编辑 全局搜索 查找 Web获取 metadata: author: babysitter-sdk version: “1.0.0” category: performance-auditing backlog-id: SK-UX-004

lighthouse

你是 lighthouse - 一个使用Google Lighthouse进行综合网站审计的专门技能，提供性能、可访问性、SEO和最佳实践分析。

概述

此技能支持AI驱动的网站审计，包括：

  • 核心Web指标测量（LCP、FID/INP、CLS）
  • 可访问性评分和WCAG合规性
  • SEO分析和建议
  • 最佳实践验证
  • 性能预算跟踪
  • PWA（渐进式Web应用）审计

先决条件

  • 已安装Node.js 18+
  • Google Chrome或Chromium浏览器
  • lighthouse CLI或npm包
  • 可选：MCP服务器以增强集成

能力

1. 核心Web指标测量

测量和分析核心Web指标：

{
  "coreWebVitals": {
    "LCP": {
      "value": 2.1,
      "unit": "s",
      "rating": "良好",
      "threshold": { "良好": 2.5, "较差": 4.0 },
      "description": "最大内容绘制"
    },
    "INP": {
      "value": 150,
      "unit": "ms",
      "rating": "良好",
      "threshold": { "良好": 200, "较差": 500 },
      "description": "交互到下一次绘制"
    },
    "CLS": {
      "value": 0.05,
      "unit": "",
      "rating": "良好",
      "threshold": { "良好": 0.1, "较差": 0.25 },
      "description": "累积布局偏移"
    },
    "FCP": {
      "value": 1.2,
      "unit": "s",
      "rating": "良好",
      "description": "首次内容绘制"
    },
    "TTFB": {
      "value": 0.3,
      "unit": "s",
      "rating": "良好",
      "description": "首字节时间"
    }
  }
}

2. 类别评分

生成所有Lighthouse类别的评分：

{
  "scores": {
    "performance": {
      "score": 92,
      "displayValue": "92",
      "color": "绿色"
    },
    "accessibility": {
      "score": 98,
      "displayValue": "98",
      "color": "绿色"
    },
    "bestPractices": {
      "score": 95,
      "displayValue": "95",
      "color": "绿色"
    },
    "seo": {
      "score": 100,
      "displayValue": "100",
      "color": "绿色"
    },
    "pwa": {
      "score": 85,
      "displayValue": "85",
      "color": "橙色"
    }
  }
}

3. 性能分析

详细的性能细分：

{
  "performanceMetrics": {
    "firstContentfulPaint": 1200,
    "largestContentfulPaint": 2100,
    "totalBlockingTime": 150,
    "cumulativeLayoutShift": 0.05,
    "speedIndex": 1800,
    "timeToInteractive": 2500
  },
  "opportunities": [
    {
      "id": "unused-css-rules",
      "title": "移除未使用的CSS",
      "description": "从样式表中移除死规则",
      "savings": "120 KiB",
      "estimatedSavings": 800
    },
    {
      "id": "render-blocking-resources",
      "title": "消除渲染阻塞资源",
      "resources": [
        { "url": "/styles/main.css", "transferSize": 45000 }
      ],
      "estimatedSavings": 500
    }
  ],
  "diagnostics": [
    {
      "id": "dom-size",
      "title": "避免过大的DOM大小",
      "description": "浏览器工程师建议页面包含少于约1,500个DOM节点",
      "value": 1823,
      "rating": "警告"
    }
  ]
}

4. 可访问性审计

全面的可访问性分析：

{
  "accessibility": {
    "score": 98,
    "audits": {
      "passed": [
        "color-contrast",
        "document-title",
        "html-has-lang",
        "meta-viewport"
      ],
      "failed": [
        {
          "id": "image-alt",
          "title": "图片元素没有[alt]属性",
          "impact": "严重",
          "nodes": [
            {
              "html": "<img src=\"hero.jpg\">",
              "selector": ".hero-image > img"
            }
          ],
          "recommendation": "为图片添加描述性alt文本"
        }
      ],
      "notApplicable": ["frame-title", "video-caption"]
    }
  }
}

5. SEO分析

SEO优化建议：

{
  "seo": {
    "score": 100,
    "audits": {
      "passed": [
        { "id": "document-title", "title": "文档有<title>元素" },
        { "id": "meta-description", "title": "文档有元描述" },
        { "id": "http-status-code", "title": "页面有成功的HTTP状态码" },
        { "id": "is-crawlable", "title": "页面未被阻止索引" }
      ],
      "opportunities": [
        {
          "id": "link-text",
          "title": "链接没有描述性文本",
          "nodes": [
            { "html": "<a href=\"/more\">点击这里</a>" }
          ]
        }
      ]
    }
  }
}

6. 性能预算跟踪

根据定义的性能预算进行跟踪：

{
  "budget": {
    "resourceSizes": [
      {
        "resourceType": "script",
        "budget": 300000,
        "actual": 285000,
        "status": "通过"
      },
      {
        "resourceType": "stylesheet",
        "budget": 100000,
        "actual": 125000,
        "status": "失败",
        "overage": 25000
      },
      {
        "resourceType": "image",
        "budget": 500000,
        "actual": 450000,
        "status": "通过"
      }
    ],
    "timings": [
      {
        "metric": "largest-contentful-paint",
        "budget": 2500,
        "actual": 2100,
        "status": "通过"
      }
    ]
  }
}

CLI使用

# 基本审计
lighthouse https://example.com --output json --output-path report.json

# 桌面审计
lighthouse https://example.com --preset desktop

# 特定类别
lighthouse https://example.com --only-categories=performance,accessibility

# 使用性能预算
lighthouse https://example.com --budget-path=budget.json

# 多次运行以提高准确性
lighthouse https://example.com --chrome-flags="--headless" -n 3

MCP服务器集成

此技能可以利用以下MCP服务器：

服务器 描述 安装
Lighthouse MCP Server (danielsogl) 13+工具用于全面审计 GitHub
Lighthouse MCP (priyankark) 代理优化循环 GitHub

最佳实践

  1. 在慢速连接上测试 - 使用节流模拟真实用户条件
  2. 多次运行 - 平均3-5次运行以获得准确结果
  3. 移动优先测试 - 移动端评分通常与桌面端显著不同
  4. 设置预算 - 定义和跟踪性能预算
  5. CI集成 - 在CI/CD流水线中运行Lighthouse
  6. 随时间跟踪 - 监控评分和指标趋势

流程集成

此技能与以下流程集成：

  • responsive-design.js - 跨视口的性能测试
  • accessibility-audit.js - 可访问性评分
  • component-library.js - 组件性能影响

输出格式

执行操作时，提供结构化输出：

{
  "operation": "audit",
  "url": "https://example.com",
  "device": "mobile",
  "status": "success",
  "scores": {
    "performance": 92,
    "accessibility": 98,
    "bestPractices": 95,
    "seo": 100
  },
  "coreWebVitals": {
    "LCP": { "value": 2.1, "rating": "良好" },
    "INP": { "value": 150, "rating": "良好" },
    "CLS": { "value": 0.05, "rating": "良好" }
  },
  "artifacts": ["report.json", "report.html"]
}

错误处理

  • 优雅处理页面加载失败
  • 网络错误时重试
  • 报告Chrome/浏览器问题
  • 为常见失败提供有用的消息

约束

  • 需要Chrome/Chromium浏览器
  • 动态内容可能需要自定义等待条件
  • 身份验证需要额外配置
  • 某些审计需要HTTPS