Building Web application is simple to learn but how to find and tame performance problems in React and Web application is another story.

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