【爆速】アドセンス広告を遅延読み込みして表示速度を高速化する方法

2024/06/11

ページ表示速度が遅い・重い時は、アドセンスの遅延読み込みで高速化しましょう。

遅延読み込み(LazyLoad)の対策を実施すれば、広告による収益化とCore Web Vitalsに対応の表示速度を両立できます。

Adsenseの遅延読み込みで、PageSpeed Insightsスコアを改善する方法とは？

本記事は、ブログブートキャンプのブログの始め方-WordPressの高速化に関する内容となります。

レオ

アドセンス広告を設置すると、ページ表示速度が遅くなって困る… なんとか改善できない？

アレックス

アドセンスを遅延読み込みすれば、高速化が可能だ。技術的に詳しくなくてもコードのコピペでできるので挑戦してみよう。

本記事の対策で解決できる問題

使用していない JavaScript の削減
JavaScript の実行にかかる時間の低減
第三者コードの影響を抑えてください
レイアウトが大きく変わらないようにする

ジャンプできる目次

【広告主の開示】
※当サイトは、広告主から支払われる広告収入を主な収入源として運営を行っています。
※当サイトの記事では、商品・サービスの紹介に広告主のアフィリエイト広告を利用しています。
※記事で紹介した商品・サービスを購入すると、広告主から当サイトに報酬が支払われることがあります。

アドセンスを遅延読み込みする方法

アドセンスが原因でページが重い・遅い場合は、広告コードの遅延読み込みで解決可能です。

遅延読み込み(LazyLoad)とは、ファーストビューでは不要な要素の読み込みを遅らせる技術で、表示速度を高速化する効果があります。

アドセンスを遅延読み込みするための方法は簡単で、次のような2ステップの手順となります。

1. AdsenseコードのScriptタグを削除

まずは、Adsenseコードからadsbygoogle.jsを読み込んでいるScriptタグの部分を削除します。

やり方としては、Googleアドセンスの広告コードの先頭にある以下の記述を削除すればOKです。

削除するScriptタグ部分

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0123456789012345" crossorigin="anonymous"></script>

Scriptタグ削除前の広告コード例

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0123456789012345" 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-0123456789012345"
     data-ad-slot="0123456789"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Scriptタグ削除後の広告コード例

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-0123456789012345"
     data-ad-slot="0123456789"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Scriptタグが1つでも残っているとアドセンスの遅延読み込みの効果が得られないので、自動広告や手動広告含めて全てから削除してください。

レオ

アドセンスの広告コードをどこに設置したか全然覚えてない！

アレックス

WordPressテーマの広告設定やfunction.phpにあるはずだ。
自動広告のコードは<head></head>内に設置していることもあるので、確認してみよう。

2. Adsense LazyLoad用コードを設置

次に、アドセンス広告を遅延読み込み(LazyLoad)するためのJavaScriptコードを設置します。

ページ読み込みが重い・遅い原因となっている外部コードを最初は読み込まず、スクロールしたタイミングで遅延読み込みするようになります。

以下のコードをWordPressテーマの機能などを利用して</body>直前に設置してください。

Adsense LazyLoad用コード

<script>
//<![CDATA[
//lazy load ads
var lazyloadads = false;
window.addEventListener("scroll", function() {
    if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {

        (function() {
            var ad = document.createElement('script');
            ad.type = 'text/javascript';
            ad.async = true;
            ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
            var sc = document.getElementsByTagName('script')[0];
            sc.parentNode.insertBefore(ad, sc);
        })();

        lazyloadads = true;
    }
}, true)
//]]>
</script>

レオ

コードを</body>直前の部分に設置ってどうやればいいの？

アレックス

WordPressテーマごとに異なるので、代表例を紹介しよう！

Cocoonの場合

Cocoonでは、管理画面から「Cocoon設定→アクセス解析・認証」とクリックしてください。

画面をスクロールすると最下部にある「その他のアクセス解析・認証コード設定のフッター用コード」にLazyLoad用コードを設置してください。

AFFINGERの場合

AFFINGERでは、管理画面から「AFFINGER管理→その他」と選択していってください。

画面をスクロールすると下の方にある「上級者向けの</body>直前に出力するコード」の入力欄にLazyLoad用コードを設置してください。

SWELLの場合

SWELLでは、管理画面の上部メニューから「カスタマイズ→高度な設定」と選択してください。

画面の左側にある「bodyタグ終了直前に出力するコード」の入力欄にLazyLoad用コードを設置してください。

その他テーマの場合

WordPress.org 日本語

WPCode – ヘッダーとフッターの挿入 + カスタムコードスニペット – WordPress コードマネージャー WordPress にコードスニペットを簡単に追加できます。ヘッダーやフッターへのスクリプトの挿入、条件付きロジックによる PHP コードスニペットの追加、広告ピクセルコード...

その他のテーマの場合は、Insert Headers and Footersというプラグインを使えばOKです。

