Lazyロードを実装する方法

Lazyロードを実装する方法

概要

遅延読み込みは、広告がユーザーのビューポートに入ろうとしているまで広告の読み込みを一時停止することで、ページ速度と広告の可視性を向上させるテクニックです。 無限のスクロールを持つ長い記事やページに最適です。 このガイドでは、WordPressサイトと非WordPressサイトの両方の遅い読み込みを統合する方法に関するステップバイステップの手順を提供します。

__email0__ 1. 怠惰なロードとは何ですか?

読み込みが遅いことで、ページを高速にロードし、リソース消費と競争を削減し、ユーザーウィンドウに近づくまで広告のリクエストとレンダリングを一時停止し、表示速度を向上させることができます。 つまり、Lazyロードは、記事のX段落ごとに広告タグを非同期的に追加することで構成されています。

__email0__ 2. 怠惰なロードはどのように機能しますか?

当社のシステムは、通常、いくつかの理由でページごとに2つのメガバナー(上下)のみを提供します。

パブリッシャーがこのフォーマットを乱用することを望んでおらず、Cpmが低下します。 同じページのバナーが多すぎると、ページの平均cpmが低下します。
広告主は、広告する唯一のページを好みます。
-ヘッダー入札技術は、ヘッダーに読み込まれるフォーマットが少ない場合により効率的です。
追加のフォーマットを作成すると、ページ読み込み時に必ずしも表示されないフォーマットに不要なレイテンシーが発生する可能性があります。

遅い読み込みは、これらの悪影響なしに長いページにより多くの広告を表示するソリューションを提供します。

__email0__ 3. 怠惰なロードを使用するとき

長い記事や無限のスクロールページがある場合は、同じページ内のiframeで好きなようにタグを動的に複製することをお勧めします。


ここに例ページがあります:https://www.themoneytizer.com/demo/preview_lazy_loading をご覧ください。

この例サイトでは、ページ上部の2メガバナーは、コード内のJsタグのコピーペースト統合を介して通常ロードされ、ページと同時にロードされます。 一方、記事の流れの中にある他の2つのメガバナーは、ページのスクロール中にユーザーにその場所が表示されるとすぐにトリガーされます。


4. Lazyロードを統合する方法

a) WordPressでの怠惰な読み込み

前提条件:

  • ブランクスレート拡張

  • 広告インサータ拡張

実装:

  • ステップ1:広告ページを作成する

    1. 「ページ」タブに移動し、新しいページを作成します。

    2. 右サイドバーの「ページ属性」の下で、「空白スレート」テンプレートを選択します。

    3. ページのコンテンツに「カスタムHtml」ブロックを追加し、広告タグを貼り付けます。

    4. このページを公開し、ページ一覧に戻ります。

    5. この新しいページの Slug フィールドの名前を変更します。tmz怠け者ローディング

  • ステップ2:広告インサータを設定する

1.「設定」タブに移動し、「広告インサルタ」に移動します。
2.16のポジションのいずれかを選択し、以下を追加します

    1. <iframe>コード:


<iframe src="../tmz-lazy-loading" loading="lazy" scrolling="no" width="310" height="260" frameborder="0"></iframe>

ご注意:このコードは、上位中長方形(300x250)の寸法を持っています。

別のフォーマットを使用する場合は、このコードを正しく変更する必要があります。予防措置として10pxを加える次元。 たとえば、メガバナーコードは次のとおりです。


<iframe src="../tmz-lazy-loading" loading="lazy" scrolling="no" width="738" height="100" frameborder="0"></iframe>

3.コードブロックの下の設定で、「投稿」を選択します。
4.「挿入」ドロップダウンメニューで、「段落の後」を選択します。
5.中間フィールドでは、%に続いて各広告の間にほしい段落の数を追加します
(たとえば、%3 は 3 段落ごとにタグを追加します)。
6.「アライメント」オプションの「センター」を選択
7.「設定を保存1-16」をクリックします。

b) WordPressのない怠惰な読み込み

前提条件:

  • あなたのウェブサイトのためのFtpアクセス

  • ジャワスクリプトの概念

実装:

ステップ1:Htmlファイルを作成するFTPアクセスを介して「tmz-lazy-loading.html」という名前の新しいファイルを作成します。 このファイルには、使用する広告タグのみを追加します。
ステップ2:iframeとJavaスクリプトを使用する
1.Youは今使用できます
あなたのサイト上にタグを複数回表示するための以下のコード。
<iframe src="../tmz-lazy-loading" loading="lazy" scrolling="no" width="310" height="260" frameborder="0"></iframe>
ご注意:このコードは上位中長方形(幅:300と高さ250)用です。 違うフォーマットを使うと、
幅と高さを変更し、予防措置として10pxを追加する必要があります。

  • たとえば、ステップ1でメガバナーを選択した場合、コードは次のようになります。

<iframe src="../tmz-lazy-loading" loading="lazy" scrolling="no" width="738" height="100" frameborder="0"></iframe>


段落をターゲットにするJavaスクリプトを作成し、記事のX段落ごとにiframeを追加する必要があります。

各スクリプトはサイトに固有のものなので、以下の例はサイトで動作するように変更する必要があります。

Htmlについて


<スクリプトtype="text/javaスクリプト">

(関数()__email0__ までお問い合わせください。

setタイムアウト(function()__email0__ までお問い合わせください。

のために(バラ)jさん__email0__ =1;document.query選択All("p")__email0__ >j;j++)__email0__ までお問い合わせください。

もし(J)%__email0__ 3【お問い合わせ】(0)__email0__ までお問い合わせください。

document.querySelectorAll("p")[j].隣接するHTML('afterend'),

<iframesrc="../tmz-lazy-loading.html"load="lazy"scroll="いいえ"width="738"height="100"frameborder="0">');

__url0__ }

__url0__ }

__url0__,2000年);

})();

</script>