Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing High Performance React Applications
Search
Sendil Kumar N
June 01, 2022
Programming
1
140
Designing High Performance React Applications
Sendil Kumar N
June 01, 2022
Tweet
Share
More Decks by Sendil Kumar N
See All by Sendil Kumar N
[Heapcon-2023] Building High Performance Web Applications
sendilkumarn
0
70
Building Reactive Microservices with Kotlin & running on Kubernetes
sendilkumarn
0
140
Building Reactive Microservices with JHipster & K8s
sendilkumarn
0
16
Batching, Suspense, and Server Components
sendilkumarn
0
33
DevNexus_Building_with__Zero_Trust_Architecture_Copy.pdf
sendilkumarn
0
51
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
100
Easy Microservices with K8s & Istio
sendilkumarn
0
85
KHipster - Kotlin Hipster
sendilkumarn
0
200
Microservices with JHipster
sendilkumarn
0
72
Other Decks in Programming
See All in Programming
Patched fetch did not work
quramy
4
390
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Ruby Parser progress report 2024
yui_knk
2
230
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
2
620
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
180
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
Swiftコードバトル必勝法
toshi0383
0
170
Jakarta EE meets AI
ivargrimstad
1
520
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Designing for humans not robots
tammielis
248
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Clear Off the Table
cherdarchuk
91
320k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building an army of robots
kneath
302
42k
Writing Fast Ruby
sferik
623
60k
Infographics Made Easy
chrislema
239
18k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Transcript
@sendilkumarn Designing High Performance React Applications
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn https://www.packt.com/product/web-development/b14844-practical-webassembly/ 30PRWEB
@sendilkumarn @sendilkumarn why performance matters?
@sendilkumarn @sendilkumarn 4.42% users drop for every additional second of
load time source
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn Every 1s improvement increases CR by 2%
@sendilkumarn @sendilkumarn Every 1s improvement increases CR by 2% 10M
= 200K ⏫
@sendilkumarn @sendilkumarn 3-4s Ideal load time source
@sendilkumarn @sendilkumarn ~15s average mobile site load time source
@sendilkumarn @sendilkumarn ⚡ sites = 😄 users
@sendilkumarn @sendilkumarn 😄 users = 📈 CR
@sendilkumarn @sendilkumarn https://web.dev/vitals-business-impact/
@sendilkumarn @sendilkumarn Core Web Vitals
@sendilkumarn @sendilkumarn GET /home TTFB FCP GET /main.js Render (App)
LCP TTI Time To First Byte First Contentful Paint Largest Contentful Paint Time To Interactivity
@sendilkumarn @sendilkumarn Lower is better Source
@sendilkumarn @sendilkumarn Layout Shifts Source
@sendilkumarn @sendilkumarn Lesser Layout Shifts Sooner Time To Interactivity Faster
Largest Contentful Paint
@sendilkumarn @sendilkumarn Agenda Obvious - Things that you know already!
Rendering - Render based on your needs It depends - It actually depends on your usecase Common - Use it everywhere
@sendilkumarn @sendilkumarn Obvious
@sendilkumarn @sendilkumarn Bundling & Splitting
@sendilkumarn @sendilkumarn GET /home GET /main.js Render (App) Browser has
to wait until the main.js is downloaded fully. Smaller the size better the performance
@sendilkumarn @sendilkumarn Route based splitting Component based splitting
@sendilkumarn @sendilkumarn 100 - 170 KB is the ideal size
for the JavaScript size Budget JavaScript
@sendilkumarn @sendilkumarn Analyse JavaScript bundle size & Optimise
@sendilkumarn @sendilkumarn Avoid Data mutation
@sendilkumarn @sendilkumarn Every mutation causes re-rendering
@sendilkumarn @sendilkumarn Every re-rendering causes performance impact
@sendilkumarn @sendilkumarn Immutability
@sendilkumarn @sendilkumarn Reconciliation
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn SCU SCU SCU SCU SCU SCU SCU
@sendilkumarn @sendilkumarn VDOMeq VDOMeq VDOMeq
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn Architect your code / application such that re-rendering
affects lesser components in your react tree.
@sendilkumarn @sendilkumarn Virtualization
@sendilkumarn @sendilkumarn viewport
@sendilkumarn @sendilkumarn Rendered Rendered Rendered Rendered Rendered Not Rendered Not
Rendered
@sendilkumarn @sendilkumarn Source 100x
@sendilkumarn @sendilkumarn React 18 - Automatic Batching
@sendilkumarn @sendilkumarn Batching is when React groups multiple state updates
into a single re-render for a better performance
@sendilkumarn @sendilkumarn Re-rendering happens here 17
@sendilkumarn @sendilkumarn Re-rendering happens here Re-rendering happens here 17
@sendilkumarn @sendilkumarn Re-rendering happens here 18
@sendilkumarn @sendilkumarn •Better performance •No unnecessary re-renders •Consistent User Experience
•No weird intermediate state
@sendilkumarn @sendilkumarn Obvious 🔻 bundle size 🔻 re-rendering 🔻 updates
✅ virtualize ✅ React 18
@sendilkumarn @sendilkumarn Deliver only what is used
@sendilkumarn @sendilkumarn Rendering
@sendilkumarn @sendilkumarn Client Side Rendering (CSR) Static Rendering
@sendilkumarn @sendilkumarn JS CSS HTML
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn 👍 Fast Time To First Byte 👍 Good
for static content 👎 Performance depends on the client 👎 TTI is high 👎 Bundle size decreases your site performance
@sendilkumarn @sendilkumarn Server Side Rendering (SSR)
@sendilkumarn @sendilkumarn SSR generates HTML from react components in server
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn Loading Starts…
@sendilkumarn @sendilkumarn Server Fetches Data Renders HTML
@sendilkumarn @sendilkumarn Client receives HTML Only HTML No Interactions
@sendilkumarn @sendilkumarn Hydrate
@sendilkumarn @sendilkumarn Finish Fetching Finish Loading Finish Hydrate Interact
@sendilkumarn @sendilkumarn 👍 Fast TTI 👍 Good for dynamic content
👍 Performance doesn’t depend on the client 👎 TTFB is high 👎 High server cost
@sendilkumarn @sendilkumarn SSR CSR Dynamic Static Balance as you need
@sendilkumarn @sendilkumarn React 18 - Suspense in SSR
@sendilkumarn @sendilkumarn <suspense /> lets you wait for code to
load
@sendilkumarn @sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post />
<Comments /> </Main> <Footer /> </Layout>
@sendilkumarn @sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post />
<Comments /> </Main> <Footer /> </Layout>
@sendilkumarn @sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post />
<Comments /> </Main> <Footer /> </Layout> Server Side Render
@sendilkumarn @sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post />
<Comments /> </Main> <Footer /> </Layout> fetchPosts().then(post => { fetchCommentForPost(…) });
@sendilkumarn @sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post />
<Suspense> <Comments /> </Suspense> </Main> <Footer /> </Layout> fetchPosts(); fetchCommentsForPost();
@sendilkumarn @sendilkumarn Finish Fetching Finish Loading Finish Hydrate Interact
@sendilkumarn @sendilkumarn Rendering
@sendilkumarn @sendilkumarn Islands Architecture Photo source Rendering
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn It depends
@sendilkumarn @sendilkumarn React 18 - Server Components
@sendilkumarn @sendilkumarn Server Components are React components but they will
run on server
@sendilkumarn @sendilkumarn ⚠ Not yet production ready ⚠
@sendilkumarn @sendilkumarn *.server.js *.client.js *.js
@sendilkumarn @sendilkumarn Server Closer & Faster
@sendilkumarn @sendilkumarn blog.js 229 kb 954 kb 32 kb 1215
kb Calling DB from the client Calculates them on the client
@sendilkumarn @sendilkumarn blog.server.js Handled in server SSR HTML
@sendilkumarn @sendilkumarn 👍 No huge dependencies 👍 Props are allowed
👍 Can import *.client.js 👎 No interactivity 👎 No State / user events
@sendilkumarn @sendilkumarn Use Technologies as needed
@sendilkumarn @sendilkumarn GraphQL Redux Css in JS Lodash moment.js ……………
@sendilkumarn @sendilkumarn Limit component size
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn VDOM eq - takes longer time Too many
updates Too complex to maintain
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn Common
@sendilkumarn @sendilkumarn Cache is your friend
@sendilkumarn @sendilkumarn Edge Cache
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn Image Lazy Loading
@sendilkumarn @sendilkumarn <img src=“image.png” loading=“lazy” alt=“…” /> <img src=“image.png” alt=“…”
/> <img src=“image.png” loading=“eager” alt=“…” /> <img src=“image.png” loading=“auto” alt=“…” />
@sendilkumarn @sendilkumarn Apple Macbook Site 17.5Mb only images
@sendilkumarn @sendilkumarn Source
@sendilkumarn @sendilkumarn Inline critical ; defer non-critical
@sendilkumarn @sendilkumarn Remove unused resources
@sendilkumarn @sendilkumarn
@sendilkumarn @sendilkumarn Preload Lazy load
@sendilkumarn @sendilkumarn ChromeVille DNS Land Web World DataVille Folderz hAPPy
Load HTML HTML JS CSS Parse CSS & JS Waits to fi nish download Parse & Execute Critical @sendilkumarn
@sendilkumarn @sendilkumarn Minimize roundtrips
@sendilkumarn @sendilkumarn ChromeVille DNS Land Web World DataVille Folderz hAPPy
HTML JS CSS Load HTML Parse CSS & JS Waits to fi nish download Parse & Execute APIs @sendilkumarn
@sendilkumarn @sendilkumarn Minimize roundtrips (APIs)
@sendilkumarn @sendilkumarn ChromeVille DNS Land Web World DataVille Folderz hAPPy
HTML JS CSS Load HTML Parse CSS & JS Waits to fi nish download Parse & Execute APIs SSR @sendilkumarn
@sendilkumarn @sendilkumarn React Profilers
@sendilkumarn @sendilkumarn Performance Optimisation is an ongoing process
@sendilkumarn @sendilkumarn Measure! Optimize!! Measure!!!
@sendilkumarn @sendilkumarn Questions
@sendilkumarn @sendilkumarn Thanks