プラグインを導入すると、</body>直前に任意のコードを簡単に設置することができます。

WordPressの管理画面から「設定→Insert Headers and Footers」と選択してください。

最下部にある「Scripts in Footer」の入力欄にLazyLoad用コードを設置すればOKです。

アドセンスの遅延読み込み Q&A

最後に、アドセンスの遅延読み込みに関連してよくある質問と答えをQ&A形式で紹介します。

以下の項目以外にも疑問点があれば、ぜひ気軽に問い合わせをしてみてください。ブログブートキャンプが答えられる範囲で回答いたします。

広告がファーストビューにある場合

アドセンス広告がファーストビューにある場合、遅延読み込みは上手く機能しないです。

遅延読み込みは広告の読み込みを遅らせる技術なので、ファーストビューの広告が表示されずスクロールしたタイミングで広告が表示されます。

ファーストビュー表示の高速化はできるのですが、予期せぬレイアウトシフト(CLS)が生じるため、次に示すCLS改善対策が必要になります。

CLS（Cumulative Layout Shift）: CLS は、ページのライフスパン全体で発生した予期せぬレイアウトシフトを対象として、個々のレイアウトシフトの合計スコアを測定します。スコアは 0 から正数の間で変動します。0 の場合はレイアウトシフトがなかったことを示し、数値が大きいほど、ページ上のレイアウトシフトが大きかったことを示します。この指標が重要なのは、ユーザーが操作しようとしたときにページ要素が移動すると、ユーザーエクスペリエンスが低下するためです。
引用元: Search Consoleヘルプ-ウェブに関する主な指標レポート

レオ

高速表示は実現できているけど、CLSが生じるとダメなの？

アレックス

CLSは誤クリックを誘発し、ユーザー体験を悪くするんだ。
PageSpeed Insightsのスコアを下げてコアウェブバイタルにも悪影響なので、改善しよう！

アドセンスのCLSを改善するには？

アドセンス広告の高さを予め指定しておけば、ファーストビューのCLS発生を防げます。

CLSの原因は、HTML読み込み時に高さが確定しない要素があることなので、min-heightをCSSで設定することが有効な対策です。

やり方としては、アドセンス広告コードとCSSのそれぞれに以下のコードを追加してください。

アドセンス広告コードをdivタグで囲む

<div class="adsense-wrapper">
ここにアドセンス広告コードを挿入
</div>

CSSでmin-heightを指定する

.adsense-wrapper {
	min-height: 280px;
}
@media (max-width: 768px){
	.adsense-wrapper {
		min-height: 320px;
	}
}

min-heightの値は、レスポンシブ型の記事内広告をターゲットに設定しています。

必要に応じて、自分が設置しているアドセンス広告の高さ(height)に合わせて調整を加えてみてください。

コード設置時にエラーが出た場合

LazyLoadのコード設置時にエラーが出るような場合は、レンタルサーバーのWAFが原因です。

WAFはWebアプリの脆弱性を悪用した攻撃を防ぐ機能ですが、正常な操作に対して誤作動することがあり、一時的な無効化が必要になります。

WAFを無効化する手順としては、レンタルサーバーの管理画面からOFFにするだけでOKです。

エックスサーバーでWAF無効化

サーバー管理パネルから「セキュリティ→WAF設定」と進むことで、WAFを無効化できます。

XSS対策やSQL対策など項目別に分かれていますが、全てをOFFにして設定を反映してください。

エックスサーバーではWAF無効化が反映されるまで数分かかります。

参考）エックスサーバー公式-WAF設定

ConoHa WINGでWAF無効化

管理画面から「サイト管理→サイトセキュリティ→WAF」と進むことで、WAFを無効化できます。

WAFの利用設定をOFFに変更してください。

参考）ConoHa WING公式-WAF設定

まとめ

今回は、アドセンス広告の遅延読み込みについて、設定手順やよくある質問を解説しました。

記事のポイントをまとめます。

本記事のポイント

アドセンスの遅延読み込みで、ページの表示速度を大幅に高速化できます
手順としては、Scriptタグを削除してLazyLoad用コードを設置しましょう
コード設置時にエラーが出た場合やCLS発生への対処方法を紹介しました

同じカテゴリーの記事

PICKUP

【快適】WordPressを高速化する13の対策！重い・遅いを解消する方法を解説 WordPressを高速化して、PageSpeed Insightsで90点取る方法を解説します。ウェブページの表示速度は、2021年から検索順位のランキング指標になると発表されたことで、...

アドセンスを遅延読み込みで高速化

以上、「アドセンス広告を遅延読み込みして表示速度を高速化する方法」でした。

この記事の参考情報

Adsenseヘルプ
AdSense 広告コードの修正
Googleアドマネージャーヘルプ
視認性を高めるおすすめの方法
アドセンス遅延読み込み
Mempercepat Loading Blog yang Terpasang Iklan Google Adsense