[Heapcon-2023] Building High Performance Web Applications

@sendilkumarn

@sendilkumarn Parker Solar Rover 635,266 km/h

@sendilkumarn

@sendilkumarn And many more… Janky Sliders Shifting contents 7mb images
71 critical requests ie support CSS JS shenanigans Animations

@sendilkumarn Sendil Nellaiyapen High Performance Web Applications

@sendilkumarn 🇮🇳 / 🇳🇱 Sendil Nellaiyapen

@sendilkumarn Engineering Manager @ Uber 🇮🇳 / 🇳🇱 Sendil Nellaiyapen

Right now learning Zig-lang

Right now learning Zig-lang GDE Web Performance

@sendilkumarn What would you like to see in the session?

Code

Code Light

Code Common Light

Code Common Light Rendering

Code Common Light Rendering Saga

@sendilkumarn How websites work? Browser Server

@sendilkumarn How websites work? Browser Redirect GET / Server

@sendilkumarn How websites work? Browser Redirect GET / Server Cache

DNS

DNS TCP

DNS TCP TLS

DNS TCP TLS Resp

DNS TCP TLS Resp HTML

DNS TCP TLS Resp Process HTML

DNS TCP TLS Resp Process Load HTML

DNS TCP TLS Resp Process Load Time To First Byte HTML TTFB

@sendilkumarn Web Performance Terminologies TTFB TTI LCP FID FCP Main
thread Prefetch Preload CLS TBT CWV Core Web Vital INP Req Res Jargon alert!!!

@sendilkumarn Time To First Byte TTFB

@sendilkumarn 0.3 - 3s human attention span

@sendilkumarn <html> <head> <link rel=“stylesheet” href=“style.css”/> </head> <body> <img src=“hero.img”
…/> <img src=“villain.img” …/> <h1> Hello World </h1> <div>…</div> <script src=“bundle.js”></script> </body> </html>

DNS TCP TLS Resp Process Load HTML

DNS TCP TLS Resp Process Load HTML JS

DNS TCP TLS Resp Process Load HTML JS CSS

DNS TCP TLS Resp Process Load HTML JS CSS Img

@sendilkumarn Critical Resources How websites work? Browser Redirect GET /
Server Cache DNS TCP TLS Resp Process Load HTML JS CSS Img

@sendilkumarn So why TTFB matters?

@sendilkumarn 71 average requests per page source

@sendilkumarn Hosting

@sendilkumarn • Tune your backend + optimise based on your
hosting provider • Real world TTFB latencies https://ismyhostfastyet.com/ • Godaddy / Shopify / GitHub • Response header: X-Powered- By: XXXXXX Hosting

@sendilkumarn Content Delivery Network

@sendilkumarn Content Delivery Network • CDNs are your friend •
They increase your capability • Modern technologies / compression • Cloud fl are / GCP / AWS

@sendilkumarn Reduce the load in critical path. Improve TTFB

@sendilkumarn TTFB

@sendilkumarn Use caching anywhere and everywhere TTFB

@sendilkumarn Use caching anywhere and everywhere Avoid multiple page redirects
TTFB

@sendilkumarn Use caching anywhere and everywhere Avoid multiple page redirects
Use Service Workers TTFB

@sendilkumarn Core Web Vitals CWV

@sendilkumarn First/Last Contentful Paint FCP

@sendilkumarn FCP First/Last Contentful Paint FCP

@sendilkumarn FCP LCP First/Last Contentful Paint FCP

@sendilkumarn FCP

@sendilkumarn 1712 Kb FCP

@sendilkumarn Split & Budget FCP

@sendilkumarn Load what is needed & Virtualise FCP

@sendilkumarn Preload / Lazyload <link rel=“preload” as=“…”/> FCP

@sendilkumarn FCP

@sendilkumarn Minify resources FCP

@sendilkumarn Minify resources Eliminate render blocking resources FCP

@sendilkumarn Minify resources Eliminate render blocking resources Preload / prefetch
FCP

@sendilkumarn Cumulative Layout Shift (CLS) CLS

@sendilkumarn CLS

@sendilkumarn Avoid Mutations & Re-rendering CLS

@sendilkumarn Optimise JS CLS

@sendilkumarn CLS

@sendilkumarn Add dimensions for your images CLS

@sendilkumarn Add dimensions for your images Web Fonts CLS

