🛠️ 開発・MCP コミュニティ

web-performance

ウェブサイトの表示速度向上やユーザー体験改善のため、Core Web Vitalsに基づいた画像・CSS・JS最適化やキャッシュ戦略を提案するSkill。

📜 元の英語説明(参考)

Web and frontend performance optimization. Use when user asks to "optimize performance", "improve loading time", "lazy loading", "code splitting", "bundle size", "Core Web Vitals", "image optimization", "CSS/JS minification", "caching strategies", "performance profiling", or mentions web performance and user experience metrics.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ウェブサイトの表示速度向上やユーザー体験改善のため、Core Web Vitalsに基づいた画像・CSS・JS最適化やキャッシュ戦略を提案するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Webパフォーマンス最適化

ウェブアプリケーションのパフォーマンスとユーザーエクスペリエンスを最適化するための戦略とテクニックです。

Core Web Vitals

Largest Contentful Paint (LCP)

最大のコンテンツ要素が表示されるまでの時間です。
目標: 2.5秒未満
最適化: 画像サイズ、サーバー応答、レンダリングをブロックするリソース

First Input Delay (FID)

ページがユーザー入力に応答するまでの時間です。
目標: 100ミリ秒未満
最適化: JavaScriptの削減、タスクの分割

Cumulative Layout Shift (CLS)

ページの視覚的な安定性です。
目標: 0.1未満
最適化: 画像/広告のスペースを確保、レイアウトの乱れを避ける

パフォーマンス指標

指標	目標	ツール
First Contentful Paint (FCP)	1.8秒未満	Chrome DevTools
Largest Contentful Paint (LCP)	2.5秒未満	Lighthouse
Time to Interactive (TTI)	3.8秒未満	WebPageTest
Total Blocking Time (TBT)	150ミリ秒未満	Lighthouse

最適化テクニック

画像の最適化

<!-- 遅延読み込み -->
<img src="image.jpg" loading="lazy">

<!-- レスポンシブ画像 -->
<picture>
  <source media="(max-width: 500px)" srcset="small.jpg">
  <img src="large.jpg" alt="Description">
</picture>

<!-- 最新のフォーマット -->
<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Description">
</picture>

コード分割

// 動的インポート
const module = await import('./heavy-module');

// Reactの遅延読み込み
const Component = React.lazy(() => import('./Component'));

キャッシュ戦略

ブラウザキャッシュ: Cache-Controlヘッダーを設定します。
サービスワーカー: オフラインサポートとキャッシュ制御
CDN: コンテンツを地理的に分散します。
Redis: サーバーサイドキャッシュ

ミニファイと圧縮

CSS、JavaScript、HTMLをミニファイします。
Gzip圧縮
より良い圧縮のためのBrotli
未使用のコードを削除します (ツリーシェイキング)。

パフォーマンス監査チェックリスト

[ ] 画像を最適化する (フォーマット、サイズ、遅延読み込み)
[ ] CSS、JS、HTMLをミニファイする
[ ] gzip/brotli圧縮を有効にする
[ ] コード分割を実装する
[ ] 静的アセットをキャッシュする
[ ] アセットにCDNを使用する
[ ] クリティカルレンダリングパスを最適化する
[ ] 未使用の依存関係を削除する
[ ] 非クリティカルなルートを遅延読み込みする
[ ] フォントを最適化する (サブセット、プリロード)
[ ] サービスワーカーを実装する
[ ] Core Web Vitalsを監視する

分析ツール

Chrome Lighthouse - パフォーマンスを監査します。
WebPageTest - 詳細な分析を行います。
Speedcurve - 継続的な監視を行います。
Bundle Analyzer - Webpack/Rollupのバンドルサイズを分析します。
Sentry - エラーとパフォーマンスの監視を行います。

ベストプラクティス

まず測定する - ベースラインメトリクスを確立します。
優先順位をつける - 最大の問題から修正します。
影響をテストする - 改善を検証します。
継続的に監視する - 時間の経過とともに追跡します。
ユーザー中心 - 実際のユーザーメトリクスに焦点を当てます。

パフォーマンス予算の例

JavaScript: 200KB未満
CSS: 50KB未満
画像: 合計500KB未満
フォント: 100KB未満
合計: 850KB未満

参考文献

Web Vitals by Google
Chrome Developers Performance
MDN Web Performance
Lighthouse Documentation
WebPageTest Blog

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Web Performance Optimization

Strategies and techniques for optimizing web application performance and user experience.

Core Web Vitals

Largest Contentful Paint (LCP)

Time to largest content element visible
Target: < 2.5 seconds
Optimize: image size, server response, render-blocking resources

First Input Delay (FID)

Time for page to respond to user input
Target: < 100 milliseconds
Optimize: reduce JavaScript, break up tasks

Cumulative Layout Shift (CLS)

Visual stability of page
Target: < 0.1
Optimize: reserve space for images/ads, avoid layout disruptions

Performance Metrics

Metric	Target	Tool
First Contentful Paint (FCP)	< 1.8s	Chrome DevTools
Largest Contentful Paint (LCP)	< 2.5s	Lighthouse
Time to Interactive (TTI)	< 3.8s	WebPageTest
Total Blocking Time (TBT)	< 150ms	Lighthouse

Optimization Techniques

Image Optimization

<!-- Lazy loading -->
<img src="image.jpg" loading="lazy">

<!-- Responsive images -->
<picture>
  <source media="(max-width: 500px)" srcset="small.jpg">
  <img src="large.jpg" alt="Description">
</picture>

<!-- Modern formats -->
<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Description">
</picture>

Code Splitting

// Dynamic import
const module = await import('./heavy-module');

// React lazy loading
const Component = React.lazy(() => import('./Component'));

Caching Strategies

Browser cache: Set Cache-Control headers
Service workers: Offline support and cache control
CDN: Distribute content geographically
Redis: Server-side caching

Minification & Compression

Minify CSS, JavaScript, HTML
Gzip compression
Brotli for better compression
Remove unused code (tree shaking)

Performance Audit Checklist

[ ] Optimize images (format, size, lazy load)
[ ] Minify CSS, JS, HTML
[ ] Enable gzip/brotli compression
[ ] Implement code splitting
[ ] Cache static assets
[ ] Use CDN for assets
[ ] Optimize critical rendering path
[ ] Remove unused dependencies
[ ] Lazy load non-critical routes
[ ] Optimize fonts (subset, preload)
[ ] Implement service workers
[ ] Monitor Core Web Vitals

Tools for Analysis

Chrome Lighthouse - Audit performance
WebPageTest - Detailed analysis
Speedcurve - Continuous monitoring
Bundle Analyzer - Webpack/Rollup bundle size
Sentry - Error and performance monitoring

Best Practices

Measure First - Establish baseline metrics
Prioritize - Fix biggest issues first
Test Impact - Verify improvements
Monitor Continuously - Track over time
User-Centric - Focus on real user metrics

Example Performance Budget

JavaScript: < 200KB
CSS: < 50KB
Images: < 500KB total
Fonts: < 100KB
Total: < 850KB

References

Web Vitals by Google
Chrome Developers Performance
MDN Web Performance
Lighthouse Documentation
WebPageTest Blog