Web App Performance Optimization

Web App Performance Optimization at EarnIn

Transcript

1. Web App Optimization
2. 2 Siwat Kaolueng Jame Speaking Senior Software Engineer @ EarnIn
3. 3 Kijpokin Ngamsomsakskul Mackie Speaking Senior Software Engineer @ EarnIn
4. Disclaimer Web App
5. 5 web-app-frontend Hydration, the Saboteur of Lazy Loading (builder.io)
6. • 9 Months ago • Metrics - Web Vitals • Tools • Solution ◦ Explicit import ◦ Fix some Libraries ◦ Lazy load scripts as much as possible ▪ 1st Party ▪ 3rd Party ◦ Offload 3rd Party Script ◦ Partytown • Results • TODOs 6 web-app-frontend Agenda
7. 9 months ago Web App
8. 8 web-app-frontend
9. 9 web-app-frontend
10. 10 web-app-frontend
11. 11 web-app-frontend
12. Metrics Web App
13. • Represents metric measures the time from when the user first navigated to the page to when any part of the page's content is rendered on the screen. 13 web-app-frontend First Contentful Paint FCP
14. • Represents how quickly the main content of a web page is loaded. Specifically, LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport. • To provide a good user experience, sites should strive to have an LCP of 2.5 seconds or less for at least 75% of page visits. 14 web-app-frontend Largest Contentful Paint LCP
15. • The metric measures the total amount of time after First Contentful Paint FCP) where the main thread was blocked for long enough to prevent input responsiveness. • To provide a good user experience, sites should strive to have a Total Blocking Time of less than 200 milliseconds when tested on average mobile hardware. 15 web-app-frontend Total Blocking Time TBT
16. Chrome for Developers on X "A better way to measure interaction responsiveness is coming to Core Web Vitals! On March 12 Interaction to Next Paint INP) will become one of the three essential metrics to delivering great UX on the web Start here to learn more and get prepared 👇 https://t.co/wtmVzhHP0l" / X (twitter.com)
17. • 17 web-app-frontend An timeline from instagram.com.
18. Tools⚒ Web App
19. 19 web-app-frontend
20. 20 web-app-frontend
21. 21 web-app-frontend
22. 22 web-app-frontend
23. 23 web-app-frontend Use Chrome Canary for the latest version of Lighthouse
24. 24 web-app-frontend PageSpeed Insights (web.dev)
25. 25 web-app-frontend source-map-explorer - npm (npmjs.com)
26. 26 web-app-frontend webpack-bundle-analyzer - npm (npmjs.com)
27. Explicit Import📦 Web App
28. 28 web-app-frontend
29. 29 web-app-frontend
30. 30 web-app-frontend
31. 31 web-app-frontend
32. 32 web-app-frontend
33. 33 web-app-frontend
34. • Explicitly import from the esm entry point if possible 34 web-app-frontend Lesson Learned
35. Fix libraries📚 Web App
36. 36 web-app-frontend
37. 37 web-app-frontend
38. 38 web-app-frontend 󰛧
39. • Use headless mode to not include predefined runtime CSS-in-JS(goober) • Donʼt use runtime CSS-in-JS 39 web-app-frontend Fix react-hot-toast
40. 40 web-app-frontend Datadog RUM is large Browser library bundle size is very large. · Issue #317 · DataDog/browser-sdk (github.com)
41. 41 web-app-frontend Use @datadog/rum-slim @datadog/browser-rum-slim v5.8.0 ❘ Bundlephobia
42. 42 web-app-frontend
43. Lazy loading 🐌 Web App
44. • The web app must be eager load only necessary resources that it use on that page and load other resources later (lazy). Not all users have the super fast speed network. 44 web-app-frontend Lazy loading
45. 1st Party Scripts🥇 web-app-frontend - Our code base that is our main functionality - We mostly control loading behavior - Lazy loading by Page level Routes, Component Level
46. web-app-frontend
47. web-app-frontend
48. 3rd Party Scripts🥉 web-app-frontend - Third-party JavaScript often refers to scripts that can be embedded into any site directly from a third-party vendor. These scripts can include ads, analytics, widgets and other scripts that make the web more dynamic and interactive. - Examples of third-party scripts include: - Analytics & metrics scripts - A/B testing scripts for experiments - Helper libraries (such as date formatting, animation, or functional libraries)
49. 3rd Party Scripts🥉 49 web-app-frontend Real User Monitoring Log Monitoring
50. • Segment.js also eager load other 3rd party libraries such as Adword, Facebook Pixel • Luckily, Segment.js provided the lazy load other 3rd party libraries 50 web-app-frontend Lazy load Segment and its friends
51. web-app-frontend
52. • At the beginning of starting the web application, we use Recaptcha to prevent bots • It takes a time to load 52 web-app-frontend Lazy load Recaptcha
53. Partytown 🎉 Web App
54. Partytown improves performance by moving scripts (ex.GTM) from main thread to web worker(bg) 54 web-app-frontend
55. 55 web-app-frontend Adam Bradley ⚡ on X: "Quick diagram of how Partytown is able to have a blocking call in the web worker, but still asynchronously send/received data between threads https://t.co/A5wiZrNGmr" / X (twitter.com)
56. 56 web-app-frontend X (twitter.com)
57. Overview Architecture Diagram 57 web-app-frontend
58. 58 web-app-frontend
59. 59 web-app-frontend
60. 60 web-app-frontend
61. 61 web-app-frontend
62. 62 web-app-frontend
63. Impact📉 Web App
64. Impact: Reduce page load time 1 second 64 web-app-frontend All pages 1s Login page 3s Questionnaire 1s
65. PageSpeed Insight 11.4 65 web-app-frontend
66. Lighthouse 11.5 in Chrome Canary 66 web-app-frontend
67. TODOs📝 Web App
68. • Configure crossOriginIsolated header Partytown to use Atomics 10x faster communication between threads compare to the service-worker requests) • Find a way to offload Datadog RUM from the main thread • Replace Form library (zod) to smaller alternative (valibot) • Fix "request waterfall problem" of Module Federation with prefetch • Inline Critical CSS Tailwind • … 68 web-app-frontend TODOs
69. 69 web-app-frontend Hydration, the Saboteur of Lazy Loading (builder.io)
70. Thank you Web App