@sendilkumarn Add dimensions for your images Web Fonts Animations (without
layout shift) CLS

@sendilkumarn Interaction to Next Paint (INP) INP

@sendilkumarn INP

@sendilkumarn FID First Input Delay Time To Interactive TTI INP

@sendilkumarn INP

@sendilkumarn Avoid long running tasks INP

@sendilkumarn Avoid long running tasks Avoid using timers INP

@sendilkumarn Avoid long running tasks Avoid using timers Avoid interaction
overlap INP

@sendilkumarn 45.7% Origins have a good CWV source CWV

@sendilkumarn CWV

@sendilkumarn Faster First Contentful Paint (<1.8s) CWV

@sendilkumarn Faster First Contentful Paint (<1.8s) No Cumulative Layout Shift
(< 0.1) CWV

@sendilkumarn Faster First Contentful Paint (<1.8s) No Cumulative Layout Shift
(< 0.1) Instant Interaction Next to Paint (<200ms) CWV

@sendilkumarn

@sendilkumarn Measure! Optimise!! Measure!!!

@sendilkumarn WPOstats.com Performance improves Business FCP CLS INP Conversion

@sendilkumarn 92% business thinks poor UX is costing them sales
storyblok research weird fact

@sendilkumarn Rendering

@sendilkumarn Client Side Rendering CSR

@sendilkumarn Traditional Web Applications

@sendilkumarn CSR - what & how? Network Client

@sendilkumarn CSR - what & how? Network Client GET /

GET /bundle.js

GET /bundle.js Render (App)

GET /bundle.js Render (App) Fetch

GET /bundle.js Render (App) Fetch Load

@sendilkumarn CSR - what & how? FCP Network Client GET
/ GET /bundle.js Render (App) Fetch Load

@sendilkumarn CSR - what & how? FCP Network Client GET
/ GET /bundle.js Render (App) blocked Fetch Load

@sendilkumarn CSR - what & how? FCP TTI Network Client
GET / GET /bundle.js Render (App) blocked Fetch Load

@sendilkumarn CSR - Things to note

@sendilkumarn Search Engine Optimisation CSR - Things to note

@sendilkumarn Search Engine Optimisation Fetching Data CSR - Things to
note

@sendilkumarn Search Engine Optimisation Fetching Data Main thread CSR -
Things to note

@sendilkumarn CSR - Performance Optimisation

@sendilkumarn Split & Budget JavaScript (170kb) CSR - Performance Optimisation

@sendilkumarn Split & Budget JavaScript (170kb) Preload / Lazyload CSR
- Performance Optimisation

@sendilkumarn Split & Budget JavaScript (170kb) Preload / Lazyload Application
Shell CSR - Performance Optimisation

@sendilkumarn Static Rendering SR

@sendilkumarn Build pages at compile time

@sendilkumarn SR - what & how? FCP TTI Network Client

GET /

GET / JS optional

@sendilkumarn SR - Things to note

@sendilkumarn Faster FCP & TTI SR - Things to note

@sendilkumarn Faster FCP & TTI Good for SEO SR -
Things to note

@sendilkumarn Faster FCP & TTI Good for SEO Build times
SR - Things to note

@sendilkumarn SR - Performance Optimisation

@sendilkumarn Do not use it for dynamic / interactive site
SR - Performance Optimisation

Hosting service SR - Performance Optimisation

Hosting service Pre-rendering SR - Performance Optimisation

@sendilkumarn Server Side Rendering SSR

@sendilkumarn Generate HTML on server as response

@sendilkumarn SSR - what & how? FCP TTI Network Client

GET /page

GET /page Server Rendering

GET /page JS Server Rendering

@sendilkumarn Loading Start Fetches Data Uses 3rd party lib Generates
HTML

@sendilkumarn Receives HTML Only HTML with no interactions.

@sendilkumarn Hydrates

@sendilkumarn Finish Fetching Finish Loading Finish Hydrate Interaction

@sendilkumarn SSR - Things to note

@sendilkumarn SSR - Things to note Slower TTFB

@sendilkumarn SSR - Things to note Slower TTFB Good for
SEO

@sendilkumarn SSR - Things to note Slower TTFB Good for
SEO Server cost

@sendilkumarn SSR - Performance Optimisation

@sendilkumarn SSR - Performance Optimisation Reduce JS

@sendilkumarn SSR - Performance Optimisation Reduce JS Minimize Roundtrip

