GoogleAdSense広告を遅延読込してWebページの表示速度を高速化する方法

GoogleAdSense広告を遅延読込してWebページを表示速度を高速化する方法

ことみ

ブログにGoogleAdSense広告を入れてから表示速度が遅くなってしまい読込速度を早くする方法を知りたいです

Webページやブログ運営をするならGoogleAdSense広告を入れて収益化したいけどAdSense広告を貼るほど読込速度が遅くなります。

最近のGoogleはユーザーの利便性を重要視していることから、表示速度も評価項目の対象になりSEO(検索エンジン最適化)にも影響が出るのでなるべく記事を軽くする事が大切です。

みこと

今回はGoogleAdSense広告を遅延読込してWebページを表示速度を高速化する方法を紹介します

ブログの読込速度が遅く改善したかった

今回はAdSense広告を記事内に3つとサイドバーに2つ貼付けているこちらの記事を改善してみました。

mikotoniomakase.com

AdSense広告を貼るほど読込速度が遅くなる

ブログ運営をしていて以前から表示速度が遅くが画像データをギリギリまで圧縮、無駄なJavascriptなどのコードを削除、読込速度を早くする為のWordPressのプラグインを

使ったりとできる限りのことはやりましたが、PageSpeed Insightsのスコアは100点満点中モバイルで36・パソコンで51で他の記事も同じ位の読込速度で改善されずに悩んでいました

そしてこのブログでいちばん読込速度に影響が出ていたのは

PageSpeed Insightsの改善できる項目の中にある第三者コードの影響を抑えてください 第三者コードによってメインスレッドが 〇〇〇ミリ秒間ブロックされましたという項目の中に

Google/Doubleclick Adsという

PageSpeed Insightsの改善できる項目の中にある第三者コードの影響を抑えてください 第三者コードによってメインスレッドが 〇〇〇ミリ秒間ブロックされましたという項目の中に

第三者コードによって、読み込み速度が著しく低下する可能性があるコード改善する事でWebページの読み込み速度を早くする事ができました。

GoogleAdSense広告を入れながら読込速度を早くするには?

ことみ

GoogleAdSense広告を入れながら読込速度を早くするにはどうすればいいですか?

AdSense広告を貼りながら読込速度を早くする方法は

GoogleAdSense広告は2つ位に抑える
GoogleAdSense広告を遅延読込する


2つの方法があり、1つ目のGoogleAdSense広告を2つ位に抑える事で記事の読込速度を向上する事ができます。

以前は1つの記事に3つまでしか貼る事ができませんでしたが上限数が増えた事でAdSense広告を貼付けるほど読込速度が遅くなる事を知らない事が原因(私もその一人です)

試しに読込速度が遅いページのGoogleAdSense広告を

すべて削除するだけで簡単に読込速度が80~100というスコアが出るようになる事から記事に広告を貼るほど読込速度が遅くなる事が分かります。込速度を重視したいなら、記事の途中と最後に2つ位貼付けると良いかもしれません。

みこと

GoogleAdSense広告を削除しても表示速度が変わらない場合は他に原因があります。

GoogleAdSense広告を遅延読込する

ことみ

GoogleAdSense広告を複数入れつつ表示速度を早くする方法はありますか?

AdSense広告を少なくする事で表示速度を上げる事ができますが広告収入が減ってしまうので遅延読込するコードを追加して複数広告を表示させながらPageSpeed Insightsのスコアを上げるには?

AdSense広告を遅延読込するには?
1:不要なコードを削除する
2:遅延読込するコードを追加する

この2つの作業が必要になります。

みこと

このブログの環境はWordPressのSANGOと子テーマのPORIPUを使った環境でGoogleAdSense広告を遅延読込しています。

不要なコードを削除する

まずはGoogleAdSenseのコードで不要なコードを削除します。ここで注意する事は1つだけ不要なコードを削除しても反映されないので記事内にあるコードを全て削除する必要があります。

AdSenseコード

<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-アカウント番号"   
   data-ad-slot="アカウント番号"></ins>
 <script>   
   (adsbygoogle = window.adsbygoogle || []).push({});
 </script>
不要なコードを削除後

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

こちらのコードを記事に貼付けます。

遅延読込するコードを追加

不要なAdSenseコード

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

を削除したら遅延読込するコードを追加します。

遅延読込するコード

<script>
	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>
    
このコードをコピーしてWordPress外観➡テーマエディター➡テーマフッター(footer.php)の最後あたりにあるタグの前に貼付けます。

WordPressのテーマや環境によっては表示方法が変わります。

GoogleAdSense広告を遅延読込した結果

GoogleAdSenseの不要なコードを削除して遅延読込するコードを追加するとPageSpeed Insightsのスコアがどの位改善されたかを確認します

GoogleAdSenseの不要なコードを削除と遅延読込するコードを追加するとどの位速度が改善されたかをPageSpeed Insightsで確認します。

PageSpeed InsightsのスコアはAdSense広告を記事内に3つサイドバーに2つ貼付けた状態(このブログはロリポップレンタルサーバーライトプランの月額料金が安いサーバー)でも100点満点中モバイルで36・パソコンで51で遅延読込するコードを追加した後のスコアはモバイルで75・パソコンで97まで読込速度が上りました。

このブログはロリポップレンタルサーバーライトプランの月額料金が安いサーバーでも

GoogleAdSense広告を遅延読込して高速化する(まとめ)

AdSense広告はWebサイトを運営して収益化を目指すにはとても便利なサービスですが広告を貼る事で記事の読込速度が遅くなってしまい表示速度も評価項目の対象になりの為SEO(検索エンジン最適化)に影響が出る場合がある。

読込速度を上げるにはGoogleAdSense広告は2つ位に抑えるか
GoogleAdSense広告を遅延読込する事で読込速度が改善されます。

みこと

WordPressのテーマや環境によってはうまくいかない場合がありるので試す場合は事前にバックアップを取ってからお試しください

#GoogleAdSense #アドセンス #アフィリエイト #WordPress #ブログ運営 #SANGO # #Google #PageSpeedInsights #SEO #みことにおまかせ #はてなブログ

投稿日2021/01/31 書いた人Mikoto Mikaka



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です