SlideShare a Scribd company logo

React and Web Performance

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.

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

Recommended

Magento PWA Studio extensibility
Magento PWA Studio extensibilityMagento PWA Studio extensibility
Magento PWA Studio extensibilityLars Roettig
 
React and Web Performance
React and Web Performance React and Web Performance
React and Web Performance LarsRttig1
 
Bhopal mule soft_meetup_17july2021_azuredevopsintegration_mulesoft
Bhopal mule soft_meetup_17july2021_azuredevopsintegration_mulesoftBhopal mule soft_meetup_17july2021_azuredevopsintegration_mulesoft
Bhopal mule soft_meetup_17july2021_azuredevopsintegration_mulesoftAnkitaJaggi1
 
Ahmadabad mule soft_meetup_6march2021_azure_CICD
Ahmadabad mule soft_meetup_6march2021_azure_CICDAhmadabad mule soft_meetup_6march2021_azure_CICD
Ahmadabad mule soft_meetup_6march2021_azure_CICDShekh Muenuddeen
 
Bhopal mule soft_meetup#2_18sept2021_cloudhubdr_strategy_bestpractices
Bhopal mule soft_meetup#2_18sept2021_cloudhubdr_strategy_bestpracticesBhopal mule soft_meetup#2_18sept2021_cloudhubdr_strategy_bestpractices
Bhopal mule soft_meetup#2_18sept2021_cloudhubdr_strategy_bestpracticesPreetam Deshmukh
 
MuleSoft Kochi Meetup #5– Handling Mule Exceptions
MuleSoft Kochi Meetup #5– Handling Mule ExceptionsMuleSoft Kochi Meetup #5– Handling Mule Exceptions
MuleSoft Kochi Meetup #5– Handling Mule Exceptionssumitahuja94
 

More Related Content

What's hot

MuleSoft meetup__houston #13
MuleSoft meetup__houston #13MuleSoft meetup__houston #13
MuleSoft meetup__houston #13Jim Andrews
 
Pipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSPipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSJaqueline Ramos
 
Sustainability Challenge, Postman, Rest sheet and Anypoint provider : MuleSof...
Sustainability Challenge, Postman, Rest sheet and Anypoint provider : MuleSof...Sustainability Challenge, Postman, Rest sheet and Anypoint provider : MuleSof...
Sustainability Challenge, Postman, Rest sheet and Anypoint provider : MuleSof...Angel Alberici
 
Guiding Diffy to the Enterprise land
Guiding Diffy to the Enterprise landGuiding Diffy to the Enterprise land
Guiding Diffy to the Enterprise landDariusz Łuksza
 
RIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in NuxeoRIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in NuxeoNuxeo
 
UGent Django Infrastructure
UGent Django InfrastructureUGent Django Infrastructure
UGent Django Infrastructurekevinvw
 
Crossing the Streams! Rollout Strategies to Keep Your Users Happy!
Crossing the Streams! Rollout Strategies to Keep Your Users Happy!Crossing the Streams! Rollout Strategies to Keep Your Users Happy!
Crossing the Streams! Rollout Strategies to Keep Your Users Happy!VMware Tanzu
 
Impact Of A Cms Framework Change - Holland Open Netherlands
Impact Of A Cms Framework Change - Holland Open NetherlandsImpact Of A Cms Framework Change - Holland Open Netherlands
Impact Of A Cms Framework Change - Holland Open NetherlandsWilco Jansen
 
Evolution of GitLab Frontend
Evolution of GitLab FrontendEvolution of GitLab Frontend
Evolution of GitLab FrontendFatih Acet
 
TechEvent OpenShift for Developers
TechEvent OpenShift for DevelopersTechEvent OpenShift for Developers
TechEvent OpenShift for DevelopersTrivadis
 
Efficient Code Management
Efficient Code ManagementEfficient Code Management
Efficient Code ManagementRachel Whitton
 
GWT Quick Start
GWT Quick StartGWT Quick Start
GWT Quick StartGuo Albert
 
MuleSoft London Community September 2020 - Project Vita
MuleSoft London Community September 2020 - Project VitaMuleSoft London Community September 2020 - Project Vita
MuleSoft London Community September 2020 - Project VitaPace Integration
 
WebKit for Wayland (Web Engines Hackfest 2014)
WebKit for Wayland (Web Engines Hackfest 2014)WebKit for Wayland (Web Engines Hackfest 2014)
WebKit for Wayland (Web Engines Hackfest 2014)Igalia
 
