信頼の置ける Web サイト速度検証ツール4つの使い方と解説

ふだん使っているサイト速度検証ツール

ふだんからよく使っている Web サイトの速度やパフォーマンスを検証してくれるツールの紹介です。

どれも無料で利用できて、なおかつ高機能、詳細に分析してくれます。分析結果にもとづいてサイトを修正していけば、検索エンジンにとってもアクセスして閲覧する方にとっても、よりよいサイトとして評価されていくでしょう。

検証ツールの利用できるサイトは以下の4つ。

検証ツールの公式サイト4つ

PageSpeed Insights – Google Developers

GTmetrix | Website Speed and Performance Optimization

Website speed test – Pingdom

【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 編集長ブログ―安田英久 | Web担当者Forum

もちろん、これだけに限らず多くのサイトで有料/無料の検証ツールが公開されていますが、「だれにでも使いやすく理解しやすい」という点ではこれら4つになるのではないでしょうか。

以下、ひとつずつ書いていきます。

Google の検証ツール「PageSpeed Insights」

PageSpeed Insightsの計測結果PC100点

PageSpeed Insights – Google Developers

こちらでは【モバイル】【パソコン】の両方を検証することができます。

検証項目

上の画像にあるようにブラウザのレンダリングを阻害する要因がないかをチェックして、そのファイル名や容量をくわしく指摘します。

  • CSSを 縮小する
  • HTML を縮小する
  • JavaScript を縮小するサーバーの応答時間を短縮する
  • サーバーの応答時間を短縮する
  • スクロールセずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • ブラウザのキャッシュを活用する
  • リンク先ページのリダイレクトを使用しない
  • 圧縮を有効にする
  • 画像を最適化する
  • 表示可能コンテンツの優先順位を決定する

ひとつひとつの項目の解説ではその解決方法やツールの紹介、さらにはどのようなコードを書くことが推奨されるのかを教えてくれます。

当ブログでは

現在多くの人が利用する検索エンジンは Internet Explorer でしょうが、当ブログへのアクセスは Google Chrome が一番です。Google の推奨する改善策に取り組むことで、検索結果の上位に表示されやすくなります。アクセス数も増えてくるでしょう。

ちなみに、上の画像で【パソコン】が100点になっていますが、このときは広告と SNS 関連の公式ボタンを外していました。特別なプラグインをいくつも入れているわけではありません。キャッシュ系プラグイン「WP Super Cache」を入れ、CDN には「Jetpack by WordPress.com」の「Photon」を利用していました。レンタルサーバーはエックスサーバーの最低価格プランです。あとはこのツールの指摘通りにやれば、100点を獲得することは可能です。

現在は Google AdSense 広告や SNS ボタンを入れているので、これらの指摘が表示されます。だいたい90点くらいで落ち着きました。【モバイル】も同じくらいですね。

検証のルール

検証には、大きく分けて「速度」と「ユーザーエクスペリエンス」が、ルールとして設けられています。

速度に関するルール

  • リンク先ページでリダイレクトを使用しない
  • 圧縮を有効にする
  • サーバーの応答時間を改善する
  • ブラウザのキャッシュを活用する
  • リソースを圧縮する
  • 画像を最適化する
  • CSS の配信を最適化する
  • 見える範囲のコンテンツを優先する
  • レンダリングを妨げる JavaScript を削除する
  • 非同期スクリプトを使用する

操作性に関するルール

  • プラグインを使用しない
  • ビューポートを設定する
  • コンテンツのサイズをビューポートに合わせる
  • タップ ターゲットのサイズを適切に調整する
  • 読みやすいフォント サイズを使用する

PageSpeed Insights のルール – PageSpeed Insights — Google Developers より)

ただし、表示速度がどれくらいになるのかの数値は示してくれませんので、その点については他のツールが必要になります。

くわしくはリンク先をご覧になってください。日本語訳で書かれています。

GTmetrix

GTmetrix   Website Speed and Performance Optimization の公式ページ

GTmetrix | Website Speed and Performance Optimization

こちらは100%使いこなしているとはいえません。かなりの高機能です。使い方は簡単で、ひとまず調べたいサイトのアドレスを入れて「GO!」をクリックするだけ。

レポート結果

Latest Performance Report for  http   wp kappa.com【Summary】

左上にサイトのブラウザ表示が出されます。ここはいわゆる「ファーストビュー(Above the Fold)」の部分ですね。右上にある「Download PDF」ボタンで PDF ファイルをレポート出力することが可能です。

「SUMMARY」では「Page Speed Grade」と「YSlow Grade」と表示速度などが ABC 評価・%・数値で示されています。ここでは、

  • 「Page Speed Grade:(94%)↑」
  • 「YSlow Grade:(78%)↕」
  • 「Page load time:2.80s」
  • 「Total page size:809KB」
  • 「Total number of erquests:64」

のようになっています。まあまあの結果ですね。

