Lighthouse MCP Server

🚀 Lighthouse MCP Server

Lighthouse MCP Server是一個基於Google Lighthouse的模型上下文協議（MCP）服務器，提供全面的網頁性能審計和分析功能。該服務器支持大語言模型（LLM）和AI代理對網站進行詳細的性能評估、無障礙訪問審計、SEO分析、安全檢查和核心網絡指標（Core Web Vitals）監測。

🚀 快速開始

安裝要求

• Node.js 22.0.0 或更高版本
• Chrome/Chromium瀏覽器（由Lighthouse自動管理）
• VS Code、Cursor、Windsurf、Claude Desktop或其他MCP客戶端

安裝方法

使用你喜歡的客戶端，通過以下配置之一安裝Lighthouse MCP服務器：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest"]
    }
  }
}

在VS Code中安裝

你可以通過以下鏈接安裝：

• VS Code
• VS Code Insiders

也可以通過VS Code CLI手動安裝：

# 對於VS Code
code --add-mcp '{"name":"lighthouse","command":"npx","args":["-y","@danielsogl/lighthouse-mcp@latest"]}'

# 對於VS Code Insiders
code-insiders --add-mcp '{"name":"lighthouse","command":"npx","args":["-y","@danielsogl/lighthouse-mcp@latest"]}'

安裝完成後，Lighthouse MCP服務器即可與VS Code中的GitHub Copilot代理一起使用。

在Cursor中安裝

你可以點擊以下鏈接安裝： Install MCP Server

也可以手動安裝： 前往Cursor Settings → MCP → Add new MCP Server，將其命名為 "lighthouse"，使用command類型，命令為 npx @danielsogl/lighthouse-mcp@latest：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest"]
    }
  }
}

在Windsurf中安裝

你可以通過以下鏈接安裝：

也可以手動安裝： 遵循Windsurf MCP 文檔，使用以下配置：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest"]
    }
  }
}

在Claude Desktop中安裝

遵循MCP安裝 指南，使用以下配置：

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["@danielsogl/lighthouse-mcp@latest"]
    }
  }
}

✨ 主要特性

• 🚀 性能分析：完成Lighthouse審計，提供核心網絡指標、性能得分和優化建議
• ♿ 無障礙訪問審計：進行WCAG合規性檢查和無障礙訪問得分分析
• 🔍 SEO分析：進行搜索引擎優化審計並提供最佳實踐建議
• 🔒 安全評估：進行HTTPS、CSP和安全漏洞掃描
• 📊 資源分析：分析JavaScript、CSS、圖像和字體的優化機會
• 📱 移動與桌面對比：跨設備進行對比分析，支持節流選項
• ⚡ 核心網絡指標監測：監測LCP、FID、CLS，並進行閾值檢查
• 🎯 性能預算：自定義性能閾值和預算監測
• 📚 參考資源：內置網頁性能、無障礙訪問、SEO和安全的指南和最佳實踐

🔧 可用工具

🏁 審計工具

⚡ 性能工具

🔍 分析工具

🔒 安全工具

💬 可用提示

Lighthouse MCP服務器包含可重複使用的提示，幫助大語言模型提供結構化分析和建議：

📊 分析提示

📚 可用資源

Lighthouse MCP服務器提供內置參考資源，包含網頁性能、無障礙訪問、SEO和安全的基本指南和最佳實踐：

🎯 策略提示

🔧 提示參數詳情

• auditResults：Lighthouse工具的JSON審計結果
• focusArea：關注的特定類別（"performance", "accessibility", "seo", "best-practices", "pwa"）
• beforeAudit / afterAudit：更改前後的Lighthouse審計結果
• changesImplemented：審計之間所做更改的描述
• currentMetrics：審計中的當前性能指標
• targetGoals：特定的性能目標或業務目標
• timeframe：實施改進的時間線
• framework：前端框架或技術棧
• constraints：技術或業務約束
• websiteType：網站類型（如電子商務、博客、企業網站）
• targetAudience：目標受眾或市場信息
• complianceLevel：WCAG合規級別（"AA" 或 "AAA"）
• userGroups：無障礙訪問時要考慮的特定用戶群體

📋 參數詳情

通用參數

• url（必需）：要分析的網站URL
• device：目標設備（"desktop" 或 "mobile"，默認："desktop"）
• includeDetails：是否包含詳細的審計信息（默認：false）
• throttling：是否啟用網絡/CPU節流（默認：false）

