webperf-loading

WebPerf：読み込みパフォーマンス

Chrome DevTools でウェブパフォーマンスを測定する JavaScript スニペットです。

スクリプトの実行

1. mcp__chrome-devtools__evaluate_script でスクリプトを実行し、返されるオブジェクトを読み取ります。スクリプトはコンソールに出力しないため、返されるオブジェクトが結果です。結果には、references/schema.md の説明にあるとおり、script、status、およびメトリクスデータ（value、rating、details、items、issues）が含まれます。
2. status が "tracking" の場合、スクリプトはページの監視を続けます。操作を行った後、別の mcp__chrome-devtools__evaluate_script 呼び出しで getDataFn に記載された関数（たとえば getINP()）を呼び出し、返されるオブジェクトを読み取ります。
3. status が "error" または "unsupported" の場合は、error を確認します。ページがまだ読み込まれていないか、ブラウザーが API に対応していない可能性があります。

Chrome DevTools MCP を使用しない場合は、webperf-snippets CLI で同じスニペットを実行してください。この CLI はヘッドレス Chromium でページを読み込み、同じ形式の結果オブジェクトを出力します。コマンドは npx webperf-snippets <url> --snippet <Name> --json です。<Name> は .js を除いたスクリプト名です。Playwright と Chromium が必要です（npm install --save-dev webperf-snippets playwright を実行し、その後 npx playwright install chromium を実行します）。トラッキングスニペットでは、操作を実行するために --interact-script <file> を指定します。

スクリプト

• scripts/Back-Forward-Cache.js — バックフォワードキャッシュ
• scripts/CSS-Media-Queries-Analysis.js — CSS メディアクエリの分析
• scripts/Cache-Strategy-Analysis.js — キャッシュ戦略の分析
• scripts/Client-Side-Redirect-Detection.js — クライアントサイドリダイレクトの検出
• scripts/Compression-Audit.js — 圧縮の監査
• scripts/Content-Visibility.js — コンテンツの可視性
• scripts/Critical-CSS-Detection.js — クリティカル CSS の検出
• scripts/Event-Processing-Time.js — イベント処理時間
• scripts/FCP.js — 初回コンテンツ描画（FCP）
• scripts/Find-Above-The-Fold-Lazy-Loaded-Images.js — ファーストビュー内の遅延読み込み画像を検出
• scripts/Find-Images-With-Lazy-and-Fetchpriority.js — loading が lazy、かつ fetchpriority が設定された画像を検出
• scripts/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js — ビューポート外にある遅延読み込みされない画像を検出
• scripts/Find-render-blocking-resources.js — レンダリングをブロックするリソースを検出
• scripts/First-And-Third-Party-Script-Info.js — ファーストパーティおよびサードパーティスクリプトの情報
• scripts/First-And-Third-Party-Script-Timings.js — ファーストパーティおよびサードパーティスクリプトのタイミング
• scripts/Fonts-Preloaded-Loaded-and-used-above-the-fold.js — プリロード済み、読み込み済み、およびファーストビュー内で使用されるフォント
• scripts/Inline-CSS-Info-and-Size.js — インライン CSS の情報とサイズ
• scripts/Inline-Script-Info-and-Size.js — インラインスクリプトの情報とサイズ
• scripts/JS-Execution-Time-Breakdown.js — JavaScript 実行時間の内訳
• scripts/Prefetch-Resource-Validation.js — プリフェッチリソースの検証
• scripts/Priority-Hints-Audit.js — 優先度ヒントの監査
• scripts/Resource-Hints-Validation.js — リソースヒントの検証
• scripts/Resource-Hints.js — リソースヒント
• scripts/SSR-Hydration-Data-Analysis.js — SSR フレームワークのハイドレーションデータ分析
• scripts/Script-Loading.js — スクリプトの読み込み
• scripts/Server-Timing-Early-Hints.js — Server-Timing と Early Hints のビューアー
• scripts/Service-Worker-Analysis.js — サービスワーカーの分析
• scripts/Speculation-Rules-Inspector.js — 投機ルールのインスペクター
• scripts/TTFB-Resources.js — 初回バイト到達時間：すべてのリソースの TTFB を測定
• scripts/TTFB-Sub-Parts.js — 初回バイト到達時間：TTFB の各部分を測定
• scripts/TTFB.js — 初回バイト到達時間：初回バイトまでの時間を測定
• scripts/Third-Party-Impact-by-Domain.js — ドメイン別のサードパーティの影響
• scripts/Validate-Preload-Async-Defer-Scripts.js — スクリプトの Preload、Async、Defer を検証
• scripts/Webfont-Usage-Analyzer.js — Web フォント使用状況アナライザー

