Digital Transformation
Prerender (Prarender Halaman)
TL;DR: Prerender adalah teknik membangun seluruh halaman di latar belakang sebelum pengguna mengkliknya, jadi saat tautan diklik halaman muncul nyaris tanpa jeda. Berbeda dengan prefetch yang hanya mengunduh berkas, prerender ikut menjalankan render sehingga navigasi terasa instan. Di Chrome modern, prerender diatur lewat Speculation Rules API.
Apa itu Prerender?
Prerender adalah proses menyiapkan sebuah halaman secara lengkap, termasuk mengeksekusi HTML, CSS, dan sebagian JavaScript, sebelum pengguna benar-benar membukanya. Anggap seperti pelayan restoran yang sudah menyiapkan piring berikutnya di dapur sebelum Anda memintanya. Saat Anda akhirnya memesan, hidangan langsung keluar. Teknik ini berbeda dari prefetch yang hanya mengunduh berkas mentah tanpa merendernya, dan lebih agresif karena browser sudah menyusun tampilan akhir di memori.
Browser memicu prerender berdasarkan sinyal kemungkinan navigasi, misalnya tautan yang sering diklik atau yang ditandai prioritas tinggi oleh pengembang. Halaman hasil prerender disimpan sementara, lalu diaktifkan saat pengguna benar-benar menuju ke sana.
Cara Kerja Prerender Modern
Sejak 2023, Chrome menggunakan Speculation Rules API untuk mengatur prerender, menggantikan tag lama <link rel="prerender"> yang sudah usang.
| Aspek | Prefetch | Prerender |
|---|---|---|
| Yang diunduh | Berkas halaman | Berkas + render penuh |
| Biaya sumber daya | Ringan | Lebih berat |
| Kecepatan saat diklik | Cepat | Nyaris instan |
| Cocok untuk | Banyak kandidat tautan | Tautan dengan kemungkinan klik tinggi |
Karena prerender memakan memori dan CPU, browser membatasi jumlah halaman yang dirender sekaligus dan membatalkannya jika perangkat kekurangan sumber daya.
Kenapa Penting?
Untuk bisnis Indonesia yang banyak diakses lewat ponsel kelas menengah, prerender pada halaman bernilai tinggi seperti halaman produk atau form pendaftaran dapat memangkas persepsi waktu tunggu hampir ke nol. Hasilnya bukan sekadar TTFB yang lebih kecil, melainkan navigasi yang terasa seketika sehingga mengurangi pengguna yang kabur sebelum halaman terbuka. Sumber resmi soal mekanisme ini ada di dokumentasi Speculation Rules web.dev.
Pertanyaan Umum
Apakah prerender sama dengan prefetch?
Tidak. Prefetch hanya mengunduh berkas halaman, sedangkan prerender ikut menjalankan render sehingga halaman siap tampil utuh. Prerender lebih cepat saat diklik, tetapi lebih boros sumber daya.
Apakah prerender membebani server?
Bisa, karena halaman tetap diminta lebih awal. Karena itu prerender sebaiknya dipakai pada tautan dengan kemungkinan klik tinggi, bukan semua tautan di halaman.
Istilah Terkait