Adsense(アドセンス)とページ高速化の両立

アドセンス広告をブログに入れるとページ表示速度が遅くなり、「PageSpeedInsights」でのスコアが下がってしまいます。

いいえ、近年のモバイルファースト指向や、2021年に実施が計画されている"GoogleUpdate"、通称「Core Web Vital Update」により、ページ表示速度は検索順位に大きく影響を及ぼすこととなります。
あまりにも

重たい

遅い

サイトはブラウザバックしますよね。
Google検索はユーザーファーストなので、当然、改善を要求してくるわけです。

その為、どうにかしてページ表示速度及びスコアを向上させたいところです。
それらの向上はに、「Adsense広告を外す事」が最も手っ取り早くて簡単な方法です。
Adsense以外で収益化できている場合は、それも有効打です。
しかし、そうでない筆者はその手を打てません。
そこで、本記事では「収益性を維持または向上させつつ、ページ表示速度も向上させる」事ができないか、試行錯誤した

内容

結果

についてお話していこうと思います。

現在のアドセンスは非同期化されており、 同期状態より幾分かはページ読み込み時間への影響を減らされています。
しかし、それでも「かなり重たい」という現状があります。
そこで、Adsense軽量化方法として一般的に使われる方法が「LazyLoad」です。

LazyLoadはどういうものかというと、画像や動画等を挿入している位置までスクロールした時に処理を開始させ、逆に、その位置までスクロールされるまでは処理を行わないという遅延スクリプトです。
GoogleAdsenseの遅延処理には、一般的に、このLazyLoadスクリプトが用いられます。

大体あっています。
しかし、この方法にはデメリットもあります。

Adsenseヘルプコミュニティによれば、

ユーザーエクスペリエンスのための"適切な"改変はOK

「広告主が意図しない表示」をされた場合、BANされる可能性が高い

と書かれています。
適切にlazyloadを実装できる知識とスキルが無い人にとっては、 アドセンスアカウントのBANも有りうる「非常にリスキーな方法」ということです。

ページ高速化とアドセンスについて - AdSense Community

そうなんです。
きっと、

単純に目的がAdsense広告の遅延読込のみ

広告の表示が崩れない仕組み

であれば問題無いという事だと思います。
しかし、LazyLoadのスクリプトには色々な物があり、他の方のブログ記事を参考にするとしても、知識が無い内は、万が一のことを考えれば使わない方が良いかもしれません。

アドセンス広告のLazyLoad(遅延読込)実装には、それ相応の知識が必要であり難しいです。
そこで、筆者は"スクリプトの実行"そのものを後回しにさせればいいではないかと、筆者は思いつきました。

確かに、LazyLoadを使ったAdsenseの遅延読込も「スクリプト(Adsense広告)を後回しする方法」です。
ですが、その方法は「スクリプト(LazyLoad)によるスクリプトの遅延読込」と、間接的なものです。
それとは別に、「defer」という方法があります。

通常、HTMLの解析中にスクリプトが見つかった場合、HTMLの解析を一時中断してスクリプトの実行を行います。
Adsenseなどの外部スクリプトの場合も同様です。
スクリプトの実行が終わるまで、HTMLの解析をブロックしてしまうので「PageSpeedInsight」のスコアが下がってしまう原因となります。
PageSpeedInsightのスコアは、ページ全体のHTML解析が週慮するまでのものです。
そこで、HTML解析終了までは、Ａdsenseなどの重たいスクリプトの読込をブロックさせるという点では

LazyLoad

defer

の両方とも共通しています。

いいえ、スクリプトの開始タイミングが異なります。
LazyLoadの場合は、

指定位置までスクロールした時

指定位置にマウスカーソルを移動させた時

etc...

等のイベント時にスクリプトを開始します。
一方で、deferはHTML解析終了直後にスクリプトの読込を開始します。

そういう事です。
しかし、デメリットもあります。

「defer」は、HTML解析終了後に読込を開始します。
当然、その頃には訪れたユーザーは、ファーストビューより下側までスクロールしています。

そういう事です。
HTML解析に時間が掛かるほど、ユーザーに見られる広告数が減少します。
その結果、収益性が低下してしまう可能性があります。
一方、LazyLoadの場合は、ユーザーのイベントで実行されるので収益性の低下は、"defer"と比較して小さいと考えられます。

Adsenseでの遅延読込に関しては、ほとんど「LazyLoad」に関する記事ばかりなため、「Adsense defer」に関する情報が非常に少ないです。
そのため、Adsenseヘルプコミュニティで質問してみました。

Adsenseのスクリプトを"defer"で遅延読込させる事は、

「Adsenseコード改変」ではある

Adsenseのコード改変は「認められたもの」に限る

"defer"は認められないものか否かは分からない

という主旨の回答をいただきました。

ページ高速化とアドセンスについて - AdSense Community

そういう事になりますね。
しかし、ポリシー違反ではない場合、LazyLoadと比較して、知識不要かつ簡単に遅延読込を実装できます。
それに、筆者のブログではファーストビューに広告を設置していないので、収益性の低下については考える必要はそもそも無いです。

LazyLoadやdeferで、アドセンスを軽量化することができ、PageSpeedInsightsのスコア改善に繋げられます。
しかし、これらの方法には

収益性の低減

アドセンスアカウントのBAN

につながるリスクも兼ね揃えています。

そうですね。
万が一を考えて、"今"は、諦めるしかありません。
では、Adsenseを利用している以上、「ページ表示速度が遅くなることは妥協しなければならないのか？」というと、そういう訳でもありません。

確かに、今後の情報にも期待です。
それとは別に、

年々スマホの性能が向上している

もうじき5G回線の時代がやってくる

ので、ページ表示速度については、"余程"重たくなければ、気にしなくても良い時代がやってくるかもしれません。 なので、それまでの間は、Adsense以外の、他部分を工夫してスコアを改善していきましょう。
どうしても"defer"や"LazyLoad"を使って、ページ表示速度を向上させて、スコアを改善したい場合は、自己責任でお願いします。