Lazy loading is enabled on your Shogun pages by default, you can read up more about what this implementation means, how this affects your pages and what you can do to take full advantage of this feature.
What is lazy loading?
Lazy loading is the deferring of the loading of images until the image comes into view on the page. This means that not all images are loaded when the page loaded, so less resources are loaded at the same time. Only images that are within the first 700px of the page are loaded on the page load time, the rest will benefit from the lazy load feature.
What is affected by this feature?
There are a few elements that have this feature applied by default, these are as follows:
- Image element
- Custom element images
- Product image element
- Product gallery image element
- Video element
- Section 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.
A few elements are currently not affected by this feature, but are planned in future iterations of Shogun.
- Section element background videos
- Element backgrounds (excluding Section element)
- Instagram element
Images in the top 700px of your page are loaded on page load - and images just under this threshold are prefetched. This is to ensure smooth scrolling when visiting the page.