Gimana Caranya Aku Nge-boost Next.js Sampai Skor Lighthouse 98 di Core Web Vitals

Gimana Caranya Aku Nge-boost Next.js Sampai Skor Lighthouse 98 di Core Web Vitals
Photo by Clay Banks/Unsplash

Waktu pertama kali kita memutuskan pakai Next.js untuk project klien di Javapixa Creative Studio, tujuannya jelas: performance dan developer experience yang top. Next.js itu keren, tapi kalau cuma instalasi standar, dapat skor Lighthouse 90–95 itu gampang. Tapi, kalau targetnya 98 ke atas, apalagi di Core Web Vitals (CWV) yang sekarang jadi standar utama Google, kita harus main lebih kotor, lebih detail, dan lebih strategis.

Skor 98 itu bukan cuma angka yang bikin bangga, lho. Itu artinya website kamu responsif banget, loading-nya nyaris instan, dan user experience-nya mulus tanpa ada elemen yang tiba-tiba geser (yang kita sebut jumps). Ini penting banget, terutama buat conversion rate dan SEO.

Nah, di sini kita akan bongkar rahasia dapur Javapixa Creative Studio. Bagaimana kita mendorong Next.js melewati batas standarnya dan menyentuh skor 98, fokus pada tiga serangkai CWV: Largest Contentful Paint (LCP), Interaction to Next Paint (INP - pengganti FID), dan Cumulative Layout Shift (CLS).

*

Tahap 1: Pondasi Dasar Next.js yang Sering Dilupakan (The Low-Hanging Fruit)

Sebelum masuk ke optimasi hardcore, pastikan kamu sudah melakukan hal-hal fundamental ini. Percaya deh, banyak developer yang loncat ke optimasi tingkat lanjut padahal dasar-dasarnya masih bolong.

1. Next/Image: Bukan Cuma Dipakai, Tapi Diatur Prioritasnya

Komponen next/image adalah game changer dari Vercel. Tapi banyak yang salah kaprah. Mereka kira cuma pasang, lalu selesai.

Untuk mencapai skor LCP tinggi (di bawah 2.5 detik), kamu wajib mengoptimalkan LCP Element. Biasanya, LCP Element itu adalah hero image atau banner utama di bagian atas halaman (viewport).

Trik Khusus:

Atribut priority: Ini wajib hukumnya di hero image*. Dengan priority={true}, Next.js akan memastikan gambar ini dimuat secepat mungkin dan bahkan di-preload. Kalau ini tidak dilakukan, LCP kamu bisa jeblok.

  • Ukuran Eksplisit (width dan height): Selalu berikan dimensi yang jelas. Kenapa? Ini adalah cara paling ampuh mencegah CLS. Kalau browser sudah tahu ukuran gambar, ia bisa menyiapkan ruang (placeholder) sebelum gambar itu termuat. CLS adalah musuh terbesar kita.

Format Generasi Baru: Pastikan Next.js dikonfigurasi untuk menyajikan format modern seperti WebP atau AVIF secara otomatis. Next.js biasanya sudah melakukannya, tapi pastikan konfigurasi image loader* kamu mendukungnya.

Kalau Javapixa Creative Studio mengerjakan website e-commerce, kami bahkan menganalisis viewport pengguna paling umum dan memastikan gambar hero benar-benar responsif di berbagai ukuran, sehingga tidak ada waste bandwidth memuat gambar 4K di layar HP.

2. Strategi Font yang Membunuh FOUC

Font adalah penyebab utama CLS dan juga bisa memperlambat LCP. Flash of Unstyled Content (FOUC) atau Flash of Invisible Text (FOIT) harus dihindari.

Solusinya adalah font-display: optional atau swap dan preloading:

Gunakan next/font yang diperkenalkan di Next.js 13. Ini otomatis mengurus self-hosting font Google dan menghilangkan external request. Ini killer feature* untuk performance.

  • Jika kamu masih menggunakan font pihak ketiga, pastikan kamu menggunakan di untuk memuat file font kritis secepat mungkin.

Yang paling penting: gunakan properti size-adjust di CSS (atau melalui tool Next/Font) agar ketika font fallback* dimuat, ukurannya sebisa mungkin mirip dengan font utama. Ini adalah senjata rahasia untuk menghilangkan CLS yang disebabkan oleh pergantian font.

*

Tahap 2: Menghindari Bloat dan Mengoptimalkan Kode (The Deep Dive)

