PageSpeed Insightsのスコアを36から90まで改善した方法

サイトの表示速度をPageSpeed Insightsで測定したら、思っていた以上にスコアが低かった！ということはありませんか。

表示速度が遅いとユーザーの離脱率も上がるだけでなく、検索順位にも影響するのでできるだけ改善したいですよね。

僕のサイトのスコアは一時期36と見事な赤点を叩き出したのですが、改善を重ねて90までスコアを伸ばすことができました。

本日はPageSpeed Insightsとは？からなぜスコアが重要なのか、そしてスコアを90まで改善した具体的な方法についてお伝えします。

スコアが低くてお悩みの方、ぜひご覧ください。

PageSpeed Insightsとは

PageSpeed Insights（ページスピードインサイト）はGoogleより提供されている、ウェブサイトのパフォーマンスに関するレポートと改善方法を確認できるツールです。

PageSpeed Insightsはその場ですぐ実行し、すぐ結果が帰ってきます。

なので測定→課題を確認→改善→再測定のサイクルをすぐ回せるのが嬉しいですね。

また競合のサイトのスコアも確認できるので、自身のサイトとの比較もしやすいです。

PageSpeed Insightsの実行はサーバへの負荷がかかります。過度に実施すると迷惑になるので気をつけましょう。

スコアの重要性

スコアを決める要素の一つにページ表示速度がありますが、ページ表示速度が遅くなるほどユーザの離脱率が上がると言われています。

Googleはページ読み込み時間と離脱率の関係について、以下の通り公表しています。

参考：https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

PageSpeed Insightsのスコアは大部分がページロードに影響するため、スコアを改善することでユーザの離脱率を下げる効果が期待できます。

PageSpeed InsightsのスコアはあくまでGoogleの指標に基づく良し悪しを判断したものであり、必ずしもスコアが良い＝ユーザ体験に優れているということではありません。

検索ランキングにも影響あり

2021年中ごろより、検索ランキングの評価基準にCore Web Vitals（コアウェブバイタル）が追加されることがGoogleより発表されています。

Core Web Vitalsって何？という方はこちらの記事をご覧ください。

PageSpeed InsightsのスコアはCore Web Vitalsを構成する要素で構成されています。

なので、スコア改善すると以下のメリットが生まれます。

ただし、Core Web VitalsがSEOに影響を与える度合いはあくまで補助的なものと見られており、あくまでコンテンツの質が最優先です。
その点を踏まえた上で、スコアの改善に着手していくことをおすすめします。

PageSpeed Insightsの改善方法

改善方法が表示されるので、基本的にはその指示に従って改善を進めます。

とはいえ「どこから手をつければよいかわからない！」と思っちゃいますよね。

なので、まずはこちらの考えに基づいて改善を進めてみることをおすすめします。

このサイトではWordpressテーマにTHE SONICを使ってるのですが、とにかく表示速度が早いので気に入っています。
lazyloadなどプラグインなしで高速化の設定ができるため、あまり苦労せずにサイト改善が実現できました。

THE SONICの良さについてはこちらのページで紹介しています。

効果のあった改善方法３つ

僕のサイトはモバイルで36と非常に低いスコアだったこともあり、様々な改善を重ねてきました。

結果、スコアを90まで改善することができました。

改善前

改善後

ここに至るまで色々試した中で、特に効果があったものを3つご紹介します。
ぜひ参考にしてみてください。

スコアが低い要因はサイトによって様々です。サイトによっては今回紹介する方法では改善が見込めない場合があります。
実際に改善する際は課題となる点を確認した上で適切な対応をとることをおすすめします。

アドセンス広告の遅延読み込み

サイト運営している方はGoogleアドセンス広告を掲載している方は多いのではないでしょうか。

収益化には欠かせないアドセンス広告ですが、読み込み時間を遅らせることでスコア改善が期待できます。

スコア改善で一番効果あったのがこれです。

具体的には、ページ内で表示されるアドセンス広告をスクロールして表示されたタイミングで読みに行くように修正しました。

これを実施することでスコアがだいたい30くらい変わりましたね。

画像圧縮＋WebP変換

ブログ運営していると画像が多くなってしまうので、画像の圧縮とフォーマットの変換を実施しました。

こちらはEWWW Image Optimizerというプラグインを使って実施しました。

元々PNGで保存していたのですが、これを機にWebPへの変換も実施。

WebPは一部のブラウザ非対応だったので変換を見送っていたのですが、最近EWWW Image Optimizerで非対応ブラウザでは元の画像を表示できるようになっていたので、思い切って変換してみました。

これでLCPが大きく改善しました。

ブログロゴ画像のサイズ指定

ブログの一番上に掲載されているロゴ画像。これのサイズをCSSで指定しました。

なぜこれを実施したかというと、ロゴ画像のサイズを可変にするとページ読み込み時にサイズ変換が実施されるため、CLSのスコアが下がっているように見えました。

なので、今回下記のCSSを追加することで、ロゴ画像のサイズを固定にしました。

意外とスコアが改善されたのと、Core Web VitalsであるCLSがこれ一発でGreennまで改善されたので、意外と侮れないなと思っています。

まとめ

本日はPageSpeed Insightsの改善方法の中で、特に効果のあった3つをご紹介しました。

スコアを改善するのは大事ですが、やりすぎるとユーザー体験を損なう可能性もあるので、実際の挙動とバランスを見ながら改善することをおすすめします。

改善方法の具体的な手順については順次更新していきたいと思います。

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