LazyLoading: Improving Your Website's Performance
LazyLoading is a feature that improves your website’s loading speed by delaying the loading of images until they’re needed. This is particularly effective for images outside the initial viewport, as they load only when about to be displayed. This approach enhances website performance, saves bandwidth, and reduces server load.
Why is LazyLoading important?
LazyLoading helps you cut down on load times, making your website more user-friendly and increasing visitor retention. It's especially valuable for image-heavy sites ensuring that essential content loads first.
When to Use Lazy or Eager Loading:
Lazy: Ideal for images that are out of view when the page initially loads, like those in the lower parts of a page.
Eager: Best for images that are critical to the user experience and should load immediately, such as hero images or above-the-fold content.
How to Enable LazyLoading?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Navigate to a section that holds the image.
STEP 3
Navigate to images loading, then go to loading type.
Select lazy instead of eager, to enable lazyloading.
STEP 4
Click Save to apply the changes.
How to Disable LazyLoading?
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Navigate to a section that holds the image.
STEP 3
Navigate to images loading, then go to loading type.
Select eager instead of lazy, to disable lazyloading.
STEP 4
Click Save to apply the changes.