In the website builder, you can choose the image loading setting for each of your sections containing images. By manually setting some of your images' loading settings, this can help improve your website's overall speed score, but only if this is necessary.
đĄNote: By default, all loading settings are set to Auto loading which will work in most cases. Continue reading only if you want to learn more about the specific cases where manually changing this setting will come in handy.
How it works
To find this setting:
Go to Online store.
Click on Website builder.
Go to Customize your website.
Click on any section that has an image.
Scroll to Image loading.
Learn more about each option below and when it is best to choose them.
Auto loading
This is the default setting for all images. If you are happy with your current speed score, leaving auto loading is the best way to go. This is also the recommended setting in most cases.
Auto loading means that the images in the first two sections on the page will load eagerly, meaning as soon as your website starts loading, these images will load in. The rest of the sections below (the third section and beyond) will load just before they are shown on the screen.
Lazy loading
Setting a section to lazy loading means that it will load just before the image is visible on the screen.
Manually setting an image to lazy loading might be useful in cases where you have two heroes at the top of the page for example. In this case, you may want to set the second hero to lazy loading to optimize the page load speed.
Eager loading
Eager loading means that the image will load when page starts loading. It is important to avoid overusing this setting as this will slow down the initial loading of the page and have a negative impact on your website speed score. In most cases auto loading will work best.
However, this can be useful in cases where your hero image or other important images are below the second section on your page or not visible at the top of the page.
For example, if you have a text section and a spacer section as your first two sections, those do not contain images that need to be loaded. If your third section is a hero image, you may want to set it to eager loading so that it will load as soon as you load the page for a cleaner experience.
