AdSense 遅延読み込みしてサイトを高速化

구글 AdSense スクリプトは、他の広告プラットフォームよりも速度が速い方が、サイトの読み込み速度に影響を与えるしかありません。 特に広告の数が多くなったり AdSense スクリプトを誤って追加した場合、サイトの速度が大幅に遅くなることがあります。 この記事では、 AdSense 遅延読み込みを使用してサイトの速度を高め、SEOを改善する方法を見てみましょう。

まずご紹介する方法は、 WordPressで使用することができて、後半で紹介する方法は、 WordPress だけでなく、汎用的に活用が可能です。

AdSense 遅延ロード機能を提供するプラグイン - Advanced Ads Pro

AdSense 遅延読み込み機能を提供する WordPress AdSense 広告プラグイン

Advanced Ads Proは無料 AdSense プラグイン アドバンスト広告の有料版です。 このプラグインのプロバージョンでは、広告をレイジロードしてサイトの速度を向上します。 しかし、価格が年間39ユーロで少し負担になる方です。

WordPressから AdSense 広告を精巧に表示したい場合、プラグインを使用してみることができます。 次の記事で WordPressで使用できる AdSense 広告プラグインを確認することができます。

Newspaper など、いくつかのマガジンのテーマでは、 AdSense 広告を配置することができる機能をテーマオプションを介して提供します。 そのような場合のテーマで提供される広告の配置機能を使用することができます。

WordPressから AdSense 広告遅延ロードする

WordPress ブログを運営している場合」How to Setup Lazy Load for Google AdSense Ad units?「で紹介する方法を試すことができます。

技術的な詳細:Basically what happens that it load in asynchronous form、means browser continue downloading adsbygoogle.js script without blocking the HTML parsing。

But here, in the lazy loading method I am going to change the ASYNC method to real DEFER. The AdSense script will start downloading in browser, once window will complete loading the main web page. In this way, visitor don't have to wait for seeing whole page quickly for the AdSense.

技術的な説明:基本的に非同期(asynchronous)の形式でロードされる場合は、HTML解析をブロックすることなく、ブラウザからadsbygoogle.jsスクリプトを続けてダウンロードします。 ただし、参照された記事で紹介する方法を利用する場合ASYNC方法を、実際のDEFERに変更します。 つまり、メインのウェブページの読み込みが完了したら、ブラウザで AdSense スクリプトをダウンロードし始めます。 したがって、訪問者は AdSense 広告のため、全体のページがロードされるように待つ必要がありません。

実際にこの方法でテストしてみるとページのコンテンツがすべてロードされた後に広告が表示されることを確認することができました。

AdSense 広告スクリプト遅延読み込みさせる方法:

このブログでは、現在以下の方法で AdSense 広告スクリプトを遅延ロードしています。 他に異常なく広告が表示されるようです。

1.まず、すべての広告ユニットでは、次の行を削除します。

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

2.次のJavaScriptコードをテーマのフッターに追加します。 (通常タグの直前に追加します。)

<!--noptimize-->
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--/noptimize-->

ちなみにnoptimizeタグは Autoptimizeプラグインとの互換性のためにとします。 テーマファイルにコードを追加する場合 チャイルドテーマを作成し作業してください。 そうでなければテーマが更新される場合に追加したスクリプトコードが失われます。

GeneratePress テーマでは、フックを使用してフッター領域に上記の広告スクリプトをロードできます。

複数の広告を表示する場合は、この方法が有効であることができます。 実際の適用前と適用後の速度を比較してみてください。 参照された記事のコメントを見ると、動作には異常がないようです。

他の方法: AdSense スクリプト遅延ロードスクリプトを使用してサイトを高速化

別の方法として、以下で紹介する方法を試してみることができます(上記の方法と似ています)。 この方法は、 WordPress だけでなく、汎用的に活用することができます。 場合によっては、効果がない場合があります。 適用前と適用後にエラーが発生しないか、そしてサイトの読み込み速度が以前よりも早いかチェックしてみてください。

1. AdSense スクリプトで次の行を削除して、広告を追加するようにします。 複数の広告を追加する場合、遅延ロードする広告では、行を削除ください。

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

2.次のコードを目の前に貼り付けます。

<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

今広告が正しく表示されるか、そして体感速度が速くなっていることを確認するようにします。 また、広告収入に影響がないかも観察してください。

メモ:


