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
89
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
490
The Angular Router - TrivandrumTechCon20
nishugoel
4
170
Creating Libraries in Angular
nishugoel
0
190
CRUD operations in Angular 7
nishugoel
1
310
ngIndia - HostBinding() and HostListener()
nishugoel
0
210
Other Decks in Programming
See All in Programming
The Shape of a Service Object
inem
0
490
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
1.9k
労務ドメインを快適に開発する方法 / How to Comfortably Develop in the Labor Domain
yuki21
1
250
Some more adventure of Happy Eyeballs
coe401_
2
180
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
260
Why Prism?
kddnewton
4
1.7k
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
330
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
340
開発を加速する共有Swift Package実践
elmetal
PRO
0
400
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
790
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
670
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
A Philosophy of Restraint
colly
202
16k
Side Projects
sachag
451
42k
What's new in Ruby 2.0
geeforr
340
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Designing with Data
zakiwarfel
98
5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
600
The Language of Interfaces
destraynor
153
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
4 Signs Your Business is Dying
shpigford
179
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