In this talk, we will explore the concept of lazy loading which involves deferring loading content in order to optimize content delivery and improve website performance. We’ll walk through the process of how to wrap components that we want to lazy load using the open source package “simple-react-intersection-observer”, analyze the source code, and discuss practical use cases.

CONTENTS

0:04 - Intro
0:31 - What is Lazy Loading
0:55 - Example
2:49 - Simple-React-Intersection-Observer
3:39 - Source code
5:49 - Why not Use Intersection-Observer Polyfill
6:41 - Our Use Case
7:27 - Using simple-react-intersection-observer and Live demo
10:04 - Summary
11:16 - Question: Are there any alternatives?
12:31 - Question: Mobile experience

RESOURCES

simple-react-intersection-observer
https://github.com/eMarketerOSS/simple-react-intersection-observer

React-Intersection-Observer
https://github.com/researchgate/react-intersection-observer

nwb Toolkit
https://github.com/insin/nwb