Baparekraf Developer Day 2022 - Front-End (Raka Adi Nugroho)

Raka Adi Nugroho (Sr. Software Engineer- KitaLulus International)

Judul:
Otomasi Dalam Pembuatan Web Perf Report

Informasi event: https://www.dicoding.com/events/4398

Transcript

1. Replace Me! (Bisa ditambahkan dengan image yang relevan) Otomatisasi Pelaporan Performa Web Raka Adi Nugroho
2. Stories • Your roles • Web ~ • How to monitor ~ • You action ~
3. “A software engineer is a person who applies the principles of software engineering to design, develop, maintain, test, and evaluate computer software.” Wikipedia, “Software Engineer.”
4. Zzz…..
5. Improve Speed isn’t Important Building feature more important
6. Web Perf = Browsing Exp = User Happy
7. What do you need? • Measurement • Monitoring • Optimization
8. Measurement Time to First Byte (TTFB) First Contentful Paint (FCP) Largest Contentful Paint (LCP) First Input Delay (FID) Time to Interactive (TTI) Total Blocking Time (TBT) Cumulative Layout Shift (CLS)
9. Initial load metrics post load metrics
10. Core Web Vital
13. Optimization • Asset ◦ Images optimization (compress, use other ext type, lazy, or diff size) ◦ Font optimization • Javascript Optimization
14. Image - Optimization WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG
15. Javascript Optimization • Defer Javascript • Code Splitting & Lazy-loadable
16. Bundle - Javascript Optimization Please check bundle size of library / 3rd party https://bundlephobia.com/
17. Sample
18. Summary Measure -> Improve -> Monitor -> Repeat again
22. Data https://s.id/psi-response
23. Membaca Audit
24. Create dashboard • Own dashboard • Data Studio • Paas • Sheet ( https://s.id/psi-sheet ) • Etc ~
25. Why & When You need Have Own Dashboard? • Create Custom Metric • Want to compare with other page • Customize
26. (case) Why & When You need Have Own Dashboard? Source: AirBNB (https://medium.com/airbnb-engineering/measuring-web-performance-at-airbnb-122da8d3ea3f)
27. s.id/webperf
28. Speed === Feature?
29. Summary Measure -> Improve -> Monitor -> Repeat again
30. How to learn more? • Tech Company Engineering Blog • Web.dev
31. Selesai.
32. /rakaadinugroho nugrohoraka@gmail.com