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
79
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
410
The Angular Router - TrivandrumTechCon20
nishugoel
4
150
Creating Libraries in Angular
nishugoel
0
170
CRUD operations in Angular 7
nishugoel
1
270
ngIndia - HostBinding() and HostListener()
nishugoel
0
170
Other Decks in Programming
See All in Programming
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
0
110
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
350
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
3
520
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
180
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
3
270
Git Rebase
bkuhlmann
11
1.6k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Docker and Python
trallard
33
2.7k
How to name files
jennybc
64
92k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Why Our Code Smells
bkeepers
PRO
331
56k
A Philosophy of Restraint
colly
196
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