Baparekraf Developer Day adalah kegiatan yang diadakan oleh Kementerian Pariwisata dan Ekonomi Kreatif/Badan Pariwisata dan Ekonomi Kreatif (Kemenparekraf/Baparekraf) dengan tujuan mengasah kemampuan teknis pengembang aplikasi di Indonesia. Kegiatan ini memungkinkan transfer pengetahuan dan standar industri secara langsung dari para praktisi yang telah sukses, khususnya pada bidang pengembangan aplikasi. Web Session Tema: Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals Speaker: Dimas Maulana Dwi Saputra (Curriculum Developer - Dicoding Indonesia)

1. Tingkatkan Pengalaman Pengguna dengan
Matrik Web Vitals
Dimas Maulana Dwi Saputra

2. Topik Pembahasan
● Mengapa user experience penting?
● Web Vitals.
● Komponen user experience berdasarkan Web Vitals.
● Bagaimana cara mengukur user experience?
● Benefit lain dari Web Vitals.

3. Mengapa User Experience penting?

4. Manfaat user experience yang baik
● Memudahkan Pengguna.
● Meningkatkan kenyamanan Penggunaan.
● Dapat bersaing dengan kompetitor dalam bidang yang sama.
● Meningkatkan Kredibilitas.

5. Bagaimana cara meningkatkan User Experience
di Website kita?

6. Web Vitals

7. Tujuan diciptakannya Web Vitals
● Panduan terpadu untuk meningkatkan pengalaman
pengguna.
● Menyederhanakan landscape mengenai optimasi performa.
● Dapat digunakan oleh berbagai kalangan.

10. Core Web Vitals
“Core Web Vitals are the subset of Web Vitals
that apply to all web pages, should be
measured by all site owners, and will be
surfaced across all Google tools. Each of the
Core Web Vitals represents a distinct facet of
the user experience, is measurable in the field,
and reflects the real-world experience of a
critical user-centric outcome.” -
http://web.dev/vitals

12. 0 - 1 sec 1 - 1.5 sec 1.5 - 2 sec 2 - 2.5 sec
Halaman sepenuhnya termuat
2.5 - 3 sec
Kandidat LCP
LCP 3 detik = Need Improvement

13. Apa yang membuat LCP menjadi buruk?
Respons server
yang lama
Render-blocking
yang disebabkan
oleh CSS
Resource yang
berat untuk
diakses
Proses
Client-Side
Rendering

14. Element yang dapat menjadi kandidat LCP
● Elemen <img>.
● Elemen <image> di dalam elemen <svg>.
● Elemen dengan gambar background yang dimuat melalui
fungsi url().
● Elemen block yang mengandung beberapa teks blok
ataupun inline teks.

15. Bagaimana cara mengetahui elemen mana yang
menjadi LCP?

18. Bagaimana cara meningkatkan LCP?
● Optimize your server
● Route users to a nearby CDN
● Cache assets
● Serve HTML pages cache-first
● Establish third-party connections early
● Reduce CSS blocking time
● Reduce JavaScript blocking time
● Use server-side rendering

19. Penjelasan lebih detail:
https://web.dev/optimize-lcp/

21. FID 1 detik = Poor

22. Apa yang membuat FID menjadi buruk?
Pekerjaan yang
butuh waktu
lama
Bundle
JavaScript yang
besar
Render-blocking
JavaScript
Eksekusi kode
JavaScript yang
berat

23. Bagaimana cara meningkatkan FID?
● Break up Long Tasks
● Use a Web Worker
● Defer unused JavaScript
● Minimize unused polyfills
● Code-splitting
● Etc.

24. Penjelasan lebih detail:
https://web.dev/optimize-fid/

27. Gambar yang
ditampilkan tanpa
menetapkan
dimensi
Konten yang
muncul secara
tiba-tiba
Web Font yang
menyebabkan FOIT
Tidak mempersiapkan
ruang untuk Iklan,
Embed, atau iFrames
Apa yang membuat CLS menjadi buruk?

28. Bagaimana cara meningkatkan CLS?
● Set Images Dimensions
● Prepare space for ads, embedded, and iFrames
● Use skeleton UI pattern for client-side rendering content
● Preload and set font-display to prevent FOIT (flashes of
invisible text)

32. <img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />
Cara klasik
Pros: Mudah untuk diterapkan.
Cons:
● Kita harus tahu ukuran yang tepat berdasarkan rasio
gambar.
● Tidak responsif.

33. Pros:
● Gambar secara otomatis ditampilkan dengan rasio
yang tepat.
● Responsif.
Cons: Membutuhkan CSS.
Cara Responsive Web Design
img {
width: 100%;
/* or max-width: 100%; */
height: auto;
}

38. Penjelasan lebih detail:
https://web.dev/optimize-cls/

39. Bagaimana cara mengetahui score LCP, FID,
dan CLS?

49. import {getLCP, getFID, getCLS} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
npm install web-vitals

50. Bonus! User Experience can impact SEO!

51. Ikhtisar
● Mengapa user experience penting?
○ Memudahkan Pengguna.
○ Meningkatkan kenyamanan Penggunaan.
○ Dapat bersaing dengan kompetitor dalam bidang yang sama.
○ Meningkatkan Kredibilitas.
● Web Vitals.
○ Panduan terpadu dan matriks terbaru untuk memberikan pelayanan yang prima
pada experience pengguna dalam mengakses website.
● Komponen user experience berdasarkan Web Vitals.
○ Loading -> Largest Content Paint
○ Interactivity -> First Input Delay
○ Visual Stability-> Cumulative Shift Layout

52. Ikhtisar
● Bagaimana cara mengukur user experience?
○ Online:
■ Menggunakan PageSpeed Insight
■ Menggunakan web.dev/measure
○ Offline:
■ Menggunakan Lighthouse
○ Instan:
■ Menggunakan Web Vitals Extensions
○ Integrate:
■ Menggunakan web-vitals JavaScript Package.
● Benefit lain dari Web Vitals.
○ Web Vitals dapat meningkatkan SEO ranking.

54. Reference
● Web Vitals: https://web.dev/vitals/
● Optimize for Core Web Vitals by Google Chrome Developer:
https://youtu.be/AQqFZ5t8uNc
● Menjadi Front-End Web Developer Expert:
https://www.dicoding.com/academies/219

55. Dimas Maulana Dwi Saputra
Curriculum Developer Dicoding
Surel: dimas@dicoding.com
IG: @dimasmds
Terima Kasih