特定參數

• categories：要審計的Lighthouse類別（["performance", "accessibility", "best-practices", "seo", "pwa"]）
• threshold：自定義指標閾值（如 {"lcp": 2.5, "fid": 100, "cls": 0.1}）
• budget：性能預算限制（如 {"performanceScore": 90, "largestContentfulPaint": 2500}）
• resourceTypes：要分析的資源類型（["images", "javascript", "css", "fonts", "other"]）
• minBytes：分析的最小文件大小閾值（默認：2048）
• checks：要執行的安全檢查（["https", "mixed-content", "csp", "hsts", "vulnerabilities"]）

💻 使用示例

基礎用法

基本性能審計

// 獲取整體性能得分
{
  "tool": "get_performance_score",
  "arguments": {
    "url": "https://example.com",
    "device": "mobile"
  }
}

核心網絡指標分析

// 使用自定義閾值檢查核心網絡指標
{
  "tool": "get_core_web_vitals",
  "arguments": {
    "url": "https://example.com",
    "device": "mobile",
    "includeDetails": true,
    "threshold": {
      "lcp": 2.5,
      "fid": 100,
      "cls": 0.1
    }
  }
}

安全評估

// 全面的安全審計
{
  "tool": "get_security_audit",
  "arguments": {
    "url": "https://example.com",
    "checks": ["https", "csp", "hsts"]
  }
}

資源優化

// 查找優化機會
{
  "tool": "analyze_resources",
  "arguments": {
    "url": "https://example.com",
    "resourceTypes": ["images", "javascript"],
    "minSize": 1024
  }
}

使用參考資源

// 獲取核心網絡指標閾值
{
  "resource": {
    "uri": "lighthouse://performance/core-web-vitals-thresholds"
  }
}

// 訪問WCAG無障礙訪問指南
{
  "resource": {
    "uri": "lighthouse://accessibility/wcag-guidelines"
  }
}

// 獲取特定框架的優化指南
{
  "resource": {
    "uri": "lighthouse://frameworks/optimization-guides"
  }
}

使用提示進行分析

// 分析審計結果並提供針對性建議
{
  "prompt": "analyze-audit-results",
  "arguments": {
    "auditResults": "{...lighthouse audit json...}",
    "focusArea": "performance"
  }
}

// 創建性能改進計劃
{
  "prompt": "create-performance-plan",
  "arguments": {
    "currentMetrics": "{...current performance metrics...}",
    "targetGoals": "Achieve 90+ performance score and sub-2s LCP",
    "timeframe": "3 months"
  }
}

// 比較前後審計結果
{
  "prompt": "compare-audits",
  "arguments": {
    "beforeAudit": "{...before audit results...}",
    "afterAudit": "{...after audit results...}",
    "changesImplemented": "Implemented lazy loading and image optimization"
  }
}

🎯 使用場景

• 性能監測：自動化性能跟蹤和核心網絡指標監測
• 無障礙訪問合規：WCAG 2.1合規性檢查和修復指導
• SEO優化：技術SEO審計和搜索引擎優化建議
• 安全評估：漏洞掃描和安全最佳實踐驗證
• 資源優化：捆綁分析和優化機會識別
• 性能預算：自動化性能預算監測和警報
• CI/CD集成：自動化質量門控和性能迴歸檢測

🔧 技術細節

服務器使用以下技術構建：

• Model Context Protocol SDK：用於MCP服務器實現
• Google Lighthouse：用於網頁性能審計
• Chrome Launcher：用於瀏覽器自動化
• TypeScript：確保類型安全，提升開發體驗
• Zod：用於運行時模式驗證

🤝 貢獻

歡迎貢獻代碼！請閱讀我們的 貢獻指南，瞭解以下詳細信息：

• 代碼風格和標準
• 測試要求
• 拉取請求流程
• 開發環境設置

📄 許可證

本項目採用MIT許可證，詳情請參閱 LICENSE 文件。

🔒 安全

有關安全問題，請參閱我們的 安全策略。

📞 支持

• 🐛 Bug報告：GitHub Issues
• 💬 討論：GitHub Discussions
• 📧 郵箱：security@codingrules.ai

🙏 致謝

• Google Lighthouse團隊提供了出色的審計引擎
• Anthropic制定了模型上下文協議規範
• 開源社區的持續啟發和貢獻

由 Daniel Sogl 用心打造 ❤️