Lazy Loading

User Guide: Lazy Loading

Maximising Revenue with Lazy Loading

Welcome to Pubstack's user guide on optimising ad revenue by integrating lazy loading. In this guide, we'll explore the benefits of lazy loading, backed by a use case, and provide clear instructions on effortlessly implementing this feature within the Pubstack platform.

The Challenge

Publishers face a dual challenge - ensuring high viewability performance for ads while maximising ad revenues.

In an era where user experience can make or break a website's success, the traditional approach of loading all ads at once can significantly decrease performance.

The issue at hand is multifaceted. Slow page loading times, often worsened by the heavy load of advertisements, lead to high bounce rates and deteriorate the overall user experience. This can have a direct negative impact on viewer retention and even affect SEO rankings.

Implementing lazy loading seeks to address these issues.

What is Lazy Loading, and Why Does it Matter?

Lazy loading is a strategy that involves delaying the loading of ads until they are needed. This approach helps improve website performance by reducing initial page load times and only loading ads when they are about to be viewed, enhancing user experience and potentially increasing ad viewability.

It is possible to control up to 3 parameters to customise lazy loading:

  1. Prebid auction: Controls when the Prebid auction will start for the lazy loaded ad unit.
  2. GAM Request: Controls when the ad server will be requested to select the impression to print.
  3. GAM rendering: Controls when the impression chosen by GAM will be printed.

What Uplift Can You Get from Lazy Loading?

With one of our customers, we conducted an A/B test with two different lazy loading rules to determine the most effective lazy loading setup:

  • Rule 1: Prebid Auction triggered at 1.5 viewport.
  • Rule 2: Prebid Auction triggered at 2 viewports.

💡A viewport is the visible area of a web page within a browser window, showing the content that is currently in view without scrolling. Setting a rule at 0 viewport means that the event will be triggered when the ad unit is in view for the user. Setting a rule at 1 viewport will trigger the event when the ad unit is at 1 viewport distance from the current user’s view.

 

Screenshot 2024-03-05 at 11.43.53

The A/B test results revealed that allowing fewer viewports (i.e., more lazy loading) increased viewability by 6.3 points. This adjustment had a minimal impact on revenue, reducing it by less than 1€ and increased eCPM. 

Key Considerations and Pitfalls When Implementing Lazy Loading

  1. Viewport consideration: The setup of lazy loading, particularly the number of viewports allowed for ad unit fetch and render, plays a crucial role in its effectiveness.
  2. Viewability and CPM enhancement: The average viewability of the site's ad inventory increases by reducing the auctions of less viewable bottom ad units. This can lead to better eCPM, especially with SSPs and ADX.
  3. A/B test: Publishers should A/B test different lazy loading setups to find the perfect balance.

How Do You Implement Lazy Loading with Pubstack?

  1. You can manage your lazy loading rules directly in the app
  2. Pubstack provides 5 default presets to get you started quickly
  3. You can also create a custom preset by clicking “New rule”
  4. Pubstack recommends choosing a self-explanatory rule name, which you can edit later. You can also choose to disable lazy loading on header-bidding or GAM. You cannot disable both at the same time.
  5. You can customise each parameter between “Auction start”, “GAM request”, and “Render impression” according to the number of viewports.
  6. You must respect the following rule: “Auction start” ≥ “GAM request” ≥ “Render impression”
  7. Lazy loading rules can be applied at the stack level. To do so, navigate through a stack configuration to activate lazy loading and select the rule you want to use:
  8. You can also select different rules for Desktop and Mobile.
  9. Editing a lazy loading rule already used in stacks will require synchronising them.

Conclusions: User Benefits

In conclusion, integrating lazy loading impacts the following KPIs:

  • Loading times
  • Core Web Vitals
  • Impressions
  • Viewability
  • Fill rates
  • Revenue
  • eCPM
  • Average auction duration
  • SSP response time
  • Timeout rate

Congratulations! You can boost your ad revenue by seamlessly integrating lazy loading through Pubstack. Explore the possibilities, monitor your results, and enjoy the enhanced monetisation potential.