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
97
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
270
Other Decks in Programming
See All in Programming
GAEログのコスト削減
mot_techtalk
0
120
sappoRo.R #12 初心者セッション
kosugitti
0
270
ML.NETで始める機械学習
ymd65536
0
220
Ruby on cygwin 2025-02
fd0
0
170
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
140
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
900
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
900
Domain-Driven Transformation
hschwentner
2
1.9k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
React 19アップデートのために必要なこと
uhyo
7
1.2k
Jakarta EE meets AI
ivargrimstad
0
180
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Navigating Team Friction
lara
183
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Building Adaptive Systems
keathley
40
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Fireside Chat
paigeccino
34
3.2k
Code Review Best Practice
trishagee
67
18k
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