Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Chrome DevTools でネットワーク パフォーマンスを分析する

注: 読み込み速度を改善する総合的なアプローチについては、ウェブサイトの速度の最適化を参照してください。 そのチュートリアルでは、読み込みパフォーマンスを分析する推奨ワークフローが説明されています。

このチュートリアルでは、Chrome DevTools の [Network] パネルを使用してページの読み込みが遅い理由を理解する方法を、手順を追ってインタラクティブに説明します。

ステップ 1: DevTools をセットアップする

モバイル ユーザーからあなたのサイトの特定のページが遅いという報告を受けたと仮定しましょう。 このときあなたがしなければならないことは、そのページ速くすることです。

  1. 次の「遅いページを開く」 をクリックします。 新しいタブでそのページが開きます。

  2. そのページにフォーカスがある状態で Command+Option+I(Mac)または Control+Shift+I(Windows、Linux)を押して、そのページで DevTools を開きます。

  3. DevTools の [Network] タブをクリックします。

    診断しようとしている遅いページで開かれた、Chrome DevTools の [Network] パネル。
    図 1。 診断しようとしている遅いページの横に開かれた、Chrome DevTools の [Network] パネル。

  4. [Capture Screenshots] Capture
   Screenshots を有効にします。{:.devtools-inline}有効になると青色に変わります。 DevTools はページ読み込み中のスクリーンショットをキャプチャします。

ステップ 2: モバイル ユーザーのエクスペリエンスをエミュレートする

ノートパソコンやデスクトップ パソコンでネットワーク パフォーマンスをテストしても、思い通りの結果が得られない場合があります。 使用するインターネット接続がモバイル ユーザーの接続よりも速すぎたり、使用するブラウザのキャッシュに以前に訪問したときのリソースが残っていたりすることがあるからです。

  1. [Disable Cache] チェックボックスにチェックを入れます。 このチェックボックスを有効にした場合、DevTools はキャッシュにあるリソースを使用しません。 こうすることで、初めてサイトを訪問したユーザーがページを表示したときのユーザー エクスペリエンスが正確にエミュレートされます。

  2. 現在の設定が [No Throttling] となっているドロップダウンで、[Regular 2G] を選択します。 DevTools はネットワーク接続をスロットリングして、通常の 2G エクスペリエンスとなるようにシミュレートします。 これが、接続状態の悪い場所でモバイル ユーザーがサイトを使用したときの操作性です。

スクリーンショットを設定し、キャッシュ無効にし、スロットリングを行った状態の Chrome DevTools [Network] パネル。
図 2。 モバイル ユーザーの操作性をエミュレートするように設定された Chrome DevTools の [Network] パネル。 左から右に、スクリーンショット、キャッシュ無効、スロットリングの設定がそれぞれ青い囲みで示されています。

これは最悪のケースのセットアップです。 このセットアップ状態でページ読み込みを速くできたら、すべてのユーザーの読み込みが速くなるはずです。

ステップ 3: リクエストを分析する

ページを再読み込みし、読み込まれるリクエストを分析して、ページが遅くなる理由を見つけます。

パート A:レンダリング ブロック スクリプトを見つける

ブラウザは <script> タグを検出すると、直ちにレンダリングを一時停止してスクリプトを実行します。 ページ読み込みに必要ないスクリプトを見つけて、それらを非同期にして実行を遅らせ、読み込み時間を速くします。

  1. Command+R(Mac)または Control+R(Windows、Linux)を押して、ページを再読み込みします。

Wi-Fi 接続の条件が良い状態で、ページを完全に読み込むのに 10 秒以上かかります。

 <figure>
   <img src="imgs/get-started-post-load.png"
     alt="ページ再読み込み後の Chrome DevTools [Network] パネル。">
   <figcaption>
     <b>図 3</b>。 ページ再読み込み後の Chrome DevTools [Network] パネル。

   </figcaption>
 </figure>
  1. [Network] パネルの下部にある [Summary] ペインDOMContentLoaded の値を確認します。 値は 4 秒以上になっているはずです。 このように、このイベントの動作が遅い場合、メイン ドキュメントの読み込みと解析を遅らせているスクリプトに注意してください。

  2. main.js をクリックして、リクエストをさらに調査します。 DevTools に新しいタブが表示され、このリクエストに関する詳細情報が提供されます。

  3. [Preview] タブをクリックすると、リクエストのソースコードが表示されます。 スクリプトが 4000 ミリ秒の間ハングしていることがわかります。

このスクリプトを async 属性でマーキングし、ドキュメントの <body> の最下部に移動することで、このスクリプトで待機状態にならずにページを読み込めます。

 <figure>
   <img src="imgs/get-started-preview.png"
     alt="[Preview] ペインでの main.js のソースコードの表示。">
   <figcaption>
     <b>図 4</b>。 [Preview] ペインでの <code>main.js</code> のソースコードの表示。

   </figcaption>
 </figure>

レンダリング ブロック スクリプトについて詳しくは、Parser-blocking versus asynchronous JavaScriptをご覧ください。

パート B:サイズの大きいリクエストの検出

ページを読み込んだときに、DevTools ロゴの読み込みにかなり時間がかかったことにお気づきになりましたか。 ページの読み込みがブロックされているわけではなく、実はページの表示が遅くなるようにしています。 ユーザーはページが速く表示されることを好みます。

  1. Close Close をクリックして、{:.devtools-inline} [Requests] ペインを再度表示します。

  2. 左上のスクリーンショットをダブルクリックします。

  3. 右矢印キーを押して、スクリーンショット全体を概観します。 スクリーンショットの下の時刻は、スクリーンショットを撮った時間を表します。 スクリーンショットの読み込みに 2 秒以上かかっています。 これは、ファイルのサイズが大きいことを意味しているようです。

  4. スクリーンショットの外をクリックして、スクリーンショットを最小表示にします。

  5. logo-1024px.png リクエストの Waterfall の上にマウスポインターを置きます。 リクエストの処理にかかる時間のほとんどが画像のダウンロードに費やされています。 このことから、画像が非常に大きいことがわかります。

    logo-1024px.png のウォーターフォール。
    図 5logo-1024px.png のウォーターフォール。

ステップ 4: 更新されたページ上で修正を検証する

作業の完了は間近です。 ページに 2 箇所の変更を行ったとしましょう。

  • スクリプトを <body> の最下部に移動し、async のマークを付けて、ページ読み込みの邪魔をしないようにしました。
  • ロゴを SVG に変換してファイルのサイズを小さくしました。

あとは、更新したページをテストして、修正したページの読み込みが実際に速くなっているかを検証する作業が残っています。

  1. [速いページを開く] をクリックします。 新しいタブで修正したページが開きます。

  2. 先ほどと同じように DevTools をセットアップします。 スクリーンショットとキャッシュ無効をオンにし、ネットワーク スロットリングを Regular 2G に設定します。

  3. ページを再読み込みします。 ページの読み込みがとても速くなっています。

    修正適用後のページ読み込みの記録。
    図 6。 修正適用後のページ読み込みの記録。 このページは完全に表示されるまでに 10 秒ほどかかっていました。 それがたった 1 秒で表示されるようになりました。

次のステップ

お疲れ様でした。 これで、あなたも Chrome DevTools [Network] パネルの正真正銘のエキスパートになりました。 いや...、 まだエキスパートではないかもしれませんね。 でも、スキルと知識のしっかりとした土台を据えることはできました。

フィードバック

Was this page helpful?