【ツール】PageSpeed InsightsとYSlowで同時パフォーマンス計測！　GTmetrix

サイトやブログのパフォーマンスのチェックにPage Speed InsightsとYSlowを使っているという人も多い事でしょう。
また、これからパフォーマンスチェックのツールとしてこれらのツールを導入しようと考えている人も居るかと思います。

 
Page Speed InsightsもYSlowもとても良いツールなのですが、欲を言うならば「同時に計測したい！」と考える人も居ると思います。
そんな一つにお勧めしたいのがGTmetrixです。

 
GTmetrixとはいったいどんなものなのでしょうか。
GTmetrixについて簡単でわかりやすく、詳しく紹介しているのでチェックしていってくださいね。

サイト・ブログの表示速度を評価するGTmetrixとは

GTmetrixとは、Webツールの一つでGoogleの提供するPageSpeed Insightsと、Yahoo!の提供するYSlowを使って同時にサイト・ブログのパフォーマンスを計測してくれるものです。
また、PageSpeed InsightsとYSlowの他にもページ表示に費やされたウォーターフォールチャートも確認する事が出来ます。

 
PageSpeed InsightsもYSlowもサイトやブログのページのパフォーマンスについて評価し、改善項目について提案してくれるので、出来れば同時に検証したいという思いを叶えるツールになっています。

GTmetrixでサイト・ブログの表示速度を評価する方法・使い方

GTmetrixを使ってサイト・ブログの表示速度を評価する方法は次の手順で行います。
Gtmetrixは使い方がとてもシンプルなのでよほどの事が無い限りは使っていて迷うという事はないのではないでしょうか。

• GTmetrixのWebページへアクセスする
• パフォーマンスを評価したいページのURLを入力する
• 評価内容を確認する

GTmetrixのWebページへアクセスする

GTmetrix 2015年10月5日

GTmetrix

 
GTmetrixにアクセスすると見出し画像のような画面に移動します。

パフォーマンスを評価したいページのURLを入力する

GTmetrixのページにアクセスしたら、パフォーマンスの計測をしたいページのURLを入力しましょう。
URLを入力するのは、ページ中央部に表示されている「Enter URL to Analyze…」と表示されているテキストボックスです。

 
パフォーマンス評価したいページのURLを入力したら「Analyze」ボタンを押しましょう。
サイト・ブログページのパフォーマンスの検証が始まると次のような画像の表示となるので検証が完了するまでしばらく待ちましょう。

 

評価内容を確認する

GTmetrixでウェブページの表示速度について評価が完了すると、具体的に評価結果について表示されます。
アカウントを利用しない無償版では次の事を確認する事が出来ます。

• PageSpeed Insights・Yslowの評価スコア
• Webページの詳細情報
• PageSpeed Insightsの評価内容と提案内容
• YSlowの評価内容と提案内容
• ページ表示にかかったウォーターフォールチャート

 
それぞれについて具体的に詳細内容を見ていきましょう。

PageSpeed Insights・Yslowの評価スコア

Webページのパフォーマンスを検証した結果のスコアとして、PageSpeed InsightsとYSlowのスコアの評価を確認することが出来ます。
Webページの評価を行った際の総評価として捉えるのが良いでしょう。

 
PageSpeed Insights・Yslowの評価スコアは「Performance Scores」で確認する事が出来ます。

 
「PageSpeed Score」がPageSpeed Insightsによる評価の項目で、「YSlow Score」がYSlowによって評価されたスコアです。

 
画像の例ではPageSpeed Insightsでの評価は「B(80%)」で、YSlowからの評価は「D(61%)」となっています。
う～む、YSlowからの評価の方が少し辛い気がします。

Webページの詳細情報

Webページの詳細情報では、Webページの読み込みにかかった時間や全体のページサイズ、ページ表示の際に出ている外部、内部へのリクエスト回数が表示されます。

 
Webページの詳細情報は「Page Details」で確認する事が出来ます。

 
Webページの読み込みにかかった時間や全体のページサイズ、ページの表示の際のリクエスト回数については、それぞれ次の項目で確認できます。