Setelah semua gambar dan font beres, kita pindah ke kode. Next.js itu bundler-nya pintar, tapi kalau kita malas memisahkan kode, bundle kita akan bengkak dan LCP/INP kita bakal kedodoran.

3. Code Splitting yang Agresif dengan next/dynamic

Ini adalah trik kuno yang harus tetap diterapkan secara disiplin. Tidak semua komponen perlu dimuat saat initial load.

Pikirkan komponen mana yang tidak terlihat di viewport pertama kali. Contohnya: footer, modal yang muncul setelah klik tombol, atau tab navigasi yang tidak aktif.

javascript
// Hindari import biasa:
// import BigChart from '../components/BigChart';// Gunakan dynamic import:
import dynamic from 'next/dynamic';const BigChart = dynamic(() => import('../components/BigChart'), {
  loading: () => Memuat...,
  ssr: false, // Jika chart hanya butuh di client
});

Dengan ssr: false, kamu tidak hanya memisahkan kode JS-nya, tapi juga memastikan server tidak perlu repot-repot merender komponen berat yang hanya dipakai di sisi client. Ini mengurangi beban server dan mempercepat TTFB (Time To First Byte).

4. Pilih Strategy Rendering yang Tepat (SSG vs SSR vs ISR)

Next.js memberi kita banyak pilihan, tapi terkadang kita terlalu malas memilih dan semua di-default-kan ke SSR (Server-Side Rendering). SSR itu kuat, tapi bisa meningkatkan TTFB karena server harus menunggu data sebelum mengirimkan HTML.

Tips Javapixa Creative Studio:

Static Site Generation (SSG) / App Router Static: Untuk konten yang jarang berubah (blog, halaman landing page statis, About Us). Ini memberikan performance terbaik (skor 100 gampang dicapai) karena semua HTML sudah di-generate di waktu build*.

  • Incremental Static Regeneration (ISR): Jika konten berubah sesekali (misalnya, harga produk). Gunakan revalidate untuk menjaga keseimbangan antara performa SSG dan kesegaran data.

Server-Side Rendering (SSR) / Dynamic: Hanya gunakan jika data benar-benar harus real-time (misalnya, dashboard pengguna). Dan jika terpaksa SSR, pastikan function getServerSideProps atau fetch* di Server Component kamu sangat cepat.

Intinya, jangan ada fetch data yang lambat menghambat render HTML awal.

5. Meminimalkan Payload Awal: Menggunakan Server Components dengan Bijak (Next.js 13/14)

Jika kamu sudah beralih ke App Router (Next.js 13/14), maksimalkan Server Components.

Server Components memungkinkan kamu meletakkan kode heavy (seperti operasi database, library besar, atau fetching data) di sisi server tanpa harus mengirimkan bundle JavaScript-nya ke client. Ini secara dramatis mengurangi ukuran initial JS payload, yang merupakan kunci untuk meningkatkan INP.

Jika bundle JS kamu kecil, browser lebih cepat selesai memproses, sehingga interaksi pengguna (seperti klik) bisa ditangani lebih cepat.

*

Tahap 3: Membunuh Latency dan Third-Party Scripts (The Hard Fixes)

Skor 98 seringkali terhambat oleh dua hal: keterbatasan server dan skrip pihak ketiga yang tidak disiplin.

6. Menjinakkan Third-Party Scripts (Analytics, GTM, Ads)

Ini adalah biang kerok utama yang menjatuhkan skor 98. Google Tag Manager (GTM), Facebook Pixel, atau iklan pihak ketiga seringkali memblokir thread utama browser, menghambat LCP, dan memperlambat INP.

Solusi terbaik: Komponen next/script:

  • Strategi beforeInteractive: Gunakan ini hanya untuk skrip yang benar-benar esensial (misalnya, Autentikasi).

Strategi afterInteractive: Ini default yang bagus untuk Google Analytics atau tracking* standar. Skrip akan dimuat setelah halaman interaktif. Strategi lazyOnload: Ini adalah hacker level 98. Gunakan ini untuk skrip iklan yang tidak perlu dimuat sampai pengguna scrolling* atau ada waktu luang.

Penting: Jika memungkinkan, host sendiri (self-host) skrip pihak ketiga, atau minimal gunakan CDN lokal, untuk menghindari latensi DNS lookup ke server eksternal.

7. Perbaiki TTFB (Time To First Byte)

