Day 46 of #100DaysOfCode: Images Lazy Loading with IntersectionObserver and React Hooks

Introduction

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.

1. What is Lazy Loading?
2. Implement Images Lazy Loading with IntersectionObserver for React Components

Details

Please refer to my article

Articles

There are some of my articles and released projects. Feel free to check if you like!

• My blog-posts for software developing
• Facebook page
• My web resume
• Twitter bot
• Side project - Daily Learning