Uji Kompetensi Core Web Vitals
Checkpoint untuk membaca sinyal performance, memilih diagnosis yang terukur, dan mengusulkan perbaikan yang menjaga pengalaman user.
Yang dicek
- Membedakan peran LCP, INP, dan CLS
- Membaca perbedaan lab serta field data secara tepat
- Menyusun investigation note berbasis laporan
- Membuat performance budget awal yang dapat ditindaklanjuti
Isi lesson
5 blok- 1.Checkpoint: ukur pengalaman, lalu pilih perubahan yang dapat dibuktikanBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Writing practiceBelum selesaiWajib
- 4.Gunakan dokumentasi untuk mengukur satu halaman yang benar-benar kamu milikiBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Checkpoint: ukur pengalaman, lalu pilih perubahan yang dapat dibuktikan
WajibLCP membantu membaca kapan konten utama terlihat, INP membaca respons setelah interaction, dan CLS membaca stabilitas layout. Ketiganya adalah sinyal pengalaman user yang berbeda. Field data memperlihatkan kondisi user nyata, sedangkan Lighthouse serta browser tools membantu mengulang diagnosis dan membandingkan eksperimen. Cara kerja yang matang bukan mengejar score sempurna: tentukan journey, baca bukti, nyatakan hipotesis, lakukan satu perubahan yang relevan, ukur ulang, dan catat trade-off. Performance budget menjaga agar keputusan ini tetap terlihat ketika feature, asset, serta dependency bertambah.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Core Web Vitals
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 5
Target lulus: 70
Manakah pertanyaan yang paling tepat dijawab oleh LCP pada halaman lesson?
Writing practice
WajibLatihan menulis
Tulis performance investigation note untuk halaman lesson mobile dengan kondisi berikut: field LCP p75 adalah 3.3 s dan laporan menandai hero image sebagai kandidat LCP; user melaporkan tombol Simpan terasa terlambat; ketika data lesson datang, CTA bergeser ke bawah. Jelaskan metrik dan pengalaman user yang diprioritaskan, bukti serta hipotesis yang kamu pisahkan, langkah diagnosis untuk LCP, INP, dan CLS, satu eksperimen perbaikan yang akan diukur ulang, peran Lighthouse dibanding field data, dan satu performance budget guardrail untuk journey ini.
Tulis draft dulu sebelum menandai writing practice selesai.
0/620 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibGunakan dokumentasi untuk mengukur satu halaman yang benar-benar kamu miliki
Pilih satu route local atau deployed yang dapat kamu buka, lalu gunakan docs sesuai pertanyaan diagnosis. Mulai dari satu journey, satu baseline, dan satu perubahan yang dapat dibandingkan. Jangan mengklaim FluentStack menjalankan Lighthouse atau membaca field data project-mu.
web.dev
Web Vitals
Fokus baca
- Peran LCP, INP, dan CLS terhadap loading, interactivity, serta visual stability.
- Perbedaan pengukuran field dan lab.
- Mengapa target metrik perlu dibaca pada konteks user nyata.
Abaikan dulu
- Implementasi real-user monitoring dan analytics pipeline penuh.
- Optimasi infra tingkat lanjut untuk semua metric sekaligus.
Chrome for Developers
Introduction to Lighthouse
Fokus baca
- Menjalankan audit pada satu halaman dan membaca report dasar.
- Mencatat kondisi audit sebelum membandingkan hasil.
- Menggunakan opportunities sebagai arah investigasi, bukan checklist buta.
Abaikan dulu
- Mengejar score sempurna sebagai tujuan release.
- Mengubah seluruh recommendation dalam satu perubahan besar.
Chrome DevTools
Analyze runtime performance
Fokus baca
- Merekam satu interaction yang terasa lambat.
- Membaca main thread, task, rendering, serta paint di sekitar interaction.
- Membandingkan rekaman sebelum dan sesudah satu eksperimen.
Abaikan dulu
- Trace analysis lanjutan sebelum satu recording dasar dapat dibaca.
- Optimasi mikro tanpa interaction user yang jelas.
Aksi setelah membaca
Pada Local React App atau Local Next.js App, pilih satu route, jalankan Lighthouse atau buka DevTools Performance panel, catat baseline serta satu kandidat masalah, lakukan satu perubahan kecil bila relevan, lalu bandingkan hasil pada kondisi yang sama. Tulis apa yang belum kamu ketahui; jangan tandai milestone hanya karena sebuah score terlihat baik.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- LCP, INP, dan CLS memeriksa tiga pengalaman berbeda: konten utama hadir, interaction merespons, dan layout tetap stabil.
- Mulai dari journey dan bukti; jangan mengoptimasi resource atau code secara acak.
- Field data memperlihatkan pengalaman user nyata, sedangkan Lighthouse serta DevTools membantu diagnosis yang dapat diulang.
- Performance budget memberi guardrail, owner, dan respons ketika biaya pengalaman meningkat.
- Kamu siap melanjutkan ke Asset and Bundle Optimization untuk mengurangi biaya resource berdasarkan bukti dari route dan user journey.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: ukur pengalaman, lalu pilih perubahan yang dapat dibuktikan.