@sendilkumarn SSR - Performance Optimisation Reduce JS Minimize Roundtrip Hydration

@sendilkumarn Optimised Rendering techniques

@sendilkumarn Progressive rehydration via Suspend

@sendilkumarn PR - what & how? FCP TTI Network Client
Render

GET / Render

GET / GET /bundle.js Render

@sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post /> <Comments
/> </Main> <Footer /> </Layout>

/> </Main> <Footer /> </Layout> CSR

/> </Main> <Footer /> </Layout> CSR SSR

@sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post/> <Comments/> </Main>
<Footer /> </Layout>

@sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post/> <Comments/> </Main>
<Footer /> </Layout> const post = await fetchPost() const comments = await fetchComments(id)

@sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post /> <Suspense
> <Comments /> </Suspense> </Main> <Footer /> </Layout> fetchComments(id)

@sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post /> <Suspense
> <Comments /> </Suspense> </Main> <Footer /> </Layout> fetchPosts() fetchComments(id)

@sendilkumarn In developer preview

@sendilkumarn Finish Fetching Finish Loading Finish Hydrate Interaction

@sendilkumarn Suspend - Performance Optimisation

@sendilkumarn Suspend - Performance Optimisation Code Splitting

@sendilkumarn Suspend - Performance Optimisation Code Splitting Reduces bundle size

@sendilkumarn Suspend - Performance Optimisation Code Splitting Reduces bundle size
On-demand loading wherever needed

@sendilkumarn Islands Architecture

@sendilkumarn Server Components In developer preview

@sendilkumarn *.server.js *.client.js *.js

@sendilkumarn

@sendilkumarn Closer & Faster

@sendilkumarn blog.js

@sendilkumarn blog.js 0229 kb 0954 kb 0032 kb

@sendilkumarn blog.js 0229 kb 0954 kb 0032 kb 1215 kb

Calling DB from the client

Calling DB from the client Converts on the client

@sendilkumarn blog.server.js handled on server SSR HTML

@sendilkumarn Text Server Components

@sendilkumarn Text Server Components Smaller bundle size

@sendilkumarn Text Server Components Smaller bundle size Cross import server
& clients

@sendilkumarn Text Server Components Smaller bundle size Cross import server
& clients Less interactivity & no user state events

@sendilkumarn < /> server client

@sendilkumarn < /> server client Properties 🔽 SSR Static Rendering
SSR (Rehydration) CSR (Pre rendering) CSR

SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast

SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast Streaming Yes Yes Good Limited No

SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast Streaming Yes Yes Good Limited No TTI FCP FCP High High High

SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast Streaming Yes Yes Good Limited No TTI FCP FCP High High High Dynamic to Static Static Static Mixed Dynamic Dynamic

SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast Streaming Yes Yes Good Limited No TTI FCP FCP High High High Dynamic to Static Static Static Mixed Dynamic Dynamic Scaling Infra Deploy size Infra + JS JS JS

SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast Streaming Yes Yes Good Limited No TTI FCP FCP High High High Dynamic to Static Static Static Mixed Dynamic Dynamic Scaling Infra Deploy size Infra + JS JS JS Example GMAIL / Hackernews Docusaurus / Net fl ix Next.js / Nuxt / Universal Vuepress All our apps

@sendilkumarn Images <img />

@sendilkumarn Fetchpriority <img src=“image.png” alt=“…” fetchpriority=“…”/>

@sendilkumarn Fetchpriority <img src=“image.png” alt=“…” fetchpriority=“…”/> High ⚡

@sendilkumarn Fetchpriority <img src=“image.png” alt=“…” fetchpriority=“…”/> High low ⚡ 🐌

@sendilkumarn Fetchpriority <img src=“image.png” alt=“…” fetchpriority=“…”/> High low auto ⚡
🐌 🌍

@sendilkumarn Fetchpriority <img src=“image.png” alt=“…” fetchpriority=“…”/> High low auto ⚡
🐌 🌍 Note: it is a relative priority based on the location where you added.

@sendilkumarn <img src=“image.png” alt=“…” />

@sendilkumarn <img src=“image.png” alt=“…” /> <img src=“image.png” loading=“auto” alt=“…” />

@sendilkumarn

@sendilkumarn apple.com ~1MB

@sendilkumarn

