Skip to content
Audienzz Documentation

Lazy Loading

Overview

Section titled “Overview”

Lazy Loading is a performance optimization technique that delays the loading of ad placements until they are about to become visible in the viewport. This improves page performance by reducing initial load time and bandwidth usage, while increasing viewability rates.

How It Works

Section titled “How It Works”

When a placement is configured with lazy loading enabled, Htag:

  1. Monitors the user’s scrolling behavior
  2. Calculates the distance between the placement and the viewport
  3. Loads the ad only when the placement is within a specified threshold of becoming visible

Configuration

Section titled “Configuration”

Lazy loading is configured at the placement level using the lazyloading parameter. This parameter can be set when defining a placement using the definePlacement method.

Event Integration

Section titled “Event Integration”

Lazy loading works seamlessly with the Htag events system. The events fire in a specific sequence that reflects the lazy loading process:

Event Flow

Section titled “Event Flow”

When lazy loading is disabled, events fire immediately:

element.exists → element.requestable → element.renderable

When lazy loading is enabled, there’s a delay before the ad request:

element.exists → [Wait for viewport proximity] -> element.requestable → [Wait for viewport proximity] → element.renderable
Section titled “Related Concepts”