【100点GET】GTmetrixとは?使い方とスコア改善方法・WordPress最適化を解説- 【日本語翻訳済み】

2019年1月3日

どうも。俺のSEO対策、管理人のスズキです。

この記事では、WEBサイトの表示速度チェックツールとして有名なGTmetrixの使い方とスコアの改善方法をまとめました。

WEBサイトのページスピードは今やSEOにも影響があるとGoogleが公言していますので、拘って損は無いポイントです。ぜひ、当記事を参考にしてサイトスピード改善に取り組んでみてください。

それではどうぞ。

GTmetrix、当サイトのスコアは100点でした

まず、この記事を書くに当たってGTmetrixで当サイトのスコアをチェックしてみました。

だって、こんな記事書いてる人のWEBサイトがめっちゃ遅かったら説得力ゼロじゃないですか。なので、事前にチェックしてみたわけですよ。その結果はというと…。

スコアオール100でした! これで自信を持ってこの記事を書けそうです(笑)

ちなみに、GTmetrixの設定はデフォルト状態で、そのままURLを入力した結果がコレですね。

もし、ご自身のWEBサイトのスコアが気になる方、本当に僕のサイトのスコアが100なのか疑わしい方はGTmetrixでチェックしてみてください。WEBサイトのURLを入力するだけで使えます。

GTmetrixはこちら

GTmetrixの詳しい使い方

それでは、ここからはGTmetrixの詳しい使い方について解説しますね。使い方は非常にシンプルです。

まずは、GTmetrix公式サイトにアクセスしてください。

GTmetrixはこちら

すると、以下の画面が現れます。

画像中央にある、入力フォームにチェックしたいWEBサイトのURLを入力します。URL一番最初のhttp(https)~から入力してください。

URLを入力したら、画像右側の『Analyze』という青いボタンをクリックします。すると表示速度チェックが始まります。基本設定はこれだけ。超簡単ですよね。

すると、以下の画面が現れてチェックがスタートします。

スピードチェックは全て自動的に行ってくれるので、10~20秒くらい待ちましょう。

チェックが全て終わると、以下のスコア結果画面が表示されチェック終了となります。

チェック環境設定変更について

GTmetrixではチェック環境(ブラウザ・インターネット環境など)の変更が出来ます。

ここからはそのチェック環境の変更方法について解説します。正直、GTmetrixデフォルト状態でのチェックで十分ではありますが、もし興味があったら試してみると良いでしょう。

まずは、GTmetrixTOPページの『Analyze』ボタンの下、『Analysis Options』というボタンをクリックします。

すると、以下のように画面が展開されます。

Test URL inとは?

画面左上の『Test URL in』という項目は、表示速度チェックを世界の何処でおこなうかを選択出来ます。選択可能な項目は以下の通り。

  • バンクーバー(カナダ)←デフォルト設定
  • ダラス(アメリカ)
  • 香港(中国)
  • ロンドン(イギリス)
  • ムンバイ(インド)
  • シドニー(オーストラリア)
  • サンパウロ(ブラジル)

国によって、サイトが表示されるまでの時間に多少の差があり、PageSpeed Score&YSlowスコア共に変化があります。カナダが一番良いスコアが出る印象ですね。

Usingとは?

画面上部中央の『Using』という項目は、どのブラウザを使うかを指定します。国によって、使えるブラウザと使えないブラウザがあり、使えない場合はグレーアウトで表示されます。

選択できるブラウザは以下の3つ。

  • Firefox(ファイアフォックス)
  • Google Chrome(Desktop版)
  • Google Chrome(Android版、Galaxy Nexus)

Withとは?

画面上部右側の『With』という項目ではインターネット環境を選択出来ます。

選択項目はパソコン用ネット環境7つほどあります。以下はその参考例です。

  • Broadband Fast(20/5 Mbps,25ms)
  • Broadband(5/1 Mbps,30ms)
  • Broadband Slow(1.5Mbps/384 Kbps,50ms)

PageSpeed Scoreについて

それでは、次はスコアの数値について、それぞれがどのような意味を持つのかを解説していきます。

まずは、PageSpeed Scoreについて。

結果画面のGRADEに記載されているスコアの各数値はもちろん高い方が好ましいです。

TYPEの項目は、各スコアが「画像・文章・サーバー・JavaScript・CSS」のどの要素と関連しているかを示しています。

