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. In widgets, objects that can be enabled for lazy loading will have a toggle that can be switched on and off.
Here's an example for the banner slider:
Lazy
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:
Code Block | ||
---|---|---|
| ||
<img class="someClasses" src="/images/SomeImage.jpg" style="someStyles"> |
To add lazy loading, edit this code:
Code Block | ||
---|---|---|
| ||
<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
Content by Label | ||||||||
---|---|---|---|---|---|---|---|---|
|