Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

[Heapcon-2023] Building High Performance Web Applications

Sendil Kumar N

November 03, 2023
Tweet

More Decks by Sendil Kumar N

Other Decks in Technology

Transcript

  1. @sendilkumarn And many more… Janky Sliders Shifting contents 7mb images

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

    71 critical requests ie support CSS JS shenanigans Animations
  3. @sendilkumarn How websites work? Browser Redirect GET / Server Cache

    DNS TCP TLS Resp Process Load Time To First Byte HTML TTFB
  4. @sendilkumarn Web Performance Terminologies TTFB TTI LCP FID FCP Main

    thread Prefetch Preload CLS TBT CWV Core Web Vital INP Req Res Jargon alert!!!
  5. @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>
  6. @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>
  7. @sendilkumarn How websites work? Browser Redirect GET / Server Cache

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

    Server Cache DNS TCP TLS Resp Process Load HTML JS CSS Img
  9. @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
  10. @sendilkumarn Content Delivery Network • CDNs are your friend •

    They increase your capability • Modern technologies / compression • Cloud fl are / GCP / AWS
  11. @sendilkumarn Faster First Contentful Paint (<1.8s) No Cumulative Layout Shift

    (< 0.1) Instant Interaction Next to Paint (<200ms) CWV
  12. @sendilkumarn CSR - what & how? Network Client GET /

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

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

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

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

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

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

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

    GET / GET /bundle.js Render (App) blocked Fetch Load
  20. @sendilkumarn Do not use it for dynamic / interactive site

    Hosting service SR - Performance Optimisation
  21. @sendilkumarn Do not use it for dynamic / interactive site

    Hosting service Pre-rendering SR - Performance Optimisation
  22. @sendilkumarn <Layout> <Header /> <Sidebar /> <Main> <Post/> <Comments/> </Main>

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

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

    > <Comments /> </Suspense> </Main> <Footer /> </Layout> fetchPosts() fetchComments(id)
  25. @sendilkumarn blog.js 0229 kb 0954 kb 0032 kb 1215 kb

    Calling DB from the client Converts on the client
  26. @sendilkumarn Text Server Components Smaller bundle size Cross import server

    & clients Less interactivity & no user state events
  27. @sendilkumarn < /> server client Properties 🔽 SSR Static Rendering

    SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast
  28. @sendilkumarn < /> server client Properties 🔽 SSR Static Rendering

    SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast Streaming Yes Yes Good Limited No
  29. @sendilkumarn < /> server client Properties 🔽 SSR Static Rendering

    SSR (Rehydration) CSR (Pre rendering) CSR TTFB Slow Slow Slow Fast Fast Streaming Yes Yes Good Limited No TTI FCP FCP High High High
  30. @sendilkumarn < /> server client Properties 🔽 SSR Static Rendering

    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
  31. @sendilkumarn < /> server client Properties 🔽 SSR Static Rendering

    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
  32. @sendilkumarn < /> server client Properties 🔽 SSR Static Rendering

    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
  33. @sendilkumarn Fetchpriority <img src=“image.png” alt=“…” fetchpriority=“…”/> High low auto ⚡

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

    <img src=“image.png” loading=“eager” alt=“…” /> <img src=“image.png” loading=“lazy” alt=“…” />
  35. @sendilkumarn Performance optimisation is not an end goal; It is

    a continuing process. Plan Deploy Test Design Develop
  36. @sendilkumarn Optimise resource delivery Load only viewport Loading Screen Improve

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

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

    unused resources Improve TTFB Prioritise FCP content BF cache Preload next in view port
  39. @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
  40. @sendilkumarn Optimise CSS Images in CSS CSS in JS Layout

    shifting animations Use placeholders
  41. @sendilkumarn Angular Lazy Loading OnPush change No Computation on tmpl

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

    Web Workers trackBy for lists Pure Pipes AOT compilation Immutable Datastructre