This document summarizes the author's learnings in optimizing web performance while building a progressive web app. The author implemented 5 key steps: code splitting, server-side rendering, compressing static assets, caching, and preloading assets. These optimizations led to significant increases in conversion rates and decreases in page load times, helping reduce user acquisition costs. The author hopes to further improve performance through HTML streaming in the future.

1. My learnings on web
performance optimization
while building a Progressive
Web App
@narendra_shet
ty

2. @narendra_shet
ty
Front End Developer at

3. Slides
https://www.slideshare.net/narendrashetty/my-learnings-on-
web-performance-optimization-while-building-a-progressive-
web-app

4. Motivation

6. 76%
Increase in
Conversion

7. 76%
Increase in
Conversion
+14% iOS
+30%Android
Monthly active
users

9. User Acquisition cost
$3.75Android

10. User Acquisition cost
$3.75Android
Mobile Web $0.07

11. User Acquisition cost
$3.75Android
Mobile Web $0.07
38%
Increase in
Conversion
30%
Faster page
load

13. 75MB
Android
<1MB
17MB
iOS PWA
Lyft download
size

15. +

16. Measured with

19. Tested on Regular 2g
network

20. Tested on Regular 2g
network

21. Offline access

22. 5 key steps I used to make it
faster
- Code Splitting
- Server side Rendering
- Compressing static assets
- Caching
- Preloading

23. - Code Splitting
Code Splitting
with

24. - Code Splitting
Route based chunk

25. - Code Splitting
Route based chunk

26. - Code Splitting
Route based chunk

27. - Code Splitting
Route based chunk

28. - Code Splitting
Intent based chunk

29. - Code Splitting
Intent based chunk

30. - Code Splitting
Intent based chunk

31. - Code Splitting
to

32. - Code Splitting
- SSR
Server-side Rendering
with

33. - Code Splitting
- SSR
Server-side Rendering

34. - Code Splitting
- SSR
Server-side Rendering

35. - Code Splitting
- SSR
Server-side Rendering

36. - Code Splitting
- SSR
Server-side Rendering

37. - Code Splitting
- SSR
to

38. - Code Splitting
- SSR
- Compressing
Serving Compressed
static assets

39. - Code Splitting
- SSR
- Compressing

40. - Code Splitting
- SSR
- Compressing
87.1kb => 24.3kb
126kb => 38.4kb
7.15kb => 1.49kb
922kb => 250kb
25.3kb => 8.38kb

41. - Code Splitting
- SSR
- Compressing
87.1kb => 24.3kb
126kb => 38.4kb
7.15kb => 1.49kb
922kb => 250kb
25.3kb => 8.38kb

42. - Code Splitting
- SSR
- Compressing
to

43. - Code Splitting
- SSR
- Compressing
- Caching
Caching

44. - Code Splitting
- SSR
- Compressing
- Caching

45. - Code Splitting
- SSR
- Compressing
- Caching

46. - Code Splitting
- SSR
- Compressing
- Caching
Page load of repeat visit before Caching
Page load of repeat visit after Caching

47. - Code Splitting
- SSR
- Compressing
- Caching
- Preloading
Preloading Assets

48. - Code Splitting
- SSR
- Compressing
- Caching
- Preloading
Preloading Assets

49. - Code Splitting
- SSR
- Compressing
- Caching
- Preloading
Preloading Assets

50. - Code Splitting
- SSR
- Compressing
- Caching
- Preloading
Preloading Assets

51. - Code Splitting
- SSR
- Compressing
- Caching
- Preloading
Preloading Assets

52. - Code Splitting
- SSR
- Compressing
- Caching
- Preloading
Preloading Assets

53. TODO

54. HTML Streaming

56. Partial HTML – 4 KB

57. Full HTML – 15 KB

58. HTTP/2

62. Blog: https://hackernoon.com/how-i-built-a-super-fast-uber-
clone-for-mobile-web-863680d2100f

63. Github: https://github.com/narendrashetty/uber-mobile-web

64. @narendra_shetty
Slides
https://www.slideshare.net/narendrashetty/my-learnings-on-
web-performance-optimization-while-building-a-progressive-
web-app

65. Questions?