Core Web Vitals: LCP, FID, CLS
Pahami apa yang diukur oleh Largest Contentful Paint, First Input Delay, dan Cumulative Layout Shift, serta alasan Google menggunakannya sebagai sinyal peringkat.
Core Web Vitals: LCP, FID, CLS adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Mengapa Performa Penting
Halaman lambat membuat pengguna pergi. Google menjadikan performa sebagai sinyal pemeringkatan: situs dengan skor Core Web Vitals yang buruk mendapat peringkat lebih rendah dalam hasil pencarian. Di luar SEO, setiap penundaan 100ms terbukti mengurangi konversi dan keterlibatan.
Tiga Core Web Vitals Utama
Google mengukur tiga metrik pengalaman pengguna: LCP (kecepatan pemuatan), FID (interaktivitas), dan CLS (stabilitas visual). Masing-masing memiliki ambang 'Baik', 'Perlu Perbaikan', dan 'Buruk'.
Largest Contentful Paint (LCP)
LCP mengukur saat elemen konten terbesar yang terlihat (gambar, poster video, atau blok teks) selesai dirender. Baik: di bawah 2.5 detik. Buruk: di atas 4 detik. Optimalkan dengan memuat gambar utama terlebih dahulu, mengurangi sumber daya yang menghambat proses render, dan menggunakan CDN yang cepat.
First Input Delay (FID) dan INP
FID mengukur jeda antara interaksi pertama pengguna (klik, ketukan) dan respons peramban. Baik: di bawah 100ms. Pada 2024, FID digantikan oleh Interaksi hingga Cat Berikutnya (INP), yang mengukur semua interaksi, bukan hanya interaksi pertama.
Pergeseran Tata Letak Kumulatif (CLS)
CLS mengukur pergeseran tata letak yang tidak terduga selama pemuatan halaman. Baik: di bawah 0,1. Buruk: di atas 0,25. Hal ini disebabkan oleh gambar tanpa dimensi, font yang dimuat terlambat, dan iklan yang disisipkan setelah rendering pertama.
Mengukur CWV di Peramban
Gunakan paket npm web-vitals untuk menangkap metrik pengguna nyata dan mengirimkannya ke titik akhir analitik Anda.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}Memperbaiki LCP: Memuat Awal Gambar Utama
Beri tahu peramban untuk mengunduh gambar utama lebih awal, sebelum mengurai HTML lainnya.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">Memperbaiki CLS: Sisakan Ruang
Selalu tetapkan width dan height pada gambar dan sematan agar peramban menyisakan ruang sebelum aset tiba. Gunakan CSS aspect-ratio untuk kontainer responsif.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">Memperbaiki INP: Memecah Tugas Panjang
Tugas JavaScript yang panjang memblokir thread utama sehingga respons terhadap klik tertunda. Pecah pekerjaan menjadi beberapa bagian dengan scheduler.yield() atau setTimeout agar peramban dapat merender dan merespons masukan.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Data Laboratorium vs Data Lapangan
Data laboratorium (Lighthouse) adalah pengujian sintetis dalam lingkungan terkendali. Data lapangan (CrUX, RUM) dikumpulkan dari pengguna nyata pada perangkat nyata. Data lapangan adalah sumber kebenaran untuk peringkat SEO.
Anggaran Performa
Tetapkan batas eksplisit: misalnya LCP di bawah 2 dtk, bundel JS di bawah 200 KB. Terapkan di CI dengan Lighthouse CI atau @bundle-analyzer agar kompilasi gagal jika performa menurun.
Pemeriksaan Singkat
Core Web Vital mana yang mengukur loncatan visual yang tidak terduga selama pemuatan halaman?
Ringkasan: Core Web Vitals
LCP: kecepatan pemuatan elemen terbesar, target di bawah 2,5 dtk. INP (sebelumnya FID): daya tanggap, target di bawah 200 md. CLS: stabilitas visual, target di bawah 0,1. Ukur dengan paket web-vitals di produksi; gunakan Lighthouse di CI. Data lapangan menentukan SEO, bukan data laboratorium.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Core Web Vitals: LCP, FID, CLS” gratis?
Ya — teks lengkap “Core Web Vitals: LCP, FID, CLS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Core Web Vitals: LCP, FID, CLS”?
Pahami apa yang diukur oleh Largest Contentful Paint, First Input Delay, dan Cumulative Layout Shift, serta alasan Google menggunakannya sebagai sinyal peringkat. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Core Web Vitals: LCP, FID, CLS” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Core Web Vitals: LCP, FID, CLS
- Audit dan Penilaian Lighthouse
- Optimasi Gambar: lazy loading, format WebP
- Pemisahan Kode dan Rute Lazy