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
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
Grafana Cloudとソラカメ
devoc
0
140
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Domain-Driven Transformation
hschwentner
2
1.9k
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Formの複雑さに立ち向かう
bmthd
1
720
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
370
Speed Design
sergeychernyshev
25
780
Statistics for Hackers
jakevdp
797
220k
Gamification - CAS2011
davidbonilla
80
5.1k
Building Adaptive Systems
keathley
40
2.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Facilitating Awesome Meetings
lara
51
6.2k
Designing for Performance
lara
604
68k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
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