サイトパフォーマンスを計測する際には、Chrome DevToolsの「NetWorkタブ」を使用することで、
各リソースの読み込みにかかる時間を把握することができます。
サイト改善業務の際には、遅延の原因になっている「ボトルネック」を洗い出す作業が必要になりますが、
Networkを使用すれば、効率よく分析できます。
今回の記事では、Networkタブの使用方法の解説に加えて、本ブログのパフォーマンスについても分析してみました。
今後改善の余地が大幅にある分析結果になりましたので、ぜひ最後まで閲覧いただけますと幸いです。
NetWorkタブでできること
全てを解説すると非常に長いサイトになってしまうので、
ボトルネックの調査に最低限必要な項目のみに限定し、解説を行います。
詳しく閲覧したい方は公式ドキュメントをご覧ください。
Google Chome Network Activity
個別のリソース取得時間を把握
リソースの取得にかかった時間を把握する場合には、
各リソースのタイムラインにマウスhoverすると詳細の情報を確認することができます。
測定項目の内訳
| 項目 | 意味 | 結果 |
|---|---|---|
| Queueing | リクエストの順番の決定(キューイング)にかかった時間 | 6.27ms |
| Stalled | リクエストを送信できるようになるまでの待機時間 | 349.48ms |
| DNS Lookup | ドメインとIPアドレスの名前解決にかかる時間 | 0 |
| Initial connection | TCPでの接続を確立するのにかかる時間 Keep Aliveでコネクションが再利用されている場合は、表示されない | 349.10ms |
| SSL | TLSでの通信を確立するのにかかる時間 | 104.20ms |
| Request sent | HTTPリクエストを送信するのにかかる時間 | 0.49ms |
| Waiting (TTFB) | HTTPリクエストを送信してからデータを受け取るまでにかかる時間 | 477.85ms |
| Content Download | コンテンツの受け取りにかかる時間 | 5.38ms |
ユーザーエージェントの変更
デバイスエミュレータ機能を使用
デバイス別のパフォーマンス計測を行うことができます。
■ iPhone X
■ Galaxy S5
■ iPad Pro
任意のUserAgentを設定する場合の設定方法
GoogleBotの巡回時の速度など、より詳細なユーザーエージェントを指定して計測を行いたいときに使用します。
設定 > More tools > NetWork conditions > User Agentで任意のものを選択します。
キャッシュの無効化
計測では、初回訪問の際にどれくらい処理に時間がかかっているかをシュミレートするために、
Disable cacheにチェックを入れて、キャッシュを無視して計測できます。
本サイトの分析
最後に、freelance321.comのパフォーマンスを上記の観点で分析をしてみます。
まずLoading→Scripting→Rendering→Paintingの全ての処理が完了するまでに、2730msかかっています。
RAILの指標では、1000ms未満が推奨されているので、OUTですね…笑
また、各リソースの読み込みでは、JavaScriptファイルのローディング・ダウンロードに時間がかかっていることが一眼でわかります。
RAILの指標については下記の記事で解説していますので、概要を把握したい方は閲覧してみてください。
WEBサイトのパフォーマンス測定の重要指標「RAIL」とは？
私のサイトもかなり改善の余地がありそうなので、改善の手法なども今後の記事で解説をしていけたらと思っています。
