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

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

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

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

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

レオ

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

アレックス

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

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

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

この記事の著者

アレックス
@blog_bootcamp

アレックス(ALEX)

10年間のブログ経験を活かしてブログブートキャンプを2020年に設立。ブログの専門家として、ブログ運営スキルを鍛え上げるノウハウを発信中。

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

アドセンスの遅延読み込み(LazyLoad)

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

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

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

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

AdsenseコードのScriptタグを削除

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

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

削除するScriptタグ部分(手動広告の場合)

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

削除するScriptタグ部分(自動広告の場合)

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

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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では、管理画面から「Cocoon設定→アクセス解析・認証」とクリックしてください。

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

AFFINGERの場合

AFFINGERの場合の設定方法

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

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

SWELLの場合

SWELLの場合の設定方法

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

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

その他テーマの場合

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

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

Insert Headers and Footersの設定

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

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

スポンサーリンク

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

アドセンスの遅延読み込み 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設定」と進むことで、WAFを無効化できます。

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

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

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

ConoHa WINGでWAF無効化

ConoHa WINGでのWAF無効化

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

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

参考)ConoHa WING公式-WAF設定

まとめ

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

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

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

同じカテゴリーの記事

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

この記事の参考情報

スポンサーリンク

スポンサーリンク

スポンサーリンク

ジャンプできる目次
閉じる