Data Web Inti: LCP, CLS, FID/INP (Cara Optimasi Praktis)

Pendahuluan

Dalam pelajaran ini, Anda akan mempelajari cara mengoptimalkan Core Web Vitals (CWV) secara praktis — tiga metrik performa yang sangat memengaruhi ranking Google: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), dan FID/INP (Interaction to Next Paint).

Menguasai materi ini akan membantu Anda:

  • Mempercepat waktu loading halaman secara signifikan
  • Mengurangi gangguan visual seperti pergeseran layout
  • Meningkatkan kenyamanan interaksi pengguna
  • Meningkatkan peluang naik peringkat di Google, terutama pada device mobile

Prasyarat/Alat yang Dibutuhkan:

  • Google Search Console
  • PageSpeed Insights
  • Chrome DevTools (Lighthouse, Performance Trace)
  • Editor situs (WordPress/HTML)
  • Plugin/peralatan optimasi (LiteSpeed Cache, WP Rocket, atau sejenisnya)

Langkah-langkah Utama

1. Analisis Core Web Vitals dengan PageSpeed Insights & GSC

Instruksi Detail

  1. Buka PageSpeed Insights → Masukkan URL.
  2. Catat status untuk mobile dan desktop:
    • LCP (target < 2.5 detik)
    • CLS (target < 0.1)
    • INP (target < 200 ms)
  3. Masuk ke Google Search Console → Core Web Vitals.
  4. Lihat halaman mana yang masuk kategori poor dan needs improvement.

(Visual Hint: Panel skor hijau/oranye/merah dengan breakdown setiap metrik.)

Tip Profesional:
Selalu cek data lapangan (field data), bukan hanya lab data. Google mengutamakan field data untuk ranking.

2. Optimasi LCP: Membuat Konten Terbesar Muncul Lebih Cepat

Instruksi Detail

Elemen LCP biasanya berupa:

  • Gambar hero di atas
  • Background image besar
  • Elemen heading besar
  • Banner utama

Cara mempercepatnya:

  1. Kompresi gambar ke WebP/AVIF.
  2. Lazy load semua gambar kecuali elemen LCP.
  3. Preload elemen LCP, misalnya: <link rel="preload" as="image" href="/gambar-hero.webp">
  4. Optimalkan server: gunakan CDN + caching.
  5. Kurangi script blocking, seperti plugin berat atau JavaScript pihak ketiga.

(Visual Hint: Diagram “before/after”: gambar hero lambat vs cepat dengan preload.)

Peringatan:
Jangan lazy-load gambar LCP — ini pembunuh skor LCP paling umum.

3. Optimasi CLS: Menghapus Pergeseran Layout yang Mengganggu

Instruksi Detail

Periksa penyebab umum CLS:

  • Iklan yang memindahkan konten
  • Gambar tanpa ukuran width/height
  • Popup tiba-tiba muncul
  • Font berubah saat loading

Cara menghilangkannya:

  1. Tambahkan atribut width dan height pada semua gambar.
  2. Gunakan CSS aspect-ratio jika ukuran dinamis.
  3. Reservasi space untuk iklan (container fixed-height).
  4. Gunakan font-display: swap untuk mencegah shifting font.
  5. Hindari elemen yang muncul tiba-tiba tanpa transisi.

(Visual Hint: Contoh layout bergeser ke bawah saat iklan muncul.)

Tip Profesional:
Gunakan Chrome DevTools → Performance untuk melihat timeline CLS dan lokasi elemen penyebab pergeseran.

4. Optimasi FID/INP: Mempercepat Respons Interaksi Pengguna

Instruksi Detail

INP menggantikan FID, menilai waktu respons semua interaksi pengguna (klik, tap, ketik).

Penyebab buruk INP:

  • Terlalu banyak JavaScript
  • Script pihak ketiga (chat widget, tracker berat)
  • Rendering ulang (repaint/reflow) berlebihan

Cara memperbaikinya:

  1. Kurangi JavaScript berat:
    • Nonaktifkan plugin tidak penting
    • Pisahkan script besar
  2. Gunakan defer/async untuk script: <script src="script.js" defer></script>
  3. Minify dan kompres JS/CSS.
  4. Gunakan caching di server/CDN.
  5. Gunakan priority hints: <link rel="preload" href="script.js" as="script">
  6. Optimalkan UI agar lebih ringan, misalnya hindari animasi berat.

(Visual Hint: Grafik interaksi klik yang lambat vs cepat.)

Peringatan:
Script pihak ketiga adalah penyebab buruk INP paling sering. Audit semua tag (Facebook Pixel, chat widget, dsb).

5. Gunakan Chrome DevTools untuk Debug LCP, CLS, INP secara Mendalam

Instruksi Detail

  1. Buka halaman → klik kanan → Inspect.
  2. Gunakan tab Performance → Rekam aktivitas situs.
  3. Analisis:
    • LCP marker
    • Layout shift highlight
    • Event interaksi pengguna
  4. Lihat Main Thread untuk mengetahui script apa yang memakan waktu paling lama.

(Visual Hint: Timeline dengan indikator LCP, shift, dan event interaksi.)

Tip Profesional:
Gunakan Coverage Tool untuk melihat berapa banyak JavaScript yang tidak digunakan saat loading.

6. Implementasi Optimasi di CMS (WordPress khususnya)

Instruksi Detail

  1. Instal plugin caching/performa:
    • LiteSpeed Cache (rekomendasi)
    • WP Rocket
  2. Aktifkan fitur:
    • Image optimization
    • Critical CSS
    • JS defer/delay
  3. Kurangi plugin berat: builder/slider/analytics berlebihan.
  4. Pastikan hosting memiliki LiteSpeed/NGINX + HTTP/2/3.

(Visual Hint: Dashboard plugin caching dengan toggle optimasi.)

Tip Tambahan:
Hosting lambat hampir selalu berarti skor LCP buruk. Prioritaskan server cepat.

Tips & Peringatan

Tip:
Selalu lakukan pengujian ulang setelah setiap optimasi — perubahan kecil dapat berpengaruh besar pada metrik CWV.

Peringatan:
Jangan mengejar skor 100/100. Fokus pada hasil lapangan dan kelancaran situs nyata.

Strategi Profesional:
Optimasi Core Web Vitals bukan hanya teknis — ini adalah peningkatan UX menyeluruh.

Ringkasan & Tugas

3 Poin Penting

  1. LCP, CLS, dan INP adalah metrik inti yang sangat memengaruhi SEO dan pengalaman pengguna.
  2. LCP berfokus pada kecepatan loading, CLS pada stabilitas visual, dan INP pada respons interaksi.
  3. Optimasi biasanya membutuhkan kombinasi tindakan: kompresi gambar, perbaikan JS, preload, caching, dan pengaturan server.

Tugas Praktis

Lakukan audit Core Web Vitals lengkap pada situs Anda:

  1. Uji 3 halaman dengan PageSpeed Insights dan dokumentasikan masalah LCP, CLS, dan INP.
  2. Perbaiki minimal 2 penyebab utama LCP (misal preload + kompresi gambar).
  3. Gunakan Chrome DevTools untuk menemukan 1 elemen penyebab layout shift dan perbaiki dengan width/height atau aspect-ratio.
Previous Lesson
Back to Course
Next Lesson