Lazy loading is on for your Shogun pages by default. Read on to learn what it does, which images it applies to, and how to control it for each Image element.
What is lazy loading?
Lazy loading holds back an image until a visitor scrolls near it, so fewer files load when the page opens and the top of the page appears faster. Images near the top of the page still load straight away, so visitors don't see empty space when the page opens.
How Shogun decides which images load first
Images that start within the first 700px of your Shogun page content load straight away. Images that start further down the page are lazy loaded.
A few things to know:
This is worked out when you publish the page, so it's the same on every screen size.
The decision follows the image file. If the same image is used in the top 700px and again further down, every copy loads straight away.
Preview loads every image straight away, so check lazy loading on your published page.
Choosing how an image loads
Each Image element has a Loading setting in its Performance section:
Auto (the default) uses the 700px rule above.
Eager always loads the image with the page. Use it for an important image just below the 700px mark.
Lazy always waits until the visitor scrolls near the image.
Loading is in the Performance section of the Image settings. Auto is the default.
See How to add images using the Image Element for the other Performance settings.
What is affected by this feature?
Lazy loading applies to these elements:
Image element
Custom element images
Product image element
Product gallery image element
Video element
Container element background images
When using a Slider element, once the Slider element comes into view, all images within the Slider element will be loaded. This is to prevent inconsistent heights of images.
Images displayed through HTML embeds don't have lazy loading applied to them.