• Webページの読み込みにかかった時間：Page Load Time
• 全体のページサイズ：Total Page Size
• リクエスト回数：Requests

 
画像の例では、ページの読み込みに「10.3秒」かかり、全体のページサイズは「1.37MB」でリクエスト回数は「349回」となっています。
全体のページサイズも大きく、リクエスト回数も多いため、恐らくページの読み込み時間に影響を与えている事が推測されますね。

PageSpeed Insightsの評価内容と提案内容

PageSpeed Insightsの評価内容と提案内容では、PageSpeed Insightsから受ける評価の詳細と、提案内容について確認する事が出来ます。
PageSpeed Insightsの評価内容と提案は画面中央付近の「PageSpeed」を選択すると確認する事が出来ます。

 
PageSpeed Insightsの評価として次のような評価内容があり、それぞれ１００点満点での評価となります。
それぞれの評価内容をクリックすると更に評価の根拠となったリソース等を確認する事が出来ます。

• Minimize redirects
• Specify image dimensions
• Prefer asynchronous resources
• Defer parsing of JavaScript
• Leverage browser caching
• Enable gzip compression
• Specify a cache validator
• Specify a Vary: Accept-Encoding header
• Avoid a character set in the meta tag
• Optimize the order of styles and scripts
• Specify a character set early
• Remove query strings from static resources
• Serve resources from a consistent URL
• Optimize images
• Enable Keep-Alive
• Minify JavaScript
• Minify CSS
• Minimize request size
• Serve scaled images
• Minify HTML
• Avoid bad requests
• Avoid landing page redirects
• Inline small CSS
• Inline small JavaScript
• Put CSS in the document head
• Avoid CSS @import
• Combine images using CSS sprites

YSlowの評価内容と提案内容

YSlowの評価内容と提案内容では、YSlowから受ける評価の詳細と、提案内容について確認する事が出来ます。
YSlowの評価内容と提案は画面中央付近の「YSlow」を選択すると確認する事が出来ます。

 
YSlowの評価として次のような評価内容があり、それぞれ１００点満点での評価となります。
それぞれの評価内容をクリックすると更に評価の根拠となったリソース等を確認する事が出来ます。

• Add Expires headers
• Make fewer HTTP requests
• Compress components with gzip
• Use a Content Delivery Network (CDN)
• Avoid URL redirects
• Use cookie-free domains
• Reduce DNS lookups
• Configure entity tags (ETags)
• Minify JavaScript and CSS
• Avoid AlphaImageLoader filter
• Avoid empty src or href
• Make AJAX cacheable
• Put CSS at the top
• Remove duplicate JavaScript and CSS
• Put JavaScript at bottom
• Avoid HTTP 404 (Not Found) error
• Reduce the number of DOM elements
• Do not scale images in HTML
• Use GET for AJAX requests
• Avoid CSS expressions
• Reduce cookie size
• Make favicon small and cacheable
• Make JavaScript and CSS external

ページ表示にかかったウォーターフォールチャート

ページ表示にかかったウォーターフォールチャートでは、ページの表示をする上で、読み込んだJavaScriptやCSS、サーバーの応答などの含めてグラフ形式で確認する事が出来るチャートです。

ウォーターフォールチャートは、画面中央部の「Waterfall」タブをクリックすると表示する事が出来ます。

 
このチャートを使う事で、自分のWebページの表示で一番ネックとなるリソースを探し当てるのに利用する事が出来ます。
また、各リソースの読み込みにかかった時間も表示されるので慣れてくるとウォーターフォールチャートもとても便利な分析機能なのです。

 
画像ファイルは並列で読み込まれているな、CSSは遅延読み込みがちゃんと働いているな、JavaScriptは非同期読み込みになっているな、等々色々と確認が出来ます。

PageSpeed InsightsとYSlowで同時パフォーマンス計測！　GTmetrixを読むうえで知っておきたい知識

PageSpeed InsightsとYSlowで同時パフォーマンス計測！　GTmetrixを読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

サイト・ブログのパフォーマンスをチェックするツール

