Cara Mendapatkan Skor 100 di PageSpeed Insights untuk Situs React/Next.js

Siapa sih yang tidak ingin melihat angka 100 berwarna hijau menyala saat mengecek situs di Google PageSpeed Insights (PSI)? Selain memberikan kepuasan batin bagi kita sebagai developer, skor ini adalah indikator vital bahwa pengalaman pengguna (user experience) di situs kamu sangatlah prima. Terlebih lagi, Google telah lama menjadikan Core Web Vitals sebagai salah satu faktor penentu peringkat di mesin pencari.

Namun, jika kamu menggunakan framework modern seperti React atau Next.js, mendapatkan skor sempurna bisa menjadi tantangan tersendiri. Mengapa? Karena secara default, framework berbasis JavaScript cenderung memuat "sampah" kode yang berat jika tidak dikonfigurasi dengan benar. Di artikel ini, kita akan mengupas tuntas langkah-langkah teknis untuk membuat situs Next.js kamu melesat kencang layaknya mobil balap.

---

1. Memahami Metrik yang Menentukan Skor Kamu

Sebelum kita melakukan optimasi, kamu harus tahu apa yang sebenarnya dinilai oleh Google. PageSpeed Insights menggunakan algoritma Lighthouse yang berfokus pada beberapa metrik utama:

• Largest Contentful Paint (LCP): Berapa lama waktu yang dibutuhkan untuk menampilkan elemen visual terbesar (biasanya banner atau teks hero).
• First Input Delay (FID) / Interaction to Next Paint (INP): Seberapa responsif situs kamu saat diklik oleh pengguna.
• Cumulative Layout Shift (CLS): Apakah ada elemen yang "lompat-lompat" saat halaman sedang dimuat?
• Total Blocking Time (TBT): Seberapa lama tugas-tugas JavaScript menghambat interaksi pengguna.

Jika kamu ingin mendapatkan skor 100, kamu tidak bisa hanya fokus pada satu titik. Kamu butuh pendekatan holistik yang mencakup server, aset, dan cara browser merender kode kamu.

---

2. Optimasi Gambar: Musuh Utama Skor Rendah

Dalam banyak kasus, gambar adalah penyumbang ukuran halaman terbesar. Jika kamu masih menggunakan tag <img> standar tanpa optimasi, jangan harap bisa dapat skor hijau.

Gunakan Next/Image secara Maksimal

Next.js menyediakan komponen next/image yang sangat sakti. Pastikan kamu selalu menggunakannya. Komponen ini secara otomatis melakukan:

• Lazy Loading: Gambar hanya dimuat saat akan muncul di layar (viewport).
• Modern Format: Mengonversi gambar ke format WebP atau AVIF yang jauh lebih ringan.
• Responsive Sizes: Mengirimkan ukuran gambar yang sesuai dengan perangkat pengguna (mobile vs desktop).

Contoh penggunaan yang benar:

import Image from 'next/image'

export default function Hero() {
  return (
    <div className="hero-container">
      <Image 
        src="/banner-utama.jpg" 
        alt="Deskripsi Gambar" 
        width={1200} 
        height={600} 
        priority // Gunakan priority untuk elemen LCP!
        placeholder="blur" // Meningkatkan UX saat loading
      />
    </div>
  )
}

Tips Pro: Gunakan properti priority hanya untuk gambar yang muncul pertama kali saat halaman dimuat (Above the Fold). Ini akan memberi tahu browser untuk mendownload gambar tersebut paling awal, yang secara langsung menurunkan nilai LCP kamu.

---

3. Strategi Rendering: Pilih SSG atau ISR

Salah satu alasan Next.js sangat populer adalah fleksibilitasnya dalam merender halaman. Untuk mendapatkan skor 100, kamu harus meminimalkan Client Side Rendering (CSR) yang berlebihan.

Static Site Generation (SSG)

Gunakan getStaticProps sesering mungkin. Dengan SSG, halaman kamu diubah menjadi HTML statis saat proses build. Browser tidak perlu menunggu JavaScript selesai dieksekusi hanya untuk menampilkan konten teks. Ini membuat FCP (First Contentful Paint) menjadi instan.

Incremental Static Regeneration (ISR)

Jika situs kamu memiliki data yang sering berubah (seperti blog atau e-commerce), gunakan ISR. Ini memungkinkan kamu memperbarui halaman statis secara berkala di background tanpa harus melakukan build ulang seluruh situs.

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // Perbarui data setiap 60 detik
  }
}

---

4. Menjinakkan JavaScript yang Membengkak

Masalah terbesar React adalah ukuran bundle JavaScript-nya. Semakin banyak library yang kamu install, semakin lambat situsmu. Berikut cara mengatasinya:

Dynamic Imports (Code Splitting)

