Designing High Performance React Applications

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

@sendilkumarn @sendilkumarn VDOMeq VDOMeq VDOMeq

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

<Comments /> </Main> <Footer /> </Layout> Server Side Render

<Comments /> </Main> <Footer /> </Layout> fetchPosts().then(post => { fetchCommentForPost(…) });

<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 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 VDOM eq - takes longer time Too many
updates Too complex to maintain

@sendilkumarn @sendilkumarn Common

@sendilkumarn @sendilkumarn Cache is your friend

@sendilkumarn @sendilkumarn Edge Cache

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

HTML JS CSS Load HTML Parse CSS & JS Waits to fi nish download Parse & Execute APIs @sendilkumarn

@sendilkumarn @sendilkumarn Minimize roundtrips (APIs)

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

Designing High Performance React Applications

Designing High Performance React Applications

More Decks by Sendil Kumar N

Other Decks in Programming

Featured

Transcript