Lazy Loading ads in WordPress

Lazy loading is a technology to prevent those objects on a website from getting loaded before they appear in the visitor’s visible area. This trick keeps the loading time of a website at a minimum and improves its performance.

This concept is widespread in handling images. We developed a feature to provide a deferred loading of all kinds of ads.

How does Lazy Loading work for ads?

The principle of deferred loading of ads is to load the content or scripts when the user scrolls to the position where the ad should be visible.

Advanced Ads Pro has this feature on the placement level. Before you can activate this function for single placements, you will need to enable the module by clicking on Activate lazy load module in Advanced Ads > Settings > Pro.

Now, you can activate the function for every placement. A typical use case is an AdSense unit injected into a placement at the end of all articles. Activated Lazy loading would improve the site’s loading time because the time-consuming call for the AdSense ad will only happen when the visitor scrolls to the end of the article and not when he first opens the site. 

Enabling lazy loading for AdSense ads on those positions has a very positive impact on the Active View rates and can result in higher revenues.

Pre-loading ads

With the default settings, Lazy loading will start loading ads when the ad position is visible on the user’s device. Since the loading might also take some time, you might want to start it earlier.

The offset option on the screenshot above allows you to load an ad before entering the viewport. The setting for this is very individual for each site, its user behavior, and publisher’s expectations.

You can adjust the individual offset per placement using a hook and the following code as an example:

add_action( 'advanced-ads-lazy-load-placement-offsets', function( $offsets ) {
    // The offset of the placement with id equals 'main' is 300px;
    $offsets['main'] = 300;
    return $offsets;
} );

What else do you need to know about Lazy loading

The feature is only available for the following placements:

• Before content
• Content
• After content
• Sidebar widget
• Post list placement
• Manual placement

It is not available for PopUps and sticky ads and the following placements: Content Middle, Random Position, Genesis, BuddyPress, and bbPress.

To use lazy loading for the placements Above Headline and Custom Position, choose the option “Before page load using PHP” in the Placement positioning settings (Advanced Ads > Settings > Pro).

Tracking lazy-loaded ads use an AJAX request for every ad. These requests might need additional performance on your site.

Difference between Advanced Ads’ and WordPress’ lazy loading for images

WordPress 5.5 introduced lazy loading for images in the post content. Technically, WordPress itself doesn’t provide the technology. This technique depends on the browser’s capabilities.

Advanced Ads automatically supports WordPress’s image lazy loading, including img tags within the “plain text ad type”.

The Lazy loading module in Advanced Ads Pro includes much more than just images. Our plugin can load the whole ad code deferred and prevents any codes, scripts, and files to request resources before being visible.