16のコメント

  1. こんにちは、いつも助けています:)
    プラグインAdvanced Ads Proをお勧めし、私はこの問題を解決するためにAd lnserter Proをインストールしました。 これもLazy Load機能があるのに別途設定をしなければならないのか、私のサイト速度がまったく良くなりませんでした。 Lazy Load機能を動作させるためにどのような設定が必要ですか? おすすめのAdvanced Ads Proに変更する必要がありますが、悩みます。

    1. こんにちは、スンジェ。 この機能のプラグインがあることをお知らせしただけで、そのプラグインをお勧めするものではありません。 そのプラグインが機能しないようであれば、まずマニュアルを見てください。

      このブログでは、この記事で紹介するスクリプトを使用して AdSense 広告を遅延ロードしています。 これらのスクリプトを使用するときは、広告が正しく表示されるかどうかを慎重に観察する必要があるようです。

  2. こんにちは。 また質問です。 ㅎㅎ
    もし現在 AdSense コードはどのように挿入しましたか?
    私の場合はジェネレータープレステーマフックでヘッダーに自動広告コードを入れ、残りの広告ソースは一番最初の行重複するコードを除いて入れました。 さて、ページの速度がかなり遅くて…ここまで来ました。

    こっそり? このサイトの速度を分析するので、とても速いです。 AdSense 関連コードも見えません。
    どのように進んだのか知りたいです

    1. AdSense 広告の数を増やすと速度に悪影響を及ぼします。 このブログでは GeneratePress テーマのElementを使用して広告コードを追加しました。 おそらく、本文に記載されているコードと似たコード(少し異なる場合があります)を利用して、広告が遅延ロードされるようにしたことを覚えておいてください。 (とても古くて記憶が加わりますね。ㅎㅎ) AdSense サイトで自動広告機能を有効にした場合は、本文に広告コードを追加しても、ヘッダーセクションに広告コードを個別に追加する必要はありません。

      1. 上記と同じ方法で行いましたね!

        ああ…じゃあ投稿が見えるところではないところでは自動広告コードを見せて設定して、
        投稿が見えるところでは自動広告コードを見えなくしてサイトを軽くすることもできますね。

      2. 上記とコードに似ていると思いますが、同じではない可能性があります。 本文のコードでテストしてみてください。 Google Chromeコンソールでエラーが発生していないことを確認してください。 このブログ記事では、コンソールにエラーが表示されません。 本文のやり方でするとエラーが表示されたようです(古い記憶が仮物歌物…)。

      3. ととても感謝しています。 まず、最初のXNUMX番目ともスピードが大幅に増加しました。
        XNUMXつ目はautopizeプラグインを使用しないので固くしなければならないのが好きなので。

        グーグルページ速度はモバイル96 pc 100 そしてフィンダムでは99が出ました。

        ただ、昨日文に残したように広告が出てきたアンナオンだという問題がまたまたできましたね。

        Google Chromeコンソールでもエラーと警告がなくなりました。

        もし時間がかかるなら一度だけフックしてみていただけますか

        https://e-asyman.com/

      4. Google Chromeコンソールでエラーは発生しません。 文に広告が正しく出てこないのは、数日間見守れば良いようです。 訪問者数が少ない場合は、訪問者数が製法されるまで待ってからチェックしてください。

    1. 구글 AdSense 広告のためのページの読み込み速度が遅い場合には、効果があることです。
      しかし、私は、ページの上部に広告が遅延ロードされ正しくロードされていないようなので使用はしないでいます。
      この問題が発生した場合、複数の広告を表示する場合の上の広告を除いた広告に、この方法を適用すると、効果があるでしょう。

  3. 自動広告にも適用ができますか?

    自動広告スクリプトには、スクリプトの中に AdSense 一意のIDがありまして。

    AdSenseは本当に最低の広告1〜2個だけ入れても速度を遅すぎるだから悩みが多いです。
    サイトの速度が遅い場合SEOに大きな影響があり、 AdSense 除けば、収益というものが全くなくて。 ジレンマです。

    1. 自動広告に適用すると、前に表示される広告が正しく表示されない可能性がありますので、正常に動作しているかのテストをした後に適用するかどうかを決定してください。

  4. 確かにlazyload機能があれば、ページを一度に呼んかけなくていいですね。 広告がちょっと重く浮かぶサイトは参照するといい内容だと思う。

    良い情報は常に感謝します。

    1. 広告を複数表示する場合に活用すると、ページの読み込み速度が速くなりSEOに役立つでしょう。
      私の下に一致するコンテンツの広告をレイジロードするように設定したが解除されました。
      広告が1〜2個ある場合には、目に見える効果はないようです。

コメントを残す

*メールアドレスは公開されません。