nextjsperformaweb-vitalsseoMahir4 mnt baca

Optimasi Performa: Core Web Vitals

Mengukur dan memperbaiki LCP, CLS, dan INP agar situs cepat dan disukai Google.

Tiga metrik utama

Google menilai pengalaman halaman lewat Core Web Vitals:

  • LCP (Largest Contentful Paint): seberapa cepat konten utama terlihat. Target di bawah 2,5 detik.
  • CLS (Cumulative Layout Shift): seberapa stabil layout (tidak lompat-lompat). Target di bawah 0,1.
  • INP (Interaction to Next Paint): seberapa responsif halaman terhadap klik. Target di bawah 200ms.

Cara mengukur

Pakai PageSpeed Insights (pagespeed.web.dev) atau tab Lighthouse di Chrome DevTools. Ukur di mode incognito tanpa ekstensi agar hasilnya akurat.

Teknik optimasi di Next.js

Banyak yang sudah otomatis kalau kamu mengikuti track ini:

  • Gambar: pakai next/image dengan priority untuk hero (memperbaiki LCP).
  • Font: pakai next/font agar tidak ada layout shift teks (memperbaiki CLS).
  • JavaScript: perkecil Client Component, pakai dynamic import untuk komponen berat (memperbaiki INP).
tsx
// Komponen berat hanya dimuat saat dibutuhkan
import dynamic from "next/dynamic";

const EditorBerat = dynamic(() => import("./editor-berat"), {
  loading: () => <p>Memuat editor...</p>,
  ssr: false, // hanya di browser, misal pakai window
});

Bundle analyzer

Untuk tahu library apa yang bikin bundle bengkak:

bash
npm install @next/bundle-analyzer

Lalu aktifkan di next.config.mjs. Hasilnya berupa visualisasi interaktif: kotak besar berarti library besar. Ganti library berat dengan alternatif ringan kalau memungkinkan.

Kesalahan umum pemula

  • Optimasi tanpa mengukur. Mengubah ini-itu tanpa data Lighthouse hanya buang waktu. Ukur dulu, temukan skor terburuk, perbaiki itu.
  • Terlalu banyak dynamic import. Memecah semua komponen jadi chunk kecil bisa menambah overhead request. Pakai untuk komponen yang benar-benar berat.
  • Mengabaikan gambar. 80% masalah performa situs pemula adalah gambar raksasa yang tidak dioptimasi. Selalu mulai dari sini.

Latihan singkat

  1. Jalankan Lighthouse di project-mu, catat skor LCP, CLS, dan INP.
  2. Perbaiki satu masalah terbesar yang ditemukan (biasanya gambar atau font), lalu ukur lagi dan bandingkan skornya.

Rangkuman

  • Core Web Vitals: LCP (<2,5 dtk), CLS (<0,1), INP (<200 ms).
  • Ukur dengan PageSpeed Insights atau Lighthouse sebelum optimasi.
  • Teknik utama: next/image + priority, next/font, dan dynamic import untuk komponen berat.
  • Jangan optimasi prematur; perbaiki bottleneck yang terukur dulu.

Catatan teknis: Optimasi prematur membuang waktu. Ukur dulu, temukan bottleneck sebenarnya, baru optimasi. Seringkali masalahnya satu gambar 4MB yang lupa dioptimasi, bukan arsitektur yang salah.