ページパフォーマンスは、任意のウェブページのパフォーマンス概要を即時に提供します。ロードタイミング指標（FCP、DOMContentLoaded、完全ロード、TTI）、DOM 統計（要素数、ネスト深度、イベントリスナー）、JavaScript、CSS、画像、フォント、その他のアセットの件数とサイズを示すリソース内訳。カラーコード付きのパフォーマンススコアで健全性を素早く把握できます。
Lighthouse や WebPageTest によるパフォーマンスプロファイリングは深い分析を提供しますが、実行に時間がかかり、膨大なレポートが生成されます。「このページは速いのか遅いのか？最大の問題は何か？」という素早い回答が必要なことがあります。ページパフォーマンスはその即時概要を提供します。ブラウザの Performance API と Navigation Timing API からタイミングデータを読み取り（通常のページロード中にすでに収集されているデータ — 追加のページロードは不要）、クリーンで視覚的なダッシュボードとして表示します。上部セクションには主要タイミング指標が表示されます：First Contentful Paint（最初のコンテンツが表示されるタイミング）、DOMContentLoaded（HTML が完全にパースされたタイミング）、完全ロード（すべてのリソースが完了したタイミング）、Time to Interactive（ページが応答可能になるタイミング）。各指標は Web Vitals のしきい値に基づいてカラーコードされます — 速い場合は緑、普通は黄色、遅い場合は赤。その下にはリソース内訳があり、JavaScript、CSS、画像、フォント、その他のリソースタイプに費やされている帯域幅がビジュアルなバーチャートで比較しやすく表示されます。DOM 統計セクションには要素の総数、最大ネスト深度、イベントリスナー数が表示され、レンダリングパフォーマンスに影響する DOM の複雑さの指標となります。
First Contentful Paint（FCP）、DOMContentLoaded、完全ページロード、Time to Interactive（TTI）という最も重要な 4 つのパフォーマンス指標を表示します。各指標は確立された Web Vitals のしきい値に基づいてカラーコードされます：緑（速い）、黄色（普通）、赤（遅い）。
各リソースタイプの件数と合計サイズをビジュアルなバーチャートで表示します：JavaScript ファイル、CSS スタイルシート、画像、フォント、その他のアセット。どのリソースタイプがページ容量に最も貢献しているかを瞬時に確認できます。
DOM 要素の総数、最大ネスト深度、イベントリスナーの総数を表示します。大きな DOM サイズ（2000 以上の要素）と深いネスト（15 以上のレベル）は、パフォーマンスのボトルネックになる可能性があるとしてフラグが立てられます。
0〜100 の単一スコアでページのパフォーマンス健全性をまとめ、緑（85 以上）、黄色（50〜84）、赤（0〜49）でカラーコードされます。タイミング指標とリソース効率の加重組み合わせに基づいています。
ダウンロードされたすべてのリソースの合計サイズを MB で表示します。カテゴリ別に内訳されるため、JavaScript が 842 KB、画像が 245 KB、CSS が 128 KB といった情報で最も重い要因を特定できます。
ブラウザの Performance API からパフォーマンスデータを読み取ります — 通常のページロード中にすでに収集されているデータです。合成的な再テスト、追加のネットワークリクエスト、ツール実行によるパフォーマンスへの影響はありません。
任意のページを開いて即時パフォーマンス概要を確認します。速い（緑スコア）、普通（黄色）、遅い（赤）？ダッシュボードは 1 秒以内に回答します — Lighthouse の実行を待つ必要はありません。
ページが遅い場合、リソース内訳がその理由を示します。JavaScript が 1.2 MB？それがボトルネックです。最適化されていない画像が 800 KB？それが修正箇所です。ビジュアルな内訳で最も重い要因が明確になります。
最適化を行う前にページパフォーマンスを実行して指標を記録します。変更を加えてリロードし、再度実行します。FCP、ロード時間、ページ総容量を比較して、最適化が期待どおりの効果をもたらしたか検証します。
自社サイトと競合他社のサイトにページパフォーマンスを実行します。ロード時間、ページ容量、リソース分布を比較します。競合他社は少ない JavaScript を配信していますか？画像はより最適化されていますか？
開発中に主要ページに定期的にツールを実行します。パフォーマンススコアが低下したり、ページ容量が突然増加したりした場合は、リグレッションが導入されています。本番環境に到達する前に検出します。
DevSuite Pro のフローティングドックを開き、ページパフォーマンスのアイコンをクリックします。現在のページロードのパフォーマンスデータとともにダッシュボードが即時に表示されます。
上部の 4 つの主要タイミング指標（FCP、DOMContentLoaded、完全ロード、TTI）を確認します。緑の値は速い、黄色は普通、赤は改善が必要です。
リソースバーチャートを見て、どのアセットタイプが最も重いかを確認します。JavaScript が最大の要因であることが多く、JS が 500 KB を超える場合はコード分割や遅延ロードを検討する価値があります。
DOM 統計を確認します。要素数が 1500 を超えるか、ネスト深度が 15 を超える場合は、レンダリングパフォーマンスを向上させるためにマークアップを簡略化することを検討してください。
総合スコアは素早いベンチマーク指標となります。最適化の前後にツールを実行して改善を測定します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
