Summary

Lazy loading is a technique that improves page speed and ad viewability by pausing the loading of ads until they are about to enter the user's viewport. It is ideal for long articles or pages with infinite scroll. This guide provides step-by-step instructions on how to integrate lazy loading for both WordPress and non-WordPress sites.

1. What is Lazy Loading?

Lazy loading allows you to load pages faster, reduce resource consumption and contention, and improve the display rate by pausing the request and rendering of ads until they approach the user's window. This means that Lazy Loading consists of adding an ad tag asynchronously, every X paragraphs of your articles.

2. How does Lazy Loading work?

Our system normally provides only two megabanners (top and bottom) per page for several reasons:

Lazy loading provides a solution to display more ads on long pages without these negative effects.

3. When to use Lazy Loading

When you have long articles or infinite scroll pages, we recommend dynamically duplicating our tags as you wish in iframes within the same page. 

Here is an example page: https://www.themoneytizer.com/demo/preview_lazy_loading

In this example site, the 2 megabanners at the top of the page are loaded normally via a copy-paste integration of our JS tags in the code, they load at the same time as the page. On the other hand, the two other megabanners that are located further down in the articles, which are located in the article's flow, are triggered as soon as their location becomes visible to the user during the scrollingof the page.

4. How to Integrate Lazy Loading

a) Lazy Loading with WordPress

Prerequisites:

• Blank Slate extension

• Ad Inserter extension

Implementation:

• Step 1: Create the Ad Page

1. Go to the "Pages" tab and create a new page.

2. In the right sidebar, under "Page Attributes", select the "Blank Slate" template.

3. In the page content, add a "Custom HTML" block and paste your ad tag.

4. Publish this page and return to the Pages list.

5. Rename the Slug field of this new page to tmz-lazy-loading
   

• Step 2: Configure Ad Inserter

1. <iframe> code:
   

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

ATTENTION: This code has the dimensions of a Top Medium Rectangle (300x250).

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

b) Lazy Loading without WordPress

Prerequisites:

• FTP access for your website

• Notions in Javascript

Implementation:

• For example, if you choose a megabanner in step 1, your code will be:

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

You now need to create a Javascript script that will target your paragraphs and add the iframe every X paragraphs of your articles.

HTML

<script type="text/javascript">

  (function() {

    setTimeout(function() {

      for (var j = 1; document.querySelectorAll("p").length > j; j++) {

        if (j % 3 === 0) {

    document.querySelectorAll("p")[j].insertAdjacentHTML('afterend', 

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

        }

      }

    }, 2000);

  })();

</script>