アドセンス広告ありでもサイトスピードを高速化できる方法【遅延読込が簡単】

こんな悩みにお答えします。

サイトスピードが低いと、読者にストレスを与える原因にも。

その原因は、Googleアドセンスの広告かもしれないです。

特に、トップページにアドセンス広告を貼っているサイトは、速度低下が顕著です。

とはいえ、ちょっとした工夫で、広告を貼ったままサイトスピードを高速化できるんです。

Googleアドセンス広告は、サイトが著しく重くなる

自動広告、ユニット広告のどちらもサイトの速度を低下させる原因となります。

なぜなら、Googleアドセンスの広告は、自分のサイト外からコードを読み込むため、表示に時間が掛かるからです。

試しにサイトの速度をPageSpeed Insightで調べてみてください。

トップページでアドセンスを使っていた場合は「第三者コードの影響を抑えてください」と計測結果の画面から指摘されます。

要するに、アドセンスの広告重たいからどうにかしなさい！って言われるんです。

実際に、私のブログもトップページにアドセンス広告を使用していたため、サイトが非常に重くなっていました。

画像の圧縮やリサイズも人並みにはやっていましたが、さすがにノロマすぎますね。

しかも、私の使っているSWELLはサイトスピードが非常に速いと言われているテーマ。

なんでこんなに遅いんだろうと、いつも嘆いていました。泣

Googleアドセンス広告を外したら、抜群に速くなった

試しにアドセンス広告を外したところ、サイトスピードが劇的に改善しました。

30台から一気に70台ですからね...

どんだけ重いんだよ...ってなりました。

ですが、アドセンス広告を一番見られる場所って、やはりトップページなんですよね。

トップページにアドセンスを貼れないのは痛すぎる...

けれど読者のストレスも極力無くしたい...うーん...

私はブログを5ヶ月間運営してきて、アドセンスの収益はうまい棒200本程度になっており、トップページから広告を外す不安は拭えませんでした。

そこで、アドセンス広告自体を高速化することはできないのか？

と考えたのです。

アドセンス広告の遅延読込で、簡単に解決した

高速化の鍵は、まさかの遅延読込でした。

遅延読込とは、対象の読込をあえて遅らせる方法です。

高速化と遅延、一見矛盾してそうですが、明確な理由があります。

PageSpeed Insightで見られるのは、ファーストビューまでの速度

アドセンス広告を遅延読込させることで、ファーストビューよりも遅れて広告が表示されます。

つまり、ファーストビューに影響を与えずに広告を表示できるのです。

ファーストビューに影響を与えないことで、ページスピードが改善されるという仕組みですね。

遅延読込は、SWELLにも標準の高速化機能として備わっているのですが、遅延読込できるのは自分のサイト内の部分だけです。

おそらく、他のテーマでも同様かと思います。

アドセンス広告を遅延読込させる方法

アドセンス広告を遅延読込をさせた結果、上記の画像の通りサイトスピードが改善されました。

今までモバイル30台だったことを考えると、かなり大きな効果を発揮してますね。

では、どうやったら遅延読込できるかについて解説していきます。

今回の方法は、toshi様のサイトを参考にさせていただきました。

HTMLをいじるので、念のためバックアップを取ってください。
また、テーマによって動作が不安定になる可能性もあるかもです。
設定後は必ずアドセンス広告の挙動をチェックしてください。

①不要なコードを削除する

Googleアドセンスの広告を貼るために必要な、<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> の部分を全て削除してください。

アドセンスコード(削除前)

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

アドセンスコード(削除後)

<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

複数のアドセンス広告を貼られている方は、それぞれに同じ作業を行ってください。
全てのアドセンスコードを変更しないと、設定が反映されません。

疑問：アドセンスのコードを改変するのって大丈夫なの？

私も気になっていた部分ですが、遅延読込をGoogleは禁止していないとのことでした。

一般的には、この広告コードをそのままコピーして貼り付けることをおすすめしますが、ユーザー エクスペリエンスの向上のために、コードの改変が不可欠になる場合もあります。

https://support.google.com/adsense/answer/1354736?hl=ja

不安な方は、引用のリンク先のヘルプフォームを読んでみてください。

②遅延読込用のコードを貼り付ける

遅延読込用のコードは、Qwert.workさんのスクリプトソースをお借りします。

リンク先にて、スクリプトソースをコピーしたら、</body> の直前にコードを貼り付けます。

</body>直前へコードを貼る場所はテーマによって異なるため、ご自身の使用テーマの場所を調べてみてください。

SWELLの場合

カスタマイズ→高度な設定→</body>直前の場所にコードを貼り付けてください。

後は、ファイルを更新すれば終了です。
お疲れ様でした。

私自身、様々なブログで紹介されていた遅延読込コードを試しましたが、Qwerty.workさんのスクリプトソースが一番実用的で効果を実感しました。

本来、遅延読込コードを設定すると画面をスクロールしなければ広告が表示されません。

ファーストビューに広告がある場合、スクロール後に広告が表示されると、少し違和感を感じてしまいます。

しかしQwerty.workさんのコードを使うと、何もしなくても3秒後に広告が表示される設定なんですよね。

限りなく違和感が消えて、自然な感じで広告が表示されます。

特に、PCのファーストビューにアドセンス広告を設定している方も多いと思うので、是非試してみてください。

まとめ：サイトスピードに悩んだ時は、遅延読込が効果抜群

遅延読込のサイトスピードの改善効果は、今までのどの施策に比べても一番効果を実感しました。

コードを少しいじるだけで劇的にサイトスピードが改善されるので、Googleアドセンスの広告を使っている方に本当にオススメの設定です。

私自身、自分のブログのサイトスピードが全然まともな速度にならず、数ヶ月悩んでいたので、サイトスピードに悩む方の気持ちがすごく分かります。

私と同じ悩みを持った方へ、今回の記事がお役に立てれば幸いです。