スキル web-performance-optimization
⚡

web-performance-optimization

安全

Claude で Web パフォーマンスを最適化

低速な Web サイトはユーザー体験と SEO ランキングを損ないます。このスキルは、コードスプリッティング、画像最適化、Core Web Vitals の改善など、実証済みの手法を使用して Web パフォーマンスを体系的に測定、分析、最適化する支援を行います。

対応: Claude Codex Code(CC)
📊 70 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「web-performance-optimization」を使用しています。 LCP が 4.2 秒で、2.5 秒以下にしたいです。メインのヒーロー画像は 2.5MB です。

期待される結果:

ヒーロー画像を AVIF フォーマットに変換（約 80% 削減）し、200KB 以下に圧縮、preload リンクを追加、fetchpriority='high' を使用、異なる画面サイズ向けに srcset でレスポンシブ画像を実装してください。

「web-performance-optimization」を使用しています。 JavaScript バンドルが 850KB（gzip 圧縮時）で、TTI の遅延を引き起こしています。

期待される結果:

moment.js（67KB）を date-fns（12KB）に置換、ライブラリ全体ではなく必要な lodash 関数のみインポート、重いコンポーネント向けにルートベースのコードスプリッティングを実装、アナリティクスなど重要度の低いスクリプトを遅延実行してください。

「web-performance-optimization」を使用しています。 CLS スコアが 0.25 で、コンテンツが飛び回る現象が起きています。

期待される結果:

すべての画像に width と height 属性を追加、CSS aspect-ratio プロパティを使用、動的コンテンツ向けにスケルトンローダーを実装、広告/ウィジェットが読み込まれる前にスペースを確保してください。

セキュリティ監査

安全
v1 • 2/25/2026

All 94 static analysis findings are false positives. The skill file is pure documentation (SKILL.md) containing markdown code examples and best practices for web performance optimization. Detected patterns such as dynamic import(), shell commands, and URLs are within markdown code blocks as educational examples, not executable code. No security risks identified.

1
スキャンされたファイル
649
解析された行数
1
検出結果
1
総監査数
低リスクの問題 (1)
SKILL.md:77-644
Documentation Contains Command Examples
File contains bash commands and code examples within markdown code blocks for educational purposes only. These are not executable code and pose no security risk.
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
24
コミュニティ
100
セキュリティ
87
仕様準拠

作れるもの

E コマースサイトの最適化

読み込み時間を短縮し Core Web Vitals スコアを改善することで、コンバージョン率向上のために商品ページを最適化

ダッシュボードのパフォーマンス改善

JavaScript バンドルサイズを削減し、データ読み込みを最適化して、より高速なダッシュボード操作を実現

コンテンツサイトの速度最適化

より高速なコンテンツ配信のために、画像最適化、遅延読み込み、キャッシュ戦略を実装

これらのプロンプトを試す

パフォーマンスの問題を分析 
Lighthouse 監査を実行してこれらの結果を得ました：[スコアを貼り付け]。パフォーマンスの低下の原因を理解し、どの問題から優先的に修正すべきかを特定するのを手伝ってください。
Core Web Vitals を最適化 
私の Core Web Vitals は以下の通りです：LCP [値]、FID [値]、CLS [値]。私の [フレームワーク] アプリケーションでこれらの指標を改善するための具体的なコード変更を示してください。
バンドルサイズを削減 
私の JavaScript バンドルは [サイズ] で、3G 回線で読み込みに [時間] かかります。依存関係を分析し、コードスプリッティング戦略またはより軽量な代替案を提案してください。
画像最適化を実装 
私のサイト向けの画像最適化戦略の実装を支援してください。[数] 個の画像があり、合計 [サイズ] です。モダンフォーマットへの変換と [フレームワーク] での遅延読み込み実装の方法を示してください。

ベストプラクティス

  • 改善を正確に測定するため、最適化前に常に Lighthouse でベースラインメトリクスを確立
  • ユーザー体験と SEO ランキングに直接影響する Core Web Vitals（LCP、FID、CLS）を最優先
  • 高速なインターネット接続のデスクトップだけでなく、実際のモバイルデバイスと低速な 3G 回線でパフォーマンスをテスト

回避

  • 最初に測定せずに最適化 - 変更を加える前に常に監査を実行して実際のボトルネックを特定
  • モバイルのパフォーマンスを無視してデスクトップを過度に最適化 - ほとんどのユーザーは低速な回線のモバイルデバイスを使用
  • 時期尚早の最適化 - マイクロ最適化ではなく、ユーザーに影響するメトリクスに大きな影響を与える変更を優先

よくある質問

Core Web Vitals とは何か、またなぜ重要なのでしょうか？
Core Web Vitals は Google のパフォーマンス指標です：LCP（読み込み速度）、FID（インタラクティブ性）、CLS（視覚的な安定性）。これらは SEO ランキングとユーザー体験に直接影響します。良いスコアは LCP 2.5 秒以下、FID 100ms 以下、CLS 0.1 以下です。
画像と JavaScript、どちらを先に最適化すべきですか？
Lighthouse 監査で最も深刻と特定された問題から始めてください。一般的に、画像がそれぞれ 1MB を超えている場合は画像を最初に最適化すると、最も早く成果が得られます。次に、gzip 圧縮時に 200KB を超えている場合は JavaScript バンドルサイズに対処してください。
遅延読み込みとコードスプリッティングの違いは何ですか？
遅延読み込みは、リソース（画像など）が必要になるまで読み込みを遅延させます。コードスプリッティングは JavaScript をオンデマンドで読み込まれる小さなチャンクに分割します。両方を組み合わせて使用します：画像とフォールディング以下のコンポーネントを遅延読み込みし、ルートまたは機能別にコードを分割します。
最適化が機能しているかどうかをどうやって確認できますか？
変更の前後に Lighthouse 監査を実行し、各メトリクスを記録してください。複数のデバイスとネットワーク速度でテストします。ラボスコアだけでなく、実際のユーザー体験を長期的に追跡するためにリアルユーザーモニタリング（RUM）ツールを使用してください。
このスキルは最適化を自動的に実装できますか？
いいえ、このスキルは専門的なガイダンス、コード例、最適化戦略を提供します。提案された変更の実装は、あなたまたはあなたの開発チームが行います。このスキルは、何を最適化し、どのようにアプローチするかを理解する支援を行います。
このスキルと一緒にどのツールを使うべきですか？
監査には Lighthouse（Chrome DevTools 内蔵）、バンドル分析には webpack-bundle-analyzer、詳細なウォーターフォールチャートには WebPageTest、ランタイムプロファイリングには Chrome DevTools Performance タブを使用します。このスキルはこれらのすべてのツールの結果を解釈する支援を行います。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-performance-optimization

参照

main

ファイル構成

📄 SKILL.md