mcpField
W
web-performance

web-performance

github.com/alphaonedev開発44 回インストール
リポジトリ

web-performance について

web-performanceは、ウェブサイトのパフォーマンスを監査・改善するスキルです。Core Web Vitalsの分析、バンドル最適化、遅延読み込み、CDN配信、キャッシュを扱います。

主な機能

  1. 01Lighthouse監査とCore Web Vitals
  2. 02Webpackのバンドル圧縮と分割
  3. 03HTMLとReactの遅延読み込み
  4. 04静的アセット向けCDN設定
  5. 05HTTPヘッダーとService Workerによるキャッシュ

活用シーン

  1. 01リリース前のサイト監査
  2. 02ページの読み込み遅延の調査
  3. 03大きなJavaScriptバンドルの縮小
  4. 04キャッシュとCDNアセット配信の設定

インストール

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

$npx skills add https://github.com/alphaonedev/openclaw-graph --skill web-performance

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

詳細

目的

このスキルでは、Core Web Vitals、監査用のLighthouse、Webpackによるバンドル最適化、HTML/JSでの遅延読み込み、CDNの設定、キャッシュ戦略などのツールや手法を活用し、読み込み時間とユーザーエクスペリエンスを改善してウェブパフォーマンスを最適化します。

使用するタイミング

ページの読み込みが遅い場合、Core Web VitalsによるSEOへの影響に備える場合、大きなJavaScriptバンドルを最適化する場合、本番環境で効率的なアセット配信を実装する場合など、サイトのパフォーマンスを分析・改善するときにこのスキルを使用します。

主な機能

  • Lighthouse監査を実行し、最初のバイトまでの時間などの指標を使ってCore Web Vitals（LCP、FID、CLS）を測定します。
  • WebpackのTerserPluginを使って、圧縮とコード分割によりバンドルを最適化します。
  • HTML属性（画像のloading="lazy"など）またはReactのlazy()関数を使って、遅延読み込みを実装します。
  • Cloudflareなどのプロバイダーを使って、静的アセット配信用のCDNを設定します。
  • HTTPヘッダー（Cache-Control: max-age=3600など）またはサービスワーカーを使って、キャッシュ戦略を適用します。

使用パターン

タスクを実行するには、パラメーターとしてURLや設定ファイルなどを渡し、OpenClawのAPIまたはCLI経由でこのスキルを呼び出します。監査ではURLとオプションを指定し、最適化ではコードスニペットまたはビルド設定を渡します。エラー処理のため、呼び出しは必ずtry-catchで囲んでください。使用例：CI/CDパイプラインでこのスキルを使い、PRのビルドを自動的に監査します。

一般的なコマンド/API

JSONペイロードを指定し、OpenClawのCLIまたはAPIエンドポイント/api/skills/web-performance/executeを使用します。認証にはヘッダーの$OPENCLAW_API_KEYが必要です。

  • CLI：openclaw execute web-performance --url https://example.com --audit-type full --output json
  • API：/api/skills/web-performance/executeに、ボディ{"url": "https://example.com", "options": {"chromeFlags": "--headless"}}を指定してPOSTします。
  • 遅延読み込みのコードスニペット： 
    import React, { lazy, Suspense } from 'react';
const LazyImage = lazy(() => import('./ImageComponent'));
<Suspense fallback={<div>Loading...</div>}><LazyImage /></Suspense>;
  • バンドル最適化用のWebpack設定： 
    { "optimization": { "minimizer": ["terser-webpack-plugin"], "splitChunks": { "chunks": "all" } } }
  • CDN設定例：Nginxにlocation /static/ { proxy_pass https://cdn.example.com; expires 1d; }を追加します。

統合に関する注意

OpenClaw SDKをインポートし、必須パラメーターを指定してスキル関数を呼び出すことで統合します。認証では、実行前に環境変数$OPENCLAW_API_KEYを設定してください。監視ツールなど他のスキルと組み合わせることもできます。例：Lighthouseの結果をロギングサービスにパイプします。次のようなJSON設定ファイルを使うと、複数ステップの最適化を実行できます：{"steps": ["audit", "optimize-bundle", "apply-caching"]}。Webpackとの統合にはNode.js 14以降との互換性が必要です。

エラー処理

API呼び出しのレスポンスコード（無効なURLの場合は400、認証の問題の場合は401など）を確認してエラーを処理します。コード内では、スキルの実行をtry-catchで囲んでください。例：

try {
  const result = await openclaw.execute('web-performance', { url: 'https://example.com' });
  console.log(result);
} catch (error) {
  if (error.code === 'AUTH_ERROR') process.env.OPENCLAW_API_KEY = 'new-key';
  else console.error(error.message);
}

よくある問題：URLが無効な場合は「Invalid input」が返されます。ネットワークエラーの場合は、指数バックオフを使って再試行してください。呼び出しの前に、URLなどの入力を必ず検証してください。

具体的な使用例

  1. Lighthouseでウェブサイトを監査する：openclaw execute web-performance --url https://example.com --report-path ./report.jsonを実行して、Core Web Vitalsのスコアを含むJSONレポートを生成し、LCPが2.5秒を超えた場合を失敗のしきい値として分析します。
  2. CDNを使って最適化してデプロイする：ビルドスクリプトでopenclaw execute web-performance --action optimize-bundle --config webpack.config.jsを実行し、続けてopenclaw execute web-performance --action setup-cdn --provider cloudflare --assets /static/を実行して、キャッシュを有効にし、読み込み時間を30～50％短縮します。

グラフの関連性

  • 接続先：web-devクラスター
  • 関連スキル：seo-optimization（パフォーマンスを重視したSEO向け）、frontend-dev（バンドルおよび遅延読み込みとの統合向け）
  • 依存関係：monitoring-tools（監査後の分析向け）

コメント

Markdown 対応