WordPressが重い・遅い対策①：第三者コードGoogle AdSenseの遅延読み込みで高速化

この記事の読了目安時間：5分⇒手順など丁寧に書いたため、お急ぎの方は目次の見出しからお好きなところにジャンプしてください。

先日の記事では、不正クリック（アドセンス狩り）対策を施した通常ページ＆AMPページ両対応のGoogle AdSense広告の貼り方について、ご紹介しました。

「【保存版】アドセンス広告の通常＆AMPページ両対応、不正クリック対策設定手順【AFFINGER5】」

しかし、多くの方と同じく、Google AdSense広告を表示させた途端、サイトの表示スピードが一気に遅くなり、GoogleのPageSpeed Insightsでテストしたら、モバイル点数がなんと30点しかありませんでした（PCは80点台）。

そこで、ほぼあらゆる高速化対策を試して、何とかモバイル70点前後、PC90点前後に回復したので、効果のあった対策をピックアップしていきます。

今回は一番効果が大きかった、第三者コードの代表格であるGoogle AdSenseの遅延読み込みで30点以上改善した方法をご紹介します。

この記事の信頼性

ゆーさん

この記事を書いている僕（@Arc_to_Future）は、WEBサイト管理者養成コース（3ヶ月間フルータイム）でコーティング及びWordPressでのサイト構築ノウハウなどを学んだ後、見本となるサイトをいろいろ研究したり、日々研鑽中！

なお、当ブログは7記事でGoogle AdSense申請・翌日審査通過し、Amazonアフィリエイトの審査にも1発合格しており、共に収益を上げることができています。

Google AdSense の遅延読み込み方法（不正クリック対策なし）

まず最初に、参考にした2つの記事のやり方をピックアップしながら、対策のポイントと手順をご紹介します(不正クリック対策なし)。

不正クリック（アドセンス狩り）とは、広告をわざと何度もクリックして、Google AdSenseのプログラムポリシーの違反行為をしたとして、Googleからペナルティ、最悪の場合アドセンスアカウント停止までに追い込む悪質行為です。

Google AdSense の遅延読み込み対策のポイント

今回のGoogle AdSense の遅延読み込み対策を講じる際に、以下の2つの記事を参考にしました。

・バグ取りの日々： Google AdSense の遅延読込みでページ表示速度を改善

・トイレのうず：遅延読み込みでGoogle AdSenseを貼っていてもPageSpeed Insightsの点数を上げる

ポイントを要約すると、JavaScriptや画像などをデータを読み込んで表示させるGoogle AdSenseはどうしても重たくなるため、最初からGoogle AdSenseの読み込みを止めて、スクロールなどユーザーが操作した時はじめてGoogle AdSenseのJavaScriptコードを読み込んで広告を表示させます。

これにより、ユーザーが実際ページを開く際も、GoogleのPageSpeed Insightsも遅く感じずに、しかもアドセンス広告もスムーズに表示されることができます。

では、実際にどのように設定していくか見てみましょう。

Google AdSense の遅延読み込み設定手順①：読み込みコード(Script部分)を削除

以下の図のような、Google AdSenseの広告コードの中、

のような読み込みコード部分があるので、これを自分のWordPressから削除します（複数入れた場合、全て削除します）。

僕みたいに、直接HTMLの<head>内やfunction.php経由でアドセンス広告コードを埋め込まずに、Code Snippetsプラグインを経由にした場合の操作方法は記事後半に記載しております。

グーグルアドセンスの記事内広告コード

Google AdSense の遅延読み込み設定手順②：`</body>` 直前に遅延読み込み関数を読み込む

ステップ①でScript部分の読み込みコードを削除したら、以下のコードをfunction.php（一番下などの場所）に追加して、WordPressの </body> 直前に読み込みます。

//adsbygoogle.jsの遅延読み込み
function my_register_ads_script(){
	if( is_single() ){
		wp_register_script( 'adsbygoogle-js', false, array(), false, true );
		wp_enqueue_script( 'adsbygoogle-js' );
		//JavaScript参考
		//https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html
		$ga_js = <<< EOF
!function(e,t){var n=!1;function o(){!1===n&&(n=!0,t.removeEventListener("scroll",o),t.removeEventListener("mousemove",o),t.removeEventListener("mousedown",o),t.removeEventListener("touchstart",o),function(){var t=e.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var n=e.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}())}t.addEventListener("scroll",o),t.addEventListener("mousemove",o),t.addEventListener("mousedown",o),t.addEventListener("touchstart",o),t.addEventListener("load",function(){0==e.documentElement.scrollTop&&0==e.body.scrollTop||o()})}(document,window);
EOF;
		wp_add_inline_script('adsbygoogle-js', $ga_js, 'after');
	}
}
add_action( 'wp_enqueue_scripts', 'my_register_ads_script', 100 );

