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
620
The Angular Router - TrivandrumTechCon20
nishugoel
4
250
Creating Libraries in Angular
nishugoel
0
200
CRUD operations in Angular 7
nishugoel
1
410
ngIndia - HostBinding() and HostListener()
nishugoel
0
300
Other Decks in Programming
See All in Programming
AIエージェント開発、DevOps and LLMOps
ymd65536
1
360
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Langfuseと歩む生成AI活用推進
licux
3
320
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
770
Honoアップデート 2025年夏
yusukebe
1
870
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.7k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
AHC051解法紹介
eijirou
0
640
testingを眺める
matumoto
1
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Typedesign – Prime Four
hannesfritz
42
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Thoughts on Productivity
jonyablonski
69
4.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Done Done
chrislema
185
16k
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