GTmetrixを駆使し、サイトの分析と最適化をすれば表示速度を改善できる可能性があります。表示速度を改善するなら、検索ユーザーの直帰率を下げられるかもしれません。
直帰率は”直ぐに検索結果に帰る”こと。特定のキーワードで検索しブログ記事をクリックしたものの、同じブログの他記事を読まずに検索結果へ戻ってしまう。ブログが表示されない、記事がおもしろくない、など様々な要因が関係する。
だれだって遅いサイトより、パッとすばやく表示されるサイトを読みたいですよね。
ただし、専門用語が多いうえ英語表記されたGTmetrixの使い方をつかむのはむずかしいものです。この記事はGTmetrixの使い方と分析・改善方法を徹底解説しました。
GTmetrixによる当サイトの計測結果
GTmetrixによる当サイトの計測結果は上記の写真のとおり、LCP1.2秒でした。
LCPはページが読み込まれ表示が始まった時間を示します。画像が多いサイトや動画を含むサイトの場合、ページの読み込みが速くても、実際にページすべてが表示されるにはもっと長い時間が必要です。
当サイトがどれくらい速いか、他サイトと比較しましょう。GTmetrixの使い方 を解説するので、あなたのサイトと他サイトの数値も後ほど比較してみてください。
普段よく使うサイトと比べましょう。
| サイト名 | ページ読み込み時間 | ページ読み終わり時間 |
|---|---|---|
| サバサバサーバー | 1.2秒 | 1.8秒 |
| Yahoo! JAPAN | 1.8秒 | 4.4秒 |
| 楽天市場 | 2.7秒 | 12.5秒 |
| ユニクロ | 2.0秒 | 5.9秒 |
| TOYOTA | 1.1秒 | 8.3秒 |
当サイトは表示速度最適化に努めた結果、1.2秒で表示されはじめ1.8秒で完全に表示されました。GTmetrix Gradeが「A」と示すとおり上出来な表示速度です。
プログラミングの特別な知識などはありません。だれでも同程度の表示速度を達成できます。
GTmetrixの使い方
GTmetrixの使い方を解説します。
- STEP.1GTmetrixにアクセス
まずは GTmetrix にアクセスしましょう。
- STEP.2計測したいURLのコピー＆ペースト
計測したいURLをコピーし、画像で示した枠内にペーストしてください。
- STEP.3Test your siteをクリック
Test your siteをクリックすれば計測が始まります。計測が完了するまで10~20秒ほど待ちましょう。
表示速度の速いサイトは計測自体も短い時間で終わります。
- STEP.4計測結果を分析
表示された計測結果を分析しましょう。GTmetrixでサイトを分析する で解説しました。
- STEP.5トップページ以外も計測
トップページだけ計測するのではなく、個別記事をも計測しましょう。読者の目に触れるのは、たいていの場合ブログやサイトのトップページより個別記事が多いからです。
GTmetrixでサイトを詳細に分析する
GTmetrixでサイトを詳細に分析しましょう。それぞれの専門用語の解説を読みながら、あなたのサイトの表示速度を改善できるポイントを見つけてください。
【前提】GTmetrix計測時の設定
GTmetrixの分析をチェックする前に、GTmetrix計測時の設定を解説します。
- Latest Performance Report for：計測した最新パフォーマンスレポート。
- Report generated：レポートが作成された日時。
- Test Server Location：テストサーバーの場所。無料アカウントに登録していない場合は、カナダ バンクーバーにあるサーバーでテストされる。
- Using：使っているブラウザ。無料アカウントに登録していない場合は、Chromeが使われる。
ほとんどの人が国内サーバーを使っているはずです。そのため、カナダバンクーバーにあるサーバーでテストするより、東京サーバーでテストするほうがより正確な数値を把握しやすくなります。
ただし東京サーバーでテストするにはProプランの加入が必要です。
そもそも正確な数値を出そうとする必要はほとんどありません。結局、改善前よりスコアが良くなればいいので、どのサーバーで測っても違いはありません。
GTmetrix Grade
GTmetrixGradeは2つの観点から見た採点結果です。
- Performance：検索ユーザーが実際に体験したパフォーマンスを示す。
- Structure：フロントエンドの構造上の結果を示す。
人、検索エンジンから見た速度の総合評価と言えるかもしれません。
Gradeの評価が「A」を示していれば、十分に表示速度が最適化されているとみなせます。
PerformanceとStructureでは、Performanceがより重要です。GTmetrixはPerformanceとStructureのスコアの重要性を70:30に設定しています。Performanceは検索ユーザーが快適に使えることを示した数値です。
これはユーザーを第一に考えるGoogleの理念に沿っています。
ですから、Performanceを優先して改善できることを覚えておきましょう。
Web Vitals
Web VitalsはGoogleが確立した、優れたユーザ体験を目的とした取り組みのことです。もっと言えば、使いやすさの追求を指します。
Web Vitalsは3要素を追求させることで、優れたユーザー体験の達成に近づきます。
- Largest Contentful Paint：最大コンテンツが完全に表示されるまでにかかった時間。
- Total Blocking Time：ページ読み込み中にスクリプトでブロックされた時間。スムーズに読み込めなかった時間と言える。
- Cumulative Layout Shift：ページ読み込み中にレイアウトがずれた量。
ここを改善していくと、webページを見ている時のイライラをできるだけ取り除けます。
Cumulative Layout Shift（CLS）の成績が悪いと、特に読者をイライラさせるかもしれません。たとえば、タップしようとした直前にレイアウトが動き、見るつもりのない広告をタップしてしまったことがありますよね。
時間差でパッとズレてしまった、そのズレ幅を示した数値がCLSです。
Speed Visualization
Speed Visualizationは速度を視覚化したものです。キャプチャが用意されており、ページ読み込み時の指標がいくつか載せられています。
何がどれくらいの時間で表示されているのかをチェックできます。
- Time to First Byte：サーバー初期応答時間。
- First Contentful Paint：最初にコンテンツが読み込まれ始めた時間。
- Time to Interactive：ページ操作ができるようになった時間
- Onload Time：ページの読み込み処理が完全にできた時間。
- Largest Contentful Paint：最大コンテンツが完全に表示されるまでにかかった時間。
Page Details
Page Detailsはページの詳細情報です。どんなファイルがどれくらい使われているのかを把握できます。当然ながら、大きな割合を占める要素ほど改善に取り組む価値があると言えます。
上記画像にあるとおり、画像を多用するサイトであればIMGのサイズが最も大きいでしょう。つまり、画像を適切に圧縮したりサイズ調整したりすることで、速度が改善されやすくなります。
GTmetrixの分析内容を振り返りましょう。
GTmetrixの分析を活かし、表示速度の改善に役立つヒントを見つけてください。
ここまでGTmetrixを読んで、やはり英語表記が難しく思えるなら PageSpeeds insights を使ってみるのもおすすめです。専門用語はあるものの日本語解説も見れます。詳しくは コンマ1秒縮める為のPageSpeed Insightsの使い方 をお読みください。
GTmetrix分析結果が悪ければ高速サーバーを使おう
GTmetrixの分析を活用した改善が難しそうなら、表示速度は高速サーバーを使えば速くなることを覚えておきましょう。
とくに無料サーバーや格安サーバーを使っているなら、表示速度の速い3社を使うことで劇的に速度を改善できるかもしれません。
- エックスサーバー（X10プラン）：ページ読み込み0.954秒
- ConoHa WING（ベーシックプラン）：ページ読み込み1.1秒
- ロリポップ（ハイスピードプラン）：ページ読み込み1.2秒
当サイトはエックスサーバーを使っています。
3社ともWordPressブログを簡単なクリック操作で移行できるWordPressかんたん移行機能を使えます。サーバー移転しやすく表示速度の速いサーバーは 27社比較！個人におすすめなWordPressレンタルサーバー3選と失敗しない選び方5つのコツ！ でまとめました。ぜひお読みください。
表示速度改善の他の方法は、WordPressテーマの変更や画像の圧縮などです。
GTmetrixに関するよくある質問
GTmetrixに関するよくある質問に答えました。
GTmetrixはアカウント登録が必要？
いいえ、GTmetrixの利用はアカウント登録不要です。
GTmetrix にアクセスしたら、そのまま「Enter URL to Analyzed…」枠に計測したいページのURLを貼り付け計測をスタートできます。GTmetrixの計測方法 で解説しました。
GTmetrixの無料アカウントを使うメリットは？
GTmetrixの無料アカウントに登録すると、サーバーの場所やブラウザを選択できるのがメリットです。
ただい無料アカウントに登録しても、東京サーバーは使えません。東京サーバーはProプラン限定です。
GTmetrixはスマホの最適化も分析できる？
はい、GTmetrixはスマホの最適化も分析できます。
無料アカウントに登録することで、利用できるブラウザが増えます。ブラウザ選択で（）内をAndroidなどにすることでスマホ表示におけるサイトの分析が可能です。
またモバイルサイトに特化した最適化案を受け取りたいなら、 Test My Site という別ツールの利用もおすすめです。全17ページの最適化案をGET！Test My Siteの使い方 で詳しく解説しました。
まとめ
GTmetrixの使い方と用語解説をしました。
GTmetrixを使うことでページ表示速度が遅い要因を突き止められます。問題を特定することで最適化し、ユーザー体験を改善できるでしょう。以下を復習し、ぜひ表示速度の改善に取り組みましょう。
画像の圧縮をしたり、人気のWordPressテーマを使ったりしても表示速度が改善されないならサーバーが遅い可能性が高いです。関連記事から速度の速いサーバーを探しましょう。
コメント