Google AdSense の遅延読み込み設定手順③：関連するドメインを事前接続させる(DNSプリフェッチ)

以上でGoogle AdSenseの遅延読み込み設定自体は完了ですが、さらにGoogle AdSenseに関連するドメインを事前接続させることにより、広告の読み込みがもう少し早くなるため、以下のコードをまたfunction.php に追加します。

//DNSプリフェッチ
function add_resource_hints( $hints, $relation_type ) {
if( is_single() ){
if ( 'dns-prefetch' === $relation_type ) {
$hints[] = '//lh3.googleusercontent.com';
$hints[] = '//pagead2.googlesyndication.com';
$hints[] = '//adservice.google.co.jp';
$hints[] = '//adservice.google.com';
$hints[] = '//googleads.g.doubleclick.net';
}
}
return $hints;
}
add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

これで、Google AdSense の遅延読み込み設定が完了となりました。

ただし、これは不正クリック（アドセンス狩り）対策をしていないGoogle AdSenseの広告コードの遅延読み込み方法です。

僕みたいに、不正クリック対策として、「AdSense Invalid Click Protector」プラグインを導入し、さらに直接function.phpファイルをいじらず、「Code Snippets」プラグインを経由した場合の遅延読み込み設定方法は次となります。

Google AdSense の遅延読み込み方法（不正クリック対策付き）

前回記事「AdSense Invalid Click Protector」などの導入・設定おさらい

まず、前回の記事（「【保存版】アドセンス広告の通常＆AMPページ両対応、不正クリック対策設定手順【AFFINGER5】」）について、簡単におさらいします。

「AdSense Invalid Click Protector」プラグインの導入・設定

まずは「AdSense Invalid Click Protector」プラグインの新規追加です。

不正クリック対策プラグイン「AdSense Invalid Click Protector」を追加

AdSense Invalid Click Protectorの設定画面（私の設定例）

AdSense Invalid Click Protectorの設定画面

「Code Snippets」の導入・設定

通常ではGoogle AdSenseの広告コードをWordPressに追加するには、「function.php」ファイルをいじる必要がありますが、操作が間違えるとサイトが真っ白になったりする危険性があるので、その代わり「Code Snippets」というプラグインを導入することによって、回避できます。

個別phpファイルを新規作成するCode Snippetsプラグインを追加

Code Snippetsプラグインで、グーグルアドセンスで取得した記事内広告コードを不正クリック対策プラグインAdSense Invalid Click Protectorを経由させる個別phpファイルを新規作成します。

Code Snippetsプラグインで個別phpファイルを新規作成

真ん中の大きい赤枠のコードは以下の通りです。

function ad01Func() {
if( aicp_can_see_ads() ) {
$adCode = '
<div class="aicp">
＞＞ここに広告ユニットを貼り付ける＜＜
</div>';
return $adCode;
} else {
return '<div class="error">広告の表示がブロックされています。</div>';
}
}
add_shortcode('ad01', 'ad01Func');

これで、クリック対策が施されたアドセンス広告のショートコード（第21行にある「ad01」「ad01Func」）ができたわけです。

不正クリック対策済みのGoogle AdSenseコードの遅延読み込み方法（Code Snippetsプラグイン経由）

上の図にある、Code Snippetsプラグインで作成したphpファイルの第5行の、

を削除して、

add_shortcode('ad01', 'ad01Func');

の下に、

//adsbygoogle.jsの遅延読み込み
function my_register_ads_script(){
	if( is_single() ){
		wp_register_script( 'adsbygoogle-js', false, array(), false, true );
		wp_enqueue_script( 'adsbygoogle-js' );
		//JavaScript参考
		//https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html
		$ga_js = <<< EOF
!function(e,t){var n=!1;function o(){!1===n&&(n=!0,t.removeEventListener("scroll",o),t.removeEventListener("mousemove",o),t.removeEventListener("mousedown",o),t.removeEventListener("touchstart",o),function(){var t=e.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var n=e.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}())}t.addEventListener("scroll",o),t.addEventListener("mousemove",o),t.addEventListener("mousedown",o),t.addEventListener("touchstart",o),t.addEventListener("load",function(){0==e.documentElement.scrollTop&&0==e.body.scrollTop||o()})}(document,window);
EOF;
		wp_add_inline_script('adsbygoogle-js', $ga_js, 'after');
	}
}
add_action( 'wp_enqueue_scripts', 'my_register_ads_script', 100 );

