RRU 062: Image Lazy Loading in React

Sponsors Sentry– use the code “devchat” for $100 creditNetlifyTripleByte Panel Justin BennettThomas AylottDave 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 LighthouseGatsbyAbove the fold optimizationsBelow the fold optimizationsCrumpSurvive JS on WebpackReact lazy load image component CalibreSpeedCurveBundle AnalyzerInspect Pack by Formidable LabsCypressGithub Actions Follow DevChat on Facebook and Twitter Picks Justin Bennett: Netlify Dev Products