AdsenseをLazyLoad以外で遅延読込させてページ表示速度を改善させたい

2020/06/23

Adsense

t f P L

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

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

Adsenseって重たいのね・・。
でも、ページ表示速度やスコアは、SEOに直結しないんじゃ・・?

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

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

    確かに・・、時間は有限だからね~。

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

  • 内容
  • 結果
  • についてお話していこうと思います。

    アドセンスとページ高速化の両立の方法

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

    LazyLoadって何?

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

    つまり、無駄な処理をさせない分、表示速度が上がるっていう仕組みね。

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

    非常にリスキーな方法

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

  • ユーザーエクスペリエンスのための"適切な"改変はOK
  • 「広告主が意図しない表示」をされた場合、BANされる可能性が高い
  • と書かれています。
    適切にlazyloadを実装できる知識とスキルが無い人にとっては、 アドセンスアカウントのBANも有りうる「非常にリスキーな方法」ということです。

    ページ高速化とアドセンスについて - AdSense Community
    適切って・・何が適切なのか全然わからないよね。

    そうなんです。
    きっと、

  • 単純に目的がAdsense広告の遅延読込のみ
  • 広告の表示が崩れない仕組み
  • であれば問題無いという事だと思います。
    しかし、LazyLoadのスクリプトには色々な物があり、他の方のブログ記事を参考にするとしても、知識が無い内は、万が一のことを考えれば使わない方が良いかもしれません。

    アカウントBANされたら元も子もないもんね。

    deferでアドセンス広告のスクリプト実行を後回しにさせる

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

    LazyLoadもスクリプトを後回しにするものじゃないの???

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

    deferって何?
    LazyLoadと何がちがうの?

    LazyLoadとdeferの違い

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

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

    同じってこと?

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

  • 指定位置までスクロールした時
  • 指定位置にマウスカーソルを移動させた時
  • etc...
  • 等のイベント時にスクリプトを開始します。
    一方で、deferはHTML解析終了直後にスクリプトの読込を開始します。

    なるほど、純粋な遅延読込っていう事ね!!。

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

    deferでAdsenseのスクリプトを遅延読込させるデメリット

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

    ファーストビュー内に広告を設定している場合は、ユーザーに見られないってことね。

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

    だから、Adsenseの遅延読込の主流は「LazyLoad」なのね・・。

    defer宣言でBANされる可能性は?

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

    どうだったの?

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

  • 「Adsenseコード改変」ではある
  • Adsenseのコード改変は「認められたもの」に限る
  • "defer"は認められないものか否かは分からない
  • という主旨の回答をいただきました。

    ページ高速化とアドセンスについて - AdSense Community
    つまり、実装するなら自己責任ってことね。

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

    今後、新しい情報に期待だね・・!!

    まとめ

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

  • 収益性の低減
  • アドセンスアカウントのBAN
  • につながるリスクも兼ね揃えています。

    万が一のことを考えたら諦めるしかないよ・・。

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

    今後情報が出てくるかもだもんね!

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

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

    [Blogger]Adsenseの自動広告を記事中の任意箇所に表示させる方法

    QooQ