DEV Community

Cover image for Day 46 of #100DaysOfCode: Images Lazy Loading with IntersectionObserver and React Hooks
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on

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!

Top comments (0)