ブログ・サイトのパフォーマンスをチェックするツールにはいろいろな種類があり、Webツールなのかブラウザのアドオンなのか等々、ツールそのものの使い方が違う場合もあります。

 
パフォーマンスチェックツールを選ぶ上では、自分の使い心地の良いものだったり、知りたい情報を教えてくれたり、使い方が簡単かなどを基準に選ぶと良いのではないでしょうか。

 
ブログ・サイトのパフォーマンスをチェックするツールとしてオススメなのが次のパフォーマンスチェックツールです。

• GTmetrix
• PageSpeed Insights
• YSlow

GTmetrixとは、Webツールの一つでGoogleの提供するPageSpeed Insightsと、Yahoo!の提供するYSlowを使って同時にサイト・ブログのパフォーマンスを計測してくれるものです。
また、PageSpeed InsightsとYSlowの他にもページ表示に費やされたウォーターフォールチャートも確認する事が出来ます。

 
PageSpeed InsightsもYSlowもサイトやブログのページのパフォーマンスについて評価し、改善項目について提案してくれるので、出来れば同時に検証したいという思いを叶えるツールになっています。

 
GTmetrixを使ってサイト・ブログの表示速度を評価する方法は次の手順で行います。
Gtmetrixは使い方がとてもシンプルなのでよほどの事が無い限りは使っていて迷うという事はないのではないでしょう。

• GTmetrixのWebページへアクセスする
• パフォーマンスを評価したいページのURLを入力する
• 評価内容を確認する

PageSpeed Insightsとは、Googleの提供するツールの一つで、サイトやブログの表示速度やユーザビリティを１００点満点の点数で評価してくれるパフォーマンスチェックツールです。

 
パフォーマンスやユーザビリティの他にも、ページを表示する上でネックとなるリソースを示したり、改善方法の提案もしてくれる優れたツールです。

 
PageSpeed Insightsを使うにはGoogleの提供するサービスページへ移動する必要があります。
次のリンクにアクセスすると、PageSpeed Insightsのページに移動する事が出来ます。
PageSpeed Insights

サイトやブログの表示速度を測定するYSlowとは、アメリカの「Yahoo!」が提供するツールの一つで、サイトやブログの表示速度を測定し、評価してくれるGoogle ChromeとFireFoxの拡張機能・アドオンです。

 
サイトやブログのHTMLや、Apacheの設定ファイル（.htaccessやhttpd.conf）の記述だけで効果が得られるTipsとなっています。

 
YSlowを利用する事で、サイトやブログの表示速度の低下の原因となっている箇所やネックとなっているリソース、特に弱い項目や改善すべき内容などの提案を受ける事が出来ます。

 
YSlowで受ける提案の項目がすべて正しいというわけではありませんが、検証し、対処する事でサイトやブログの表示速度が大幅に改善される事も多いため、パフォーマンス改善の方法がわからないという人は利用をオススメしたいツールです。

 
ブログ・サイトのパフォーマンスチェックのツールについては「【ツール】ブログ・サイトのパフォーマンスチェックのツール」で簡単でわかりやすく、詳しくまとめているのでチェックしていってくださいね。

PageSpeed Insights