よくあるワークフロー

読み込みパフォーマンスの包括的な監査

ユーザーが包括的な読み込み分析または「読み込みパフォーマンスを監査して」と依頼した場合：

1. TTFB.js - サーバー／ネットワークパフォーマンスのベースラインを確立します
2. FCP.js - 初回レンダリングのタイミングを確認します
3. Find-render-blocking-resources.js - レンダリングを妨げているものを特定します
4. Critical-CSS-Detection.js - CSS 戦略を検証します
5. Script-Loading.js - スクリプトの読み込みパターンを監査します
6. Resource-Hints-Validation.js - 最適化ヒントを確認します

サーバー／バックエンドのパフォーマンス調査

TTFB が遅い場合、またはユーザーが「サーバーが遅いのはなぜですか」と尋ねた場合：

1. TTFB.js - 全体の TTFB を測定します
2. TTFB-Sub-Parts.js - DNS、接続、サーバー時間に分解します
3. Service-Worker-Analysis.js - TTFB に影響する SW のオーバーヘッドを確認します
4. TTFB-Resources.js - 応答の遅いサードパーティまたは API エンドポイントを特定します
5. Server-Timing-Early-Hints.js - Server-Timing からバックエンドの各フェーズを読み取り、103 Early Hints を確認します

フォント読み込みの最適化

ユーザーがフォント、FOIT、FOUT、またはフォントのパフォーマンスについて尋ねた場合：

1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js - フォントを包括的に監査します
2. Resource-Hints-Validation.js - フォントのプリロードが正しいことを検証します
3. Find-render-blocking-resources.js - フォントがレンダリングを妨げているか確認します
4. Webfont-Usage-Analyzer.js - 未使用、読み込まれていない、またはレンダリングをブロックする font-display を使用しているフォントフェイスを特定します

テキスト圧縮の監査

ユーザーが圧縮、gzip、brotli、またはテキストリソースの転送サイズについて尋ねた場合：

1. Compression-Audit.js - 圧縮されずに配信されているテキストリソースを見つけ、削減量を推定します
2. Find-render-blocking-resources.js - レンダリングを妨げている未圧縮の CSS／JS を優先的に確認します
3. TTFB-Resources.js - 未圧縮リソースに対するサーバーの応答を確認します

スクリプトパフォーマンスの詳細調査

スクリプトがページの速度を低下させていると考えられる場合：

1. Script-Loading.js - レンダリングを妨げるスクリプトと読み込み戦略を特定します
2. First-And-Third-Party-Script-Info.js - ファーストパーティとサードパーティの影響を分けて確認します
   • Third-Party-Impact-by-Domain.js - レンダリングブロック、メインスレッド時間、サイズに基づいてサードパーティのドメインを順位付けします
3. First-And-Third-Party-Script-Timings.js - スクリプト接続の遅延を診断します
4. JS-Execution-Time-Breakdown.js - ネットワーク時間と解析／実行時間を確認します
5. Inline-Script-Info-and-Size.js - インラインスクリプトのオーバーヘッドを測定します
6. Validate-Preload-Async-Defer-Scripts.js - プリロードのアンチパターンを見つけます

リソースヒントと優先度の最適化

ユーザーがリソース読み込みの優先度を最適化したい場合：

1. Resource-Hints.js - 使用中のすべてのヒントの概要を確認します
2. Resource-Hints-Validation.js - ヒントが実際に使用されていることを検証します
3. Priority-Hints-Audit.js - fetchpriority の使用状況を確認します
4. Prefetch-Resource-Validation.js - プリフェッチ戦略を検証します
5. Validate-Preload-Async-Defer-Scripts.js - 競合を見つけます
6. Speculation-Rules-Inspector.js - プリフェッチ／プリレンダリングのルールとプリレンダリングの有効化を調査します

CSS 最適化ワークフロー

CSS が肥大化している、またはレンダリングを妨げている場合：

1. Critical-CSS-Detection.js - クリティカル CSS の戦略を確認します
2. Inline-CSS-Info-and-Size.js - インライン CSS のオーバーヘッドを測定します
3. CSS-Media-Queries-Analysis.js - 未使用のレスポンシブ CSS を見つけます
4. Find-render-blocking-resources.js - レンダリングを妨げるスタイルシートを特定します

SSR／フレームワークのパフォーマンス

