Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dear performant app,
Search
Nishu Goel
August 03, 2021
Programming
0
110
Dear performant app,
Talks the optimisation techniques for your dear frontend application
Nishu Goel
August 03, 2021
Tweet
Share
More Decks by Nishu Goel
See All by Nishu Goel
Diagnosing INP & Breaking down long tasks
nishugoel
0
630
The Angular Router - TrivandrumTechCon20
nishugoel
4
260
Creating Libraries in Angular
nishugoel
0
200
CRUD operations in Angular 7
nishugoel
1
420
ngIndia - HostBinding() and HostListener()
nishugoel
0
310
Other Decks in Programming
See All in Programming
CSC305 Lecture 06
javiergs
PRO
0
260
Six and a half ridiculous things to do with Quarkus
hollycummins
0
190
Webサーバーサイド言語としてのRustについて
kouyuume
0
2.2k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.4k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
品質ワークショップをやってみた
nealle
0
580
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
340
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
330
CSC509 Lecture 04
javiergs
PRO
0
300
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
Visualization
eitanlees
149
16k
Being A Developer After 40
akosma
91
590k
How STYLIGHT went responsive
nonsquared
100
5.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Gamification - CAS2011
davidbonilla
81
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
How to Ace a Technical Interview
jacobian
280
24k
Transcript
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' <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"
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 <script defer….. /> <script async….. />
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