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?