Overview
This talk will cover the concept of lazy loading in detail and how you can apply the design pattern to multiple different facets of your web page.
Objective
Explain the different techniques that can be applied to lazy load different types of assets to users; understand some of the implications that can arise.
Target Audience
JavaScript developers who are currently focused on building front-end experiences and are interested in progressively optimizing their site.
Assumed Audience Knowledge
Although he’ll explain everything in this talk, a basic-intermediate knowledge of the JavaScript ecosystem and tools will help.
Level
Intermediate
Five Things Audience Members Will Learn
- What exactly lazy loading means
- How lazy loading can work in multiple ways (by keeping track of the window scroll event, or by using newer browser APIs like IntersectionObserver)
- How to lazy load images. He’ll explore the different ways they can be done, the different types of placeholders you can use, why loading 10KB of images is still better then 10KB of code for CPU processing because there’s no parse and compile step BUT images still account for X% of all things on the web
- How to lazy load code to improve performance. He’ll cover code splitting with webpack, how Angular helps, how React Loadable helps, how Preact CLI has it built in, how React Suspense can make this even easier, etc…
- Real use-cases of lazy loading in the wild as well as learn about some of the implications that can occur if not used correctly
