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
540
The Angular Router - TrivandrumTechCon20
nishugoel
4
190
Creating Libraries in Angular
nishugoel
0
190
CRUD operations in Angular 7
nishugoel
1
330
ngIndia - HostBinding() and HostListener()
nishugoel
0
230
Other Decks in Programming
See All in Programming
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
距離関数を極める! / SESSIONS 2024
gam0022
0
290
Contemporary Test Cases
maaretp
0
140
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
CSC509 Lecture 09
javiergs
PRO
0
140
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1k
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
3
210
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
250
Featured
See All Featured
Code Review Best Practice
trishagee
64
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
How GitHub (no longer) Works
holman
310
140k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Designing Experiences People Love
moore
138
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Happy Clients
brianwarren
98
6.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
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