Cara Meningkatkan Google PageSpeed dan Core Web Vitals

Skor Google PageSpeed bukan sekadar angka di laporan Lighthouse. Skor itu mencerminkan seberapa cepat dan stabil website terasa bagi pengguna nyata—terutama di perangkat mobile dengan jaringan yang tidak selalu ideal.

Dalam proyek klien, saya biasanya mulai dari metrik Core Web Vitals, bukan dari daftar audit yang panjang. Tiga metrik utama yang perlu dipahami:

• LCP (Largest Contentful Paint) — seberapa cepat konten utama muncul
• INP (Interaction to Next Paint) — seberapa responsif halaman saat diklik atau diketik
• CLS (Cumulative Layout Shift) — seberapa stabil layout saat halaman memuat

Audit dulu, baru perbaiki

Sebelum mengoptimasi, ukur kondisi awal:

1. Jalankan PageSpeed Insights untuk URL penting (home, landing, dan satu halaman konten).
2. Bandingkan hasil lab (Lighthouse) dengan data field jika tersedia.
3. Catat 3 masalah terbesar yang memengaruhi LCP, INP, atau CLS.

Tanpa baseline, sulit menilai apakah perbaikan benar-benar berdampak.

Perbaiki LCP lebih dulu

LCP sering paling merugikan pengalaman pertama. Fokus praktisnya:

• pastikan gambar hero tidak terlalu besar; gunakan format modern (WebP/AVIF) bila memungkinkan;
• tetapkan width dan height agar browser bisa mengalokasikan ruang;
• preload font atau gambar kritis hanya jika benar-benar dibutuhkan di viewport pertama;
• kurangi blocking CSS/JS di atas fold.

Untuk banyak website WordPress atau landing page, mengganti hero JPEG berat dengan aset terkompresi sudah menaikkan LCP secara signifikan.

Stabilkan layout untuk CLS

CLS muncul saat elemen “loncat” setelah font, iklan, atau gambar selesai dimuat.

Checklist singkat:

• selalu sediakan dimensi media;
• jangan menyisipkan banner di atas konten tanpa reserved space;
• batasi font swap yang ekstrem; gunakan strategi loading font yang konsisten.

Rapikan JavaScript agar INP lebih baik

INP buruk biasanya disebabkan oleh skrip yang terlalu banyak bekerja di thread utama.

Langkah yang sering saya terapkan:

• tunda skrip non-kritis (analytics, chat widget, carousel);
• pecah pekerjaan berat menjadi tugas kecil;
• hindari library besar hanya untuk interaksi sederhana.

Caching, hosting, dan prioritas

Optimasi front-end saja tidak cukup jika server lambat. Pastikan:

• caching HTTP atau page cache aktif untuk konten publik;
• CDN dipakai untuk aset statis jika audiens tersebar;
• redirect berantai dihilangkan.

Urutan perbaikan yang paling berdampak

Jika waktu terbatas, kerjakan dalam urutan ini:

1. kompresi dan dimensi gambar kritis;
2. kurangi JS/CSS yang memblokir render;
3. perbaiki CLS pada elemen di atas fold;
4. aktifkan caching;
5. baru kerjakan micro-optimization lainnya.

Kesimpulan

PageSpeed yang baik adalah hasil prioritas, bukan checklist acak. Mulai dari Core Web Vitals, ukur ulang setelah setiap perubahan besar, dan dokumentasikan hasilnya. Pendekatan ini yang saya pakai saat mengirim website produksi agar cepat, stabil, dan tetap mudah dirawat.