Kamu sudah mengoptimalkan frontend, tapi jika server lambat merespons, LCP kamu akan jeblok. TTFB harus di bawah 500ms, idealnya 100–300ms.

Bagaimana cara memperbaikinya?

Pilih Hosting yang Tepat: Di Javapixa Creative Studio, kami selalu merekomendasikan deploy Next.js di Vercel (karena dioptimalkan khusus untuk Next.js) atau platform serverless* yang menggunakan Edge CDN yang kuat. Cache Headers yang Agresif: Pastikan static asset (gambar, CSS, JS) memiliki caching header* yang lama (misalnya, max-age=31536000). Meminimalkan Database Query: Kalau kamu menggunakan SSR, pastikan query database kamu sangat cepat. Gunakan connection pooling dan caching* di sisi database untuk hasil yang sering diminta.

8. Prioritas CSS Kritis dan Minifikasi

Next.js sudah otomatis meminifikasi CSS dan JS. Namun, untuk LCP maksimal, kita harus memastikan hanya CSS yang dibutuhkan untuk viewport awal saja (Critical CSS) yang dimuat segera. Sisa CSS lainnya bisa di-defer.

Next.js 13+ biasanya menangani ini dengan baik. Tapi, jika kamu menggunakan library CSS-in-JS (seperti Emotion atau Styled Components), pastikan kamu mengkonfigurasi library tersebut agar mengekstrak Critical CSS pada saat build (SSR). Jika tidak, LCP kamu akan menunggu JS di client dieksekusi untuk men-generate style, yang artinya LCP kamu hancur. Ini sering jadi hidden pitfall*.

*

Tahap 4: Menguji dan Mempertahankan Skor (The 98 Habit)

Mencapai skor 98 sekali itu mudah. Mempertahankannya setelah fitur baru ditambahkan, itu yang sulit.

9. Monitoring Real User Metrics (RUM)

Lighthouse itu bagus, tapi dia hanya lab data (pengujian di kondisi ideal). Google hanya peduli pada Field Data (data pengguna nyata).

  • Gunakan Vercel Speed Insights (jika di-deploy di Vercel), Google Search Console, atau alat RUM pihak ketiga lainnya.

Fokus pada LCP dan INP field data*. Kalau di lab 98, tapi di lapangan cuma 80, berarti ada masalah perangkat atau jaringan yang lambat yang perlu diatasi. Kita harus mendesain website untuk jaringan 3G/4G yang buruk.

10. Periksa INP (Interaction to Next Paint) dengan Teliti

INP menggantikan FID, dan ini jauh lebih ketat. INP mengukur seberapa cepat browser merespons interaksi apa pun (klik, tap, keypress).

Jika INP kamu buruk, ini artinya thread utama browser kamu sibuk. Apa penyebabnya?

  1. Large JavaScript Bundles: Sudah dibahas di poin 5.
  2. Long Tasks: Fungsi JavaScript yang berjalan terlalu lama. Gunakan Web Vitals extension untuk Chrome dan identifikasi tugas mana yang berjalan lebih dari 50ms.
  3. Debounce/Throttle: Pastikan event handler seperti scroll atau resize di-debounce atau di-throttle agar tidak memicu ribuan perhitungan dalam satu detik.

*

Penutup: Konsistensi adalah Kunci Skor 98

Mencapai skor Lighthouse 98 di Next.js adalah kombinasi dari disiplin, pengetahuan mendalam tentang bagaimana browser bekerja, dan pemahaman yang tepat tentang ekosistem Next.js. Ini bukan cuma tentang memasang library A atau B, tapi tentang membuat keputusan strategis di setiap component dan endpoint.

Kami di Javapixa Creative Studio selalu memulai proyek dengan mindset performa ini. Kami melihat Next.js bukan hanya sebagai framework, tapi sebagai arsitektur yang harus dioptimalkan dari ujung ke ujung—mulai dari cara kita fetch data di server, hingga bagaimana gambar di-render di sisi client.

Jika kamu merasa optimasi ini terlalu teknis atau memakan waktu tim in-house kamu, Javapixa Creative Studio hadir sebagai partner. Kami ahli dalam mengubah website Next.js yang 'cukup cepat' menjadi mesin performa yang siap bersaing di hasil pencarian teratas Google. Karena di dunia digital saat ini, kecepatan bukan lagi nilai tambah, tapi keharusan.