Website Bisnis

Cara Optimasi LCP di Next.js: Panduan Teknis untuk Developer dan Marketer

Vito Atmo
Vito Atmo·11 Juni 2026·0 kali dibaca·5 min baca
Cara Optimasi LCP di Next.js: Panduan Teknis untuk Developer dan Marketer

TL;DR: LCP (Largest Contentful Paint) adalah metrik Core Web Vitals yang mengukur kecepatan muat elemen terbesar di halaman. Di Next.js, sumber LCP lambat paling umum adalah gambar hero tanpa atribut priority. Solusi utama: tambahkan priority di komponen next/image, gunakan format WebP/AVIF, dan pastikan server response time di bawah 600ms.

Dalam beberapa proyek website bisnis yang saya bangun dengan Next.js, masalah LCP hampir selalu berasal dari sumber yang sama: gambar hero berukuran besar dimuat tanpa prioritasi. Hasilnya, pengguna melihat halaman kosong selama 3-5 detik sebelum konten utama muncul. Padahal solusinya cukup satu baris kode.

Artikel ini menggabungkan perspektif developer (apa yang perlu diubah di kode) dan marketer (mengapa ini penting untuk bisnis) agar perbaikan LCP bisa diprioritaskan dengan tepat.

Memahami Elemen LCP di Halaman

Browser menentukan elemen LCP secara otomatis: elemen konten terbesar yang terlihat di viewport saat halaman pertama dimuat. Di website bisnis, elemen LCP paling sering adalah:

  • Gambar hero di section pertama halaman
  • Foto profil besar di halaman About
  • Banner promosi di halaman landing
  • Heading besar dengan background image

Cara cek elemen LCP: buka Chrome DevTools, tab Performance, rekam loading halaman, lalu lihat bagian "Timings" untuk LCP. Atau gunakan Lighthouse yang langsung menandai elemen LCP di laporan.

Sumber Masalah LCP di Next.js

1. Gambar tanpa priority

Ini penyebab paling umum. Komponen next/image secara default menggunakan lazy loading. Artinya gambar ditunda dimuat sampai masuk viewport. Untuk gambar di bagian atas halaman (above the fold), lazy loading adalah kebalikan dari yang dibutuhkan.

jsx
// Salah: gambar hero dimuat dengan lazy loading
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" />

// Benar: tambahkan priority
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" priority />

Atribut priority memberitahu Next.js untuk preload gambar menggunakan <link rel="preload"> di <head>. Gambar dimulai dimuat sebelum JavaScript selesai diproses.

2. Gambar dari remote domain tanpa optimasi

Gambar dari Supabase Storage atau CDN eksternal perlu domain dikonfigurasi di next.config.ts. Jika tidak, Next.js melewati optimasi otomatis. Pastikan domain sudah masuk di images.remotePatterns.

3. Server response time (TTFB) lambat

LCP tidak bisa bagus jika server lambat merespons. Ambang TTFB yang aman: di bawah 600ms. Gunakan edge runtime di Vercel atau CDN untuk halaman statis.

4. CSS render-blocking

CSS besar yang tidak di-split akan menahan render sampai file selesai diunduh. Dengan Tailwind CSS v4, masalah ini minimal karena hanya class yang dipakai yang di-include di build.

Langkah Optimasi LCP di Next.js

Langkah 1: Identifikasi elemen LCP

bash
# Jalankan Lighthouse dari terminal
npx lighthouse https://yoursite.com --only-categories=performance

Atau buka PageSpeed Insights dan lihat bagian "Largest Contentful Paint element" di Diagnostics.

Langkah 2: Tambahkan priority pada gambar LCP

Semua gambar di section pertama halaman (hero, banner atas) harus mendapat atribut priority. Hanya berikan ke gambar yang benar-benar terlihat tanpa scroll.

Langkah 3: Optimalkan ukuran gambar

Gunakan sizes yang tepat agar Next.js menghasilkan srcset yang sesuai:

jsx
<Image
  src="/hero.jpg"
  fill
  sizes="100vw"
  alt="Hero"
  priority
/>

Next.js otomatis convert ke WebP/AVIF jika browser mendukung.

Langkah 4: Aktifkan static generation

Halaman yang di-generate secara statis (SSG) memiliki TTFB jauh lebih rendah dibanding halaman yang di-render di server tiap request. Gunakan generateStaticParams untuk dynamic routes.

Langkah 5: Monitor dengan Search Console

Setelah perubahan dilive, pantau laporan Core Web Vitals di Google Search Console. Data field (real user data) biasanya tersedia 28 hari setelah perubahan terindeks.

Studi Kasus: Perbaikan LCP di Proyek Vetmo

Saat membangun website Vetmo (platform layanan pet care), LCP awal tercatat 4,2 detik di mobile. Audit mengidentifikasi gambar hero berformat PNG berukuran 1,8MB tanpa atribut priority.