Jangan muat semua komponen sekaligus. Jika kamu punya komponen berat seperti grafik atau form modal yang hanya muncul setelah diklik, gunakan next/dynamic.

import dynamic from 'next/dynamic'

const ModalBerat = dynamic(() => import('../components/ModalBerat'), {
  loading: () => <p>Loading...</p>,
  ssr: false, // Matikan SSR jika komponen butuh window object
})

Audit Library Third-Party

Gunakan tool seperti @next/bundle-analyzer untuk melihat library mana yang memakan tempat. Apakah kamu benar-benar butuh Moment.js? Mungkin kamu bisa menggantinya dengan date-fns atau dayjs yang jauh lebih ringan.

---

5. Optimasi Font dan CSS

Font seringkali menjadi penyebab Layout Shift (CLS). Ketika font kustom belum selesai dimuat, browser menampilkan font cadangan, lalu tiba-tiba berubah saat font kustom siap. Ini sangat menyebalkan bagi pengguna.

Gunakan next/font

Next.js terbaru memiliki fitur next/font yang secara otomatis meng-host font secara lokal dan menghilangkan layout shift. Tidak ada lagi permintaan network tambahan ke Google Fonts.

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'], display: 'swap' })

export default function RootLayout({ children }) {
  return (
    <html lang="id" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

Pastikan kamu menggunakan display: 'swap' agar teks tetap terlihat sementara font sedang dimuat.

---

6. Mengelola Third-Party Scripts (Analytics, Iklan, Chat)

Kamu mungkin sudah mengoptimasi kodemu habis-habisan, tapi skor tetap anjlok karena script dari pihak ketiga seperti Google Analytics, FB Pixel, atau Hotjar. Script ini seringkali memblokir main thread browser.

Gunakan komponen next/script dengan strategi worker atau lazyOnload.

import Script from 'next/script'

<Script
  src="https://www.googletagmanager.com/gtag/js?id=ID-KAMU"
  strategy="afterInteractive" 
/>

Strategi afterInteractive memastikan script hanya dimuat setelah halaman bisa berinteraksi, sehingga tidak mengganggu proses render awal.

---

7. Optimasi Caching dan Middleware

Kecepatan bukan hanya soal seberapa kecil file kamu, tapi seberapa dekat file tersebut dengan pengguna. Gunakan Vercel atau provider cloud lain yang mendukung Edge Network.

• Cache-Control: Pastikan aset statis kamu memiliki header cache yang panjang.
• Minifikasi: Secara default, Next.js sudah melakukan minifikasi pada CSS dan JS saat mode produksi (next build).
• Compression: Pastikan server kamu menggunakan Gzip atau Brotli untuk mengompres data yang dikirim ke browser.

---

8. Menghilangkan Layout Shift (CLS)

Pernahkah kamu ingin mengklik sesuatu, tapi tiba-tiba elemennya turun karena ada iklan atau gambar yang baru muncul? Itulah CLS. Untuk mengatasinya:

• Tentukan Dimensi: Selalu berikan width dan height pada gambar dan video.
• Reserve Space: Jika kamu punya slot iklan, berikan min-height pada container-nya agar area tersebut sudah "dipesan" sejak awal.
• Hindari Animasi yang Mengubah Layout: Gunakan transform: scale() alih-alih mengubah width atau height dengan CSS transition.

---

9. Contoh Studi Kasus: Dari Skor 40 ke 100

Bayangkan kamu punya situs portofolio yang berat di bagian galeri. Awalnya, kamu memuat 20 gambar resolusi tinggi sekaligus tanpa lazy loading. Skor PSI kamu mungkin hanya 45 (Merah).

Langkah Perbaikan:

1. Ganti semua <img> ke <Image /> dari Next.js.
2. Implementasikan Dynamic Import untuk bagian testimoni yang menggunakan library carousel berat.
3. Hapus CSS yang tidak terpakai dengan Tailwind CSS (yang secara otomatis melakukan purging).
4. Gunakan next/font untuk menggantikan import Google Fonts di file CSS.

Setelah melakukan langkah di atas, besar kemungkinan skor kamu akan melompat ke angka 95-100 secara instan.

---

Kesimpulan

Mendapatkan skor 100 di PageSpeed Insights untuk situs React/Next.js bukanlah tentang satu "trik ajaib". Ini adalah kombinasi dari pemilihan komponen yang tepat, strategi rendering yang efisien, dan disiplin dalam menjaga ukuran aset.

Ingat, tujuan utamanya bukan sekadar angka 100, tapi memberikan pengalaman terbaik bagi pengunjung situsmu. Situs yang cepat berarti pengunjung yang lebih betah, tingkat konversi yang lebih tinggi, dan tentunya apresiasi lebih dari Google.

Sekarang, giliran kamu! Buka PageSpeed Insights, masukkan URL situsmu, lihat apa yang kurang, dan mulai optimasi satu per satu. Selamat mencoba!