//DNSプリフェッチ
function add_resource_hints( $hints, $relation_type ) {
  if( is_single() ){
    if ( 'dns-prefetch' === $relation_type ) {
        $hints[] = '//lh3.googleusercontent.com';
        $hints[] = '//pagead2.googlesyndication.com';
        $hints[] = '//adservice.google.co.jp';
        $hints[] = '//adservice.google.com';
        $hints[] = '//googleads.g.doubleclick.net';
    }
  }
    return $hints;
}
add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

を追加します。

完成版として、以下の通りになります。

function ad01Func() {
if( aicp_can_see_ads() ) {
$adCode = '
<div class="aicp">

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>';
return $adCode;
} else {
return '<div class="error">広告の表示がブロックされています。</div>';
}
}
add_shortcode('ad01', 'ad01Func');

//adsbygoogle.jsの遅延読み込み
function my_register_ads_script(){
	if( is_single() ){
		wp_register_script( 'adsbygoogle-js', false, array(), false, true );
		wp_enqueue_script( 'adsbygoogle-js' );
		//JavaScript参考
		//https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html
		$ga_js = <<< EOF
!function(e,t){var n=!1;function o(){!1===n&&(n=!0,t.removeEventListener("scroll",o),t.removeEventListener("mousemove",o),t.removeEventListener("mousedown",o),t.removeEventListener("touchstart",o),function(){var t=e.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var n=e.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}())}t.addEventListener("scroll",o),t.addEventListener("mousemove",o),t.addEventListener("mousedown",o),t.addEventListener("touchstart",o),t.addEventListener("load",function(){0==e.documentElement.scrollTop&&0==e.body.scrollTop||o()})}(document,window);
EOF;
		wp_add_inline_script('adsbygoogle-js', $ga_js, 'after');
	}
}
add_action( 'wp_enqueue_scripts', 'my_register_ads_script', 100 );

//DNSプリフェッチ
function add_resource_hints( $hints, $relation_type ) {
  if( is_single() ){
    if ( 'dns-prefetch' === $relation_type ) {
        $hints[] = '//lh3.googleusercontent.com';
        $hints[] = '//pagead2.googlesyndication.com';
        $hints[] = '//adservice.google.co.jp';
        $hints[] = '//adservice.google.com';
        $hints[] = '//googleads.g.doubleclick.net';
    }
  }
    return $hints;
}
add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>

の中にある「XXXXXXXXXXXXXXXX」と「XXXXXXXXXX」はご自身のアドセンスコードの番号に置き換えてください。

不正クリック対策済みのGoogle AdSenseコードの遅延読み込み方法（直接「function.php」ファイルに追加）

もし、Code Snippetsプラグインを使いたくない場合、以下のコードを「function.php」ファイル（AFFINGER5だと子テーマの「function.php」ファイル）の一番下辺りに追加してもいいです。

/// 不正クリック対策を施したグーグルアドセンス広告
function ad01Func() {
if( aicp_can_see_ads() ) {
$adCode = '
<div class="aicp">

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>';
return $adCode;
} else {
return '<div class="error">広告の表示がブロックされています。</div>';
}
}
add_shortcode('ad01', 'ad01Func');

//adsbygoogle.jsの遅延読み込み
function my_register_ads_script(){
	if( is_single() ){
		wp_register_script( 'adsbygoogle-js', false, array(), false, true );
		wp_enqueue_script( 'adsbygoogle-js' );
		//JavaScript参考
		//https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html
		$ga_js = <<< EOF
!function(e,t){var n=!1;function o(){!1===n&&(n=!0,t.removeEventListener("scroll",o),t.removeEventListener("mousemove",o),t.removeEventListener("mousedown",o),t.removeEventListener("touchstart",o),function(){var t=e.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var n=e.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}())}t.addEventListener("scroll",o),t.addEventListener("mousemove",o),t.addEventListener("mousedown",o),t.addEventListener("touchstart",o),t.addEventListener("load",function(){0==e.documentElement.scrollTop&&0==e.body.scrollTop||o()})}(document,window);
EOF;
		wp_add_inline_script('adsbygoogle-js', $ga_js, 'after');
	}
}
add_action( 'wp_enqueue_scripts', 'my_register_ads_script', 100 );

//DNSプリフェッチ
function add_resource_hints( $hints, $relation_type ) {
  if( is_single() ){
    if ( 'dns-prefetch' === $relation_type ) {
        $hints[] = '//lh3.googleusercontent.com';
        $hints[] = '//pagead2.googlesyndication.com';
        $hints[] = '//adservice.google.co.jp';
        $hints[] = '//adservice.google.com';
        $hints[] = '//googleads.g.doubleclick.net';
    }
  }
    return $hints;
}
add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>