Course · Web Vitals
Learn Web Vitals
LCP, INP, dan CLS untuk developer yang peduli pengalaman pengguna nyata
Menguasai Core Web Vitals dari fondasi sampai produksi: mengukur LCP, INP, dan CLS dengan alat yang tepat, mendiagnosis bottleneck di setiap lapisan stack, mengoptimasi dari gambar sampai backend, dan memonitor performa secara berkelanjutan agar regresi tertangkap sebelum mengenai user.
7 chapter
Kurikulum
7 chapter tersedia- Foundations & Mental Model Web Vitals Mulai di sini Memahami Web Vitals sebagai sinyal pengalaman pengguna nyata: perbedaan Core Web Vitals dengan metrik vanity, kenapa "cepat di laptopku" tidak relevan, dampak bisnis performa, dan mengapa skor Lighthouse bukan kebenaran tunggal.
- Measuring Web Vitals Menguasai alat ukur Web Vitals yang tepat untuk setiap konteks: PageSpeed Insights, Lighthouse, Chrome DevTools Performance panel, CrUX, Search Console, dan library web-vitals.js — serta cara merekonsiliasi data lab dan field agar kesimpulan tidak menyesatkan.
- Largest Contentful Paint Menguasai LCP secara menyeluruh: apa yang dihitung browser sebagai elemen LCP, empat fase perjalanan bytes dari server ke layar, cara mendiagnosis bottleneck TTFB vs render-blocking vs gambar lambat, dan pola optimasi konkret dari preload sampai CDN.
- Interaction to Next Paint Menguasai INP sebagai penerus FID: memahami tiga fase interaksi (input delay, processing time, presentation delay), cara menemukan dan memecah long tasks di main thread, mengurangi biaya JavaScript, dan teknik konkret agar setiap klik, tap, dan ketikan terasa responsif dalam 200ms.
- Cumulative Layout Shift Menguasai CLS secara lengkap: memahami cara browser menghitung layout shift score, membedakan shift yang diharapkan dari yang mengejutkan, dan menangani enam penyebab paling sering — gambar tanpa dimensi, font FOUT/FOIT, iklan dinamis, konten yang diinjeksi, animasi berbasis top/left, dan skeleton loader yang salah.
- Debugging & Cross-Stack Optimization Menguasai workflow debugging Web Vitals dari data lapangan ke fix produksi: metrik pendukung FCP/TTFB/TBT dan kaitannya dengan Core Web Vitals, workflow debug sistematis dari field ke lab ke trace ke fix, pola optimasi frontend lintas stack, dan cara backend serta infrastruktur memengaruhi LCP lewat TTFB dan caching.
- Production Monitoring & Performance Budget Melengkapi siklus Web Vitals: setup Real User Monitoring di production dengan web-vitals.js, mendesain dashboard yang actionable, menetapkan performance budget agar regresi tertangkap di CI sebelum mencapai user, dan menerapkan seluruh workflow end-to-end dalam studi kasus nyata dari audit sampai monitoring berkelanjutan.