Lazy Loading for Magento 2
v1.0.0
Magento 2 Lazy Loading extension allows speeding up the site load by showing the image only at the demanding time. Lazy Loading improves site performance and reduces bounce rate due to slow loading.
Documents
You've just added this product to the cart:
Lazy Loading
You've just added this product to the cart:
Lazy Loading Pro
Screenshots
What is Lazy Loading and its benefits?
Lazy Load image means that the images aren’t loaded until the user scrolls and images come into the browser’s viewport.
The process of Lazy Loading typically likes that:
- You visit a page and scroll through the content
- Instead of the actual image, you see a blurry placeholder image
- Instantly after that, the actual image replaced the placeholder.
With Magento 2 Lazy Loading, the page loading time is reduced significantly. The page is not hard to load the whole images from top to toe at once. Instead, the images can be loaded only when they are scrolled, reaching customers’ viewport.
The page weight is lightened and speeds up the loading of the webpage.
Lazy Loading conserves bandwidth by delivering images to users “on-demand” when they come into customers’ viewport.
Lazy Loading conserves both server and client resources, because, for some images, JavaScript and other code actually need to be rendered or executed.
Because the page loading is sped up significantly, besides animated image transactions, customers will have a better experience during their time surfing and shopping.
According to Hubspot, 47% of users expect a webpage to load less than 2 seconds and a 1-second delay in page load causes 11% decrease in page viewers.
Therefore, improve page loading by Lazy Loading supports stores to keep customers on site, which reduces the bounce rate effectively.
Lazy Load Images
Delay images until reaching the user’s viewport With Lazy Loading, only images within the viewable part of the page will load. Images out of view will not load unless the user scrolls down the page and they come into view.
Improve page loading Magento 2 Lazy Loading extension is really useful to the long web pages. Because it does not take time to load totally all images at once, the page load is sped up significantly. Hence, it decreases the bounce rate coming from slow page loading.
Lazy Loading to the most popular pages
Easy to apply Lazy Loading to the most popular pages on any store site. Here are the pages/sections that are always visited:
- Category Page
- Product Page
- CMS Page
- Search Page
- Related, cross-sell, up-sell blocks
The kind of pages always contains the most product images. Therefore, it is very useful to apply the Lazy Loading to them.
Various Lazy Loading effects
Lazy Loading module offers diverse loading effects for the store admin to apply easily and suitably.
Placeholders
- Transparent: This is the most recommended one to improve Lighthouse results.
- Blur: Smooth loading transaction
- Low resolution: Blurred or pixelated loading
Loading icon Use any loading icon when loading images. Upload any icon (gif, jpg, svg, png) as you wish.
Set loading point time
By default, images are loaded immediately when they appear on the screen. However, if you want the images to load earlier, you can use the threshold parameter.
For example, if the threshold is 200px, the image load appears within 200px far from the viewport (invisible loading).
This maintains the constancy of image appearance while it saves bandwidth.
Exclude Lazy Loading with ease
In case you do not want to apply Lazy Loading to all images, there are multiple ways to add exclusions.
- Exclude page with URL: Page(s) with the exclude URL(s) will not be applied with Lazy Loading. For example: /gear.html
- Exclude CSS class: Images with exclude CSS class will not be applied with Lazy Loadinging. For example: <img class="downloadable-product" src="lifelong.jpg">
- Exclude Text: Image title or image name with the exclude text will not be applied with Lazy Loading. For example: <img title="lifelong" src="download.jpg">
Full Features List
For store admins
- Enable/ Disable the Lazy Loading extension
- Select pages to apply Lazy Loading: Category Page, Product Detail Page, CMS Page, Checkout Page, Search Page, Related/Cross-sell/ Up-sell product block.
- Exclude Lazy Loading application by exclude URL, exclude CSS class, Exclude text in image title/ name
- Set the loading threshold
- Select the loading type: icon or placeholder
- Upload loading icon and able to resize
- Select the placeholder type: Transparent, Blurred, Low resolution
- Compatible with orther extensions: Product Options, Image Optimizer, Configurable Product Grid View, Free SEO Module,etc...
For customers
- Experience the fast-loading page
- Time-saving and have better user experience
FAQs
You can apply Lazy Loading to images on Category Page, Product Detail Page, CMS Page, Checkout Page, Search Page, or Related/Cross-sell/ Up-sell product blocks.
There are two main types: loading icon and lightweight placeholders. With the loading icon, you can upload any image to make the loading icon (recommended size 64*64px). With placeholder, you can select 3 types: transparent, blurred or low-resolution.
Threshold is used in case you want the images to load earlier, you can use the threshold parameter (px). For example, if the threshold is 200px, the image load appears within 200px far from the viewport.
Can't find your feature?
Are you looking for a feature in Lazy Loading. Tell Elle your wants and needs.
Are you an agency?
Do you often visit us for purchasing extensions and technical support? Speak to April to learn about your exclusive benefits on Mageplaza