React and Web Performance
- 1. 1 COPYRIGHT © 2021 TECHDIVISION Analyzing Web Performance Issues for React Applications
- 2. 2 2 COPYRIGHT © 2021 TECHDIVISION Lars Röttig ● Senior Software Engineer ● Maintainer Magento Community Engineering Team
- 3. 3 COPYRIGHT © 2021 TECHDIVISION Let's start our next project with React
- 4. 4 COPYRIGHT © 2021 TECHDIVISION Why is our project so slow ?
- 5. 5 COPYRIGHT © 2021 TECHDIVISION Core Web Vitals Source : https://web.dev/vitals
- 6. 6 COPYRIGHT © 2021 TECHDIVISION Set up clean profiles for testing. https://www.debugbear.com/blog/2020-chrome-extension-performance-report
- 7. 7 COPYRIGHT © 2021 TECHDIVISION Lighthouse Chrome https://github.com/GoogleChrome/lighthouse#using-lighthouse-in-chrome-devtools
- 8. 8 COPYRIGHT © 2021 TECHDIVISION Run web profiler on Live site https://www.webpagetest.org/
- 9. 9 COPYRIGHT © 2021 TECHDIVISION State Colocation DEMO https://github.com/larsroettig/react-performance-workshop
- 10. 10 COPYRIGHT © 2021 TECHDIVISION https://twitter.com/meijer_s/status/1331204422404280323/photo/1 Where to pute State
- 11. 11 COPYRIGHT © 2021 TECHDIVISION Summary ● Use lazy import (Code splitting) ● Use memoization with care ○ useMemo ○ useCallback ○ When to useMemo and useCallback ● For GraphQL libraries could beneficial ○ Apollo GraphQL ○ React Query ● Setup Lighthouse CLI for performance testing ● select less 3rd libraries (Bundle size!!!) ● Run https://www.webpagetest.org/ regulary after each sprint
- 12. 12 COPYRIGHT © 2021 TECHDIVISION Web Performance Demo
- 13. 13 COPYRIGHT © 2021 TECHDIVISION Summary ● Use loading skeleton ● Use lazy loading components and images ○ Modern via <img loading=lazy> ● Set height and width for images https://github.com/larsroettig/react-performance-workshop ● Use modern image formats such as WEBP for faster image loading. ● Use srcset to load the most optimal image for the clients screen size. ● Use Server Side Rendering for SPA ○ SSR Architecture in React 18 ○ React 18 Demo
- 14. 14 COPYRIGHT © 2021 TECHDIVISION BE STRONG. BE REAL. BE DIGITAL. TechDivision GmbH Tel. +49 8031 22105-70 Fax +49 8031 221057-22 [email protected] www.techdivision.com Kolbermoor An der Alten Spinnerei 2 a 83059 Kolbermoor München Balanstraße 73, Haus 8 81541 MÜNCHEN Hamburg Große Elbstraße 281 22767 Hamburg Leipzig Käthe-Kollwitz-Straße 60 04109 Leipzig Wien Heiligenstädter Lände 29 1190 Wien Zürich Max-Högger-Strasse 6 8048 Zürich
Editor's Notes
- #6: The ( Largest Contentful Paint) metric reports the render time of the largest image or text block visible within the viewport relative to when the page first started loading. CLS is a measure of the largest burst of layout shift A layout shift occurs any time a visible element changes its position from one rendered frame to the next. FID measures the time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction.
- #7: I have three profiles on Personal all extension enabled Performance/ Incoticotito for Ligthhause React profiling where i have react tools i have enabled
- #8: Use Cli setup Performance test at starting of project to fritsration later Helps to track if you app loads slower because of a feature implementation
- #11: Think about where to handle state i don't want to so deep in state handling because own topic
- #13: I have three profiles on Personal all extension enabled Performance/ Incoticotito for Ligthhause React profiling where i have react tools i have enabled
- #14: <img loading=lazy> is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera) and Firefox.