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
260
Creating Libraries in Angular
nishugoel
0
200
CRUD operations in Angular 7
nishugoel
1
410
ngIndia - HostBinding() and HostListener()
nishugoel
0
310
Other Decks in Programming
See All in Programming
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
490
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
920
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
530
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
540
株式会社 Sun terras カンパニーデック
sunterras
0
230
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
A Tale of Four Properties
chriscoyier
160
23k
BBQ
matthewcrist
89
9.8k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Designing for humans not robots
tammielis
254
25k
Done Done
chrislema
185
16k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualization
eitanlees
148
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
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