Introduction

According to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. Even when properly optimized, images can weigh quite a bit.  Embedded iframes also use a lot of data.  Normally when a user opens a webpage, the entire page’s contents are downloaded, rendered and displayed in a single go. While this allows the browser to cache the web page, there’s no guarantee that the user will actually view all of the downloaded content. All those objects placed on this same page may have a negative impact on the time visitors have to wait before they can access content on your website. And yes, it may harm page (website) performance.

Lazy loading is a technique that defers loading of non-critical resources at page load time. It means loading objects asynchronously. Instead, these "off-screen" resources are loaded at the moment of need.  When you have lazy loading enabled, all content (which include images, videos, iframes) of the webpage does not load at once. Only a certain portion of the webpage is loaded, and the rest of the content loads when users scroll down near to them. Adding lazy loading can make your Joomla website load faster, save bandwidth, and provide a truly uninterrupted browsing session. Text content is loaded anyway, so it will not harm your SEO.

Included Lazy Loading Features

To speed up website(s) since SP Page Builder Pro 3.7 update, you’ll have access to two types of lazy loading methods:

1. For images from several addons, for example, Article, Slideshow, Carousel, Clients, Image, Modal, and Person - by default, you have built-in native lazy loading for the Chrome 76+ browser users. The native lazy loading postpones the loading of the resources until users reacher to a calculated distance from the viewport.
   In image addon we suggest setting width and height. Images will still lazy-load if dimensions are not included, but specifying them decreases the chance of browser reflow.
2. For the rest of browsers, SP Page Builder will be using IntersectionObserver’s Coming into View. You can enable lazy loading from the Global Configuration. Just click on the Options button on the top right corner when you are in the SP Page Builder panel. This will take you to the global settings of SP Page Builder, from there you need to turn ON the Lazy Load button. 
   You’ll see there is a Placeholder Image field opening up when you turn on the Lazy Load option. This image will be used initially before the actual content loads. You can host the image on any server and put the link here. You can choose any picture. However, you need to make sure you use the lightest image file possible. We suggest using a .png image file type, with a single bg color or fully transparent.