The website with Image lazy loading loads off-screen images after all critical resources have finished loading to lower Time to Interactive (TTI). The user can avoid wasting money on large data and processing time for decoding the downloaded contents.
The TTI score is a comparison of your page’s TTI and the TTI for real websites, based on data from the HTTP Archive. Developers can measure TTI from Lighthouse
This article introduces the following topics.
- What is Lazy Loading?
- Implement Images Lazy Loading with IntersectionObserver for React Components
Please refer to my article
There are some of my articles and released projects. Feel free to check if you like!