Tujuan Pembelajaran

Memahami metrik Core Web Vitals
Bisa mengoptimalkan performa website

Analogi

Diagram


      Core Web Vitals = Tes Kesehatan Website:

LCP = Berapa lama konten utama muncul?
INP = Seberapa cepat halaman merespons interaksi?
CLS = Apakah layout bergerak-gerak?

Core Web Vitals seperti tes kesehatan — mengukur kualitas experience

Penjelasan Konsep

Core Web Vitals

Core Web Vitals adalah 3 metrik utama yang Google gunakan untuk mengukur kualitas user experience di website.

1. LCP (Largest Contentful Paint)

Berapa lama elemen terbesar di viewport muncul.

🟢 Good: < 2.5 detik
🟡 Needs Improvement: 2.5 - 4 detik
🔴 Poor: > 4 detik

2. INP (Interaction to Next Paint)

Seberapa cepat halaman merespons interaksi user seperti klik, tap, atau keyboard input. INP menggantikan FID sebagai Core Web Vital utama untuk interaktivitas.

🟢 Good: < 200ms
🔴 Poor: > 500ms

3. CLS (Cumulative Layout Shift)

Seberapa banyak layout bergerak/bergeser saat halaman loading.

🟢 Good: < 0.1
🔴 Poor: > 0.25

Tips optimasi

LCP: Optimasi gambar,

Preload critical resource.

INP: Reduce JavaScript execution time dan hindari long task.
CLS: Tentukan width/height pada image dan video.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami metrik Core Web Vitals., dan bisa mengoptimalkan performa website. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Core Web Vitals, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Core Web Vitals seperti tes kesehatan — mengukur kualitas experience. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 1-6: Measure LCP. Baris 8-15: Measure CLS. Baris 18: Preload. Baris 21: Tentukan dimensi gambar.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

javascript

// MEASURE LCP
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.startTime);
}).observe({ entryTypes: ['largest-contentful-paint'] });

// MEASURE CLS
let cls = 0;
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
    }
  }
  console.log('CLS:', cls);
}).observe({ entryTypes: ['layout-shift'] });

// OPTIMASI LCP — Preload critical resources
<link rel="preload" as="image" href="hero.jpg">

// OPTIMASI CLS — Tentukan dimensi
<img src="photo.jpg" width="800" height="600">

Penjelasan Kode

Baris 1-6: Measure LCP. Baris 8-15: Measure CLS. Baris 18: Preload. Baris 21: Tentukan dimensi gambar.

Prompt AI

Jelaskan kenapa CLS penting untuk user experience.

Pertanyaan Reflektif

Test website-mu di PageSpeed Insights. Berapa skor LCP, INP, dan CLS-nya?