Google Chrome Developer Toolsを使用したwebサイトのパフォーマンスの測定

この記事では、Google Chromeの開発者ツールを使

Google Chrome webブラウザには、WEB開発者がHTML、CSS、JavaScriptの問題をデバッグするのに役立つ機能である開発者ツールが含まれています:

次の図は、Google:

Google Chrome-開発者ツール

開発者ツールペインのネットワークタブで、Chromeは現在のページのすべての接続を一覧表示します。特定のページをテストするには、開発者ツールを開き、テストするページに移動します。または、現在のページをテストする場合は、ページを更新するだけです。

Chromeは、各ページリソースとその要求の情報を表示します。

Name:要求されたリソースの名前またはURL。

Method:HTTPメソッド(GETまたはPOST)。

Status:サーバーによって返されるHTTPステータスコード。

Type:リソースのMIMEタイプ。

イニシエータ:サーバーに送信されたリファラー;これは通常、表示しているページのURLです。＜1368＞＜9394＞サイズ: ブラウザによって受信されたリソースのサイズ(ページがサーバーによって圧縮された場合、この値は実際のファイルサイズよりも小さくなります)。

時間:リソースを取得するための合計時間(DNS参照時間とダウンロード時間を含む)。

タイムライン:タイムラインは、各リクエストの”ウォーターフォール”タイムラプスビューです。ウォーターフォールのバーの上にマウスポインタを置くと、ダウンロード時間の詳細な内訳を示すツールチップが表示されます:

サーバーがコンテンツの生成を完了する前にコンテンツの送信を開始することがあります。たとえば、PHPスクリプトは、ページコンテンツを動的に生成しているにもかかわらず、HTMLの送信を開始できます。このタイプのシナリオでは、待機時間の測定が正しく行われない可能性があります。

待機時間と受信時間の組み合わせは、サイト速度を決定する上で最も重要な要素です。ただし、インターネット接続速度もパフォーマンスに影響する可能性があるため、サイトのパフォーマンスベンチマークを確立するときは、常に同じ場所からの時間を比較する必要があります。

ネットワークタブの下部には、ページのロードプロセスの概要があります。この要約には、リクエストの合計数、リソースを含むページ全体の合計サイズ、ブラウザでページをレンダリングするのに費やされた時間の内訳が含まれ

最初の時間の値は、ページ上のすべてのコンテンツの読み込みに費やされた合計時間です。この値には、ページがレンダリングされた後にJavaScriptによってロードされたコンテンツが含まれます。

括弧内の二つの時間値は、サイトの最適化にとって重要なイベントです:

負荷: このイベントは、元のHTMLドキュメント内にあるすべてのJavaScript、CSS、および画像ファイルを含む、ページをロードする時間です。このイベントは通常、DOMContentLoadedイベントよりも時間がかかります。
DOMContentLoaded:このイベントは、ユーザーがページをロードするために認識した時間を表します。 JavaScriptが追加のリソースを要求する前に、元の文書で説明されているようにページをレンダリングする時間です。この時間は、ブラウザがJavaScriptでDOMContentLoadedイベントを発生させたときに保存されます。（DOMの外部で要求されるリソースの例は、Google Analyticsです。)

サイトのページの読み込みパフォーマンスを分析した後、最適化の取り組みをどこに集中できるかをよりよく理解する必要があります。 Webリクエストのプロセスと使用できる最適化方法の詳細については、この記事を参照してください。

Google Chrome Developer Toolsを使用したwebサイトのパフォーマンスの測定方法