Summary: <h2><strong>Sponsors</strong></h2> <ul> <li> <a href="http://sentry.io/">Sentry</a>– use the code “devchat” for $100 credit</li> <li><a href="https://www.netlify.com/">Netlify</a></li> <li><a href="https://triplebyte.com/react">TripleByte</a></li> </ul> <h3><strong>Panel</strong></h3> <ul> <li>Justin Bennett</li> <li>Thomas Aylott</li> <li>Dave Ceddia</li> </ul> <h3><strong>Notes</strong></h3> <p>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.</p> <p>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.</p> <p>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.</p> <h3><strong>Links</strong></h3> <ul> <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></li> <li><a href="https://www.gatsbyjs.org/">Gatsby</a></li> <li><a href="https://www.optimizely.com/optimization-glossary/above-the-fold/">Above the fold optimizations</a></li> <li><a href="https://www.optimizely.com/optimization-glossary/below-the-fold/">Below the fold optimizations</a></li> <li><a href="https://github.com/CrumpLab/CrumpLab.github.io">Crump</a></li> <li><a href="https://survivejs.com/webpack/">Survive JS on Webpack</a></li> <li><a href="https://github.com/Aljullu/react-lazy-load-image-component">React lazy load image component </a></li> <li><a href="https://calibreapp.com/">Calibre</a></li> <li><a href="https://speedcurve.com/">SpeedCurve</a></li> <li><a href="https://github.com/robertknight/webpack-bundle-size-analyzer">Bundle Analyzer</a></li> <li><a href="https://github.com/FormidableLabs/inspectpack">Inspect Pack by Formidable Labs</a></li> <li><a href="https://github.com/cypress-io/cypress">Cypress</a></li> <li><a href="https://github.com/features/actions">Github Actions</a></li> </ul> <p>Follow DevChat on <a href="https://www.facebook.com/DevChattv/?__tn__=%2Cd%2CP-R&eid=ARDBDrBnK71PDmx_8gE_IeIEo5SnM7cyzylVBjAwfaOo1ck_6q3GXuRBfaUQZaWVvFGyEVjrhDwnS_tV">Facebook</a> and <a href="https://twitter.com/devchattv?lang=en">Twitter</a></p> <h3><strong>Picks</strong></h3> <p><strong>Justin Bennett:</strong></p> <ul> <li><a href="https://www.netlify.com/products/dev/">Netlify Dev Products</a></li> <li><a href="https://github.com/ctrlplusb/easy-peasy">Easy Peasy</a></li> </ul> <p><strong>Thomas Aylott:</strong></p> <ul> <li><a href="https://syriandiaspora.com/">Displaced: Stories from the Syrian Diaspora</a></li> <li><a href="https://github.com/reactrewind/react-rewind">React Rewind</a></li> </ul> <p><strong>Dave Ceddia:</strong></p> <ul> <li><a href="https://www.notion.so/">Notion</a></li> <li><a href="https://www.amazon.com/Understanding-Design-Expanded-Grant-Wiggins-ebook/dp/B00BEN1I80?ie=UTF8&qid=1548462018&sr=8-1&linkCode=ll1&tag=devchattv-20&linkId=f06bfe7482dca8bb751ed6d7cc86e2ab&language=en_US">Understanding By Design</a></li> </ul>
