Lazy Loading is an optimisation technique commonly used in the web to delay the initialisation of resources until they are necessary. This improves loading performance by saving device’s resources and network bandwidth.
A practical use case for lazy loading is the following: You have a big web page where at the bottom you have a gallery of images. In normal cases, all images of the gallery will load automatically when the page is loaded. If your gallery has a lot of images it will even block critical resources from being downloaded. This will impose an even greater delay until your page is ready to be used. Ideally you only want to load an image when that image is about to appear in the user’s screen. Thus, in this case, if the user never reaches the bottom of the page, there is no need for the gallery images to be downloaded and loaded.
With Dot.vu, you can enable the Lazy Loading technique for lazy loading images. This will work for all background images plus all image components displayed when an experience is loaded.
Will my project benefit from having Lazy Loading Images Enabled?
Not all projects benefit from having lazy loading enabled. If your page has few images on its initial stages it might be worthwhile to not enable lazy loading.
To check if your page benefits from having Lazy Loading Images optimization enabled go to: Page Settings > Other > Lazy Loading Images. You will see a metric that will tell you how useful would the lazy loading technique be for your project.
Note: This metric is calculated every time you publish your page. If you have done several changes on your page it might be worthwhile to check this metric again.
How to enable Lazy Loading Images
This feature needs to be set individually for each project and is disabled by default. To enable it go to: Page Settings > Other > Lazy Loading Images and select “Enabled” in the Dropdown Menu. Next, click “Save Changes” to save your configuration. Finally, you need to Publish your project again in order to update your Live page.
How do Lazy Loading Images work?
When your experience is loaded, live, Dot.vu’s Lazy Loading Images system checks what images are supposed to load immediately and what images are supposed to load only when the user is close to see them. Thus, we have 2 types of lazy loading images:
- Eager: An image is eager if it is supposed to be loaded immediately when the page loads
- Lazy: An image is lazy if it will only load once the user arrives at its location.
When you have this feature enabled, every time you publish your page Dot.vu calculates what are the images that are likely to appear on the user’s screen, when the page loads. This calculation is done by using different screen sizes and checking what images are likely to appear on each screen. If an image appears on all screens it is deemed as eager, otherwise, it is classified as being lazy.
How to manually control if an image should be eager or lazy
Because not all projects are the same, there might be a need to override Dot.vu’s algorithm for classifying images. In a later section of this help article we will give you a few tips for monitoring and evaluating Lazy Loading for your project, but for now please see what options you have for manual classifying an image.
Set a Lazy Loading mode of a single Component
To set the lazy loading mode for a component:
- Right-click on the component
- Select Visibility
- Go to Lazy Loading and set the desired value.
There are 3 ways to set a component’s lazy loading state:
- Automatic: Will following Dot.vu’s algorithm, when publishing. (see above)
- Eager: Component will always load, regardless of its position on the page
- Lazy: Component will always be lazy loaded, regardless of its position on the page.
Set a Lazy Loading Mode for multiple components
It can be cumbersome to set the lazy loading state of multiple components. For this, you can also define all children components of a parent component to follow its lazy loading settings. To do this:
- Right-click on the component
- Select Visibility
- Go to Loading Mode Depth and set the desired value.
The valid options are:
- Self Only: The Lazy Loading setting will only apply to this component.
- Self and Children: The Lazy Loading setting will apply to this component and to all its children components. Note: If a children component also defines a lazy loading setting, that setting will be chosen instead.
Tips for using Lazy Loading Images
Mobile devices are slower
When you are using adaptive layout on your project, it is always better to optimize for mobile. If you have a different set of images for laptop and mobile, Dot.vu algorithm might say that all images in the screen viewport should be eager. As a result, for mobile devices you might be downloading more images than those which are being displayed. In this case, it is better to say that all images for laptop are lazy and all images for mobile are eager.
Think about user flow
Imagine you have a product comparison page with your logo and a background image at the top of the page. Then, in the middle of your page, you have a comparison table of products and their features. In this case, you will see that your customer wants to go directly to the comparison table, which is where the valuable information is. Thus, in this case, images midway on the page are more valuable than the images at the top. It would be worthwhile to mark all images in the comparison table as eager and the background image as lazy.
Think about your experience
Let us say you are designing a game where the user quickly needs to click on images as they appear. Although the game might not be above the fold, it would be very irritating if the images were not loaded while you are playing the game. Lazy Loading Images’ performance is proportionally related to your user’s network condition. If you have a fast-paced game where images need to be loaded in real-time there might not be enough time to load them. In these cases, it is better to configure the game images to be eager.
In opposite terms, if you have a hidden image above the fold, which is only going to be shown after an animation, if this image is just for design purposes it might be worthwhile to set it as lazy so that other, more important, images load faster.
Don’t overthink it
It might be tempting trying to optimize for all browsers and devices you have available. Although you may see marginal gains, please understand that Dot.vu pages are already optimized for a good experience throughout multiple devices. Lazy Loading Images is not a magic wand you can use to further optimize your page load. As such, you may try to optimize for one device and make another less responsive. If you have a clear view of what images are important to show and what images can be lazy loaded configure it this way, otherwise, it is worthwhile to follow Dot.vu suggestions, by leaving images in Automatic mode.