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

Follow DevChat on Facebook and Twitter

Picks

Justin Bennett:

Netlify Dev Products
Easy Peasy

Thomas Aylott:

Displaced: Stories from the Syrian Diaspora
React Rewind

Dave Ceddia:

Notion
Understanding By Design