Next.js、Nuxt、Remix、またはその他の SSR フレームワークを分析する場合：

1. SSR-Hydration-Data-Analysis.js - ハイドレーションデータのサイズを分析します
2. Script-Loading.js - フレームワークのスクリプト読み込みパターンを確認します
3. JS-Execution-Time-Breakdown.js - ハイドレーションの実行コストを測定します
4. Content-Visibility.js - 最適化に content-visibility が使用されているか確認します

判断ツリー

この判断ツリーを使用して、結果に基づく後続のスニペットを自動的に実行します。

TTFB.js の実行後

• TTFB > 600ms の場合 → TTFB-Sub-Parts.js を実行して、時間がかかっている箇所を診断します
• Service Worker が検出された場合 → Service-Worker-Analysis.js を実行して、SW のオーバーヘッドを確認します
• リソース間で TTFB に大きな差がある場合 → TTFB-Resources.js を実行します
• TTFB-Sub-Parts.js でサーバー時間が大部分を占める場合 → Server-Timing-Early-Hints.js を実行して、バックエンドのどのフェーズに時間がかかっているか確認します

Server-Timing-Early-Hints.js の実行後

• Server-Timing メトリクスが見つからない場合 → データベース、キャッシュ、レンダリングの各フェーズに Server-Timing ヘッダーを追加することを推奨します
• クロスオリジンリソースの情報が隠れているように見える場合 → それらのレスポンスに Timing-Allow-Origin を設定することを推奨します
• 103 Early Hints が受信されず、サーバー時間が長い場合 → メインのスタイルシートと LCP 画像に Early Hints を設定することを推奨します

FCP.js の実行後

• FCP > 1.8s の場合 → 次を実行します：
  1. Find-render-blocking-resources.js（CSS／JS のブロック）
  2. Critical-CSS-Detection.js（CSS 戦略）
  3. Script-Loading.js（ブロックするスクリプト）
• FCP は良好でも、ユーザーが体感速度の遅さを訴えている場合 → webperf-core-web-vitals スキルで LCP を確認します

Find-render-blocking-resources.js の実行後

• ブロックするスタイルシートが見つかった場合 → Critical-CSS-Detection.js を実行します
• ブロックするスクリプトが見つかった場合 → 次を実行します：
  1. Script-Loading.js（読み込み戦略）
  2. Validate-Preload-Async-Defer-Scripts.js（アンチパターンの確認）
• フォントがブロックしている場合 → Fonts-Preloaded-Loaded-and-used-above-the-fold.js を実行します

Script-Loading.js の実行後

• ブロックするスクリプトやパーサーをブロックするスクリプトが多い場合 → 次を実行します：
  1. JS-Execution-Time-Breakdown.js（実行コストの測定）
  2. First-And-Third-Party-Script-Info.js（原因となっているサードパーティの特定）
• サードパーティスクリプトが検出された場合 → First-And-Third-Party-Script-Timings.js を実行します
• 大きなインラインスクリプトがある場合 → Inline-Script-Info-and-Size.js を実行します

Resource-Hints-Validation.js の実行後

• 未使用のプリロードが見つかった場合 → 削除することを推奨します
• 重要なリソースのプリロードが不足している場合 → 次を実行します：
  1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js（フォント）
  2. Priority-Hints-Audit.js（LCP 候補）
• async／defer スクリプトにプリロードが設定されている場合 → Validate-Preload-Async-Defer-Scripts.js を実行します

Compression-Audit.js の実行後

• 圧縮されていない CSS／JS が見つかった場合 → Find-render-blocking-resources.js を実行して、レンダリングをブロックしているか確認します
• 推定削減量が 100KB を超える場合 → サーバーまたは CDN で gzip か brotli を有効にすることを推奨します
• corsLimitedAnalysis が true の場合 → 結果を下限値として報告し、管理下にあるリソースに Timing-Allow-Origin を設定するよう提案します

Third-Party-Impact-by-Domain.js の実行後

• ドメインがレンダリングをブロックしている場合 → async、defer、遅延読み込み、またはセルフホスティングを推奨し、読み込み戦略を確認するために Script-Loading.js を実行します
• ドメインのメインスレッド時間が 250ms を超える場合 → Long-Animation-Frames-Script-Attribution.js（webperf-interaction）を実行して原因となっている関数を特定し、スクリプトの読み込みを遅らせるか削除することを推奨します
• リクエスト数が少ないドメインが多数ある場合 → タグを監査し、未使用のものを削除することを推奨します
• corsLimitedAnalysis が true の場合 → サイズを下限値として報告し、非表示のリソースの時間を確認するには First-And-Third-Party-Script-Timings.js を使用します

Service-Worker-Analysis.js の実行後

• SW のオーバーヘッドが 100ms を超える場合 → Navigation Preload API を推奨します
• SW が多数のリソースをキャッシュしている場合 → TTFB-Resources.js を実行して、キャッシュヒットを確認します
• SW が検出されず、サイトが SPA／PWA の場合 → SW の実装を推奨します

Fonts-Preloaded-Loaded-and-used-above-the-fold.js の実行後

• フォントがプリロードされているものの、ファーストビューで使用されていない場合 → プリロードの削除を推奨します
• フォントが使用されているものの、プリロードされていない場合 → プリロードの追加を推奨します
• フォントのバリエーションが多数読み込まれている場合 → サブセット化するかバリエーションを減らすことを提案し、未使用のものを特定するために Webfont-Usage-Analyzer.js を実行します

Webfont-Usage-Analyzer.js の実行後

• フォントが読み込まれているものの使用されていない場合 → @font-face 宣言またはプリロードの削除を推奨します
• フォントフェイスで font-display: auto または block が使用されている場合 → swap または optional を推奨し、続けて Find-render-blocking-resources.js を確認します
• フォントのバイト数が大きい場合 → unicode-range と WOFF2 を使用したサブセット化を提案します
• LCP 要素がテキストの場合 → webperf-core-web-vitals スキルを使って LCP.js を実行します

First-And-Third-Party-Script-Info.js の実行後

• サードパーティスクリプトが多数（>5）ある場合 → 次を実行します：
  1. First-And-Third-Party-Script-Timings.js（詳細なタイミング）
  2. JS-Execution-Time-Breakdown.js（実行への影響）
• サードパーティスクリプトの処理が遅い場合 → async/defer または削除を推奨します

SSR-Hydration-Data-Analysis.js の実行後

• ハイドレーションデータが 100KB を超える場合 → 最適化の方法を推奨します
• ハイドレーションスクリプトが複数ある場合 → フレームワークの設定を調査します
• インラインのハイドレーションデータが大きい場合 → ストリーミングまたはチャンク分割を検討します

Priority-Hints-Audit.js の実行後

• LCP 候補に fetchpriority="high" がない場合 → 追加を推奨します
• 優先度が競合している場合（preload + low） → 競合の解消を推奨します
• 重要でないリソースに fetchpriority が設定されている場合 → 優先度戦略を見直します

Prefetch-Resource-Validation.js の実行後

• prefetch ヒントが 10 件を超える場合 → 重要なリソースに絞ることを推奨します
• 個々の prefetch が 500KB を超える場合 → 必要性を再検討します
• prefetch の合計が 2MB を超える場合 → モバイルの帯域幅に関する懸念として指摘します
• 次に移動する可能性が高いページへの prefetch ヒントがほとんどない、またはまったくない場合 → Speculation-Rules-Inspector.js を実行して、prefetch/prerender ルールを確認します

Speculation-Rules-Inspector.js の実行後

• 投機ルールが見つからず、サイト内の遷移が予測可能な場合 → prefetch または prerender ルールの追加を推奨します
• 無効な JSON または無駄の多いルール（多数の URL を eager に prerender するなど）がある場合 → 修正するか、eagerness を moderate または conservative に下げることを推奨します
• ページが prerender されていた場合（activationStart > 0） → TTFB.js、FCP.js、LCP の結果を解釈する際に activationStart を差し引きます

Critical-CSS-Detection.js の実行後

• レンダリングをブロックする CSS が 14KB を超える場合 → クリティカル CSS のインライン化を推奨します
• インライン CSS がなく、ブロックするスタイルシートがある場合 → クリティカル CSS の抽出を提案します
• CSS の合計が 50KB を超える場合 → CSS-Media-Queries-Analysis.js を実行して、削減できる箇所を探します

Back-Forward-Cache.js の実行後

• bfcache がブロックされている場合 → ブロックの理由に応じた具体的な修正方法を提示します
• bfcache を利用できる場合 → 最適化が機能していることを確認します

Client-Side-Redirect-Detection.js の実行後

• クライアントサイドリダイレクトが検出された場合 → サーバーサイドリダイレクトを推奨します
• リダイレクトチェーンが見つかった場合 → 中間のリダイレクトをなくすことを提案します

参考資料

• references/snippets.md — 各スクリプトの説明としきい値
• references/schema.md — スクリプト出力を解釈するための戻り値スキーマ