検証結果の「BREAKDOWN」(内訳)は4つのタブに分かれています。

  • Page Speed
  • YSlow
  • Timeline
  • History

Page Speed

Latest Performance Report for  http   wp kappa.com【Page Speed】

ここには表示速度を阻害する要因が表示されています。「RECOMMENDATION」に並ぶ項目をクリックしていくことで、問題点のあるリソースが示されます。

Latest Performance Report でクリックして開いたところ【指摘あり】

この画像でいえば、「Jetpack」経由で表示される画像のサイズが最適化されていないので、「リサイズすることで47.1KiB(86%)のファイルサイズ削減ができるよ」と教えてくれています。

対処ができていれば以下のように。

Latest Performance Report でクリックして開いたところ【指摘なし】

You scored 100% on this suggestion – nothing to do here! (あなたは、この提案に関して100%を得点しました。 – ここですることは何もありません!)

対処法が具体的でわかりやすいですね。

色付きの棒グラフで「GRADE」がわかり、上下の矢印で前回の検証結果との比較が示されます。英語のサイトでありますが、ほとんど説明なしに理解できるでしょう。「TYPE」はリソースの種類など、「PRIORITY」は優先度です。

YSlow

Latest Performance Report for  http   wp kappa.com【Yslow】

YSlow が同時に調べられる

GTmetrix の特長のひとつは、「YSlow」ツールが使えることです。

各項目をクリックしていけば、詳細がわかります。たとえば HTTP リクエストの数などがわかるので、どのポイントがサイト速度を遅くしている原因なのかを発見しやすいです。

「YSlow」公式ページ

「YSlow」は Yahoo! Developer Network を通じて提供されている検証ツールです。公式ページで、各ブラウザにプラグインをインストールすることもできます。

YSlow   Official Open Source Project Website

YSlow – Official Open Source Project Website

検証のルールは以下の通り。引用のカッコ内は追加しています。

YSlow の「Webパフォーマンスのベストプラクティスとルール23」

  1. Minimize HTTP Requests(HTTPリクエストを最小限に抑える)
  2. Use a Content Delivery Network(コンテンツデリバリーネットワーク(CDN)を利用する)
  3. Avoid empty src or href(src=” ” や href=” ” のような空白は避ける)
  4. Add an Expires or a Cache-Control Header(Expires か、Cache-Control ヘッダでキャッシュを設定する)
  5. Gzip Components(gzip 圧縮してファイルを転送する)
  6. Put StyleSheets at the Top(スタイルシートは上に置く)
  7. Put Scripts at the Bottom(JavaScript は下に置く)
  8. Avoid CSS Expressions(CSS のExpression() は使わない)
  9. Make JavaScript and CSS External(JavaScript と CSS は外部参照させる)
  10. Reduce DNS Lookups(DNS Lookyps を削減する)
  11. Minify JavaScript and CSS(JavaScript と CSS はファイルサイズを縮小する)
  12. Avoid Redirects(リダイレクトは避ける)
  13. Remove Duplicate Scripts(重複スクリプトを削除する)
  14. Configure ETags(Entiry タグ(ETags)を設定する)
  15. Make AJAX Cacheable(Ajax をキャッシュ可能にする)
  16. Use GET for AJAX Requests(Ajax リクエストには GET メソッドを利用する)
  17. Reduce the Number of DOM Elements(DOM 要素の数を減らす)
  18. No 404s(404 not found をなくす)
  19. Reduce Cookie Size(Cookie のサイズを削減する)
  20. Use Cookie-Free Domains for Components(コンポーネントに Cookie を使わないドメインを使用する)
  21. Avoid Filters(フィルタは避ける)
  22. Do Not Scale Images in HTML(HTML 内の画像を大きさを変更せず使用する)
  23. Make favicon.ico Small and Cacheable(小さくてキャッシュ可能な favicon.ico を作る)

Timeline

ここでは、どのリソースにどれだけの時間をかけられているのかがわかります。色分けした棒線グラフになっているところもありがたいですね。

Latest Performance Report for  http   wp kappa.com【Timeline】

こちらはマウスを載せると、以下のように詳細が表示。

Latest Performance Report for  http   wp kappa.com【Timeline 詳細が表示】

これだけのことが無料で利用できるのは驚きです。

History

過去30日間のデータを折れ線グラフで視覚的に把握することも可能。特に何も設定していなくても、データを蓄積してくれているようです。

Latest Performance Report for  http   wp kappa.com【History】

サイト改善の結果が一目瞭然です。いろいろ試しながら検証したので、折れ線グラフが変な形になっていますね。

Website speed test – Pingdom

Website speed test

Website speed test – Pingdom

こちらも検証したいドメイン名を打ち込んでクリックするだけです。

検証結果

Website speed test - 2014-12-02

