Chromeに標準で搭載されているDeveloperToolsの利用方法についてご案内します。
Chrome DeveloperToolsの利用方法
速度改善したいサイトへアクセスし、キーボードのF12を押下します。
F12 を押下すると下に以下のような画面が出てきます。今回はWebサイトの読み込み速度を計ります。Networkの項目をクリックし、ブラウザの更新をクリックします。
ブラウザの更新を行なうことで、各ファイルの読み込みが行なわれ、どのファイルに時間が掛かっているかを知ることが出来ます。
どのファイルの読み込みに時間が掛かっているかは、Timelineの項目から確認することができます。
また、表示されているStatusには次のようなものがあります。
- 200: リクエストの成功、情報がダウンロードできています
- 304: アクセスは許可されたが、更新されてないためブラウザキャッシュが参照されている状態
- 403: アクセス権限がないためファイルの取得に失敗
- 404: ファイルが存在しないため、ファイルの取得に失敗
- 500: サーバ側でエラーが発生し、リクエストを処理できない(CGIスクリプトの記述内容に問題がある可能性がある)
- 503: 参照先サーバの一時的な負荷やメンテナンスによるファイルの取得に失敗、通常この状態は、一時的なものです。
Timelineの項目で多くの時間が掛かっているファイルがある場合、Webサイトの読み込み速度に影響を及ぼしている可能性があります。該当ファイルの詳細を確認し、ファイルが読み込めるように修正を行ってください。
Chrome DeveloperToolsその他の項目
また、DeveloperTools では、Filter機能を利用することで、ファイルの種類毎に読み込み時間を確認することが出来ます。
表示速度の遅延につながるファイルの特定にお役立てください。