1. HOME
  2. 開発・ブログ運営
  3. WEB パフォーマンス
  4. Google の Chrome Developer Tools で WEB ページのリクエスト数を確認してみた
2014年08月08日
Chrome で WEB レスポンスヘッダ と リクエストヘッ ...
2016年07月21日
Nginx のプロキシキャッシュが効いているかどうか確認してみ ...
2013年12月02日
WordPress がもっさりしてきたので、ブラウザキャッシュ ...
2014年08月23日
これは便利!簡単に WEB 表示速度が測定出来るブックマークレ ...
2016年07月27日
WEB サーバーを Apache 2 コンテナから Nginx ...
2013年12月15日
WordPress で構築したブログの表示速度を計測する方法 ...

Google の Chrome Developer Tools で WEB ページのリクエスト数を確認してみた

WEB サイト(ブログ)の表示速度が遅いひとつの大きな要因である、WEB サーバーへのリクエストの多さですが、そもそも自分のブログは WEB サーバーにどれほどのリクエストを送っているのでしょうか?

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

これはイカンということで色々と手をいれてみました。

手を入れる前は、記事ページが表示されるまでにおおよそ 5秒前後かかってました。それまでモッサリと思ってたけど、数値として視覚化されちゃうと、モッサリというより普通に遅かった。

関連記事:Google の Chrome Developer Tools で サイトの表示速度を計ってみた

っで、WEB ページの表示が遅い原因は様々だけど、WEB サーバーに対するリクエスト数の多さも表示が遅くなるひとつの大きな原因です。

なので、自分のブログが遅いなーと感じている人は、自分のブログのリクエスト数を確認してみると良いかもしれません。

今回は、Google Chrome に標準機能として付いている Chrome Developer Tools を使ってリクエスト数を確認してみます。

そもそもリクエスト数とは何ぞや?

ある WEB サイト(ブログ)へアクセスすると、そのページが表示されますが、ページが表示されるまでに、ブラウザ(つまり自分の PC)と WEB サーバーは数十回のやりとり(通信)をしています。100回以上のやりとりもザラ。

ブラウザが WEB サーバーから HTML ファイルを受け取ると、ページに必用なリソース(CSS ファイルや画像ファイルや Javascript のファイルなど)をひとつひとつ WEB サーバーに要求します。これがリクエスト。

単純に画像が 100 枚ある WEB ページだと、それだけで 100 回のリクエストが発生します。小ちゃなアイコンが10個あればそれも10回リクエストが必要。

もちろんユーザーは WEB ページ上のリンクを1回クリックしたりするだけですが、実はこれだけのリクエスト(通信)が発生していて、ブラウザからのリクエストがあるたびに WEB サーバーはそれに反応して必要な処理をして、リクエストされたファイルをブラウザへ送信します。

なので、通信回線が遅いほど、WEB サーバーの性能が低いほど、リクエスト回数に比例して、WEB ページの表示速度は低下しちゃう。

だから、リクエスト回数を減らすことは WEB ページの高速化をする上で重要な要素のひとつです。

Chrome Developer Tools でリクエスト数を確認してみる

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

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

起動したら、

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

    Developer Tools 01 1
  2. ブラウザに戻ってリクエスト数を確認したい WEB ページにアクセスします。例えば Yahoo! JAPAN のトップページにアクセス。

    Yahoo screen shot 1
  3. Chrome Developer Tools の一番下に、WEB ページを表示するために必要なリクエスト数が表示されます。

    Developer Tools requests
    この Yahoo! JAPAN トップページを表示するために要するリクエスト数は38 回。

    Yahoo! のトップページにはそれなりの数の画像やらアイコンやらがありますが、これだけのものをたった38回のリクエストで表示できるようにしているとはさすが Yahoo!。ちなみに左側のサイドバーだけで画像(アイコン)が 30 くらいあります。

    また、リクエスト回数のとなりに、データの転送量が表示されます。この場合は、325.66KB。

自分のブログのリクエスト数を確認してみた

Yahoo! のリクエスト数をベンチマークとするのは無謀すぎるので、一般的な個人ブログのリクエスト数を調べてみました。

ちゃんと統計を取った訳じゃないけど、20から30の個人ブログをザーッとながめたところ、だいたい 100 リクエストくらいのブログだとまぁまぁ速いかなと感じました。

ってことで早速このブログのリクエスト数を確認してみました。

Developer Toolsrequests 02

リクエスト数はトップページで 107。記事ページで 120 から 130 くらいです。

ただ元々はトップページで 180 くらい。記事ページなんかだと 200 を超えるページも。

必要なリクエスト数を減らすテクニックはいろいろとある訳ですが、実はそんなにたいした事はやってません。

むしろ、それだけ!?って感じです。だけどもったいなくて教えたくありません。

うそです(笑)

ちょっと長くなったのでまた今度ちゃんと記事にします。

でわでわ。







この記事にコメントする





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