Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

349a7f52975989094c75c055f9f6ba25?s=128

Dicoding Indonesia

April 12, 2022
Tweet

More Decks by Dicoding Indonesia

Other Decks in Education

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

  11. None
  12. None
  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

  19. None
  20. None
  21. None
  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