Understanding GitFlow by Ian Vizarra
Understanding GitFlow by Ian VizarraUnderstanding GitFlow by Ian Vizarra
Understanding GitFlow by Ian Vizarravzrx23
 
Mulesoft AnyyPoint Monitoring for Hybrid Deployment
Mulesoft AnyyPoint Monitoring for Hybrid DeploymentMulesoft AnyyPoint Monitoring for Hybrid Deployment
Mulesoft AnyyPoint Monitoring for Hybrid Deploymentpruthviraj krishnam
 
Presentation on octobercms
Presentation on octobercmsPresentation on octobercms
Presentation on octobercmsRamesh Adhikari
 

What's hot (20)

MuleSoft meetup__houston #13
MuleSoft meetup__houston #13MuleSoft meetup__houston #13
MuleSoft meetup__houston #13
 
Pipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSPipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTS
 
CI/CD with Bitbucket pipelines
CI/CD with Bitbucket pipelinesCI/CD with Bitbucket pipelines
CI/CD with Bitbucket pipelines
 
Sustainability Challenge, Postman, Rest sheet and Anypoint provider : MuleSof...
Sustainability Challenge, Postman, Rest sheet and Anypoint provider : MuleSof...Sustainability Challenge, Postman, Rest sheet and Anypoint provider : MuleSof...
Sustainability Challenge, Postman, Rest sheet and Anypoint provider : MuleSof...
 
Extreact 6.6 Launch
Extreact 6.6 LaunchExtreact 6.6 Launch
Extreact 6.6 Launch
 
Guiding Diffy to the Enterprise land
Guiding Diffy to the Enterprise landGuiding Diffy to the Enterprise land
Guiding Diffy to the Enterprise land
 
RIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in NuxeoRIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in Nuxeo
 
UGent Django Infrastructure
UGent Django InfrastructureUGent Django Infrastructure
UGent Django Infrastructure
 
Crossing the Streams! Rollout Strategies to Keep Your Users Happy!
Crossing the Streams! Rollout Strategies to Keep Your Users Happy!Crossing the Streams! Rollout Strategies to Keep Your Users Happy!
Crossing the Streams! Rollout Strategies to Keep Your Users Happy!
 
Impact Of A Cms Framework Change - Holland Open Netherlands
Impact Of A Cms Framework Change - Holland Open NetherlandsImpact Of A Cms Framework Change - Holland Open Netherlands
Impact Of A Cms Framework Change - Holland Open Netherlands
 
C2M - App design
C2M - App designC2M - App design
C2M - App design
 
Evolution of GitLab Frontend
Evolution of GitLab FrontendEvolution of GitLab Frontend
Evolution of GitLab Frontend
 
TechEvent OpenShift for Developers
TechEvent OpenShift for DevelopersTechEvent OpenShift for Developers
TechEvent OpenShift for Developers
 
Efficient Code Management
Efficient Code ManagementEfficient Code Management
Efficient Code Management
 
GWT Quick Start
GWT Quick StartGWT Quick Start
GWT Quick Start
 
MuleSoft London Community September 2020 - Project Vita
MuleSoft London Community September 2020 - Project VitaMuleSoft London Community September 2020 - Project Vita
MuleSoft London Community September 2020 - Project Vita
 
WebKit for Wayland (Web Engines Hackfest 2014)
WebKit for Wayland (Web Engines Hackfest 2014)WebKit for Wayland (Web Engines Hackfest 2014)
WebKit for Wayland (Web Engines Hackfest 2014)
 
Understanding GitFlow by Ian Vizarra
Understanding GitFlow by Ian VizarraUnderstanding GitFlow by Ian Vizarra
Understanding GitFlow by Ian Vizarra
 
Mulesoft AnyyPoint Monitoring for Hybrid Deployment
Mulesoft AnyyPoint Monitoring for Hybrid DeploymentMulesoft AnyyPoint Monitoring for Hybrid Deployment
Mulesoft AnyyPoint Monitoring for Hybrid Deployment
 
Presentation on octobercms
Presentation on octobercmsPresentation on octobercms
Presentation on octobercms
 

Similar to React and Web Performance

Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps ZNetLive
 
Deploying WebRTC successfully – A web developer perspective
Deploying WebRTC successfully – A web developer perspectiveDeploying WebRTC successfully – A web developer perspective
Deploying WebRTC successfully – A web developer perspectiveDialogic Inc.
 
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Alen Leit
 
JCON_15FactorWorkshop.pptx
JCON_15FactorWorkshop.pptxJCON_15FactorWorkshop.pptx
JCON_15FactorWorkshop.pptxGrace Jansen
 
GIDS_15FactorWorkshop.pdf
GIDS_15FactorWorkshop.pdfGIDS_15FactorWorkshop.pdf
GIDS_15FactorWorkshop.pdfRichHagarty
 
(Letsee) Company Introduction ver 2019_06_17
(Letsee) Company Introduction ver 2019_06_17(Letsee) Company Introduction ver 2019_06_17
(Letsee) Company Introduction ver 2019_06_17JEONG HAN Eom
 
Web Technologies in Automotive & Robotics (BlinkOn 10)
Web Technologies in Automotive & Robotics (BlinkOn 10)Web Technologies in Automotive & Robotics (BlinkOn 10)
Web Technologies in Automotive & Robotics (BlinkOn 10)Igalia
 
New Capabilities and Product Strategy for .NET on PCF
New Capabilities and Product Strategy for .NET on PCF New Capabilities and Product Strategy for .NET on PCF
New Capabilities and Product Strategy for .NET on PCF VMware Tanzu
 
PWA for PHP Developers
PWA for PHP DevelopersPWA for PHP Developers
PWA for PHP DevelopersBen Marks
 
Deploy and Secure Your API Gateway with NGINX: From Zero to Hero – APCJ
Deploy and Secure Your API Gateway with NGINX: From Zero to Hero – APCJDeploy and Secure Your API Gateway with NGINX: From Zero to Hero – APCJ
Deploy and Secure Your API Gateway with NGINX: From Zero to Hero – APCJNGINX, Inc.
 
7 Advantages of React JS in Application Development
7 Advantages of React JS in Application Development7 Advantages of React JS in Application Development
7 Advantages of React JS in Application DevelopmentRlogical Techsoft Pvt Ltd
 
Building Event-Driven Workflows with Knative and Tekton
Building Event-Driven Workflows with Knative and TektonBuilding Event-Driven Workflows with Knative and Tekton
Building Event-Driven Workflows with Knative and TektonLeon Stigter
 
Web.dev extended : What's new in Web [GDG Taichung]
Web.dev extended : What's new in Web [GDG Taichung]Web.dev extended : What's new in Web [GDG Taichung]
Web.dev extended : What's new in Web [GDG Taichung]Chieh Kai Yang
 
Pivotal Platform - December Release A First Look
Pivotal Platform - December Release A First LookPivotal Platform - December Release A First Look
Pivotal Platform - December Release A First LookVMware Tanzu
 
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxModernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxEd Charbeneau
 

Similar to React and Web Performance (20)

Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
Webinar by ZNetLive & Plesk- Winning the Game for WebOps and DevOps
 
Deploying WebRTC successfully – A web developer perspective
Deploying WebRTC successfully – A web developer perspectiveDeploying WebRTC successfully – A web developer perspective
Deploying WebRTC successfully – A web developer perspective
 
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
 
JCON_15FactorWorkshop.pptx
JCON_15FactorWorkshop.pptxJCON_15FactorWorkshop.pptx
JCON_15FactorWorkshop.pptx
 
GIDS_15FactorWorkshop.pdf
GIDS_15FactorWorkshop.pdfGIDS_15FactorWorkshop.pdf
GIDS_15FactorWorkshop.pdf
 
(Letsee) Company Introduction ver 2019_06_17
(Letsee) Company Introduction ver 2019_06_17(Letsee) Company Introduction ver 2019_06_17
(Letsee) Company Introduction ver 2019_06_17
 
SUG Bangalore - Kick Off Session
SUG Bangalore - Kick Off SessionSUG Bangalore - Kick Off Session
SUG Bangalore - Kick Off Session
 
Node.js Tools Ecosystem
Node.js Tools EcosystemNode.js Tools Ecosystem
Node.js Tools Ecosystem
 
Web Technologies in Automotive & Robotics (BlinkOn 10)
Web Technologies in Automotive & Robotics (BlinkOn 10)Web Technologies in Automotive & Robotics (BlinkOn 10)
Web Technologies in Automotive & Robotics (BlinkOn 10)
 
Education&work experience
Education&work experienceEducation&work experience
Education&work experience
 
New Capabilities and Product Strategy for .NET on PCF
New Capabilities and Product Strategy for .NET on PCF New Capabilities and Product Strategy for .NET on PCF
New Capabilities and Product Strategy for .NET on PCF
 
Flutter for web
Flutter for webFlutter for web
Flutter for web
 
Reactive Web Applications
Reactive Web ApplicationsReactive Web Applications
Reactive Web Applications
 
PWA for PHP Developers
PWA for PHP DevelopersPWA for PHP Developers
PWA for PHP Developers
 
Deploy and Secure Your API Gateway with NGINX: From Zero to Hero – APCJ
Deploy and Secure Your API Gateway with NGINX: From Zero to Hero – APCJDeploy and Secure Your API Gateway with NGINX: From Zero to Hero – APCJ
Deploy and Secure Your API Gateway with NGINX: From Zero to Hero – APCJ
 
7 Advantages of React JS in Application Development
7 Advantages of React JS in Application Development7 Advantages of React JS in Application Development
7 Advantages of React JS in Application Development
 
Building Event-Driven Workflows with Knative and Tekton
Building Event-Driven Workflows with Knative and TektonBuilding Event-Driven Workflows with Knative and Tekton
Building Event-Driven Workflows with Knative and Tekton
 
Web.dev extended : What's new in Web [GDG Taichung]
Web.dev extended : What's new in Web [GDG Taichung]Web.dev extended : What's new in Web [GDG Taichung]
Web.dev extended : What's new in Web [GDG Taichung]
 
Pivotal Platform - December Release A First Look
Pivotal Platform - December Release A First LookPivotal Platform - December Release A First Look
Pivotal Platform - December Release A First Look
 
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxModernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptx
 

Recently uploaded

Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsScyllaDB
 
AI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxAI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxUdaiappa Ramachandran
 
Key projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIKey projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIVijayananda Mohire
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...ShapeBlue
 
Microsoft x 2toLead Webinar Session 2 - How Employee Learning and Development...
Microsoft x 2toLead Webinar Session 2 - How Employee Learning and Development...Microsoft x 2toLead Webinar Session 2 - How Employee Learning and Development...
Microsoft x 2toLead Webinar Session 2 - How Employee Learning and Development...2toLead Limited
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024BookNet Canada
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientKari Kakkonen
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...ShapeBlue
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueShapeBlue
 
Trading Software Development_ Trends to Watch in 2024.pdf
Trading Software Development_ Trends to Watch in 2024.pdfTrading Software Development_ Trends to Watch in 2024.pdf
Trading Software Development_ Trends to Watch in 2024.pdfLucas Lagone
 
eXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionseXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionsElanthirayan Madhavan
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfMostafa Higazy
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Jay Zhao
 
Communities, networking and developer culture
Communities, networking and developer cultureCommunities, networking and developer culture
Communities, networking and developer cultureRavi Sanghani
 
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubHow We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubShapeBlue
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
AMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarAMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarThousandEyes
 

Recently uploaded (20)

Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & Pitfalls
 
AI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxAI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptx
 
Key projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIKey projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AI
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
 
Microsoft x 2toLead Webinar Session 2 - How Employee Learning and Development...
Microsoft x 2toLead Webinar Session 2 - How Employee Learning and Development...Microsoft x 2toLead Webinar Session 2 - How Employee Learning and Development...
Microsoft x 2toLead Webinar Session 2 - How Employee Learning and Development...
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficient
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
 
Trading Software Development_ Trends to Watch in 2024.pdf
Trading Software Development_ Trends to Watch in 2024.pdfTrading Software Development_ Trends to Watch in 2024.pdf
Trading Software Development_ Trends to Watch in 2024.pdf
 
eXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionseXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductions
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdf
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
 
Communities, networking and developer culture
Communities, networking and developer cultureCommunities, networking and developer culture
Communities, networking and developer culture
 
Sue Loth: Job Search Strategies using personal connections
Sue Loth: Job Search Strategies using personal connectionsSue Loth: Job Search Strategies using personal connections
Sue Loth: Job Search Strategies using personal connections
 
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubHow We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
AMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarAMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes Webinar
 

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

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