Lazy loading means waiting to load some parts of a webpage until they are needed. On your Commerce Vision site, lazy loading of non-critical files can be enabled. This means that when a user views a page, these files won't load until they are needed. They will only load when the file, e.g., an image, is required on screen, or what is called above the fold.
Here's an example of how lazy loading works. Suppose your home page has a slider campaign, where only one slide at a time is viewed. With lazy loading on for the slider, an image file will not be loaded until that slide is visible to the user.
On this page:
Why use lazy loading?
The idea behind lazy loading is faster page load times.
By default, lazy loading of banners, images and product images is enabled by default for all websites. For greater control, objects in widgets that can be lazy loaded will have a toggle that can be switched on and off.
Here's an example for the banner slider:
Add lazy loading for images in HTML Snippet and Custom widgets
You've embedded an image in an HTML Snippet or Custom widget and want to enable lazy loading, Here's a guide to do it.
You have an image tag:
<img class="someClasses" src="/images/SomeImage.jpg" style="someStyles">
To add lazy loading, edit this code:
<img class="cv-lazy someClasses" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="/images/SomeImage.jpg" style="someStyles">
Let's look at what has been done:
- cv-lazy: Add cv-lazy as a class to the attribute.
- src: update the src to a placeholder image. Use the gif format in this case so we don't get a layout shift.
- data-src: original src attribute changed to data-src to enable the original image to be lazy loaded.
Related help
