Performance Optimisation
📈
- retain users*
- increase conversion numbers (sign-ups, sales)**
- create delightful user experience
*DoubleClick by Google found 53% of mobile visits abandoned if a page took > 3 s to load
**Pinterest increased traffic / sign-ups by 15% when perceived wait time reduced by 40%.
FE Performance Optimisation
📈
why?
1. Set a Performance Budget 💸
2. Run a Performance Audit 🕵️♀️🕵️♂️
3. Optimise Critical Render Path 📈
4. Improve UX Metrics 😍
To Optimize FE Performance:
1. Set a
Performance Budget
a set of limits on metrics that affect site performance
1. Set a
Performance Budget
Good starting points*:
- Performance Score > 80 on Lighthouse
1. Set a
Performance Budget
*for majority market of mid-range devices and 3G-like connectivity
a set of limits on metrics that affect site performance
Good starting points:
- Performance Score > 80 on Lighthouse
- Critical render path resources < 170KB*
1. Set a
Performance Budget
*critical for mobile devices for JS bundle downloading
a set of limits on metrics that affect site performance
Good starting points:
- Performance Score > 80 on Lighthouse
- Critical render path resources < 170KB
- Time To Interactive (TTI) < 5s*
1. Set a
Performance Budget
* < 3 s according to user drop-off stats
a set of limits on metrics that affect site performance
2. Run a Performance Audit
Inspect > Audits > Generate report
2. Run a Performance Audit
key metrics: Score, FCP, TTI
😭
3. Optimise Critical Render Path
😭
sequence of steps the browser goes through to convert textual resource into pixels on screen
3. Optimise Critical Render Path
😭
Browser:
- queues input as tasks on the main thread
- Tasks executed one by one (synchronously, thread-blocking)
- Un-optimised steps block main thread and delay TTI
2.
3.
4.
...to pixels on screen
Why
from textual resources...
downloads...20 - 30% of TTI
1.
Reduce across all textual resources:
- JS, HTML, CSS,
- Images, Fonts
- JSON response for native
3. Optimise Critical Render Path
😭
🕵️♀️ 🕵️♂️
How
How?
Reduce HMTL
How
avoid, replace or remove large inline scripts of over 1KB
🥺
Reduce JS Bundle
How
1. remove unused code (WebPack/ Parcel settings, Tree shaking...)
2. carefully consider node_modules:
- copy code that is used instead of using entire module
- switch to smaller npm modules
🙁
Cut up Long Tasks
Why
- Long task - JS code > 50ms that monopolise Browser's Main Thread
- Causes UI 'Freezes' and delays TTI
😐
How
- Code Splitting - cutting up single JS bundle into smaller "chunks"
- use Dynamic imports and Suspense Rendering
Cut up Long Tasks
🙂
Reduce Image Size
Why
- the largest bloat to a page
- tiniest optimisations go a long way
🙂
Reduce Image Size
How
minify SVGs, PNGs using sites like tinyPNG.com or APIs such as imgX
😊
time until user thinks the app is loaded
4. Improve UX Metrics
Is it happening?
is it useful?
Can I use it?
😊
time until user thinks the app is loaded
😄
Is it happening?
is it useful?
Can I use it?
- Ensure screen shows something while loading:
- skeletons, loaders, navigation
- keep an eye on Time To FCP and FMP
4. Improve UX Metrics
time until user thinks the app is loaded
😍
Is it happening?
is it useful?
Can I use it?
- Distinguish Hero Elements
- Render them first
- code-split the component if needed
4. Improve UX Metrics
- Ensure screen shows something while loading:
- skeletons, loaders, navigation
- keep an eye on Time To FCP and FMP
time until user thinks the app is loaded
😍
Is it happening?
is it useful?
Can I use it?
- Distinguish Hero Elements
- Render them first
- code-split the component if needed
- Ensure interactivity by not blocking the main thread
- Strive for Time To Interactive < 3s to 5s
4. Improve UX Metrics
- Ensure screen shows something while loading:
- skeletons, loaders, navigation
- keep an eye on Time To FCP and FMP
Ebay - Speed by a Thousand Cuts https://tech.ebayinc.com/engineering/speed-by-a-thousand-cuts/
And more advanced Optimisation...
Incorporate Performance Budgets into the Build
https://web.dev/incorporate-performance-budgets-into-your-build-tools/
Predictive prefetch of static assets
Autosuggest edge caching