mcpField
W
web-performance-optimization

web-performance-optimization

github.com/aj-geddes開発375484 回インストール35 週間前に更新
リポジトリ

web-performance-optimization について

ページの読み込み遅延、大きなバンドル、レイアウトシフト、モバイル性能の課題に取り組む開発者向けの最適化ガイドです。読み込み、キャッシュ、圧縮、アセット最適化、監視の実装例を扱います。

主な機能

  1. 01遅延読み込みとコード分割
  2. 02画像の最適化
  3. 03HTTPキャッシュとService Worker
  4. 04Gzipとアセット最適化
  5. 05パフォーマンス監視

活用シーン

  1. 01ページ読み込み時間の短縮
  2. 02大きなJavaScriptバンドルへの対処
  3. 03モバイル性能とCLSの改善

インストール

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

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill web-performance-optimization

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
code-splitting-and-lazy-loading-react.md
gzip-compression-and-asset-optimization.md
http-caching-and-service-workers.md
image-optimization.md
performance-monitoring.md
templates/
component-template.tsx

詳細

Web パフォーマンス最適化

目次

概要

遅延読み込み、コード分割、キャッシュ、圧縮、モニタリングなどのパフォーマンス最適化戦略を実装し、Core Web Vitals とユーザーエクスペリエンスを改善します。

使用する場面

  • ページの読み込み時間が遅い
  • Largest Contentful Paint（LCP）が高い
  • バンドルサイズが大きい
  • Cumulative Layout Shift（CLS）が頻繁に発生する
  • モバイルでのパフォーマンスに問題がある

クイックスタート

最小限の動作例：

// utils/lazyLoad.ts
import React from 'react';

export const lazyLoad = (importStatement: Promise<any>) => {
  return React.lazy(() =>
    importStatement.then(module => ({
      default: module.default
    }))
  );
};

// routes.tsx
import { lazyLoad } from './utils/lazyLoad';

export const routes = [
  {
    path: '/',
    component: () => import('./pages/Home'),
    lazy: lazyLoad(import('./pages/Home'))
  },
  {
    path: '/dashboard',
    lazy: lazyLoad(import('./pages/Dashboard'))
  },
  {
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装は references/ ディレクトリにあります：

ガイド内容
コード分割と遅延読み込み（React）コード分割と遅延読み込み（React）
画像の最適化画像の最適化
HTTP キャッシュとサービスワーカーHTTP キャッシュとサービスワーカー
Gzip 圧縮とアセットの最適化Gzip 圧縮とアセットの最適化
パフォーマンスモニタリングパフォーマンスモニタリング

ベストプラクティス

✅ 実施すること
  • 確立されたパターンと規約に従います
  • クリーンで保守しやすいコードを書きます
  • 適切なドキュメントを追加します
  • デプロイ前に十分にテストします
❌ 避けること
  • テストや検証を省略しないでください
  • エラー処理を無視しないでください
  • 設定値をハードコードしないでください

コメント

Markdown 対応