All Collections
Lazy loading your Shogun images
Lazy loading your Shogun images
Lazy loading can be a great way of ensuring that your images do not have a significant impact on your page load speed
Written by Edward Savoy
Updated over a week ago

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 is loaded, so fewer 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

  • 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. 

A few elements are currently not affected by this feature but are planned in future iterations of Shogun.

  • Container element background videos

  • Element backgrounds (excluding Container element)

  • Instagram element

Additional Notes

  • Images in the top 700px of your page (or "above the fold") are loaded upon page load. Images below the fold are lazy loaded.

  • Images displayed through HTML embeds will not have lazy loading applied to them.

Did this answer your question?