My learnings on web performance optimization while building a Progressive Web App

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?