コンマ1秒縮める為のPageSpeed Insightsの使い方
著者情報
当サイトの著者です。2017年にWordPressを始め、1年2ヶ月でブログ月収100万円達成。これまで10社以上のサーバーを使いました。
PageSpeed Insightsを使いこなし、サイトの最適化をすればブログの表示速度を改善できる可能性があります。最適化すると、検索ユーザーが読みやすいページになり直帰率を下げられるかもしれません。
直帰率とは、ブログ読者が検索ページからブログを訪問後、すぐに検索ページに帰ること。直帰率が高くなる要因は様々だが、サイトの表示速度が遅いために検索ページに戻ることはサーバーやテーマ・プラグインの選定で改善できることが多い。
ただし、専門用語が多いPageSpeed Insightsの使い方を熟知し実践するのは難しいものです。とりわけブログ未経験者にとってはそう言えるでしょう。この記事ではPageSpeed Insightsの使い方と用語解説と改善方法を徹底解説しました。
PageSpeed Insightsによる当サイトの計測結果
PageSpeed Insightsによる当サイトの検索結果を公開します。モバイルスコアとパソコンスコアがあるので、両方とも確認なさってください。
| モバイルスコア | 71点 |
| パソコンスコア | 98点 |
PageSpeed Insightsの使い方
PageSeed Insightsの使い方を解説します。登録不要かつ無料で利用できるので、ぜひお試しください。
- STEP.1PageSeed Insightsにアクセス
まず PageSeed Insights にアクセスしてください。
- STEP.2サイトURLをコピー＆ペーストする
分析したいサイトのURLをコピーします。「ウェブページのURLを入力」にペーストしてください。
- STEP.3分析が完了するまでしばらく待つ
分析が完了するまで15秒ほど待ちましょう。計測時間はステータスバーの動きに示されます。
- STEP.4モバイルスコアとパソコンスコアをチェックする
分析が終わると、モバイルスコアとパソコンスコアが表示されます。
はじめに表示されるのはモバイルスコアです。
左上のタブがあります。
「パソコン」タブをクリックし、パソコンスコアもチェックしてください。
計測結果は多少の誤差があります。
また、誤差があるので小さなスコアアップは本当の意味で改善していないかもしれません。1度だけでなく時間を空け2，3回計測します。
PageSpeed Insightsでサイトを詳細に分析する
PageSpeed Insightsでサイトを詳細に分析しましょう。
モバイルスコアとパソコンスコア
PageSpeed Insightsはモバイルスコアとパソコンスコアがあります。両方確認するようにしましょう。
一般的に重要とみなされるのはモバイルスコアです。ほとんどのブログはスマホでアクセスされるからです。パソコンスコアが100点となってもモバイルスコアが低いならページ最適化の余地があります。
スコアの違いから明白ですが、モバイルとパソコンで詳細な分析結果が異なります。
Lighthouseとは、アプリやページを評価するGoogle拡張機能の1つ。パフォーマンスの計測以外にSEOや他の要素の評価を確認できる。
詳細な分析結果は改善したいデバイスに合わせ選びましょう。ブログのアクセスや広告成約の大多数がパソコンであるならモバイルスコアを軽視してはいけないものの、それほど気にする必要はありません。
スコアは3色で評価されます。
- 速い：90~100
- 平均：50~89
- 遅い：0~49
遅いスコアであれば、さっそく改善に取り組まねばなりません。
モバイルサイトのアクセスが多いサイト運営者など、モバイルサイトに特化したアドバイスが欲しいなら Test My Site の利用もおすすめです。全17ページの最適化案をGET！Test My Siteの使い方 をお読みください。
フィールドデータとOrigin Summary
フィールドデータとOrigin Summaryは実際のchormeユーザーから取得したデータです。フィールドデータは分析した特定ページのデータであるのに対し、Origin Summaryはサイト全体から取得したデータを扱っています。
ユーザーが利用するサイト全体の最適化を望むなら、Origin Summaryの数値を重視しましょう。LP（ランディぐページ）など特定ページを重点的に改善したいならフィールドデータを使えます。
フィールドデータとOrigin Summaryの各評価項目を解説しました。
- FCP：最初のコンテンツを読み込んだ時間
- SI：速度インデックス
- LCP：最大コンテンツを読み込んだ時間
- TTI：クリックなどユーザー操作が可能になった時間
- TBT：読み込みがブロックされた時間
- CLS：レイアウトのずれ幅
ラボデータ
ラボデータとはLighthouseで測定したデータです。
Lighthouseとは、アプリやページを評価するGoogle拡張機能の1つ。パフォーマンスの計測以外にSEOや他の要素の評価を確認できる。
ラボデータは、フィールドデータとorigin Summaryと違って自分のパソコンやサーバーで1回のみ測定された結果です。平均的なデータではなく、計測時の通信速度、サーバーの込み具合、利用するデバイスなどさまざま要素で数値が変動しやすいです。
ラボデータの評価項目は、フィールドデータとorigin Summaryと同じです。
- FCP：最初のコンテンツを読み込んだ時間
- SI：速度インデックス
- LCP：最大コンテンツを読み込んだ時間
- TTI：クリックなどユーザー操作が可能になった時間
- TBT：読み込みがブロックされた時間
- CLS：レイアウトのずれ幅
改善できる項目
改善できる項目はページ最適化のための改善方法を提案したものです。具体的に何をすればよいのか明確に指摘されます。
ただし、専門用語も多いうえ、改善に多大の時間を要する項目もあげられるので注意してください。改善の効果が大きな3項目にしぼり解説します。
最初のサーバー応答時間を速くしてください
最初のサーバー応答速度を速くしてください、と表示されればサーバーが遅いです。ページを表示させるために必要なデータを返すサーバーの速度が遅く、この速度がこの後の全動作に影響します。
スタートダッシュで遅れているため、その他の項目で頑張っても速い速度を取り返せない可能性が高いです。そのため、数ある 改善できる項目 のうち非常に重要度が高い項目と言えます。
とはいえ、サーバーの速度や処理を変えることはブログ運営者にできません。今のサーバーで改善することは難しいため、表示速度で定評のあるサーバーに乗り換えるのがおすすめです。
表示速度の速いおすすめサーバーは関連記事にまとめました。
効果的な画像フォーマット
効果的な画像フォーマット、が挙げられたら画像を圧縮しましょう。必要以上に高画質な画像を使っている可能性が高いです。ウェブページで必要とされる画質まで圧縮することで表示速度を改善できます。
画像を圧縮したいなら、専用のwebサービスやWordPressプラグインを活用してください。
- EWWW image optimizer（プラグイン）
- Compress JPEG ＆PNG images（プラグイン）
- Tiny PNG（webツール）
すでにたくさんの画像をブログで使っているなら、すべての画像を最適化できるEWWW image optimizerがおすすめです。
適切なサイズの画像
適切なサイズの画像が挙げられているなら、画像サイズを小さくしましょう。レスポンシブ画像を作る方法もありますが、 効果的な画像フォーマット 同様に画像圧縮ツールを使うのが便利です。
- EWWW image optimizer（プラグイン）
- Compress JPEG ＆PNG images（プラグイン）
- Tiny PNG（webツール）
これらのツールを使うと、画像サイズつまりデータ量が小さくなるので、より短時間で読み込めるようになります。
PageSpeed Insights分析結果が悪ければ高速サーバーを使おう
PageSpeed Insightsの分析結果が悪ければ高速サーバーを使いましょう。
無料サーバーや格安サーバーを使っているなら、表示速度の速い3社に乗り換えることで速度を大きく改善できるかもしれません。
3社ともWordPressかんたん移行機能があります。この機能を使えば、サーバー移転は簡単な入力内容とクリック操作でサーバー移転が完了します。
まとめ
PageSpeed Insightsを使いページの最適化をすれば表示速度を大きく改善できます。表示速度を改善することで、読者はもっと快適にブログを読めます。ページ滞在時間が増えたりPV数が増えたりするかもしれません。
次の分析項目を熟知し、サイト最適化をすすめましょう。
ブログが遅いままで良いことは何一つありません。WordPressテーマを変更したり画像を圧縮したりしても最適化されないなら、サーバー移転が有効です。