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
95
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
530
The Angular Router - TrivandrumTechCon20
nishugoel
4
180
Creating Libraries in Angular
nishugoel
0
190
CRUD operations in Angular 7
nishugoel
1
330
ngIndia - HostBinding() and HostListener()
nishugoel
0
220
Other Decks in Programming
See All in Programming
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
340
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
550
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
290
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
役立つログに取り組もう
irof
26
8.7k
qmuntal/stateless のススメ
sgash708
0
120
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Documentation Writing (for coders)
carmenintech
65
4.4k
BBQ
matthewcrist
85
9.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Building Adaptive Systems
keathley
38
2.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Writing Fast Ruby
sferik
626
61k
Bash Introduction
62gerente
608
210k
The Invisible Side of Design
smashingmag
297
50k
Done Done
chrislema
181
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