Cara Memangkas Ukuran Halaman Next.js dari 7,5 MB menjadi 198 KB

Masalah yang Sering Tidak Disadari

Sebuah halaman blog yang terlihat sederhana ternyata berukuran 7,5 MB — hampir seukuran mengunduh sebuah aplikasi kecil. Penyebabnya?

Tiga gambar yang ditanam langsung di dalam HTML sebagai data-URL base64, salah satunya adalah logo. Setiap pengunjung — dan setiap crawler Google — dipaksa mengunduh ulang 7,3 MB data gambar yang sebenarnya tidak berubah-ubah.

Mengapa Base64 Inline Berbahaya untuk SEO

Google menjadikan Largest Contentful Paint (LCP) sebagai salah satu sinyal ranking utama. Ketika HTML membengkak karena gambar inline, browser tidak bisa mulai me-render konten sebelum seluruh payload raksasa itu selesai diunduh. Akibatnya:

• Skor PageSpeed anjlok, terutama di koneksi seluler yang umum di Indonesia.
• Crawl budget terbuang — Googlebot menghabiskan jatah crawl untuk mengunduh ulang gambar yang sama di setiap kunjungan.
• Caching tidak bekerja — gambar inline tidak bisa di-cache terpisah seperti file gambar biasa.

Tiga Langkah Perbaikannya

1. Keluarkan gambar dari HTML

Pindahkan semua gambar inline menjadi file atau URL biasa (/images/... atau URL object storage). Gambar yang sama kini bisa di-cache browser dan CDN.

2. Kompres ke format modern

Konversi PNG/JPG ke WebP. Dalam kasus nyata, langkah ini saja memangkas ukuran drastis tanpa perbedaan visual yang kasat mata.

3. Terapkan lazy loading

Tambahkan loading="lazy" pada semua gambar di bawah fold. Dari 29 gambar di homepage, 20 di antaranya dimuat sekaligus sebelum perbaikan — setelahnya hanya 1 (logo di atas fold, yang memang seharusnya tidak di-lazy-load).

Hasilnya

| Metrik | Sebelum | Sesudah |
|:---|:---|:---|
| Ukuran halaman | 7,5 MB | 198 KB |
| Waktu unduh | 10,3 detik | 3,3 detik |
| Gambar inline base64 | 3 (7,3 MB) | 0 |

Penurunan 97% ukuran halaman hanya dari tiga langkah di atas — tanpa mengubah satu piksel pun tampilan situs.

Pelajaran untuk Proyek Next.js Anda

• Jangan pernah me-render gambar sebagai base64 di HTML, kecuali untuk gambar mungil di bawah 4 KB.
• Manfaatkan next/image agar optimasi WebP/AVIF dan responsive srcset berjalan otomatis.
• Audit ukuran halaman secara berkala — masalah seperti ini sering masuk diam-diam lewat satu commit.