Use-case: background information
In this article, we'll examine a real-world scenario in which a developer accidentally lazy-loaded the Largest Contentful Paint image, resulting in a subpar user experience. We'll discuss why the LCP image should always come first and how to correct this common oversight.
- CMS: Magento 2 Hÿva
- Device: Mobile
- Percentile: 80th
Lazyloading explained
Lazy loading is a method that delays loading non-essential resources when a page loads. Instead, these resources are loaded when they are about to come into view. This can speed up how quickly the page loads because it cuts down on the amount of data that needs to be fetched, parsed, and displayed at the start. But lazy-loading the Largest Contentful Paint (LCP) element can make the user experience worse. The LCP element is really important because it marks the point in the page load timeline when the page's main content has likely loaded.
Demo by web.dev / Mathias Bynens
What browsers support lazy loading?
Currently, all commonly used browsers such as Google Chrome, Safari, and Firefox support the lazy load attribute. However, Firefox only supports lazy loading on the image attribute and not, for example, on an iFrame. Internet Explorer does not support lazy loading, but whether it is still widely used remains to be seen.
If you lazy load an image, but a user comes in through a browser that does not support it then it is ignored.
What elements can be lazyloaded?
You can lazyload different elements by adding the following code:
<img src="image.jpg" alt="..." loading=lazy />
<iframe src="video-player.html" title="..." loading=lazy></iframe>
Other elements that can be lazy loaded are:
- Images
- Videos
- Scripts
- Iframes
- Web fonts
Depending on the usage and structure of your website, you can decide which resources should be lazyloaded, or not.
Benefits of lazy loading
A lazy loading element brings many benefits and has many use cases. Below we list the benefits of lazy loading:
- Improved Initial Load Time: By employing lazy loading, the weight of a webpage decreases, leading to a faster page load time.
- Preserving Bandwidth: Lazy loading helps save bandwidth by only supplying content to users when they ask for it.
- Saving System Resources: By rendering or executing only necessary images, JavaScript, and other code, lazy loading helps to save both server and client resources.
Why you shouldn't lazyload your LCP
Lazyloading is often used on images below the fold, but it often happens that, for example, plugins or a developer error causes all images to be lazy loaded. This can then be harmful to the LCP. In the image below you see the LCP value of lazyloaded and non-lazyloaded images and the impact on performance.
So how should you load your LCP?
You want the LCP image to load as fast as possible, so with lazy loading you are applying an anti-pattern. Our recommendation for an inline LCP image is to add a fetchpriority high. This way, the browser knows that this is an important element and gets priority.
Don't lazy load images above the fold
To keep the user experience and performance optimal, do not lazyload images or other elements above the fold. This, for example, slows down the image and gives you a higher value on your Largest Contentful Paint that counts in your Core Web Vitals Assessment. Separately, you want to make sure your user knows as quickly as possible that the page is loading and showing valuable content.