PageSpeed Insightsとは、Googleの提供するツールの一つで、サイトやブログの表示速度やユーザビリティを１００点満点の点数で評価してくれるパフォーマンスチェックツールです。

 
パフォーマンスやユーザビリティの他にも、ページを表示する上でネックとなるリソースを示したり、改善方法の提案もしてくれる優れたツールです。

 
PageSpeed Insightsを使うにはGoogleの提供するサービスページへ移動する必要があります。
次のリンクにアクセスすると、PageSpeed Insightsのページに移動する事が出来ます。
PageSpeed Insights

 
PageSpeed Insightsの使い方はいたって簡単でシンプルです。
PageSpeed Insightsの画面に表示されているテキストボックスにパフォーマンスやユーザビリティを検証したいページのURLを入力するだけです。

 
PageSpeed Insightはモバイルについては速度・ユーザーエクスピリエンス、パソコンについてはGoogleの提案について、テストし評価を受ける事が出来ます。

 
テストした評価の画面では評価をした際の簡単なレンダリング表示についても確認する事が出来ます。

 
モバイルについては速度・ユーザーエクスピリエンスについて「修正が必要」「修正を考慮」の2段階の提案を受ける事が出来、パソコンについても提案の概要として「修正が必要」「修正を考慮」の２段階の提案を受ける事が出来ます。

 
PageSpeed Insightsでは、検証をしたサイトやブログのページを評価し、改善するための提案を受ける事が出来ます。
提案はモバイルの速度・ユーザーエクスピリエンス、パソコンの提案の概要毎に受ける事が出来ます。

 
Page Speed Insightsのモバイルの速度で受ける提案ではサイトやブログのページとして、改善の余地のある改善内容について提案を受ける事が出来ます。

 
パフォーマンス低下の原因であったり、パフォーマンスを更に向上させるうえで有意義な提案を受ける事が出来るので提案内容について目を通しておいた方が良いでしょう。

 
また、検証した際にパフォーマンスの低下の原因とされなかった物には「ルールに合格」として評価を受ける事が出来ます。

 
Page Speed Insightsのユーザーエクスピリエンスの速度で受ける提案ではサイトやブログのページとして、更にユーザーの使いやすさに対して改善の余地のある項目について提案を受ける事が出来ます。

 
ユーザーが目的のリンクを押しやすくしたり、見づらい表示となっていた場合はユーザーにとって不便な使えないページになってしまうので、提案内容に沿ってよりユーザーが使いやすいページを作成していきましょう。

 
また、検証した際にユーザーエクスピリエンスの低下の原因とされなかった物には「ルールに合格」として評価を受ける事が出来ます。

 
Page Speed Insightsのパソコンの提案の概要で受ける提案ではサイトやブログのページをパソコンで表示した場合に、表示やページの見易さ等、改善の余地のある項目について提案を受ける事が出来ます。

 
パソコンはモバイルに比べ、ページを表示する処理能力が高いですが、よりブログやサイトとして最適化しておいた方が良い項目について提案を受ける事が出来ます。

 
また、検証した際に評価が合格となったものについては「ルールに合格」として評価を受ける事が出来ます。

 
ブログやサイトのパフォーマンスを検証してくれるPageSpeed Insightsについては「【ツール】ブログ・サイトのパフォーマンスをチェック　PageSpeed Insights」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってくださいね。

YSlow

Google ChromeにYSlowを導入するには、次の手順を行う必要があります。

• Chrome ウェブストアのYSlowのページにアクセスする
• ChromeにYSlowを追加する
• YSlowが動作するか使ってみる

 
YSlowをGoogle Chromeで利用するには、ChromeのウェブストアからYSlowを拡張機能としてChromeに追加する必要があります。
YSlowはダウンロードも利用も無料なので、お金の心配はありません。

 
ChromeウェブストアのYSlowのページは次のリンクのページです。
YSlow – Chrome ウェブストア

 
Chromeウェブストアにアクセス出来たら、実際にChromeにYSlowを導入しましょう。
ChromeにYSlowを導入するには、画面の「Chromeに追加」ボタンを押します。

 
『「YSlow」を追加しますか？』というメッセージが表示されたら、「拡張機能を追加」ボタンを押してください。
YSlowの追加が終わると、Google Chromeに次の画像のイメージのスピードメーターのようなアイコンが追加されているはずです。

 
ChromeにYSlowが拡張機能として追加されたら、スピードメーターのアイコンを押してYSlowを実際に起動しましょう。
スピードメーターのアイコンを押すとYSlowの機能が表示されます。

 
「Check here if the current page prevents itself from being embedded/iframed. A simpler post onload detection will be used instead.」と書かれたチェックボックスにチェックを入れて、「Run Test」ボタンを押してみましょう。

 
YSlowによる検証が完了すると、画像で紹介したようなサイトやブログのページのパフォーマンスを検証した結果が表示されます。

 
総評をグレードで示すとともにそれぞれの指標についてランク付けされて評価されます。

 
Google ChromeにYSlowを導入する方法は「【Chrome】サイトのパフォーマンスを評価するYSlowの導入方法」で簡単でわかりやすく、更に詳しく解説しているのでチェックしていってください。

PageSpeed InsightsとYSlowで同時パフォーマンス計測！　GTmetrix　あとがき

