【事例紹介】AdSenseの遅延読み込みでFCPを劇的に改善した話

2025年1月30日

今回はCLSに関する問題をAdSenseの遅延読み込みで解決した事例を紹介いたします。

CLSに関する問題: 0.25 超(モバイル)

[画像:改善前のPageSpeed Insightsの結果]
画像1:ユーザー環境で評価したWebサイトのパフォーマンス

先日、Promapediaのサーチコンソールを確認したところ、「CLS に関する問題: 0.25 超(モバイル)」という警告が表示されていました。

CLSとはCumulative Layout Shiftの略で、ページのレイアウトの安定性を示す指標です。CLSが悪いと、ユーザーがページを閲覧している際に、コンテンツが突然ずれて表示されるため、ユーザーエクスペリエンスを損なう可能性があります。

PageSpeed Insightsで確認したところ、画像1が示すように、CLSは0.48という数値を出しており、改善が必要でした。
しかし、Promapediaでは、以前CLSの問題に徹底的に取り組み、改善を行った経緯があります(その時の対応については、下記の記事をご覧ください)。

そのため、これ以上CLSを改善する余地がなく、困り果ててしまいました。

デスクトップ版では問題なし

奇妙なことに、このCLSに関する問題は、スマートフォン版のPromapediaでのみ発生していました。
デスクトップ版では問題はなく、PageSpeed Insightsで検証しても、CLS、つまりコンテンツのズレは発生していませんでした。

やはりCLSは良好

[画像:改善前のPageSpeed Insightsの結果 その1]
画像2:改善前のPageSpeed Insightsの結果。CLSは0だが、FCPは6.3秒。

さらに、画像2が示すように、PageSpeed Insightsのパフォーマンスを見ても、CLSは発生しておらず、CLSの値は「0」、つまり画面はまったくズレていないという結果が出ていました。

画像1と画像2は同じような指標を使っていますが、違いをまとめると以下のようになります。

  • 画像1:数か月間のユーザー環境のパフォーマンスに基づいた結果
  • 画像2:PageSpeed Insightsを使った時点の、PageSpeed Insightsが用意した検証環境での結果

つまり、画像1でCLS0.48という結果がでて、画像2でCLS0という結果がでていることは、ユーザーの環境では画面のズレが発生しているけれど、検証環境では発生していないということを意味しています。

謎かけのような状況に、ほとほと困り果ててしまいました。

気になるレンダリング遅延

一方で、PageSpeed Insightsは、Webサイトに深刻なレンダリング遅延が発生していることも示していました。
さきほどの画像2では、First Contentful Paint(FCP)は6.3秒という数値を示していました。

FCPは、ページが読み込まれてから、最初のコンテンツが画面に表示されるまでの時間を計測したものです。つまり、通信速度の良くない環境だと、Promapediaのコンテンツが表示されるまで6.3秒もかかっていたことになります。

PageSpeed Insightsは低速の4G環境で検証しているため、日本ではなかなか考えられないような環境ではありますが、GoogleのWebサイトを評価するポイントになっているため、対応が必要でした。

FCPがCLSの数値に影響?

[画像:改善後のPageSpeed Insightsの結果 その2]
画像3:時間経過に伴うWebサイトの状況

PageSpeed Insightsでは、画像3のように、ページ読み込みの時間に応じて、Webサイトにどのような画面が表示されているかを確認することができます。

画像3が示すように、Promapediaを低速の4G環境で見ると、真っ白な画面が続き、そして急に画面が表示されます。
ここから「FCPの遅延が、CLSと見なされ、CLS0.48という結果につながったのではないか」という仮説を導き出しました。

再度画像1と画像2を比べると、画像1はFCPが1秒であるのに対し、画像2では6.3秒になっており、齟齬が発生しています。
おそらく、あまりにも表示遅延が激しいため、画面のズレだと認識されたのではないでしょうか。

突然のレンダリング遅延、原因は?

これまで問題にならなかったレンダリング遅延が突如発生した原因を探る中で、唯一心当たりがありました。それは、最近変更したGoogle AdSenseの設定です。

PromapediaはGoogle AdSenseの広告収入によって運営されています。サーチコンソールのエラーが表示される少し前に、自動広告の「ページ内フォーマット」の「広告設定を調整する」という機能をオンにしていました。

これによって、Google AdSenseが処理する時間が増え、コンテンツを表示させるまでに時間がかかるようになり、レンダリング遅延につながったのではないかと考えました。

AdSenseの遅延読み込みで解決!

そこで、対処法として、Google AdSenseの広告を遅延して表示させるように変更しました。具体的には、以下のJavaScriptコードを記述しました。

window.addEventListener('load', function() {
  (adsbygoogle = window.adsbygoogle || []).push({});
});

これをJavaScriptをまとめて書いているbodyタグの閉じタグ直前に記述し、再度PageSpeed Insightsで確認したところ、FCPは1.1秒にまで改善しました。

[画像:改善後のPageSpeed Insightsの結果 その1]
画像4:改善後のPageSpeed Insightsの結果

やはり、Google AdSenseが表示遅延の原因だったようです。

[画像:改善前のPageSpeed Insightsの結果 その2]
画像5:改善後の表示画面

表示速度の改善は画像3と画像5を比べると一目瞭然です。ページの読み込み後、すぐにWebサイトのコンテンツがズレなく表示されていることがわかります。

まとめ

Google AdSenseは簡単に広告収入が得られる便利なツールですが、設定ひとつで提供元のGoogleが考えるWebの指標を悪化させてしまう可能性があります。

Webサイトを運営する際は、定期的にサーチコンソールを確認し、CLSやFCPなどの指標にも注意を払いながら、改善を繰り返していくことが大切です。