lighthouse-audit

Lighthouse 監査

Google Lighthouse の監査を自動化して、検索ランキングに Google が使用するものと同じ指標である Core Web Vitals、SEO、アクセシビリティを測定・追跡します。

このスキルを使用する場面

• パフォーマンスの最適化 - 変更の前後で LCP、FID、CLS を測定します
• SEO 監査 - 技術的な SEO の問題（メタタグ、構造化データなど）を確認します
• アクセシビリティの確認 - コンプライアンスに関するアクセシビリティの問題を特定します
• クライアントへのレポート - プロフェッショナルなパフォーマンスレポートを作成します
• モニタリング - 複数のページにわたって、スコアの推移を追跡します

Claude が行うことと、あなたが決めること

Claude が行うこと	あなたが決めること
分析フレームワークを構成します	指標の定義
データのパターンを特定します	ビジネス上の解釈
可視化テンプレートを作成します	ダッシュボードの設計
最適化する領域を提案します	アクションの優先順位
統計指標を計算します	判断のしきい値

依存関係

pip install click pandas jinja2
# Also requires Chrome and Lighthouse CLI
# npm install -g lighthouse
# Or use Chrome DevTools built-in Lighthouse

コマンド

単一 URL の監査

python scripts/main.py audit https://example.com --categories performance,seo
python scripts/main.py audit https://example.com --format html --output report.html

一括監査

python scripts/main.py batch urls.txt --output results/
python scripts/main.py batch urls.txt --categories performance --format csv

変更前後の比較

python scripts/main.py compare https://example.com --baseline scores.json
python scripts/main.py compare https://example.com --baseline-url https://staging.example.com

経時的なモニタリング

python scripts/main.py history https://example.com --days 30
python scripts/main.py history https://example.com --plot

例

例 1：サイト全体のパフォーマンス監査

# Create URL list
cat > urls.txt << EOF
https://example.com/
https://example.com/pricing
https://example.com/features
https://example.com/blog
EOF

# Run batch audit
python scripts/main.py batch urls.txt --categories performance,seo,accessibility

# Output: results/audit_2024-01-15/
# ├── example.com_.json
# ├── example.com_pricing.json
# ├── example.com_features.json
# ├── example.com_blog.json
# └── summary.csv

例 2：変更前後の比較

# Save baseline
python scripts/main.py audit https://example.com --output baseline.json

# Make optimizations...

# Compare
python scripts/main.py compare https://example.com --baseline baseline.json

# Output:
# Core Web Vitals Comparison
# ─────────────────────────────
# Metric         Before    After    Change
# LCP            3.2s      1.8s     -44% ✓
# FID            120ms     45ms     -63% ✓
# CLS            0.25      0.08     -68% ✓
# Performance    52        89       +37 pts

例 3：クライアント向けレポートの作成

# Full audit with HTML report
python scripts/main.py audit https://client-site.com \
  --format html \
  --output client-report.html \
  --include-screenshots

# Output: Professional HTML report with:
# - Executive summary
# - Core Web Vitals scores
# - Screenshots of issues
# - Prioritized recommendations

監査カテゴリ

カテゴリ	確認項目	影響
performance	LCP、FID、CLS、TTFB、Speed Index	検索ランキング
seo	メタタグ、見出し、リンク、モバイル	検索での可視性
accessibility	WCAG 準拠、コントラスト、ラベル	コンプライアンス
best-practices	HTTPS、セキュリティ、最新の API	信頼性
pwa	サービスワーカー、マニフェスト、オフライン	アプリのような使用感

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
INP（次の描画までのインタラクション）	≤200ms	200ms-500ms	>500ms

出力形式

形式	用途	内容
json	自動化、保存	生データ全体
csv	スプレッドシート、分析	スコアの概要
html	クライアント向けレポート	視覚的なレポート
md	ドキュメント	Markdown の概要

スキルの適用範囲

このスキルが得意なこと

• データ分析の構成
• パターンと傾向の特定
• 可視化フレームワークの作成
• 統計指標の計算

このスキルでできないこと

• 実際のデータへのアクセス
• 統計の専門知識の代替
• ビジネス上の意思決定
• 予測精度の保証

関連スキル

• schema-markup - 構造化データの問題を修正します
• image-batch - LCP のために画像を最適化します
• link-checker - リンク切れを見つけます

スキルのメタデータ

• モード: centaur

category: seo-tools
subcategory: performance
dependencies: [lighthouse, click, pandas]
difficulty: beginner
time_saved: 3+ hours/week