Nishu Goel Dear non-performant app,

Nishu Goel Dear app, performant non-performant

Nishu Goel @TheNishuGoel NishuGoel

Why are discussing performance? bit.ly/dear_performant_app

Why are discussing performance?

Core Web Vitals - loading, - interactivity, - and visual stability bit.ly/dear_performant_app

LCP Largest Contentful paint 2.5 seconds 4 seconds

FID First Input delay 100 ms 300 ms

CLS Cumulative layout shift 0.1 0.25

LCP (Largest Contentful paint) 2.5 seconds 4 seconds let’s work towards the we need to unblock our render, and make it show up faster

LCP (Largest Contentful paint) 2.5 seconds 4 seconds let’s work towards the Inline fonts Inline critical CSS Optimise files Preload important resources Lazy load resources Serve adaptive navigator.connection.effectiveType === '4g' , critters use imagemin, use CDN, responsive images, newer formats (webp, jpeg2000)

FID (First input delay) 100 ms 300 ms let’s work towards the Our page needs to be interaction ready and respond quicker

FID (First input delay) 100 ms 300 ms let’s work towards the Defer unused Javascript (code splitting, async/defer) Minimise unused polyfills import {lazy} from “React” const AddEditWebsite = lazy(() => import(‘./add-edit-website')); type=module / nomodule

CLS (Cumulative layout shift) 0.1 0.25 let’s work towards the Our page elements need to NOT jump and please the users’ eyes

CLS (Cumulative layout shift) 0.1 0.25 let’s work towards the Give dimensions to images, iframe etc. elements dynamic content only when user is expecting it bit.ly/dear_performant_app

Weak Ref & Finalizers https://nishugoel.medium.com/heard-of-weak-refs-in-javascript-1132b3c1c44 bit.ly/dear_performant_app

thank you. bit.ly/dear_performant_app