Dear performant app,

Talks the optimisation techniques for your dear frontend application

Transcript

1. Nishu Goel Dear non-performant app,
2. Nishu Goel Dear app, performant non-performant
3. Nishu Goel @TheNishuGoel NishuGoel
4. Why are discussing performance? bit.ly/dear_performant_app
5. Why are discussing performance?
6. Core Web Vitals - loading, - interactivity, - and visual stability bit.ly/dear_performant_app
7. LCP Largest Contentful paint 2.5 seconds 4 seconds
8. FID First Input delay 100 ms 300 ms
9. CLS Cumulative layout shift 0.1 0.25
10. 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
11. 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' <link rel="stylesheet" href="app.css" media="print" onload=“this.media=‘all’">, critters <link href="https://fonts.googleapis.." rel="stylesheet"> use imagemin, use CDN, responsive images, newer formats (webp, jpeg2000) <link rel="preload"… loading="lazy"
12. FID (First input delay) 100 ms 300 ms let’s work towards the Our page needs to be interaction ready and respond quicker
13. 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 <script defer….. /> <script async….. />
14. 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
15. 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
16. Weak Ref & Finalizers https://nishugoel.medium.com/heard-of-weak-refs-in-javascript-1132b3c1c44 bit.ly/dear_performant_app
17. thank you. bit.ly/dear_performant_app