Google AdSenseを遅延読み込みして高速化
サイト運営者にとって、自サイトの高速化は必須のテクニックとなります。
これが出来ないとGoogleのSEO的に良くないですし、そもそもページの読み込みが遅すぎるとユーザーが離脱してしまいます。
ユーザーが離れてしまうと、当然ながら収益も減少してしまいます。
これを防ぐため、今回の記事では「Google AdSense広告の遅延読み込み」を実装していきます。
ブログなどを運営している方で、AdSenseを設置していない人はほとんど存在しないと言っていいほどポピュラーな存在であるGoogle AdSense。
しかし、この絶対必須ともいえる広告は、実はサイトの読み込みにおいて超絶激重で非常にやっかいな存在です。
それでは、Google AdSense広告の遅延読み込みを導入する方法の前に、まずはAdSenseの影響を見て行きましょう。
AdSenseはどれほど重いのか
遅延読み込みの前に、まずはAdSenseをそのまま使っている場合の速度を計ってみました。
それが上記の画像。パフォーマンス得点は77点で、Total Blocking Time (TBT)は驚異の1,060ms。
当サイトは既にかなりの高速化と最適化を行っているので、その他の項目は意外と耐えています。
さらに細かい部分を見てみると、「JavaScript の実行にかかる時間の低減」「メインスレッド処理の最小化」「第三者コードの影響を抑えてください」の3つの項目が足を引っ張っていることがわかります。
その中でも、「第三者コードの影響を抑えてください」の詳細にはGoogle AdSense系のコードがみっちりと詰まっていますね。
こんな感じで、Google AdSenseは高速化を目指す同士にとって、邪魔でしかない存在です。
ここからは、いよいよ本題の、「Google AdSense広告の遅延読み込み方法」について、詳しく説明していきます。
Google AdSenseの遅延読み込み方法
作業①
Google AdSense広告の遅延読み込みは意外と簡単に実現できます。
まず、通常のAdSenseコードは以下のような形をしていると思います。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXX"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-XXXXXXXXXX"
data-ad-slot="8334198975"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>このコードの中から、以下の赤い部分を取り除きます。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXX"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-XXXXXXXXXX"
data-ad-slot="8334198975"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>赤いコードを消すと、下のような形になります。
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-XXXXXXXXXX"
data-ad-slot="8334198975"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>このようなコードはWordPressのウィジェットなどで設置していると思いますが、設置している旧型のコードを、今作った新しいコードに差し替えます。
実際に私が設置しているカスタムHTMLウィジェットでは、下のような感じになります。
私はカスタムHTMLで設置していますが、コードを貼れればなんでもいいので、私と同じやり方にこだわる必要はありません。
注意点としては、旧型のコードが一つでも残っていると、今回の遅延読み込みはうまくいきません。
必ず、全てのコードを新しい物へと置き換えてください。
削除したコードについて軽く説明すると、これはGoogle AdSenseを読み込むためのJavaScriptです。
オンラインからadsbygoogle.jsというJavaScriptコードを読み込む処理をするのですが、このadsbygoogle.jsが激重の原因です。
このadsbygoogle.jsを読み込むためのコードを削除することによって、ページを開いただけでは広告が読み込まれず、サイトを高速化できるというわけです。
作業②
それでは、作業のフェーズ2へ行きましょう。
<script>
// 一度だけ実行されるようにフラグを設定
var scriptAdded = false;
window.addEventListener('scroll', function() {
// スクロールが検知されたら実行
if (!scriptAdded) {
// 新しい script 要素を作成
var newScript = document.createElement('script');
newScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXX';
newScript.async = true;
// head 要素に追加
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(newScript);
// スクリプトが追加されたことを記録
scriptAdded = true;
}
});
</script>まず、上記のコードを丸ごとコピーして、「ca-pub-XXXXXXXXXX」の部分をご自身のAdSenseパブリッシャーIDに書き換え、テーマファイル「footer.php」の一番下に貼り付けます。
ここで言う一番下とは、</body>の直前です。
私はWordPressのテーマエディターで貼り付けており、下の画像のようになります。
このコードでは、サイトに訪れたユーザーがスクロールしたことを検知した瞬間に、adsbygoogle.jsを読み込み始めます。
これにより、サイトを開いてから何もアクションを起こさなければ広告は読み込まれず、AdSense広告のせいで読み込みが遅くなる問題を完全に解消できます。
この方法はコードをコピーして設置するタイプだけでなく、自動広告にも有効です。
一連の作業が終わったら、ご自身のサイトで動作確認をしてみてください。
ページを開き、少しスクロールしてみると広告が読み込まれるはずです。
遅延読み込みをした結果
Google AdSenseの遅延読み込みを実装したあと、Page Speed Insightsでサイトスピードを計測してみました。
その結果はご覧の通りで、パフォーマンススコアは100点、TBTは50msに激減しています。
細かい分析を見ても、「JavaScript の実行にかかる時間の低減」「メインスレッド処理の最小化」「第三者コードの影響を抑えてください」の3大項目は全て消えてなくなっています。
Google AdSenseがどれほど激重だったのか、よくわかる結果となりました。
うまくいかないときは
今回のやり方をやってみて、うまく遅延読み込みされなかったり、広告が表示されなくなってしまったときには、以下の項目をチェックしてみてください。
・作業①で削除すべきコードを削除できていない
・古い広告コードがまだサイト内に残っている
・作業① / 作業②にあるca-pub-XXXXXXXXXXを、自分のパブリッシャーIDに変えていない
・作業②のコードを、footer.phpの</body>の真上に置いているか
これらをチェックしてもうまくいかない場合、当サイトの運営者である結城に、DMにてお問い合わせください。
さらに追加の高速化方法
Google AdSenseの遅延読み込みで高速化したサイトを、さらに爆速にしたい方へ。
広告に次いで重い問題児が、Google Tag Managerです。
Google Tag Managerはサイトのトラフィックを管理するもので、Google Analyticsとかもこれで管理されています。
これがとんでもなく重たいため、Google AdSenseの遅延読み込みだけでは満足いく結果が得られない場合もあるでしょう。
そんな方のために、当サイトではGoogle Tag Managerの遅延読み込み方法も解説しています。
詳細は以下の記事で解説していますので、よろしければそちらも合わせてご覧ください。
#アドセンス 高速化 / #第三者コードの影響を抑えてください / #google tag manager 遅延読み込み