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

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

AdSenseの遅延読み込み機能を提供するプラグイン - Advanced Ads Pro

AdSenseの遅延読み込み機能を提供するワードプレスのAdSense広告プラグイン

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

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

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

ワードプレスでAdSense広告の遅延ロードする

ワードプレスのブログを運営している場合は、「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 do not have to wait for seeing whole page quickly for the AdSense。

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

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

AdSenseの広告スクリプト遅延ロードさせる方法:

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

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

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

<!--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プラグインとの互換性のためにとします。 テーマファイルにコードを追加する場合 チャイルドテーマを作成し作業してください。 そうでなければテーマが更新される場合に追加したスクリプトコードが失われます。

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

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

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

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

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

2.次のコードを</ body>の直前に貼り付けます。

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

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

注:



6のコメント

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

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

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

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

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

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

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

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

      応答