React Round Up
RRU 062: Image Lazy Loading in React
Today’s show has the panel discussing image lazy loading in React. Image lazy loading is the notion that images that are below the fold (rendered outside of your browser view when you initially load a page) are deferred and loaded later, so that your page loads faster. As you scroll down the page and things get close, then they are loaded in. This is a commonly suggested performance optimization, but often it doesn’t work well in React. The panelists talk about their experiences with lazy loading and different methods they’ve seen on other sites.
May 21, 2019
49:14
Episode 062
Hosted by
RRU 062: Image Lazy Loading in React
React Round Up
49:14
0:00
49:14
Speed:
Share This Episode
Show Notes
Sponsors
- Sentry– use the code “devchat” for $100 credit
- Netlify
- TripleByte
Panel
- Justin Bennett
- Thomas Aylott
- Dave Ceddia
Notes
Today’s show has the panel discussing image lazy loading in React. Image lazy loading is the notion that images that are below the fold (rendered outside of your browser view when you initially load a page) are deferred and loaded later, so that your page loads faster. As you scroll down the page and things get close, then they are loaded in. This is a commonly suggested performance optimization, but often it doesn’t work well in React. The panelists talk about their experiences with lazy loading and different methods they’ve seen on other sites.
They discuss the tradeoff between having a lot of images and slower loading and the importance of communicating with the design team. Since lazy loading is a unique challenge in React, they give recommendations for implementing lazy loading and tools for tracking site usage. They talk about dealing with JavaScript payloads, bundle and load splitting, and automating performance tracking. They discuss different performance tracking tools.
The panelists address the NIH bias (Not Invented Here) and the trend that designers tend to be willing to pay money for good tooling, while engineers are cheap. There have been great improvements in the marketplace for good tools, so much so that oftentimes buying the tools is cheaper than making them yourself. They finish by discussing the pros and cons of building vs. buying and the future of the frontend.
Links
- Lighthouse
- Gatsby
- Above the fold optimizations
- Below the fold optimizations
- Crump
- Survive JS on Webpack
- React lazy load image component
- Calibre
- SpeedCurve
- Bundle Analyzer
- Inspect Pack by Formidable Labs
- Cypress
- Github Actions
Picks
Justin Bennett:
Thomas Aylott:
Dave Ceddia: