Webサイト,コード,スピード,プラグインなし

Googleアドセンス（Google Adsense）広告を遅延読み込み（LazyLoad）して表示速度を高速化する方法。

Posted on by DIGECH

Googleアドセンスの読み込みはページ表示速度を著しく低下させます。

以下方法で問題解決の期待値が向上しますので是非お試しください。

目次

Google AdsenseコードのScriptタグを削除

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8085372009702943"
     crossorigin="anonymous"></script>
<!-- フッター -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8085372009702943"
     data-ad-slot="2683573049"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
JavaScript

上記コードの下記部分を削除してください。

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

Scriptタグ削除後のコード

<!-- フッター -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8085372009702943"
     data-ad-slot="2683573049"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
JavaScript

遅延読み込み（LazyLoad）用コードを設置

下記コード導入で、スクロールしたタイミングで遅延読み込みをするようになります。

以下のコードを/body直前に設置してください。

<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>
JavaScript

以上、簡単な方法ですので是非お試しください。

DIGECH
DIGECH

私たちのミッションは、多くのあらゆる人にWebサイト、デジタル関連商品を安く簡単に入手できる機会を提供することです。 Webサイト・ホームページの制作・運用をより身近にし、誰でも手軽に自分のWebサイトを持つことができる世界を目指しています。 ・ブログ一覧 ・アイテム一覧

コメントを残す