Core Web Vitals (LCP, FID, CLS) menjadi faktor penentu dalam peringkat SEO Google. Bagi pemilik situs WordPress, pengoptimalan tiga metrik ini dapat meningkatkan kecepatan, pengalaman pengguna, dan peluang masuk ke featured snippet. Berikut panduan terperinci yang dapat Anda terapkan langsung di situs APA ITU.
Apa itu Core Web Vitals?
- LCP (Largest Contentful Paint): Waktu yang dibutuhkan untuk menampilkan elemen terbesar di viewport (biasanya gambar atau heading). Target: < 2,5 detik.
- FID (First Input Delay): Waktu respons setelah pengguna mengklik atau mengetuk sesuatu. Target: < 100 ms.
- CLS (Cumulative Layout Shift): Nilai total pergeseran layout yang tidak diharapkan. Target: < 0,1.
Langkah pertama: Audit awal dengan Google PageSpeed Insights
Masukkan URL situs Anda, catat skor masing‑masing, dan perhatikan rekomendasi yang diberikan. Simpan laporan sebagai acuan sebelum dan sesudah optimasi.
Strategi mengoptimalkan LCP
1. Optimasi gambar
- Gunakan format WebP atau AVIF yang lebih ringan.
- Implementasikan lazy loading dengan atribut
loading="lazy"pada gambar di bawah fold. - Gunakan plugin seperti Imagify atau ShortPixel untuk kompresi otomatis.
2. Prioritaskan CSS kritis
Ekstrak CSS yang diperlukan untuk rendering di atas lipatan (above‑the‑fold) dan inline-kan pada <head>. Plugin Autoptimize dapat meng‑generate CSS kritis secara otomatis.
3. Kurangi ukuran JavaScript
Minify dan defer skrip yang tidak penting. Tambahkan atribut defer atau async pada tag <script>. Hindari penggunaan plugin berlebihan yang menyertakan banyak file JS.
Strategi mengoptimalkan FID
1. Hapus JavaScript render‑blocking
Letakkan skrip utama di bagian akhir <body> atau gunakan defer. Pastikan tidak ada skrip yang menghambat interaksi pengguna pada fase pertama muat.
2. Gunakan jaringan CDN
Distribusikan aset statis melalui CDN (misalnya Cloudflare) untuk menurunkan latency dan mengurangi waktu respons server.
3. Implementasikan server‑side rendering (SSR)
Jika situs dibangun dengan kombinasi Next.js dan WordPress headless, gunakan SSR untuk menyediakan HTML lengkap sebelum JavaScript dijalankan.
Strategi mengoptimalkan CLS
1. Tetapkan dimensi media
Berikan lebar dan tinggi eksplisit pada gambar, video, iklan, dan iframe. Ini mencegah pergeseran layout saat elemen dimuat.
2. Hindari konten dinamis tanpa placeholder
Jika menampilkan konten yang berubah-ubah (mis. carousel), sisakan ruang kosong menggunakan CSS min-height atau aspect-ratio.
3. Pantau perubahan font
Gunakan font-display: swap pada @font-face untuk menghindari FOIT (Flash of Invisible Text) yang dapat memicu pergeseran layout.
Plugin WordPress rekomendasi
- WP Rocket: Caching, minifikasi, lazy load, dan CDN integrasi dalam satu paket.
- Perfmatters: Menonaktifkan script yang tidak terpakai (emoji, embeds, dashicons).
- Schema & Structured Data for WP: Menambahkan JSON‑LD schema otomatis untuk rich results.
Testing pasca‑optimasi
Setelah menerapkan perubahan, jalankan kembali audit di PageSpeed Insights, Lighthouse, atau GTmetrix. Bandingkan metrik dengan nilai sebelum optimasi. Jika masih di bawah target, periksa kembali plugin yang mungkin menambah beban.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, situs WordPress APA ITU dapat mencapai skor Core Web Vitals 100, meningkatkan peluang masuk ke SERP premium, dan memberikan pengalaman membaca yang mulus bagi pengguna. Mengoptimalkan LCP, FID, dan CLS bukan hanya tentang kecepatan, melainkan tentang kredibilitas dan otoritas online.
