Next.js Image Optimization Sering Bikin Pusing Ini Setting Komponen yang Benar Biar LCP Kamu Aman

Next.js Image Optimization Sering Bikin Pusing Ini Setting Komponen yang Benar Biar LCP Kamu Aman
Photo by Sufyan/Unsplash

Next.js Image Optimization Sering Bikin Pusing? Ini Setting Komponen yang Benar Biar LCP Kamu Aman

Halo developer muda, atau buat kamu yang lagi pusing tujuh keliling gara-gara skor Core Web Vitals (CWV) di PageSpeed Insights merah melulu. Kami dari tim marketing Javapixa Creative Studio tahu banget kalau Next.js itu keren, kenceng, dan powerful. Tapi, ada satu biang keladi yang sering bikin performa website kamu jeblok, padahal kodenya udah clean dan bundling-nya udah oke: Image Optimization.

Khususnya, isu yang paling sering muncul adalah LCP (Largest Contentful Paint) yang tinggi. LCP ini pada dasarnya mengukur berapa lama waktu yang dibutuhkan browser untuk me-render elemen terbesar yang terlihat pertama kali oleh user (seringnya itu adalah hero image atau banner utama). Kalau gambar ini loadingnya lama, skor kamu langsung anjlok.

Next.js sudah menyediakan solusi emas lewat komponen

. Tapi, menggunakan komponen ini tanpa memahami properti kuncinya malah bisa jadi bumerang. Nah, di sini kami akan bongkar tuntas, mulai dari fundamental sampai trik-trik yang wajib kamu pakai supaya LCP kamu aman, bahkan bisa tembus di bawah 2.5 detik.

Kenapa Next.js Image Bikin Ribet Padahal Katanya Otomatis?

Next.js

itu sejatinya adalah alat super canggih. Dia tidak hanya meng-handle konversi format (misalnya dari PNG ke WebP atau AVIF) dan resizing, tapi juga mengatur lazy loading secara default.

Masalahnya muncul saat kita menganggap semua gambar harus diperlakukan sama. Padahal, ada perbedaan fundamental antara gambar yang berada di viewport pertama kali (Above the Fold) dan gambar yang baru muncul setelah user scroll ke bawah (Below the Fold).

Meskipun Next.js melakukan banyak hal otomatis, ada tiga properti yang harus kamu atur secara manual dan strategis agar LCP kamu nggak kena getahnya.

*

Fokus Utama: Mengamankan LCP dengan priority

Ini adalah kesalahan paling umum dan paling fatal. Jika gambar utama atau hero image di halaman depan kamu tidak menggunakan properti ini, Next.js akan memperlakukannya seperti gambar biasa (yaitu di-lazy load). Artinya, browser baru akan mulai memuat gambar tersebut setelah skrip dan elemen lain selesai, yang secara langsung menaikkan LCP kamu.

Kunci 1: priority={true} Hanya untuk yang Utama

Kamu wajib menambahkan priority={true} pada semua gambar yang terletak di viewport pertama (yang terlihat tanpa harus scroll).

Kenapa hanya untuk yang utama?

Karena ketika kamu menambahkan priority={true}, Next.js akan melakukan dua hal krusial:

  1. Preload: Next.js akan menyuntikkan ke header HTML. Ini memberi tahu browser untuk memuat gambar ini secepat mungkin.
  2. Immediate Load: Gambar tidak akan di-lazy load, melainkan langsung di-fetch bersamaan dengan sumber daya kritis lainnya.

Jika kamu menggunakan priority={true} untuk semua gambar (misalnya 10 gambar dalam satu halaman), kamu justru akan membebani jalur rendering kritis, dan pada akhirnya, semua gambar akan lambat.

Contoh Penerapan yang Benar:

Misalnya kamu punya HeroBanner.js:

javascript
import Image from 'next/image';const HeroBanner = () => {
  return (
    
      
      {/ Konten lainnya /}
    
  );
};

Ingat: Cek di perangkat mobile. Seringkali, gambar yang terlihat di desktop di atas fold ternyata tidak terlihat di mobile. Pastikan kamu menguji LCP di kedua ukuran viewport.

*

Menghindari CLS dan Mengatur Responsiveness

LCP adalah tentang kecepatan, tapi ada metrik lain yang sama pentingnya: CLS (Cumulative Layout Shift). CLS adalah ukuran seberapa banyak elemen di halaman kamu bergeser saat loading. Gambar yang tidak ditentukan ukurannya secara jelas (atau layout-nya salah) adalah penyebab utama CLS.

Di Next.js, ada tiga properti layout yang perlu kamu pahami untuk mengunci dimensi gambar:

  1. layout="intrinsic" (Default sebelum Next.js 13. Ini memastikan gambar tidak akan melebihi ukuran aslinya.)
  2. layout="fixed" (Gambar memiliki lebar dan tinggi yang statis, tidak responsif.)
  3. layout="responsive" (Gambar akan scale sesuai lebar parent container sambil mempertahankan rasio aspek. Wajib sertakan width dan height!)

layout="fill" (Gambar akan mengisi 100% dari parent container yang harus diatur position: relative atau position: absolute. Tidak perlu width atau height pada komponen

.)

Kunci 2: Menguasai Properti sizes

Ini adalah properti yang paling sering diabaikan dan paling sering disalahpahami. Jika kamu menggunakan layout="responsive" atau layout="fill", properti sizes adalah game changer untuk LCP dan efisiensi bandwidth.

Apa itu sizes?

sizes memberitahu browser seberapa lebar gambar akan dirender di berbagai ukuran viewport. Ini bukan CSS, melainkan instruksi untuk Next.js/Browser agar tahu ukuran mana dari srcset yang harus diunduh.

Tanpa sizes, Next.js mungkin akan mengasumsikan gambar tersebut akan selebar 100vw (100% lebar viewport), dan akibatnya, ia akan mengunduh gambar beresolusi sangat besar, bahkan jika gambar itu sebenarnya hanya menempati 30% dari layar (misalnya, gambar di sidebar).

Contoh Penerapan sizes yang Akurat:

Bayangkan kamu punya gambar di blog post yang menempati lebar penuh di layar mobile, tapi di desktop (lebar > 1024px), gambar tersebut hanya menempati 70% lebar container (sisanya adalah sidebar).

javascript

Penjelasan sizes di atas: (max-width: 1024px) 100vw: Jika lebar layar kurang dari 1024px, gambar akan dirender selebar 100% viewport*. 70vw: Untuk layar di atas 1024px, gambar akan dirender selebar 70% viewport*.

Dengan setting ini, Next.js akan memilih ukuran gambar yang lebih kecil saat pengguna membuka dari desktop kecil, dan memilih resolusi yang sesuai (bukan resolusi maksimum) di desktop besar, sehingga loading jadi jauh lebih cepat.

*

Kunci 3: Taktik layout="fill" untuk Background dan Cover

Jika kamu ingin gambar mengisi seluruh area container tanpa peduli rasio aspek (misalnya untuk gambar background atau cover), gunakan layout="fill".

Aturan Emas layout="fill":

Komponen

tidak perlu properti width dan height.

Parent* container wajib memiliki position: relative (atau absolute, fixed, sticky). Untuk mengatur rasio aspek pada parent, gunakan padding top atau aspect-ratio CSS pada parent* container, bukan pada

itu sendiri.

css
/ CSS untuk parent container /
.cover-container {
  position: relative; / WAJIB! /
  width: 100%;
  height: 400px; / Tentukan dimensi display di parent /
}
javascript

Penggunaan layout="fill" yang benar akan menjamin CLS kamu nol, karena layout container sudah terkunci dimensinya sebelum gambar selesai di-load.

*

Deep Dive Configuration: Next.config.js dan Loaders

Kadang, masalah bukan cuma di komponen, tapi di pengaturan global. Sebagai tim ahli di Javapixa Creative Studio, kami selalu memastikan konfigurasi default Next.js sudah optimal untuk produksi.

Setting Up External Domains

Jika kamu mengambil gambar dari luar (misalnya dari CDN atau CMS seperti Strapi, Contentful, atau AWS S3), kamu harus mendaftarkannya di next.config.js untuk mengizinkan Next.js mengoptimasi gambar dari domain tersebut. Jika tidak, Next.js akan menolaknya atau memuatnya sebagai tag

biasa (tanpa optimasi).

javascript
// next.config.js
module.exports = {
  images: {
    domains: ['images.unsplash.com', 'assets.your-cms.com', 's3.amazonaws.com'],
  },
};

Mengganti Loader (Jika Perlu)

Secara default, Next.js menggunakan built-in Image Optimization yang berjalan di server Node.js. Ini bagus, tapi jika website kamu di-deploy di platform yang tidak mendukung Node.js server (misalnya Static Site Generation murni di Netlify atau GitHub Pages), kamu perlu mengganti loader.

Kami di Javapixa sering merekomendasikan loader pihak ketiga seperti Cloudinary, Imgix, atau Akamai, terutama untuk website berskala besar yang membutuhkan manajemen aset gambar yang kompleks dan global.

Contoh menggunakan Cloudinary Loader:

javascript
// next.config.js
module.exports = {
  images: {
    loader: 'cloudinary',
    path: 'https://res.cloudinary.com/nama-akun-kamu/',
  },
};

Ketika kamu menggunakan custom loader, Next.js akan mendelegasikan semua tugas optimasi (resizing, format, caching) ke pihak ketiga tersebut. Ini sangat meringankan beban server Next.js kamu.

*

Tips Tambahan Biar Kamu Nggak Pusing Lagi

1. Jangan Lupakan placeholder="blur"

Untuk mengurangi persepsi loading yang lambat, terutama pada gambar yang memiliki priority={true}, gunakan properti placeholder="blur". Ini akan menampilkan versi low quality (blur) dari gambar tersebut saat gambar aslinya masih diunduh.

Next.js bisa secara otomatis menghasilkan blur ini jika gambar tersebut diimpor dari local (misalnya import heroImage from '../public/hero.jpg'). Jika gambarnya external, kamu harus menyediakannya sendiri melalui properti blurDataURL.

2. Atur Cache Header

Jika kamu menggunakan default loader Next.js, pastikan caching gambar yang sudah dioptimasi berjalan dengan baik di deployment kamu (misalnya Vercel, Netlify). Next.js secara otomatis memberikan cache control header yang panjang untuk file gambar yang dioptimasi (yang tersimpan di /\_next/image). Jangan sampai proxy atau CDN kamu menimpa header ini. Caching yang efisien adalah kunci untuk LCP yang cepat pada kunjungan kedua.

3. Gunakan Tag untuk Format Spesifik

Meskipun Next.js sudah pintar meng-handle WebP dan AVIF, jika kamu membutuhkan kontrol yang sangat spesifik atau perlu menyajikan gambar yang berbeda sama sekali (misalnya gambar A untuk mobile, gambar B untuk desktop), kamu mungkin perlu mempertimbangkan menggunakan tag native HTML, namun ini akan mengorbankan sebagian besar fitur otomatis

.

Namun, dalam banyak kasus modern, menggunakan

dengan properti sizes yang akurat sudah memberikan hasil yang optimal dan jauh lebih mudah dikelola.

*

Kesimpulan: LCP Aman, Proyek pun Cemerlang

Mengoptimalkan gambar di Next.js memang sedikit tricky di awal. Tapi begitu kamu menguasai tiga kunci utama—priority={true} yang selektif, penggunaan sizes yang akurat, dan pemahaman layout (responsive vs fill)—skor LCP kamu pasti melonjak naik.

Kinerja yang optimal bukan hanya soal kecepatan, tapi juga soal user experience dan kredibilitas di mata Google.

Jika kamu merasa bahwa mengurus detail front-end yang rumit seperti Next.js Image Optimization ini memakan waktu dan mengalihkan fokusmu dari inovasi bisnis, jangan ragu untuk menyerahkan pekerjaan ini kepada ahlinya.

Di Javapixa Creative Studio, kami tidak hanya membangun website atau aplikasi; kami membangun produk digital yang teruji performanya. Kami memastikan setiap proyek yang kami deliver, mulai dari hero image hingga API endpoint di belakangnya, sudah memenuhi standar Core Web Vitals tertinggi.

Fokuskan energimu pada ide besarmu, biar urusan Next.js yang kencang dan LCP yang aman jadi tanggung jawab kami. Segera hubungi Javapixa untuk konsultasi proyek digital kamu!