Mengukur Core Web Vitals dalam Aplikasi React
Gunakan Lighthouse, WebPageTest, dan pustaka web-vitals untuk mengumpulkan skor LCP, INP, dan CLS.
Mengukur Core Web Vitals dalam Aplikasi React adalah pelajaran React 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.
Apa Itu Core Web Vitals?
Core Web Vitals adalah metrik pengalaman pengguna dari Google yang memengaruhi peringkat SEO: LCP (Largest Contentful Paint—pemuatan), INP (Interaction to Next Paint—responsivitas), dan CLS (Cumulative Layout Shift—stabilitas visual).
Ambang Batas yang Baik
Nilai yang ditargetkan: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Nilai di atas ambang batas 'buruk' (LCP > 4s, INP > 500ms, CLS > 0.25) sangat menurunkan pengalaman pengguna dan SEO.
Pustaka web-vitals
Paket npm web-vitals mengukur CWV di browser nyata melalui API sederhana.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Mengirim Vitals ke Analitik
Kirim vitals ke titik akhir analitik untuk pemantauan pengguna nyata (RUM)—Lighthouse mengukur performa di lingkungan lab, sedangkan RUM menunjukkan pengalaman pengguna nyata.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Vitals Bawaan Next.js
Next.js secara otomatis menginstrumentasikan Core Web Vitals. Ekspor fungsi reportWebVitals dari _app.js (Pages), atau gunakan dukungan bawaan App Router.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse di Chrome DevTools
Jalankan audit Lighthouse di Chrome DevTools (tab Lighthouse) untuk mendapatkan pengukuran CWV berbasis lab. Gunakan mode samaran agar tidak terganggu ekstensi, lalu batasi jaringan untuk menyimulasikan perangkat seluler.
WebPageTest
WebPageTest.org menyediakan diagram air terjun yang terperinci, perekaman video, dan pengukuran CWV dari perangkat nyata di berbagai lokasi geografis—lebih realistis daripada Lighthouse lokal.
Laporan Pengalaman Pengguna Chrome (CrUX)
Kumpulan data CrUX dari Google menggabungkan data CWV pengguna nyata untuk jutaan situs web. Anda dapat mengaksesnya melalui Google Search Console, PageSpeed Insights, atau API CrUX.
PerformanceObserver untuk LCP
Gunakan API native PerformanceObserver untuk mengamati entri LCP dan memahami elemen mana yang menjadi largest contentful paint.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });Men-debug CLS
Gunakan Layout Shift Regions di Chrome DevTools (pada panel Rendering) untuk menyoroti elemen yang menyebabkan pergeseran tata letak dengan lapisan merah.
Data Atribusi
Pustaka web-vitals menyediakan data atribusi yang mengidentifikasi apa yang menyebabkan metrik buruk—elemen LCP, interaksi INP, atau elemen penyebab CLS.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Pemeriksaan Cepat
Core Web Vital mana yang mengukur responsivitas—khususnya seberapa cepat halaman merespons interaksi pengguna?
Ringkasan
Ukur CWV dengan pustaka web-vitals atau Lighthouse. Kirim metrik ke analitik untuk pemantauan pengguna nyata. Targetkan LCP ≤ 2.5s, INP ≤ 200ms, dan CLS ≤ 0.1. Gunakan data atribusi untuk mengidentifikasi elemen atau interaksi tertentu yang menyebabkan skor buruk.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengukur Core Web Vitals dalam Aplikasi React” gratis?
Ya — teks lengkap “Mengukur Core Web Vitals dalam Aplikasi React” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengukur Core Web Vitals dalam Aplikasi React”?
Gunakan Lighthouse, WebPageTest, dan pustaka web-vitals untuk mengumpulkan skor LCP, INP, dan CLS. Kamu berlatih React 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 React Academy?
Tidak diperlukan pengalaman sebelumnya. React 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 “Mengukur Core Web Vitals dalam Aplikasi React” 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 React Academy ini?
Ya. Setiap pelajaran React 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
- Mengukur Core Web Vitals dalam Aplikasi React
- Analisis Bundel & Strategi Pemisahan Kode
- Optimasi Gambar & Font dalam React
- Mengurangi INP: Optimasi Penangan Event