どの地域からアクセスして検証したかの情報がドメイン名の下に書いてあります。その他に大きく、

  • 「Perf. grade 86/100」:スコア
  • 「Requests 64」:リクエスト数
  • 「Load time 1.99s」:サイトを表示するまでにかかった時間
  • 「Page size 826.5kB」:リソース全体のサイズ

が表示されています。こちらも説明不要ですぐに理解できるようになってます。さらに

Your website is faster than 71% of all tested websites

と書かれていて、いままでに検証されたサイトの中で、自分のサイトの表示速度がどの程度の位置づけになるのかを教えてくれます。ひとつの目安になりますね。

Waterfall

Website speed test【Waterfall】

あまりに長いので縮小して一覧を示してみました。ひとつひとつの項目は、GTmetrix と同じように、どのリソースがどのように遅くなる原因を作っているのかが書かれています。棒グラフの短いものが、それだけ負担が少ないということです。上記の画像でいえば、棒線グラフが長くなっているのは、画像ファイルなどでした。

Performance Grade

Website speed test【Performance Grade】

こちらも特に説明はいらないでしょう。パフォーマンスに関する各項目のスコアが示され、改善すべきポイントが視覚的に把握できるようになっています。

Page Analysis

Website speed test【Page Analysis】

リクエスト数の内訳や、その他、どのようなコンテンツのタイプによってどれだけ時間がかかったかを教えてくれます。

History

Website speed test【History】

こちらも表示完了までにかかった時間のデータを蓄積して、折れ線グラフなどで示してくれます。

 

ページ表示のどこに時間がかかったかチェックするブックマークレット

【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット   編集長ブログ―安田英久   Web担当者Forum

【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 編集長ブログ―安田英久 | Web担当者Forum

こちらは日本語の公式ページがあるので、詳細はそちらを読んでもらうのがいいと思います。

ブックマークレットの使い方

ブックマークレットの使い方は、初めてだとわからないと思いますが、ひとまず以下の表示のあるリンクをブラウザの「お気に入り」に追加しておきます。

ページ表示のどこに時間がかかったかをチェックするブックマークレット

そして、検証したいサイトを同じブラウザで表示させてから、ブックマークレットをクリックするだけです。すると以下のように、分析結果が表示されます。

Web担当者Forum版 ページ速度分析ツールでの検証結果

いちいち公式ページに行ってアドレスを打ち込む必要はいらないので簡単ですね。

分析結果

「表示完了までにかかった全体の時間」が◯◯ミリ秒で示され、それについてのコメントがあります。次にビジュアルで「パートごとの時間のかかり具合」が色分けして棒グラフで視覚化されます。

「詳細」で時間のかかり具合が強調されるのですぐにわかります。

ただし、注意してください。これは、いまブラウザで表示している「そのページ」の「そのアクセス」でどんな風に時間がかかったかを表示しているものです。つまり、そのときのネットワークとサーバーの状況と、あなたの使っているブラウザやPCの性能が反映されているもので、そのページ表示の代表的な統計値ではありません。

さいごに

検証ツールで調べてみると、思わぬ要因でレンダリングをブロックしていることがわかったり、何が重くなる原因になっているのかが、すぐに分かります。分かったあと、改善できるところは、できるだけ早く対処しておきたいです。

自分ではどうすることもできずサーバー管理者に問い合わせをする必要のある場合や、5分程度の簡単な変更で済ませられるときもあります。そういった判断は、定期的に検証ツールで調べてみて、データを分析することで見えてきます。これらのツールは何度か使っていかないと、その良さが実感できないので、いろいろ試してみてください。

とくに新しいプラグインを導入したり、キャッシュ系の対策を変更したとき、あるいは SNS のボタンを設置した場合などには、大きな変化があるはずです。

関連記事

Google AdSense の住所(PIN)の確認手続き

Google AdSense で一定額の収益を上げると、ホーム画面でつぎのような通知が表示されます。 お客様の住所の確認が完了していないため、お客様のお支払いは現在保留中となっています。PINが郵送で届き次第、ここをクリックして住所の確認手…

自分のブログの RSS フィードの調べ方

WordPressの場合だと、RSSフィードはすでに用意されているようです。 詳しいことは「WordPress Feeds « WordPress Codex」に書いてあります。全文英語で書かれていますが、真ん中手前にある以下の欄を参考にす…

検索エンジンに残ったウェブページのキャッシュを削除する方法

基本的に、検索エンジンにキャッシュされているウェブページの古い情報を消去したいときには「noarchive タグ」を利用します。 たとえばネットショップの商品ページで、商品の種類や値段が頻繁に変わる場合などに使われるそうです。メンバーシップ…

WordPress の運用に特化した「wpX レンタルサーバー」が初期費用無料キャンペーン中!

「wpX レンタルサーバー」はエックスサーバー社の提供するサービスひとつで、「WordPress の運用に特化したレンタルサーバー」です。 WordPress の運用に特化したレンタルサーバー いままでに無料ブログサービスをやっていてこれを…