「Google AdSense遅延読み込み化ツール」を使ってページを爆速化しよう

サイトパフォーマンスを大幅に改善することができるSEOツール「Google AdSense遅延読み込みツール」が公開されたので使い方と効果をご紹介します。
非常に簡単で効果的なSEO対策ですので実践してみてください！

使い方だけみたい場合は以下目次から飛んでください。

AdSenseを導入するとLighthouseスコア激落ち問題

なぜスコアが下がるのか？

Webアプリやブログで収益化しようとして、Google AdSenseをサイトに導入したのはいいものの、Pagespeed InsightsやLighthouseのスコアが劇的に低くなることがあります。

これは広告入札処理に時間がかかったり、読み込むJavascriptファイルが肥大だったりと言ったAdSense側の問題であり、サイト管理者の問題ではありません。

更に如何せんJSファイルが重いので、Javascriptを読み込むタグでasync属性で非同期読み込みしてもメインスレッドがブロックされた状態になり、Lighthouseスコアが激落ちするというわけです。

解決するロジック

解決するロジックとしては、AdSenseを読み込むタイミングを「ページ読み込み時」ではなく「ユーザーが操作した時」に遅延させるという手法です。

以下の動画を見ていただくとわかりやすいです。
Chrome DevToolsのNetworkタブで通信内容を表示しているものです。

通常はページ読み込み時に大量のAdSense広告アセットがロードされるのですが、これをスクロールイベント発生しない限り行わないことで読み込みを短縮しているわけです。
つまり、ページ読み込み時はAdSense広告アセットはロードされません。

使い方

それでは実際に速度低下を改善できるAdSense遅延読み込みコード生成ツールを使ってみましょう。

まずはAdSenseの設定画面でheadタグ内挿入コードを取得しましょう。

次にツールのページにアクセスして、先程取得したコードを貼り付けます。

あとは遅延読み込みコードを生成ボタンをクリックすると自動でコードが生成されます。
生成されたコードをコピーして、通常のAdSense同様にHTML内に貼り付けます。

WordPressテーマ「Cocoon」を使っている場合

WordPressの人気テーマ「Cocoon」を使っている場合は、上記のツールで作成したコードを貼り付けるだけではエラーが発生します。広告コードをテーマ内で加工しているためです。

以下のファイルの該当箇所をテーマファイルエディタで訂正することで対応できます。

<?php
　︙
//アドセンス共通スクリプトコード
define('ADSENSE_SCRIPT_CODE', ' let lazyloadads = false; window.addEventListener("scroll", function () { if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) { (function () { let ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client='.get_adsense_data_ad_client().'" crossorigin="anonymous"></script>'; let sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyloadads = true; } }, true)');
　︙

スコアが58点から99点に！

最後に実際に遅延読み込み舌効果をチェックしてみましょう。

もともと58点だったLighthouseスコアが99点になり、ページの爆速化が実現しました！

広告をそれほど入れていない場合は58点ほど低くなりませんが、それでも最低20点以上のスコア改善が実現すると思います。

非常に簡単かつ効果的な速度改善法なのでご参考にしてみてください。