Website & Hosting, ELrolumNews — Anda sudah pasang cache, sudah kompresi gambar, sudah pakai CDN. Tapi skor PageSpeed Insights masih merah? Atau Google Search Console melaporkan halaman Anda “Perlu Peningkatan”?
Artikel ini cocok untuk: Pemilik website WordPress yang ingin memahami dan mengoptimasi Core Web Vitals—tiga metrik yang menentukan apakah website Anda terasa cepat, responsif, dan stabil bagi pengunjung.
Core Web Vitals adalah tiga metrik yang diukur Google dari pengguna nyata—bukan sekadar tes lab. Sejak 2021, metrik ini menjadi faktor ranking—dan bobotnya semakin besar di update 2025-2026 . Jika website Anda “Poor” di metrik ini, Anda bersaing dengan kerugian di mata Google.
Di artikel ini, kita akan bahas dari nol: apa itu LCP, INP, dan CLS, cara mengukurnya, dan langkah deminya untuk optimasi masing-masing.
Apa Itu Core Web Vitals?
Core Web Vitals terdiri dari tiga metrik yang mengukur aspek berbeda dari pengalaman pengguna .
| Metrik | Mengukur | Target “Good” | Target “Poor” |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Kecepatan loading | ≤ 2,5 detik | > 4 detik |
| INP (Interaction to Next Paint) | Responsivitas | ≤ 200 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Stabilitas visual | ≤ 0,1 | > 0,25 |
💡 Penting: INP menggantikan FID sejak Maret 2024. Jika Anda melihat tutorial lama yang menyebut “FID”, artinya sudah tidak relevan .
Yang diukur adalah data lapangan (field data) — dari pengguna nyata via Chrome UX Report (CrUX). Bukan tes lab sesaat. Google menilai persentil ke-75—artinya 75% pengunjung Anda harus merasakan pengalaman “Good” .
Langkah 1: Ukur Dulu Sebelum Optimasi
Jangan menebak. Ukur baseline Anda dulu.
Tools Pengukuran
| Tools | Fungsi |
|---|---|
| PageSpeed Insights | Lab + field data, paling mudah |
| Google Search Console | Laporan Core Web Vitals per halaman |
| Chrome DevTools | Performance panel untuk debugging |
| WebPageTest | Filmstrip, waterfall, repeat testing |
Cara Cek dengan PageSpeed Insights
Buka pagespeed.web.dev
Masukkan URL Anda
Klik Analyze
Lihat hasil Mobile dan Desktop—keduanya bisa berbeda
Yang dicari: Nilai LCP, INP, CLS—dan elemen mana yang menjadi penyebab LCP.
💡 Tips Pro: Test beberapa halaman—bukan hanya homepage. Sering kali 80% traffic masuk dari halaman artikel atau produk .
Langkah 2: Optimasi LCP (Largest Contentful Paint)
LCP mengukur berapa lama elemen terbesar di viewport muncul. Biasanya: gambar hero, judul H1, atau banner .
Penyebab LCP Lambat di WordPress
| Penyebab | Penjelasan |
|---|---|
| Hero image tidak di-preload | Browser tidak tahu mana yang harus diprioritaskan |
| Render-blocking CSS/JS | LCP tidak bisa muncul sebelum semua CSS selesai |
| Gambar tanpa width/height | Browser tidak bisa reservasi ruang, LCP tertunda |
| Hosting lambat | TTFB tinggi menghambat semua metrik |
Cara Optimasi LCP
1. Optimasi Gambar
Konversi ke WebP atau AVIF—30-60% lebih kecil
Resize ke ukuran maksimal yang dibutuhkan—jangan upload 3000px untuk HP 390px
Preload hero image:
<link rel="preload" as="image" href="hero.webp">Jangan lazy load gambar above-the-fold
2. Kurangi Render-Blocking
Minify CSS dan JS
Defer JS non-kritis
Inline critical CSS—CSS untuk above-the-fold dimasukkan langsung ke HTML
3. Server-Level
Gunakan hosting dengan server-level caching
Aktifkan Gzip/Brotli compression
Gunakan CDN untuk pengunjung global
💡 Tips Pro: Jika LCP element adalah teks (H1), fokus pada font loading—gunakan
font-display: swapdan preload font .
Langkah 3: Optimasi INP (Interaction to Next Paint)
INP mengukur seberapa cepat halaman merespons interaksi pengguna—klik, tap, atau ketik .
Penyebab INP Buruk
| Penyebab | Penjelasan |
|---|---|
| JavaScript berat | Main thread sibuk, interaksi tertunda |
| Plugin menumpuk | Setiap plugin menambah script |
| Third-party scripts | Chat widget, analytics, iklan |
Cara Optimasi INP
1. Kurangi JavaScript
Audit plugin—hapus yang tidak digunakan
Defer script non-kritis dengan
asyncataudeferBatasi third-party scripts—muat hanya saat dibutuhkan
2. Optimasi Event Handler
Review event listener—hapus yang redundan
Pecah task panjang menjadi chunk kecil
3. Database
Optimasi database dengan WP-Optimize
Aktifkan object cache (Redis) untuk mengurangi query
💡 Tips Pro: INP adalah metrik paling sulit karena tergantung pada JavaScript pihak ketiga. Prioritas: LCP dulu, CLS, baru INP .
Langkah 4: Optimasi CLS (Cumulative Layout Shift)
CLS mengukur seberapa banyak elemen bergeser saat halaman dimuat .
Penyebab CLS Buruk
| Penyebab | Penjelasan |
|---|---|
| Gambar tanpa dimensi | Browser tidak tahu ukuran, konten bergeser |
| Iklan/embed tanpa ruang | Muncul tiba-tiba, mendorong konten |
| Font yang bergeser | FOIT/FOUT—teks muncul lalu berubah |
Cara Optimasi CLS
1. Selalu Set Width & Height
Untuk gambar:
width="800" height="600"WordPress otomatis menambahkan untuk gambar via editor—tapi manual code harus diset sendiri
2. Reservasi Ruang untuk Iklan/Embed
Beri container dengan tinggi tetap sebelum iklan dimuat
3. Optimasi Font
Gunakan
font-display: swapPreload font kritis
💡 Tips Pro: Jangan inject konten di atas konten yang sudah ada kecuali sebagai respons interaksi pengguna .
Tabel Ringkasan: Prioritas Optimasi
| Prioritas | Metrik | Dampak | Kesulitan |
|---|---|---|---|
| 1 | LCP | Persepsi kecepatan langsung | Sedang |
| 2 | CLS | UX dan kepercayaan | Mudah |
| 3 | INP | Responsivitas interaksi | Sulit |
Kesalahan Umum dan Cara Menghindarinya
| Kesalahan | Akibat | Solusi |
|---|---|---|
| Optimasi tanpa ukur | Tidak tahu baseline | PSI dulu |
| Test hanya homepage | Halaman lain tetap buruk | Test multiple pages |
| Abaikan mobile | 75% traffic mobile | Test mobile |
| Lazy load hero image | LCP tertunda | Jangan lazy load above-fold |
| Gambar tanpa dimensi | CLS buruk | Set width/height |
Core Web Vitals adalah fondasi pengalaman pengguna—dan Google semakin serius menilainya. Kuncinya:
Ukur dulu — PageSpeed Insights, Search Console
Prioritas LCP — optimasi gambar, render-blocking, server
Lalu CLS — dimensi gambar, reservasi ruang, font
Terakhir INP — kurangi JavaScript, optimasi database
Test mobile — karena mayoritas traffic dari HP
Monitor rutin — field data berubah seiring waktu
Dengan Core Web Vitals yang “Good”, website Anda tidak hanya lebih cepat—tapi juga lebih dipercaya Google dan pengunjung. Ini investasi yang membayar dalam ranking dan konversi.
Ingat: Optimasi performa bukan proyek sekali jadi. Ini proses berkelanjutan—seperti merawat kesehatan website.
Sudah siap membuat website Anda lebih cepat?
💬 Punya pengalaman optimasi Core Web Vitals? Bagikan di kolom komentar!
(el)
