Successfully reported this slideshow.
Your SlideShare is downloading. ×

React and Web Performance

Ad

1 COPYRIGHT © 2021 TECHDIVISION
Analyzing Web Performance
Issues for React Applications

Ad

2
2 COPYRIGHT © 2021 TECHDIVISION
Lars Röttig
● Senior Software Engineer
● Maintainer Magento
Community Engineering
Team

Ad

3 COPYRIGHT © 2021 TECHDIVISION
Let's start our next project with React

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 14 Ad
1 of 14 Ad

React and Web Performance

Download to read offline

Build a React Application works smoothly but at some point, performance problems will appear. In this talk, I cover problems and how you can analyze them.

Build a React Application works smoothly but at some point, performance problems will appear. In this talk, I cover problems and how you can analyze them.

Advertisement
Advertisement

More Related Content

Advertisement

React and Web Performance

  1. 1. 1 COPYRIGHT © 2021 TECHDIVISION Analyzing Web Performance Issues for React Applications
  2. 2. 2 2 COPYRIGHT © 2021 TECHDIVISION Lars Röttig ● Senior Software Engineer ● Maintainer Magento Community Engineering Team
  3. 3. 3 COPYRIGHT © 2021 TECHDIVISION Let's start our next project with React
  4. 4. 4 COPYRIGHT © 2021 TECHDIVISION Why is our project so slow ?
  5. 5. 5 COPYRIGHT © 2021 TECHDIVISION Core Web Vitals Source : https://web.dev/vitals
  6. 6. 6 COPYRIGHT © 2021 TECHDIVISION Set up clean profiles for testing. https://www.debugbear.com/blog/2020-chrome-extension-performance-report
  7. 7. 7 COPYRIGHT © 2021 TECHDIVISION Lighthouse Chrome https://github.com/GoogleChrome/lighthouse#using-lighthouse-in-chrome-devtools
  8. 8. 8 COPYRIGHT © 2021 TECHDIVISION Run web profiler on Live site https://www.webpagetest.org/
  9. 9. 9 COPYRIGHT © 2021 TECHDIVISION State Colocation DEMO https://github.com/larsroettig/react-performance-workshop
  10. 10. 10 COPYRIGHT © 2021 TECHDIVISION https://twitter.com/meijer_s/status/1331204422404280323/photo/1 Where to pute State
  11. 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. 12 COPYRIGHT © 2021 TECHDIVISION Web Performance Demo
  13. 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. 14 COPYRIGHT © 2021 TECHDIVISION BE STRONG. BE REAL. BE DIGITAL. TechDivision GmbH Tel. +49 8031 22105-70 Fax +49 8031 221057-22 info@techdivision.com 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

  • 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.

  • I have three profiles on
    Personal all extension enabled
    Performance/ Incoticotito for Ligthhause
    React profiling where i have react tools i have enabled
  • 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
  • Think about where to handle state i don't want to so deep in state handling because own topic
  • I have three profiles on
    Personal all extension enabled
    Performance/ Incoticotito for Ligthhause
    React profiling where i have react tools i have enabled
  • <img loading=lazy> is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera) and Firefox.

×