my learnings on web performance optimization while building a progressive web app
TRANSCRIPT
My learnings on web performance optimization while building a Progressive Web App
My learnings on web performance optimization while building a Progressive Web App@narendra_shetty
@narendra_shetty
Front End Developer at
Slideshttps://www.slideshare.net/narendrashetty/my-learnings-on-web-performance-optimization-while-building-a-progressive-web-app
Motivation
76% Increase in Conversion
76% Increase in Conversion+14% iOS+30% AndroidMonthly active users
User Acquisition cost
$3.75Android
User Acquisition cost
$3.75AndroidMobile Web$0.07
User Acquisition cost
$3.75AndroidMobile Web$0.0738% Increase in Conversion30% Faster page load
75MBAndroid
24.3kb126kb => 38.4kb7.15kb => 1.49kb922kb => 250kb25.3kb => 8.38kb
- Code Splitting
- SSR
- Compressing
- Caching
- Preloading
87.1kb => 24.3kb126kb => 38.4kb7.15kb => 1.49kb922kb => 250kb25.3kb => 8.38kb
- Code Splitting
- SSR
- Compressing
- Caching
- Preloading
to
- Code Splitting
- SSR
- Compressing
- Caching
- PreloadingCaching
- Code Splitting
- SSR
- Compressing
- Caching
- Preloading
- Code Splitting
- SSR
- Compressing
- Caching
- Preloading
- Code Splitting
- SSR
- Compressing
- Caching
- Preloading
Page load of repeat visit before CachingPage load of repeat visit after Caching
- Code Splitting
- SSR
- Compressing
- Caching
- PreloadingPreloading Assets
- Code Splitting
- SSR
- Compressing
- Caching
- PreloadingPreloading Assets
- Code Splitting
- SSR
- Compressing
- Caching
- PreloadingPreloading Assets
- Code Splitting
- SSR
- Compressing
- Caching
- PreloadingPreloading Assets
- Code Splitting
- SSR
- Compressing
- Caching
- PreloadingPreloading Assets
- Code Splitting
- SSR
- Compressing
- Caching
- PreloadingPreloading Assets
TODO
HTML Streaming
Partial HTML 4 KB
Full HTML 15 KB
HTTP/2
Blog: https://hackernoon.com/how-i-built-a-super-fast-uber-clone-for-mobile-web-863680d2100f
Github: https://github.com/narendrashetty/uber-mobile-web
@narendra_shetty
Slideshttps://www.slideshare.net/narendrashetty/my-learnings-on-web-performance-optimization-while-building-a-progressive-web-app
Questions?