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
96
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
570
The Angular Router - TrivandrumTechCon20
nishugoel
4
210
Creating Libraries in Angular
nishugoel
0
190
CRUD operations in Angular 7
nishugoel
1
360
ngIndia - HostBinding() and HostListener()
nishugoel
0
260
Other Decks in Programming
See All in Programming
チームリードになって変わったこと
isaka1022
0
190
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
DROBEの生成AI活用事例 with AWS
ippey
0
130
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
テストをしないQAエンジニアは何をしているか?
nealle
0
130
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
It's Worth the Effort
3n
184
28k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Making Projects Easy
brettharned
116
6k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Writing Fast Ruby
sferik
628
61k
Typedesign – Prime Four
hannesfritz
40
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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