PageSpeed InsightsとYSlowで同時パフォーマンス評価を行うことが出来るGTmetrixについて紹介しました。
画面自体もシンプルで使いやすく、見やすいのも良いですよね。

PageSpeedInsightsやYSlowはパフォーマンス評価の代名詞ともいえるパフォーマンスチェックツールなので、それを同時に検証する事が出来るのも魅力です。

PageSpeed InsightsとYSlowどっちも使ってサイトやブログのパフォーマンスを評価している人であれば、作業の効率化にもつながるのでGTmetrixを使ってみてはいかがでしょうか。

GTmetrixはとても有名なWebツールなので、すでに使っている人も多く、いろいろな人が情報を公開していますので、いざというときの情報源も安心です。

PageSpeed InsightsとYSlowを同時にパフォーマンス評価してくれるGTmetrixを使って、効率よくパフォーマンス検証していってください。

PageSpeed InsightsとYSlowで同時パフォーマンス計測！　GTmetrix　まとめ

GTmetrixとは、Webツールの一つでGoogleの提供するPageSpeed Insightsと、Yahoo!の提供するYSlowを使って同時にサイト・ブログのパフォーマンスを計測してくれるものです。
また、PageSpeed InsightsとYSlowの他にもページ表示に費やされたウォーターフォールチャートも確認する事が出来ます。

 
PageSpeed InsightsもYSlowもサイトやブログのページのパフォーマンスについて評価し、改善項目について提案してくれるので、出来れば同時に検証したいという思いを叶えるツールになっています。

 
GTmetrixを使ってサイト・ブログの表示速度を評価する方法は次の手順で行います。
Gtmetrixは使い方がとてもシンプルなのでよほどの事が無い限りは使っていて迷うという事はないのではないでしょうか。

• GTmetrixのWebページへアクセスする
• パフォーマンスを評価したいページのURLを入力する
• 評価内容を確認する

 
Gtmetrixを使う為に、まずはGTmetrixのWebページへアクセスしましょう。
GtmetrixのWebページへは次のリンクからアクセスする事が出来ます。

GTmetrix

 
GTmetrixのページにアクセスしたら、パフォーマンスの計測をしたいページのURLを入力しましょう。
URLを入力するのは、ページ中央部に表示されている「Enter URL to Analyze…」と表示されているテキストボックスです。

 
パフォーマンス評価したいページのURLを入力したら「Analyze」ボタンを押しましょう。

 
GTmetrixでウェブページの表示速度について評価が完了すると、具体的に評価結果について表示されます。
アカウントを利用しない無償版では次の事を確認する事が出来ます。

• PageSpeed Insights・Yslowの評価スコア
• Webページの詳細情報
• PageSpeed Insightsの評価内容と提案内容
• YSlowの評価内容と提案内容
• ページ表示にかかったウォーターフォールチャート

 

Webページのパフォーマンスを検証した結果のスコアとして、PageSpeed InsightsとYSlowのスコアの評価を確認することが出来ます。
Webページの評価を行った際の総評価として捉えるのが良いでしょう。

 

Webページの詳細情報では、Webページの読み込みにかかった時間や全体のページサイズ、ページ表示の際に出ている外部、内部へのリクエスト回数が表示されます。

 

PageSpeed Insightsの評価内容と提案内容では、PageSpeed Insightsから受ける評価の詳細と、提案内容について確認する事が出来ます。
PageSpeed Insightsの評価内容と提案は画面中央付近の「PageSpeed」を選択すると確認する事が出来ます。

 

YSlowの評価内容と提案内容では、YSlowから受ける評価の詳細と、提案内容について確認する事が出来ます。
YSlowの評価内容と提案は画面中央付近の「YSlow」を選択すると確認する事が出来ます。

 

ページ表示にかかったウォーターフォールチャートでは、ページの表示をする上で、読み込んだJavaScriptやCSS、サーバーの応答などの含めてグラフ形式で確認する事が出来るチャートです。

ウォーターフォールチャートは、画面中央部の「Waterfall」タブをクリックすると表示する事が出来ます。

 
最後までお読みいただきありがとうございました。