Blink LazyLoad will bring native support for lazy-loading images and iframes for everyone using Chrome, but publishers should know its revenue impacts.
Lazy loading, the practice of loading media assets (images, ads, etc…) only when the user scrolls down the webpage to view them, has been around for a while. It helps save bandwidth and makes web pages load faster, and is typically implemented using JavaScript. But now a new Chrome feature is bringing lazy-loading support as a browser default.
What is Blink LazyLoading?
It’s a new Chrome feature that brings native support for lazy loading HTML elements such as images and iframes (even third-party). In order to implement lazy loading, publishers currently have to set it up using JavaScript libraries or CMS plugins. With Blink LazyLoad, all websites will become lazy-loading enabled by default.
“Web pages often contain a large number of images, which contribute to data-usage, page-bloat and how fast a page can load. Many of these images are offscreen, requiring a user to scroll in order to view them. Historically, to limit the impact offscreen images have on page load times, developers have needed to use a JavaScript library (like LazySizes) in order to defer fetching these images until a user scrolls near them,” Addy Osmani, Engineering Manager at Chrome, in a post about the update. “What if the browser could avoid loading these offscreen images for you? This would help content in the view-port load quicker, reduce overall network data usage and on lower-end devices, reduce memory usage. Well, I’m happy to share that this will soon be possible with the new loading attribute for images and iframes.”
How Does it Work?
Blink LazyLoading is implemented via a new HTML attribute.
HTML elements such as images, paragraphs, and links, etc., combine to form the major components of a web page. Attributes are used to add more meaning to or modify those elements. Blink LazyLoading uses a new type of <loading> attribute to define whether or not elements such as <img> and <iframe> have to be lazy-loaded by the browser.
Here is the example for lazy loading an image that was given in the informal announcement:
<img src=”celebration.jpg” loading=”lazy” alt=”…” />This is an example of the loading element in use for a video that is contained within an iframe:
<iframe src=”video-player.html” loading=”lazy”></iframe>As you can see, with Blink LazyLoading, enabling lazy loading on HTML elements will become as easy as setting the attribute, most popular content management systems will probably start providing the functionality to add the attribute using GUI, either by default or via plugins.
The loading attribute has three settings: ‘lazy’ (lazy-loading enabled), ‘eager’ (lazy-loading disabled), and ‘auto’ (browser will automatically determine if the HTML element is a good candidate for being lazy-loaded).
The important thing to note is that unless the publisher or webmaster explicitly sets the loading attribute to ‘eager’ for on-page HTML elements, Chrome may, in many instances, automatically determine and enable lazy loading for them. (And that’s the problem, but we’ll get to that later.)
Benefits of Blink LazyLoading
Blink LazyLoading has the same benefits as lazy loading, which are:
-
Speed up the load of above-the-fold content, since there will be less competition for network resources during the initial page load,
-
Save network data by avoiding downloading any deferred content that the user doesn’t end up scrolling to,
-
Reduce memory usage.
The key difference between existing lazy loading mechanisms and Blink LazyLoad is that the latter aims to affect a much larger set of users by “baking in” the feature into Chrome.
Possible Revenue Impact for Publishers
The public document on Blink LazyLoading released by Chrome states that this could affect publisher revenues due to a discrepancy created by how many ad networks count impressions.
Ad networks that currently record an impression every time the ad is loaded instead of every time the user actually sees the ad (e.g. using the visibility API) could see a change in their metrics, mainly because LazyFrames could defer ads that would have otherwise been loaded in but never seen by the user. This could also affect the revenue of site owners that use these ads as well. Note that the distance-from-viewport threshold will be tuned such that a deferred frame will typically be loaded in by the time the user scrolls to it.
Since a lot of ads are currently served via third-party iframes, the impact for publishers could be immediate and across the board. When Addy Osmani was announcing the feature on an informal Twitter thread, user Jessy Heady posed a related question.
To which Addy responded:
So it looks like as far as Google is concerned, enabling native lazy loading is better for users and the ad tech ecosystem in the long run in terms of promoting better viewability, even if it comes with some immediate costs for publishers in the near-term.
According to Chrome, native lazy loading will help more websites take advantage of lazy loading to deliver better user experience, and is tentatively scheduled for release on 4th June, 2019. Blink LazyLoading will first be tested on Android and released for desktop platforms later.
FAQs
In lazy loading images, images are loaded only when they are needed on a web page. In this way, the page’s loading time can be improved without reducing its size. When users open a website, they can only see the first fold and associated images. It is not necessary to load the images below the first fold right away.
When lazy loading is used, certain parts of a webpage – especially images – are not loaded until they are needed. In contrast to eager loading, the browser does not request certain resources until the user interacts in a way that requires them.
When lazy loading is enabled, off-screen content is not rendered until it is actually needed. There are many benefits to using this technique. The application reduces initial load times, speeds up perceived performance, and reduces data usage overall.
Shubham is a digital marketer with rich experience working in the advertisement technology industry. He has vast experience in the programmatic industry, driving business strategy and scaling functions including but not limited to growth and marketing, Operations, process optimization, and Sales.
