ページが重い。
でも原因がわからない。
そんなときに使うのが
Chromeの「パフォーマンスタブ」です。
表示の裏側で何が起きているのか。
それを時系列で確認できます。
感覚ではなく、動きを見るツールです。
パフォーマンスタブの使い方
デベロッパーツールでパフォーマンスタブを使うには、「パフォーマンス」を開きます。
「パフォーマンスタブ」を開いたら、
- パフォーマンスタブの画面内にある更新ボタン（🔄）を押す
すると、ページ表示の一連の動きが
トレースとして記録されます。
1ページ分の表示が終了するまで続きます。
なので、数秒から数十秒かかります。
パフォーマンスタブの見方
デベロッパーツールのパフォーマンスタブでは、
資源が割り当てられる順番に、データの流れを時系列に確認することができます。
これによって、どのように効率よく資源を割り当てるのか？
確認することができるんですよ！
タスクは６多重
ひとつのページを開くのに、最大６多重までタスクを使用することができます。
その６多重をオーバーすると、待ち行列が発生します。
その待ち行列を発生させないように工夫することが、
レスポンスをアップさせる秘訣です。
Autoptimize（オートオプティマイズ）
Autoptimizeというプラグインは、
JavaScript（ジャバスクリプト）やCSS（スタイルシート）をまとめて、
リクエスト数を減らすことができます。
HTTP/1.1環境では、
これにより待ち行列の発生を抑えられる可能性があります。
ただし、
まとめすぎると逆に遅くなるケースもあるため、
実際のパフォーマンスタブで確認しながら調整することが重要です。
ネットワークタブとの違い
ネットワークタブが「通信の流れ」を見るのに対し、
パフォーマンスタブは「処理の流れ」を見るツールです。
※この内容は
Google Chromeデベロッパーツールについての一部です。
→ ハブページはこちら
コメント