WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >サービス

Webページの表示速度チェックといえば、Google公式ツールである、【PageSpeed Insights】が定番ですよね。
ただ、こちらだとベーシック認証がかかっていたり、ローカルサーバー環境だとチェックができません。

今回はChromeのデベロッパーツールで速度チェックを行う方法をご紹介いたします。
ベーシック認証を解除する必要もなく、ローカルサーバー環境でも速度チェックを行うことができます。

1.Chromeのデベロッパーツールを表示

F12を押して、デベロッパーツールを表示します。
Performanceタブをクリックすると下記の様な画面になります。

Performanceタブが無い！という方は、下記図の赤枠内「>>」のボタンをクリックしてみて下さい。

2.更新ボタンをクリック

上記と同じ画面にある [ Memory ] ボタンのすぐ上に表示されている更新ボタンをクリックします。

下記の様な表示になり、計測を始めます。

3.速度チェック

いろいろ表示されますので、見づらい場合は閉じるボタン「×」の左にある丸が3つ並んでいるボタンを押し、Dock side の一番左のアイコンをクリックすると別タブで検証画面が表示されます。

コマ割りやグラフがいろいろ表示されますが、そのあたりの詳しい見方については、またご紹介します。
グラフの様なものが表示されている下にある「Summary」タブに速度が表示されます。

円グラフの中心に●msと書いているのが、表示速度です。
msはミリ秒になるので1000ミリ秒が1秒になります。

表示内容について

【Loading】HTMLの読み込みに関する数値
【Scripting】JavaScript実行に関する数値
【Rendering】DOMなどのレイアウト情報を実行したときの数値
【Painting】レンダリング結果の描画に関する数値
【Other】オーバーヘッドに関する時間の数値
【Idle】JavaScriptやcssなどのレスポンスが返ってくるまでの待ち時間の数値
【Total】すべての時間を合わせた時間

おわりに

Chromeのデベロッパーツールを使用することで、PageSpeed Insights を使用しなくても同様にチェックすることができます。
Chromeのアップデートと共にいろいろな機能が追加されていくため、新しい情報にアンテナを張っておくと検証がスムーズに行えますね。

今後も便利な機能を見つけたら更新していきます。