最後にPRIORITYは各項目の優先順位・重要度を示しています。HIGHの項目の数値を優先的に改善した方が良い、という事になります。

以下、当WEBサイトの数値を表にしましたので参考にして下さい。

RECOMMENDATIONGRADETYPEPRIORITY
Optimize imagesA (99) IMAGESHIGH
Minify HTMLA (99) CONTENTLOW
Avoid bad requestsA (100) CONTENTHIGH
Avoid landing page redirectsA (100) SERVERHIGH
Defer parsing of JavaScriptA (100) JSHIGH
Enable gzip compressionA (100) SERVERHIGH
Enable Keep-AliveA (100) SERVERHIGH
Inline small CSSA (100) CSSHIGH
Inline small JavaScriptA (100) JSHIGH
Leverage browser cachingA (100) SERVERHIGH
Minify CSSA (100) CSSHIGH
Minify JavaScriptA (100) JSHIGH
Minimize redirectsA (100) CONTENTHIGH
Minimize request sizeA (100) CONTENTHIGH
Optimize the order of styles and scriptsA (100) CSS/JSHIGH
Put CSS in the document headA (100) CSSHIGH
Serve resources from a consistent URLA (100) CONTENTHIGH
Serve scaled imagesA (100) IMAGESHIGH
Specify a cache validatorA (100) SERVERHIGH
Combine images using CSS spritesA (100) IMAGESHIGH
Avoid CSS @importA (100) CSSMEDIUM
Prefer asynchronous resourcesA (100) JSMEDIUM
Specify a character set earlyA (100) CONTENTMEDIUM
Specify image dimensionsA (100) IMAGESMEDIUM
Avoid a character set in the meta tagA (100) CONTENTLOW
Remove query strings from static resourcesA (100) CONTENTLOW
Specify a Vary: Accept-Encoding headerA (100) SERVERLOW

YSlow Scoreについて

YSlow Scoreとは、YSlowというサイトのパフォーマンス計測&パフォーマンス観点での問題点の発見を行うことが出来るツールが計測したスコアです。Chromeブラウザにインストールして使えます。

YSlowはこちら

YSlowもPageSpeedとは別の観点から、サイトの表示速度に関わる要素をチェックしています。GRADE、TYPE、PRIORITYの見方はPageSpeed Scoreと同様です。

こちらも当サイトの数値を載せていますので参考にして下さい。

RECOMMENDATIONGRADETYPEPRIORITY
Add Expires headersA (100) SERVERHIGH
Make fewer HTTP requestsA (100) CONTENTHIGH
Compress components with gzipA (100) SERVERHIGH
Use a Content Delivery Network (CDN)A (100) SERVERMEDIUM
Minify JavaScript and CSSA (100) CSS/JSMEDIUM
Avoid URL redirectsA (100) CONTENTMEDIUM
Make AJAX cacheableA (100) JSMEDIUM
Remove duplicate JavaScript and CSSA (100) CSS/JSMEDIUM
Avoid AlphaImageLoader filterA (100) CSSMEDIUM
Avoid HTTP 404 (Not Found) errorA (100) CONTENTMEDIUM
Reduce the number of DOM elementsA (100) CONTENTLOW
Use cookie-free domainsA (100) COOKIELOW
Use GET for AJAX requestsA (100) JSLOW
Avoid CSS expressionsA (100) CSSLOW
Reduce DNS lookupsA (100) CONTENTLOW
Reduce cookie sizeA (100) COOKIELOW
Make favicon small and cacheableA (100) IMAGESLOW
Configure entity tags (ETags)A (100) SERVERLOW
Make JavaScript and CSS external(n/a)CSS/JSMEDIUM

まとめ

実際にチェックしてみるとわかるのですが、スコアAやオール100を取るのは意外と難しいです(笑)

勿論、各スコアが100だからと言ってすぐに検索順位が上がるわけではありません。

しかし、サイト表示スピードは直帰率などのサイト内滞在数値に影響が出るので、改善しておいて損は無いでしょう。

また、ゲーム的なやり込み要素もありますね(笑)是非、スコア満点を目指して頑張ってみて下さい!

サイト表示速度・スコアの改善方法は以下の記事で解説していますので、あわせて読むことをおすすめします。

それでは、今日はこの辺で。

【満点】PageSpeed Insightsで100点取りました【Googleページスピードインサイト】