サイト・ブログのページの表示速度・表示時間を確認

このブログをチューニングして、ページの表示速度アップやサーバへの負荷軽減なんてことをやりたい。
なぜならこの間サーバがダウンしていたから。

速度アップを上手に行うと負荷軽減も行えるらしい。
速度が早くなったかどうかを知るためには、現在の速度がどれくらいなのかを知る必要がある。

まず、自分のブログの表示速度を確認してみる。

1. Google Analyticsで速度測定

とりあえずサイト全体の平均読み込み時間を知りたい場合は、Google Analyticsを見る。

左側にある「行動」→「サイトの速度」→「ページの速度」から確認できる。

サイト全体の平均読み込み時間だけでなく、ページごとの読み込み時間も確認できる。
どのページが早くてどのページが遅いかが一目瞭然。

ちなみにこのブログの平均読み込み時間は「3.95秒」。
ワーストのページは「20.04秒」でEclipse 4.3 Kepler のカラーテーマとVimキーバインド。

・・・なんでこんなに遅いん！？

デベロッパーツールの「Network」パネルからは、詳細な速度測定ができる。

WindowsだとF12を押してデベロッパーツールを起動し、「Network」をクリックする。
Macだとcommand+option+i(アイ)を押してデベロッパーツールを起動する。

この「Network」を開いたままで、測定したいページを表示または更新する。
するとパネル内にどのリソースを読み込むのに何秒かかったかが表示される。

一番下の欄には表示するまでにかかった時間(s)を出してくれる。

ちなみに先ほどのEclipse 4.3 Kepler のカラーテーマとVimキーバインドページは、「5.62s」と表示された。
Analyticsより速いけど、十分遅い。やばい。

Google DevelopersというGoogleが開発者向けに公開しているサービスがある。

このサイトのサービスの一つ「PageSpeed Insights」は、サイトの速度を改善するための方法を教えてくれる。

使い方は簡単で、測定したいページのURLを入れるだけ。

厳密にはこのサイトは速度を教えてくれるわけではない。
ただ、速度を100点満点で何点か教えてくれる。

まあ、PageSpeed Insightsの本領は、無料で改善案を教えてくれるところなので、速度測定はおまけみたいなものだけど。
いずれ、使うことになるだろう。

「Gtmetrix」ではGoogleでの判定とYahooの判定を確認できる。

使い方は、測定したいページのURLを入れるだけ。
詳しい使い方はこっちのサイトを参考にする。

ちなみに、本サイトを測った際のデータが以下。
YSlowはYahoo社が提供しているもの。

Page Speed Grade:B(87%)

YSlow Grade:C(70%)

このサイトの特徴はGoogleとYahooの速度測定が同時に出来るってこと。