Magento 2 Lazy Load
Magento 2 Lazy Load fetches images, background images and YouTube videos only when a visitor needs them, so the first screen loads faster.
The first images on the page still load right away, so the main image is never delayed.
- Native lazy loading for all images
- Lazy-load background images
- Keep the first images out of lazy loading
- YouTube videos load on click
- Exclude images by name or file type
Business Value
- Opportunity: Images and videos are often the heaviest part of a page, so the order they load in decides how fast the first screen appears.
- Problem: Magento 2.4 lazy-loads product images in category listings only. Banners, CMS and Page Builder images, background images and YouTube embeds load right away and compete with the content the visitor sees first.
- Solution: Lazy loading is the standard way to fetch media only when a visitor needs it. This feature applies it across the store, while the first images on the page still load right away, so the main image isn't delayed.
How it Works
The feature adds the browser's native lazy loading to images across the store: offscreen images load only when a visitor scrolls close to them. Background images set by Page Builder or by the CSS classes you list are lazy-loaded as well.
YouTube videos are replaced with a thumbnail and a play button, and the video loads only when the visitor clicks it. Other iframes, such as maps, can be lazy-loaded too.
Lazy Load is part of the Google PageSpeed Optimizer extension, which also optimizes JavaScript and CSS, converts images to WebP and monitors your PageSpeed score.
Faster Pages, Better Score
The first screen downloads less, so the page appears sooner and offscreen images stop holding back your PageSpeed Insights score. Your site also uses less data and processing power, which matters most on mobile.
Keep the Main Image First
Lazy-loading the main image would hurt Largest Contentful Paint. The first images and background images on the page skip lazy loading and can get fetchpriority="high", so the browser loads them first. You choose how many.
Background Images Too
Many banners are CSS backgrounds, which native lazy loading doesn't cover. The feature lazy-loads background images from Page Builder and from the CSS classes you specify.
Manage Exceptions
Some images, such as vector art, are so light that loading them lazily is impractical. You may also want to load a larger image immediately so that visitors won't have to wait for it later. You can exclude images from lazy loading by name or file type, and SVG files are skipped by default.
When should I enable lazy loading?
Keep it enabled on any store. Longer pages with many images, banners and videos benefit the most.
Magento 2.4 already lazy loads images. What does this add?
Magento 2.4 lazy-loads product images in category listings only. This feature covers images across the store, background images from Page Builder and CSS classes, YouTube videos and other iframes. It also keeps the first images out of lazy loading and can give them fetchpriority="high", so the main image isn't delayed.
Does it fix the "Defer offscreen images" warning in PageSpeed Insights?
Yes, that warning is about images below the fold loading with the page. With lazy loading on, offscreen images load only when the visitor scrolls close to them. Images you exclude by name or type still load right away.
Will lazy loading affect SEO?
No. The feature uses the browser's native lazy loading, which Google supports, so all your content stays on the page and gets indexed. The site simply loads it more efficiently.
Does lazy loading optimize images?
It doesn't. Image compression and WebP conversion are separate features of the Google PageSpeed Optimizer extension.
Will lazy loading make my images blurry?
No, it won't. Some websites load low-resolution placeholders before full-sized images, but this is a completely different feature.
These are our primary. A major portion of our new clients come from referrals from our existing clients. Our professional team of developers, marketers and support staff have invested the best knowledge and experience in the field into our work, so you know you can come back to us again and again.
One year free and high quality support. We go to great lengths to provide maximum satisfaction with every module you have purchased in our store. By helping you with installation, configuration, answering your every question, we do all our best to eliminate any possible problems.
30-days money back guarantee. If you are not satisfied with our extension performance for any reason, we provide a full refund.
We constantly add new features to all our modules, and are always interested in hearing your opinion and implementing your suggested features in our future developments.
We provide an expanded user guide for every aspect of our extension, so you can find answers for all your burning questions.
You can customize extension according to your needs and requirements.
The Module is easy to install and upgrade, just follow our step-by-step user guide. Additionally, the extension is ready to use with the Hyvä theme.
No core modifications. The extension has been tested in a Magento Cloud environment and is fully compatible with it.