Lazy Loading – The Optimization of Webpage Performance

When looking for content, it often happens that a page loads too slowly, or some of its elements load slower than others. Impatient users will often leave such sites straight away without leaving a traffic footprint. Impatient visits mean lost earnings for both Publishers and Advertisers. That is why page speed is so important for the retention of users… and earnings. However, there are technological possibilities that will allow Publishers to improve their page speed and commensurately increase quality and conversion rates. One such solution is lazy loading.

Lazy loading explained

Lazy loading allows websites to optimize their loading times. With this optimization, the website first loads only the required content and then waits until the user needs to load the rest of the page content. Lazy loading reduces the time it takes to open a website as the browser loads only a part of the page content at a time.

This process is called “lazy” because it delays loading until the content is needed.

The implementation of lazy loading

The lazy loading solution is implemented using JavaScript code, which checks where the user is on the page and loads the content above the fold. Such a script can be implemented either manually or with an appropriate plug-in.

This solution can be found in available Open Source libraries such as:

• blazy.js – a lightweight JavaScript library, useful when loading many images or iframe elements (needed for embedding nested content)
• LazyLoad – a script that automatically loads images when they are in the user’s field of view
• lazysizes – a library that positively impacts positioning, and also provides some additional plug-ins with other functionalities
• yall.js – a lightweight library of only 1.64 KB and compatible with all modern browsers

The benefits of lazy loading

It often happens that Publishers are reluctant to implement the lazy loading solution because it is associated with a reduction in the number of ad requests on ad units that have yet to be loaded. From our perspective, however, the initial decline in ad requests is made up for with the subsequent improvement in quality indicators such as Viewability, and this extends to rPM and eCPM. With higher Viewability, we have an additional chance to increase the scale of the shares, e.g. in PMP.

The following chart features one of our Publisher case studies. It can be seen that despite the decline in ad requests, revenue has not decreased.

Lazy loading was implemented on the Publisher’s website in February 2021. In the chart, we can see a decrease in ad requests between January and April by 28% (the visible decrease in April was related to the overall decrease in the number of page views on the site); but we noted an increase in Viewability by 35% and eCPM by 95% (the uplift shown in the chart is slightly higher than the final one as the months with unstable traffic were taken into account). Thanks to this solution, we managed to offset a large drop in traffic, which would have negatively impacted the Publisher’s revenues.

In addition to improving advertising metrics like Viewability and performance, lazy loading can bring additional benefits such as:

• decreasing the number of users leaving the website immediately without having performed any action, which will be visible in the bounce rate in Google Analytics;
• lengthening the user session time;
• reducing the network and server load, as there will be no transfer of unnecessary data;
• guaranteeing better user experience; because the user sees the content already loaded when scrolling;
• contributing to the improvement of the Core Web Vitals, which in turn have an impact on how the website is positioned from the search level.

Lazy loading and Core Web Vitals

Core Web Vitals, which were presented by Google in 2020, are the basic metrics for assessing the user experience of a website. The 3 main metrics are LCP, FID, and CLS.

Core Web Vitals are metrics that are supposed to influence the positioning of a website in the browser. If the Core Web Vitals (CWV) metrics are low, reaching the user will be difficult, which in turn will translate into lower volumes of traffic and lower revenues for the Publishers. You can find more information about CWV here and here.

In order to optimize Core Web Vitals, Publishers often have to make significant technological changes that will improve these three basic metrics. In this regard, the implementation of LL can contribute to the improvement of the page loading speed and save its resources. After applying this solution to the website, we can optimize the way images and ad units load. The website’s elements will be loaded only when the user goes down to a certain level on the page. Thanks to the use of lazy loading, you will positively impact the LCP (Largest Contentful Paint) index, which is a key element when assessing ad speed and user experience.

However, it should be remembered that in some cases the implementation of lazy loading may impede LCP; so it is important to conduct A/B tests when analyzing user behavior on the website.

Summary

Publishers are having to deal with constant shifts and changes in the advertising market, and these same changes can have a significant impact on revenues. One such change has been the use of Core Web Vitals in order to determine the health of websites in terms of user experience; and what follows, the positioning of the website. Thanks to solutions, Publishers can make all the preparations needed for optimizing the performance of their websites. In addition, a well-implemented lazy loading can positively contribute to the quality of the advertising inventory of Publishers.