Lazy loading

Lazy loading enables pages to load faster, reduces resource consumption and contention, and improves viewability rate by pausing the requesting and rendering of ads until they approach the user's viewport.

With lazy loading in SRA, when the first ad slot comes within the viewport specified by the fetchMarginPercent parameter, the call for that ad and all other ad slots is made.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lazy loading example</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || {cmd: []};

      googletag.cmd.push(function() {
        googletag.defineSlot('/6355419/Travel', [728, 90], 'div-1')
          .setTargeting('test', 'lazyload')
          .addService(googletag.pubads());
        googletag.defineSlot('/6355419/Travel', [728, 90], 'div-2')
          .setTargeting('test', 'lazyload')
          .addService(googletag.pubads());
        googletag.defineSlot('/6355419/Travel', [728, 90], 'div-3')
          .setTargeting('test', 'lazyload')
          .addService(googletag.pubads());

        // Some examples of ways to enable below. Normally, only one of these
        // methods should be used.

        // A) Enable with defaults.
        googletag.pubads().enableLazyLoad();

        // B) Enable without lazy fetching. Additional calls override previous
        // ones.
        googletag.pubads().enableLazyLoad({fetchMarginPercent: -1});

        // C) Enable lazy loading with...
        googletag.pubads().enableLazyLoad({
          // Fetch slots within 5 viewports.
          fetchMarginPercent: 500,
          // Render slots within 2 viewports.
          renderMarginPercent: 200,
          // Double the above values on mobile, where viewports are smaller
          // and users tend to scroll faster.
          mobileScaling: 2.0
        });

        googletag.enableServices();
      });
    </script>
  </head>
  <body>

    <!--
       As defined by lazy load settings, initially:
       1. Slot 1 will be fetched and rendered on mobile and desktop.
       2. Slot 2 will be fetched on mobile and desktop, but will not be rendered on desktop.
       3. Slot 3 will not be fetched or rendered on mobile or desktop.
    -->

    <div id="div-1">
      <script>
        googletag.cmd.push(function() { googletag.display('div-1'); });
      </script>
    </div>

    <!-- 3 viewport tall div to place next slot 3 viewports away. -->
    <div style="height:300vh"></div>
    <div id="div-2">
      <script>
        googletag.cmd.push(function() { googletag.display('div-2'); });
      </script>
    </div>

    <!-- 9 viewport tall div to place next slot 12 viewports away. -->
    <div style="height:900vh"></div>
    <div id="div-3">
      <script>
        googletag.cmd.push(function() { googletag.display('div-3'); });
      </script>
    </div>
  </body>
</html>