Core Web Vitals: Optimasi Kecepatan Website dari Praktik Nyata
Cara mengoptimasi LCP, INP, dan CLS — termasuk apa yang benar-benar kami lakukan di website ini sendiri untuk kecepatan.
Core Web Vitals mengukur tiga hal: seberapa cepat konten utama muncul (LCP), seberapa responsif halaman terhadap interaksi (INP), dan seberapa stabil layoutnya (CLS). Kabar baiknya: mayoritas masalah kecepatan website Indonesia berasal dari tiga hal yang sama — gambar besar, JavaScript berlebih, dan font/iklan yang menggeser layout.
Ringkasan Singkat
- ✓LCP <2.5s hampir selalu berarti: optimasi gambar hero + server cepat + minim render-blocking JS
- ✓Gambar adalah tersangka utama — kompres, pakai format modern (WebP/AVIF), lazy-load
- ✓Contoh nyata di situs ini: mengganti video hero 4MB dengan mockup + screenshot statis
- ✓INP turun drastis dengan mengurangi JS pihak ketiga — setiap script tag berhutang
Tiga Metrik dan Cara Memperbaikinya
| Metrik | Target | Penyebab buruk umum | Perbaikan prioritas |
|---|---|---|---|
| LCP | < 2.5 detik | Gambar hero besar, server lambat, JS render-blocking | Kompres + preload gambar utama; hosting lebih cepat; critical CSS |
| INP | < 200 ms | JavaScript berlebih, third-party scripts | Kurangi JS; tunda script non-esensial |
| CLS | < 0.1 | Gambar/iklan tanpa dimensi, font swap | Selalu set width/height; reserve space; font-display |
Yang Paling Sering Kami Temui
Dalam audit website client, urutan penyebabnya hampir selalu sama:
- Gambar tidak dioptimasi — foto produk 3-5MB langsung dari kamera. Ini perbaikan paling murah dengan dampak terbesar.
- Video background autoplay — bagus di screenshot, buruk di data seluler. Kami sendiri menghapusnya dari hero situs ini.
- Plugin/JS pihak ketiga — chat widget, tracking, slider library menumpuk sampai puluhan request.
- Server lambat — shared hosting Rp 50rb/bulan tidak bisa memberi TTFB baik. VPS murah sering lebih cepat.
Cara Mengukur yang Benar
Jangan hanya pakai skor Lighthouse lab — ukur field data lewat PageSpeed Insights (data pengguna nyata) dan Search Console. Skor 100 di laptop developer Anda tidak berarti pengunjung di jaringan 4G merasakan hal sama.
Untuk detail teknis gambar, lihat panduan optimasi gambar.
Layanan Terkait
Butuh Bantuan untuk Project Anda?
Konsultasi gratis dengan tim Nufanas — tanpa komitmen.
Konsultasi GratisDitulis oleh
Tim NufanasWeb & App Development Team
Tim developer Nufanas yang mengerjakan website, web application, dan aplikasi mobile untuk bisnis di seluruh Indonesia. Artikel ditulis dari pengalaman langsung mengerjakan project client dan produk sendiri.
Artikel Terkait
Next.js vs WordPress: Perbandingan Jujur untuk Website Bisnis
Teknologi · 10 menit
Flutter vs React Native: Cara Memilih untuk Aplikasi Anda
Teknologi · 9 menit
Kotlin vs Java untuk Android: Penjelasan untuk Pemilik Bisnis
Teknologi · 6 menit
Docker dan Kubernetes untuk Bisnis: Kapan Perlu, Kapan Tidak
Teknologi · 10 menit