Chrome DeveloperToolsを利用してWEB表示速度を改善する方法

Pocket

Chromeに標準で搭載されているDeveloperToolsの利用方法についてご案内します。

Chrome DeveloperToolsの利用方法

速度改善したいサイトへアクセスし、キーボードのF12を押下します。chrome001

F12 を押下すると下に以下のような画面が出てきます。今回はWebサイトの読み込み速度を計ります。Networkの項目をクリックし、ブラウザの更新をクリックします。 chrome002

ブラウザの更新を行なうことで、各ファイルの読み込みが行なわれ、どのファイルに時間が掛かっているかを知ることが出来ます。

chrome003

どのファイルの読み込みに時間が掛かっているかは、Timelineの項目から確認することができます。

また、表示されているStatusには次のようなものがあります。

  • 200: リクエストの成功、情報がダウンロードできています
  • 304: アクセスは許可されたが、更新されてないためブラウザキャッシュが参照されている状態
  • 403: アクセス権限がないためファイルの取得に失敗
  • 404: ファイルが存在しないため、ファイルの取得に失敗
  • 500: サーバ側でエラーが発生し、リクエストを処理できない(CGIスクリプトの記述内容に問題がある可能性がある)
  • 503: 参照先サーバの一時的な負荷やメンテナンスによるファイルの取得に失敗、通常この状態は、一時的なものです。

Timelineの項目で多くの時間が掛かっているファイルがある場合、Webサイトの読み込み速度に影響を及ぼしている可能性があります。該当ファイルの詳細を確認し、ファイルが読み込めるように修正を行ってください。

Chrome DeveloperToolsその他の項目

また、DeveloperTools では、Filter機能を利用することで、ファイルの種類毎に読み込み時間を確認することが出来ます。

chrome004

表示速度の遅延につながるファイルの特定にお役立てください。

Pocket