mcpField
W
web-performance-audit

web-performance-audit

github.com/secondskyテスト・品質240532 回インストール5 週間前に更新
リポジトリ

web-performance-audit について

web-performance-audit は、Webパフォーマンスの監査と改善を行うスキルです。Core Web Vitalsの目標、測定例、Lighthouseの自動化、最適化策、パフォーマンス予算を扱います。

主な機能

  1. 01Core Web Vitalsの目標
  2. 02Webパフォーマンス測定例
  3. 03Lighthouse監査の自動化
  4. 04工数別の最適化策
  5. 05パフォーマンス予算の例
  6. 06監査チェックリスト

活用シーン

  1. 01パフォーマンス基準値の設定
  2. 02ページ速度の問題特定
  3. 03工数に応じた最適化計画
  4. 04リソースと時間の予算設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/secondsky/claude-skills --skill web-performance-audit

インストール後、Claude Code で/web-performance-auditを入力して読み込まれたか確認します。

詳細

Web パフォーマンス監査

包括的なパフォーマンス監査を実施し、最適化を行います。

Core Web Vitals の目標

指標良好改善が必要不良
LCP（Largest Contentful Paint）<2.5s2.5-4s>4s
FID（First Input Delay）<100ms100-300ms>300ms
CLS（Cumulative Layout Shift）<0.10.1-0.25>0.25
INP（Interaction to Next Paint）<200ms200-500ms>500ms

パフォーマンスの測定

// Using web-vitals library
import { getCLS, getFID, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  console.log({ name, value, id });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

Lighthouse の自動化

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runAudit(url) {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const result = await lighthouse(url, {
    port: chrome.port,
    onlyCategories: ['performance']
  });

  await chrome.kill();
  return result.lhr;
}

最適化戦略

すぐにできる改善（1〜2日）
  • gzip／brotli 圧縮を有効にする
  • CSS／JS を圧縮する
  • 重要でないスクリプトの読み込みを遅らせる
  • 画像を最適化する（WebP、遅延読み込み）
中程度の作業（1〜2週間）
  • コード分割を実装する
  • Service Worker によるキャッシュを追加する
  • 重要なリソースをプリロードする
  • レンダリングをブロックするリソースを排除する
長期的な取り組み（1〜3か月）
  • アーキテクチャを改善する
  • CDN を最適化する
  • データベースクエリを最適化する

パフォーマンスバジェット

{
  "timings": [
    { "metric": "first-contentful-paint", "budget": 1500 },
    { "metric": "largest-contentful-paint", "budget": 2500 }
  ],
  "resourceSizes": [
    { "resourceType": "script", "budget": 150 },
    { "resourceType": "image", "budget": 300 }
  ]
}

監査チェックリスト

  • Core Web Vitals のベースラインを測定する
  • Lighthouse 監査を実行する（モバイルとデスクトップ）
  • 実ユーザー指標（RUM）を分析する
  • 最大コンテンツ要素を特定する
  • レイアウトシフトを確認する
  • JavaScript バンドルサイズを確認する
  • 低速な 3G 接続でテストする
  • パフォーマンスバジェットを設定する
  • 監視アラートを設定する

コメント

Markdown 対応