@sendilkumarn 40-80% savings using Image CDN

@sendilkumarn Image CDN

@sendilkumarn Image CDN Transform

@sendilkumarn Image CDN Transform Optimise

@sendilkumarn Image CDN Transform Optimise Delivery of Image

@sendilkumarn Image CDN Transform Optimise Delivery of Image Compress

@sendilkumarn Image CDN Transform Optimise Delivery of Image Compress Encode

@sendilkumarn Image CDN Transform Optimise Delivery of Image Compress Encode
Modern content

@sendilkumarn

@sendilkumarn Text Images

@sendilkumarn Text Images Properly sized & responsive images

@sendilkumarn Text Images Properly sized & responsive images Use image
CDNs

@sendilkumarn Text Images Properly sized & responsive images Use image
CDNs Use fetchpriority, if you can

@sendilkumarn Memory leaks

@sendilkumarn Text Memory Leaks

@sendilkumarn Text Memory Leaks setTimeout / addEventListeners

@sendilkumarn Text Memory Leaks setTimeout / addEventListeners Long running functions

@sendilkumarn Text Memory Leaks setTimeout / addEventListeners Long running functions
Things that kill main thread

@sendilkumarn Performance optimisation is not an end goal; It is
a continuing process. Plan Deploy Test Design Develop

@sendilkumarn Optimise resource delivery

@sendilkumarn Optimise resource delivery Load only viewport

@sendilkumarn Optimise resource delivery Load only viewport Preload next in
view port

@sendilkumarn Optimise resource delivery Load only viewport Prioritise FCP content
Preload next in view port

@sendilkumarn Optimise resource delivery Load only viewport Loading Screen Prioritise
FCP content Preload next in view port

@sendilkumarn Optimise resource delivery Load only viewport Loading Screen Improve
TTFB Prioritise FCP content Preload next in view port

@sendilkumarn Optimise resource delivery Load only viewport Loading Screen Improve
TTFB Prioritise FCP content BF cache Preload next in view port

@sendilkumarn Optimise resource delivery Load only viewport Loading Screen Remove
unused resources Improve TTFB Prioritise FCP content BF cache Preload next in view port

@sendilkumarn Optimise resource delivery Load only viewport Loading Screen Remove
unused resources Improve TTFB Prioritise FCP content Reduce Critical Path BF cache Preload next in view port

@sendilkumarn Optimise CSS

@sendilkumarn Optimise CSS Layout shifting animations

@sendilkumarn Optimise CSS CSS in JS Layout shifting animations

@sendilkumarn Optimise CSS Images in CSS CSS in JS Layout
shifting animations

@sendilkumarn Optimise CSS Images in CSS CSS in JS Layout
shifting animations Use placeholders

@sendilkumarn Avoid long rendering updates

@sendilkumarn Optimise 3rd party resources <link rel=“preconnect|dns-prefetch” …/>

@sendilkumarn Angular

@sendilkumarn Angular Lazy Loading

@sendilkumarn Angular Lazy Loading Immutable Datastructre

@sendilkumarn Angular Lazy Loading trackBy for lists Immutable Datastructre

@sendilkumarn Angular Lazy Loading OnPush change trackBy for lists Immutable
Datastructre

@sendilkumarn Angular Lazy Loading OnPush change Web Workers trackBy for
lists Immutable Datastructre

@sendilkumarn Angular Lazy Loading OnPush change Web Workers trackBy for
lists AOT compilation Immutable Datastructre

@sendilkumarn Angular Lazy Loading OnPush change No Computation on tmpl
Web Workers trackBy for lists AOT compilation Immutable Datastructre

@sendilkumarn Angular Lazy Loading OnPush change No Computation on tmpl
Web Workers trackBy for lists Pure Pipes AOT compilation Immutable Datastructre

@sendilkumarn WebAssembly

@sendilkumarn Profilers

@sendilkumarn Perception matters

@sendilkumarn TTFB

@sendilkumarn Optimise resources TTFB

@sendilkumarn Optimise resources Use vanilla components TTFB

@sendilkumarn Optimise resources Use vanilla components Improve perception TTFB

@sendilkumarn Use the platform

@sendilkumarn Thanks 🙏

[Heapcon-2023] Building High Performance Web Ap...

[Heapcon-2023] Building High Performance Web Applications

More Decks by Sendil Kumar N

Other Decks in Technology

Featured

Transcript