Perbaikan yang dilakukan:

  1. Tambahkan priority ke komponen Image hero
  2. Compress dan convert gambar ke WebP (dari 1,8MB ke 180KB)
  3. Tambahkan sizes="100vw" untuk srcset yang tepat

Hasil: LCP turun ke 1,8 detik, masuk kategori "Baik" di PageSpeed Insights. Perubahan kode total: sekitar 15 menit.

Pertanyaan Umum

Berapa target LCP yang baik?

Google menetapkan "Baik" di bawah 2,5 detik, "Perlu Perbaikan" antara 2,5-4 detik, dan "Buruk" di atas 4 detik. Target ideal untuk website bisnis: di bawah 2 detik di mobile.

Apakah LCP berpengaruh langsung ke peringkat Google?

Ya. LCP adalah salah satu dari tiga metrik Core Web Vitals yang menjadi faktor page experience dalam algoritma Google sejak Mei 2021. LCP buruk tidak secara otomatis turunkan peringkat, tapi bisa menjadi pembeda di SERP yang kompetitif.

Apakah menggunakan video sebagai hero memengaruhi LCP?

Ya, dan cenderung negatif. Video hero biasanya lambat dimuat. Jika pakai video, gunakan atribut poster dengan gambar yang dioptimasi agar LCP elemen-nya adalah poster image, bukan frame video pertama.

Apakah CDN otomatis memperbaiki LCP?

CDN memperbaiki TTFB (server response time), yang berkontribusi ke LCP. Tapi CDN tidak mengatasi masalah gambar yang tidak dioptimasi atau CSS render-blocking. Keduanya perlu ditangani terpisah.

Prioritaskan LCP Sebelum Metrik Lain

Dari pengalaman mengaudit website klien, LCP adalah metrik Core Web Vitals yang paling berdampak dan seringkali paling mudah diperbaiki. Sebelum optimasi INP atau CLS yang lebih kompleks, pastikan LCP sudah di angka baik terlebih dahulu.

Untuk referensi teknis lebih mendalam, dokumentasi resmi Google tersedia di web.dev/articles/lcp.

Structured Data

json
[
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Cara Optimasi LCP di Next.js: Panduan Teknis untuk Developer dan Marketer",
    "description": "Panduan teknis optimasi LCP di Next.js: gambar priority, WebP, TTFB, dan monitoring dengan Search Console.",
    "author": {"@type": "Person", "name": "Vito Atmo", "url": "https://vitoatmo.com/tentang"},
    "datePublished": "2026-06-11",
    "dateModified": "2026-06-11",
    "mainEntityOfPage": "https://vitoatmo.com/artikel/cara-optimasi-lcp-next-js"
  },
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {"@type": "Question", "name": "Berapa target LCP yang baik?", "acceptedAnswer": {"@type": "Answer", "text": "Google menetapkan Baik di bawah 2,5 detik, Perlu Perbaikan antara 2,5-4 detik, dan Buruk di atas 4 detik. Target ideal untuk website bisnis: di bawah 2 detik di mobile."}},
      {"@type": "Question", "name": "Apakah LCP berpengaruh langsung ke peringkat Google?", "acceptedAnswer": {"@type": "Answer", "text": "Ya. LCP adalah salah satu dari tiga metrik Core Web Vitals yang menjadi faktor page experience dalam algoritma Google sejak Mei 2021."}},
      {"@type": "Question", "name": "Apakah CDN otomatis memperbaiki LCP?", "acceptedAnswer": {"@type": "Answer", "text": "CDN memperbaiki TTFB yang berkontribusi ke LCP, tapi tidak mengatasi masalah gambar yang tidak dioptimasi atau CSS render-blocking."}}
    ]
  }
]
Bagikan

Artikel Terkait

Cara Mengukur ROI Website dalam 90 Hari Pertama

Website Bisnis

Cara Mengukur ROI Website dalam 90 Hari Pertama

Website bukan biaya, tapi aset. Inilah kerangka praktis mengukur pengembalian investasinya dalam 90 hari pertama, lengkap dengan metrik yang benar.

ISR di Next.js: Konten Dinamis Tetap Secepat Halaman Statis

Website Bisnis

ISR di Next.js: Konten Dinamis Tetap Secepat Halaman Statis

Website bisnis butuh konten segar tanpa mengorbankan kecepatan. ISR membuat halaman tetap statis cepat sambil memperbarui data otomatis. Begini cara kerjanya.

Hreflang: Cara Google Tahu Versi Bahasa yang Tepat

Website Bisnis

Hreflang: Cara Google Tahu Versi Bahasa yang Tepat

Website dengan beberapa bahasa sering menyajikan versi yang salah ke pengguna yang salah. Hreflang memberi tahu Google versi mana untuk siapa. Begini cara memasangnya tanpa merusak SEO.

#core-web-vitals#next-js#lcp#performance

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang