Jangan biarin Next.js kamu lemot, coba optimasi Image Component dan Font ini biar Core Web Vitals hijau.

Jangan biarin Next.js kamu lemot, coba optimasi Image Component dan Font ini biar Core Web Vitals hijau.
Photo by Maksym Zakharyak/Unsplash

Halo, teman-teman developer dan digital enthusiast! Gimana kabarnya? Semoga lagi semangat coding dan nge-deploy project keren kalian, ya.

Kita semua tahu, Next.js itu jagonya kalau ngomongin performa. Framework ini sudah kasih kita banyak "free lunch" soal optimasi. Tapi, seringkali, meski kita pakai Next.js, ada aja bagian yang bikin website kita terasa berat, loadingnya lama, dan skor Core Web Vitals (CWV) di Lighthouse jadi merah atau kuning menyala. Padahal, CWV ini kunci banget lho, bukan cuma buat SEO, tapi juga buat user experience (UX) yang menentukan apakah user betah atau langsung kabur.

Dua biang kerok utama yang paling sering bikin Next.js kita lemot dan Core Web Vitals jeblok adalah Images dan Fonts.

Nah, kali ini, kita akan bedah tuntas, sampai ke akar-akarnya, gimana caranya kita bisa bikin component next/image dan font loading kita jadi secepat kilat. Tujuannya jelas: bikin skor CWV kita, terutama Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS), jadi hijau royo-royo.

Kalau kalian lagi pusing mikirin performance website atau aplikasi, jangan khawatir. Tim ahli di Javapixa Creative Studio selalu siap membantu. Kami bukan cuma bikin website, tapi bikin website yang super cepat dan performanya terjamin. Tapi sebelum menghubungi kami, yuk kita coba dulu optimasi mandiri ini!

---

Kenalan Lebih Dekat dengan Core Web Vitals (CWV)

Sebelum kita masuk ke dapur optimasi, penting banget kita ingat lagi tiga metrik utama CWV yang wajib kita jaga:

  1. Largest Contentful Paint (LCP): Mengukur waktu yang dibutuhkan elemen konten terbesar di viewport (layar) untuk dimuat. Elemen terbesar ini biasanya gambar pahlawan (hero image) atau blok teks besar.
  2. Cumulative Layout Shift (CLS): Mengukur stabilitas visual. Ini adalah jumlah pergeseran tak terduga yang terjadi pada konten saat halaman sedang dimuat. Pergeseran ini sering disebabkan oleh gambar yang baru dimuat, atau font yang tiba-tiba berubah ukuran.
  3. First Input Delay (FID) / Interaction to Next Paint (INP): Mengukur interaktivitas. Seberapa cepat browser merespons interaksi pertama pengguna (klik tombol, input form, dll.).

Fokus utama kita kali ini adalah LCP (karena gambar adalah LCP killer) dan CLS (karena font dan gambar tanpa dimensi sering menyebabkan CLS).

---

Bagian 1: Memaksimalkan Kekuatan next/image

Next.js memberikan kita The Next/Image Component, sebuah mahakarya optimasi yang sering disalahgunakan atau kurang dimaksimalkan potensinya. Ini bukan sekadar tag

biasa. Ini adalah mesin optimasi.

1. Wajib Tentukan Dimensi: Biar CLS Minggat!

Ini adalah kesalahan paling fundamental yang sering dilakukan. Banyak developer, terutama yang terbiasa dengan tag

tradisional, lupa bahwa Next/Image membutuhkan properti width dan height.

Kenapa Penting? Tanpa width dan height yang jelas, browser tidak tahu berapa banyak ruang yang harus disisihkan untuk gambar tersebut saat proses rendering. Ketika gambar akhirnya dimuat, ia "mendorong" elemen di bawahnya, menyebabkan layout shift. Hasilnya? CLS Anda langsung naik drastis!

jsx
// SALAH (Berpotensi CLS)
// import Image from 'next/image';
//

Jika gambar Anda harus adaptif (responsive), gunakan properti layout="responsive" (pada Next.js versi lama) atau pastikan Anda menggunakan CSS modern (seperti object-fit: cover atau aspect-ratio) untuk menjaga proporsi sambil tetap memberikan width dan height pada komponen.

2. Prioritas Tinggi untuk LCP (The priority Prop)

Gambar yang menjadi elemen LCP (misalnya hero banner di atas fold) harus dimuat secepat mungkin. Di sinilah properti priority masuk.

Ketika Anda menambahkan priority={true} pada sebuah gambar:

  1. Next.js akan secara otomatis menambahkan tag di dokumen HTML.
  2. Gambar tersebut tidak akan di-lazy load.
  3. Browser akan memuatnya dengan prioritas tinggi.

Aturan Emas: Gunakan priority={true} HANYA pada satu atau maksimal dua gambar yang berada di above the fold dan merupakan kandidat LCP. Terlalu banyak menggunakan priority justru bisa mengacaukan prioritas pemuatan aset lainnya.

3. Menggunakan sizes dan srcset untuk Adaptabilitas Sempurna

Next/Image secara otomatis menghasilkan berbagai ukuran gambar (srcset). Namun, browser tetap tidak tahu ukuran optimal apa yang harus ditarik, terutama pada desain responsif.

Properti sizes memberi tahu browser seberapa besar gambar akan dirender di berbagai ukuran layar.

Contoh Kasus: Gambar hero yang mengambil 100% lebar layar pada mobile, tetapi hanya 50% pada desktop.

jsx

Dengan mendefinisikan sizes secara akurat, Anda memastikan browser tidak menarik gambar 2000px hanya untuk menampilkannya di layar mobile 400px, yang mana ini adalah pemborosan bandwidth dan waktu LCP yang mahal.

4. Loader Kustom: Ketika API Pihak Ketiga Berkuasa

Secara default, Next.js menggunakan Image Optimization API bawaan yang bekerja sangat baik, terutama jika Anda deploy di Vercel. Namun, bagaimana jika Anda menggunakan penyedia gambar pihak ketiga seperti Cloudinary, Imgix, atau kustom CDN?

Anda bisa mendefinisikan loader kustom di next.config.js.

javascript
// next.config.js
module.exports = {
  images: {
    // Misalnya menggunakan Cloudinary
    loader: 'cloudinary',
    path: 'https://res.cloudinary.com/your-cloud-name/image/upload/',
  },
};

Ini memungkinkan Next/Image untuk tetap mengelola dimensi dan srcset tetapi menggunakan URL dan parameter optimasi dari penyedia CDN Anda, memberikan kontrol penuh sekaligus mempertahankan manfaat sintaks Next/Image.

---

Bagian 2: Menjinakkan Font untuk Membunuh CLS

Font yang tidak di-load dengan benar adalah penyebab utama layout shift yang sangat mengganggu. Ini terjadi ketika browser menampilkan teks menggunakan font default sistem (Flash of Unstyled Text/FOUT) atau menyembunyikan teks (Flash of Invisible Text/FOIT) sebelum font kustom berhasil diunduh. Saat font kustom tiba, ukuran huruf dan spasi (metrics) berubah, membuat tata letak bergeser.

Next.js sudah menyediakan solusi modern yang sangat canggih: @next/font.

1. Tinggalkan next/google/font Lama, Gunakan @next/font Baru

Jika Anda menggunakan Next.js versi 13 ke atas, lupakan cara lama mengimpor Google Font melalui CSS eksternal. Gunakan next/font/google atau next/font/local.

Keuntungan @next/font:

  1. Zero Layout Shift: Ini adalah fitur utama. Next.js secara otomatis menghitung font fallbacks dan menginjeksikan CSS yang memastikan ruang yang disisihkan untuk teks sudah sesuai dengan dimensi font kustom, bahkan sebelum font itu dimuat. CLS hilang!
  2. Self-Hosted dan Optimized: Font di-host secara lokal di domain Anda, mengurangi latency dari permintaan pihak ketiga, dan otomatis menggunakan format file optimal (misalnya WOFF2).

Implementasi:

jsx
// _app.js atau layout.js
import { Inter } from 'next/font/google';const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap', // Penting untuk strategi loading
});

2. Strategi Font Display: swap vs. optional

Di dalam konfigurasi font, Anda akan menemukan properti display. Ini krusial untuk CLS dan LCP:

display: swap: (Paling umum) Browser akan menampilkan teks menggunakan font fallback (sistem) sesegera mungkin. Setelah font kustom diunduh, ia akan di-swap. Ini bagus untuk LCP karena teks langsung terlihat, tapi masih ada risiko CLS kecil jika metrics* font sangat berbeda.

  • display: optional: Browser hanya akan mencoba mengunduh font kustom selama beberapa milidetik. Jika font tidak siap dengan cepat, ia akan menggunakan font fallback secara permanen (untuk sesi tersebut). Ini adalah opsi terbaik untuk CLS, karena jika ada pergeseran, itu terjadi sangat cepat atau tidak sama sekali. Tapi risikonya, user mungkin tidak melihat font kustom Anda.

Rekomendasi Javapixa: Untuk font utama (body text), gunakan display: optional jika branding Anda tidak terlalu ketat. Untuk font branding atau heading* (yang wajib terlihat), gunakan display: swap yang digabungkan dengan fitur optimasi metrik @next/font untuk meminimalisir CLS.

3. Preloading Font Kritis (Jika Masih Pakai Cara Lama)

Jika Anda belum bisa migrasi penuh ke @next/font atau menggunakan font lokal non-Google, pastikan font yang paling penting untuk LCP (misalnya font untuk headline) di-preload.

Tambahkan tag di dalam Head Next.js Anda:

jsx
import Head from 'next/head';

Ini memastikan browser memulai unduhan font lebih awal, sehingga risiko FOUT/FOIT berkurang drastis, yang artinya CLS dan LCP Anda juga membaik.

---

Bagian 3: Checklist Cepat untuk LCP dan CLS

Setelah kita bedah Images dan Fonts, berikut beberapa tips tambahan yang bisa Anda terapkan segera:

  1. Inline CSS Kritis: Pastikan CSS yang dibutuhkan untuk rendering above the fold di-inline. Ini mengurangi render-blocking time dan mempercepat LCP. (Next.js dan modern styling solutions seperti styled-components atau Tailwind sudah banyak membantu di sini).
  2. Lazy Load di Bawah Fold: Selain priority={true}, pastikan semua gambar yang berada di bawah fold (tidak terlihat saat halaman pertama kali dimuat) dibiarkan lazy loaded (perilaku default Next/Image). Ini menghemat bandwidth pada pemuatan awal.
  3. Tweak Threshold Lazy Loading: Next.js memungkinkan Anda menentukan root margin atau jarak di mana gambar mulai dimuat sebelum ia masuk ke viewport. Jika Anda merasa gambar di bawah fold masih lambat muncul, pertimbangkan untuk meningkatkan ambang batas lazy loading agar gambar mulai dimuat sedikit lebih awal.
  4. Minimalkan Third-Party Scripts: Script pihak ketiga (analitik, iklan) seringkali mengganggu waktu pemuatan LCP. Gunakan komponen next/script dengan strategi afterInteractive atau lazyOnload untuk memastikan script tersebut tidak mengganggu rendering konten utama.

---

Kesimpulan: Next.js Cepat Bukan Hanya Mitos

Mengoptimalkan Next.js memang butuh ketelitian, terutama dalam hal Images dan Fonts. Kedua aset ini, meski terlihat sepele, adalah penentu utama nasib Core Web Vitals Anda di mata Google dan, yang lebih penting, di mata pengguna.

Dengan menguasai properti priority, sizes, dan menggunakan solusi modern seperti @next/font, Anda sudah menempuh separuh jalan menuju situs web yang memiliki skor Lighthouse 100/100.

Namun, kami di Javapixa Creative Studio tahu betul bahwa performa bukan hanya tentang teori. Ketika menghadapi proyek skala besar, integrasi e-commerce kompleks, atau aplikasi dengan beban traffic tinggi, optimasi perlu dilakukan secara holistik, mulai dari arsitektur backend hingga delivery frontend.

Jika tim internal Anda kesulitan mencapai Core Web Vitals hijau atau ingin memastikan website Next.js Anda tidak hanya cepat hari ini, tapi juga skalabel di masa depan, jangan ragu untuk menghubungi kami. Javapixa Creative Studio spesialis dalam membangun aplikasi berbasis Next.js dan React yang tidak hanya indah secara desain, tetapi juga dijamin performanya, bahkan di bawah tekanan tertinggi.

Yuk, wujudkan website yang super cepat, responsif, dan performanya bikin kompetitor gigit jari. Sampai jumpa di optimasi berikutnya!