Lesson 4.2

Lazy loading and prefetching

Lazy loading defers the download; prefetching starts it early on a hint like hover. Together they hide the network cost from the user.

22mAdvanced3,586 students
Video thumbnail for Lazy loading and prefetching

Sign in to watch this lesson

Browsing is free. Create an account to play videos and track your progress.

Overview

Lazy loading defers the download; prefetching starts it early on a hint like hover. Together they hide the network cost from the user.

What this lesson covers

  • Load a component only when it is about to be needed
  • Prefetch on intent signals such as hover or viewport
  • Keep a fallback that does not shift the layout

This lesson sits in Bundle and Load Performance, part of React Performance Engineering. It assumes what came before it and leads directly into the next lesson in the module.

In this lesson you will:

  • Load a component only when it is about to be needed
  • Prefetch on intent signals such as hover or viewport
  • Keep a fallback that does not shift the layout
Lazy loading and prefetching — Skiply