Core Web Vitals を最適化するための理想的な Chrome Network パネル設定

Core Web Vitals 最適化のための理想的な Chrome Network パネル設定

Chrome DevTools の Network パネルは、Core Web Vitals の最適化を目指すウェブ開発者にとって欠かすことのできない必須ツールです。残念ながら、デフォルト設定は速度最適化に最適なものではありません。適切な設定を行うことで、現実世界の条件を正確にシミュレーションし、ウェブサイトのパフォーマンスに関するより良い洞察を得ることができます。このガイドでは、Core Web Vitals スコアの分析と改善のための理想的な Chrome DevTools Network パネルのセットアップ方法を説明します。

Network パネルの設定

Network パネルにアクセスするには、Chrome DevTools（F12 または Ctrl+Shift+I）を開き、「Network」タブをクリックします。

スロットリング

Core Web Vitals の最適化で最も重要な設定の一つがネットワークスロットリングです。これにより、ユーザーが経験する可能性のあるさまざまなネットワーク条件をシミュレーションできます。

Network パネルの「No throttling」ドロップダウンをクリックします。 「Fast 4g」、「Slow 4g」、または「3G」を選択して、モバイルネットワーク条件をシミュレーションします。最適なオプションはオーディエンスによって異なります。オーディエンスが通常、高速ネットワーク条件下でハイエンドのモバイルデバイスを使用している場合は「Fast 4G」を有効にしてください。一般的なネットワーク条件がやや劣る場合は「Slow 4G」を選択し、それ以外の場合は安全策として「3G」を選択してください。

キャッシュの無効化

初回訪問者と同じ条件でサイトをテストするために： Network パネルの「Disable cache」チェックボックスにチェックを入れます。

大きなリクエスト行の有効化

大きなリクエスト行は、各リクエストのより包括的なビューを提供します。これにより得られる最も重要な新しい情報は以下の通りです：

• size 列に、リクエストの非圧縮サイズと圧縮サイズが表示されるようになります。
• name 列にパスに関する情報が表示されます。
• priority 列に初期および最終的なフェッチ優先度が表示されます。

スクリーンショットの有効化

スクリーンショットを有効にすると、Chrome がページ読み込み中にスクリーンショットを撮影します。各スクリーンショットはページ上の視覚的な変更を表し、ページ読み込みの各段階を理解し、Cumulative Layout Shift を特定するために使用できます。

• Network タブにフォーカスがある状態で、Ctrl+F5（Mac では Cmd+R）を押してページを更新します。
  
• Chrome がページ読み込みプロセス中にスクリーンショットを撮影します。
• これらのスクリーンショットのサムネイルが、Network パネルのチェックボックス行の下に表示されます。

スクリーンショット概要には、まだ知らないかもしれない便利な機能がいくつかあります：

• スクリーンショットにカーソルを合わせると、撮影された時刻が表示されます。これは Overview チャート上の黄色い縦線で示されます。
• スクリーンショットのサムネイルをクリックすると、そのスクリーンショットが撮影された後に発生したリクエストがフィルタリングされます。
• サムネイルをダブルクリックすると、拡大してスクリーンショットの詳細を確認できます。

最適なネットワーク列の有効化

Core Web Vitals の問題を見つけるために、以下のパネルが有用な情報を提供します。任意の列名を右クリックして、お好みの列を選択するだけです。

次に、Core Web Vitals に重要な以下の列を有効にします：

以下のカスタムレスポンスヘッダーを有効にします：

以下のカスタムレスポンスヘッダーを有効にします：

最終結果：

ページを再読み込みして、Chrome の Network タブで新しく改善されたネットワークレスポンスを確認しましょう。以下のような表示になり、Core Web Vitals のデバッグを開始するために必要なすべての情報が表示されます！