The document outlines strategies for improving web performance in React applications, emphasizing techniques such as code splitting, memoization, and optimal image loading. It recommends using performance testing tools like Lighthouse and WebPageTest regularly after sprints. Additionally, it suggests leveraging server-side rendering and modern image formats to enhance loading times.

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