1. HOME
  2. 開発・ブログ運営
  3. WEB パフォーマンス
  4. Google の Chrome Developer Tools で サイトの表示速度を計測してみた
2016年07月22日
WordPress が稼働する Apache2 コンテナと N ...
2013年12月15日
WordPress で構築したブログの表示速度を計測する方法 ...
2016年07月27日
WEB サーバーを Apache 2 コンテナから Nginx ...
2012年11月16日
Google の Chrome Developer Tools ...
2013年12月02日
WordPress がもっさりしてきたので、ブラウザキャッシュ ...
2016年07月29日
AMP ページに Google Analytics のトラッキ ...

Google の Chrome Developer Tools で サイトの表示速度を計測してみた

今までは自分のブログの表示速度とかあまり意識したことはなかったけど、ちょっとモッサリしてきたのでページの読み込み速度をちょっと気にしてみます。

このブログはブログ名にもあるように WordPress で動いている訳ですが、なんだか最近動きがもっさり。テンプレートファイルをいじくったり プラグインをインストールしたりしている間にもっさりもっさり。

これはイカンということで、まずは現在の表示速度(ブラウザでの WEB ページの読み込み速度)を計ってみました。

今回は、Google Chrome に標準機能として付いている Chrome Developer Tools を使ってみました。

Chrome Developer Tools で速度を計測してみる

まずは Chrome Developer Tools を起動してみます。

Chrome のウインドウ内で右クリックすると一番下に「要素を検証」というメニューが出てくるのでそれをクリックすると、別ウインドウで Chrome Developer Tools が起動します。

起動したら、

  1. ネットワークをクリックします。

    Developer Tools 01 1
  2. ブラウザに戻って速度計測したいサイトにアクセスします。例えば Yahoo! JAPAN にアクセス。

    Yahoo screen shot 1
  3. Chrome Developer Tools の一番下に速度が表示されます。

    Developer Tools 02
    この Yahoo! JAPAN の表示速度の結果は、

    733ms(onload: 734ms, DOMContentLoaded: 539ms)

    と表示されています。

    onload が、画像まで全て読み込むまでの時間。この場合は0.734秒。
    DOMContentLoaded が、DOM ツリーを構築するまでにかかった時間。この場合は 0.539秒。

    うーん、爆速。

自分のブログで計ってみた

早速このブログの速度を計測したら、概ね 5 秒前後掛かっていたようです。これが速いか遅いか良くわかりませんが(というか速いことはない)他のサイトはどうなんだろうという事で、Yahoo! Japan を計測してみると おおよそ 1秒台(上記のサンプルでは 0.734秒です・・)。Google なんか 1秒以下。

Yahoo! や Google は一般的な基準じゃなくてトップレベルの数値(のはず)なので、それと比較するのはどうかと思いますが、それにしても Yahoo! JAPAN や Google と比較して5倍くらい速度が遅い。

うーん。まいった。

その他にも、いろいろな WEB サイトや個人のブログなんかを見ていると、2.5秒くらいまでだと速いなーと感じる。3秒前後が普通。5秒だともっさりで8秒とか10秒だとページが表示される前にタブを閉じるレベル。

これはあくまで個人的な感覚だし、そもそもブログは見てもらう人の感覚を基準にすべきなのですが、とりあえず5秒前後じゃお話にならないので、3秒以内の速度を目標に改善してみたいと思います。

っていうか・・・

実はすでに色々と改善をしていて、すでに 3秒前後になりました。(ひとりボケツッコミみたいですいません)

いわゆるブロガーな人達はそのプロセスを逐一記事にして、速度改善される喜びを読者のみなさまと共有しちゃったりするのでしょうが、やり始めたら止まらない私は一気に作業をしてしまいました(まだ途中だけど)。

ってことで、今イチ臨場感はありませんがどんな改善をしたのかを、今後覚え書きも兼ねて記事にしていきたいと思います。

でわでわ。







この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.