What is meant by "lazy load"?
Lazy load is a concept that aims to improve the load time of a web page or application by loading certain content only when the user actually needs it.
For example, a web page that contains many images can be can be configured to load the images only when the user scrolls down and they come into the visible area. visible area. This avoids the user having to wait for all the images to load before they can use the page. Lazy load can significantly improve the loading time of a web page, contributing to a better user experience.
Lazy load and Cumulative Layout Shift (CLS)
The lazy load itself is not a problem for the Cumulative Layout Shift (CLS), but it can contribute to increasing the CLS. You should try to avoid this. CLS is a measure of the stability of a web page's layout and is measured by observing the size and location of visual elements over time. If elements that are loaded using lazy load, change the size and location of other elements, this can cause the CLS to increase. To avoid this, when implementing lazy load, ensure that the size and location of the loaded elements are specified in advance. are predefined. This prevents web page elements from being moved at render time.
These "lazy loading" JavaScript tools make programming easier
- Lazy Load (https://github.com/verlok/lazyload)
- Echo.js (https://github.com/toddmotto/echo)
- Lozad.js (https://github.com/ApoorvSaxena/lozad.js)
- yall.js (https://github.com/malchata/yall.js)
These tools all work in a similar way. They observe the DOM (Document Object Model) and load images and other resources only when they become visible. This can improve the loading time of the website and help it become faster and more responsive. It's recommended to try one of these tools and see if it's suitable for your needs.
