Dipublikasikan: 23 Januari 2026
Chrome meluncurkan uji coba origin baru dari Chrome 144 untuk penambahan pra-render hingga skrip ke Speculation Rules API. Uji coba origin ini memungkinkan situs mencoba tambahan baru dengan pengguna sebenarnya. Tujuannya adalah untuk menguji fitur di lapangan dan memberikan masukan kepada tim Chrome untuk membantu membentuknya dan memutuskan apakah fitur tersebut harus ditambahkan ke platform web.
Masalah apa yang ingin diatasi oleh fitur ini?
Speculation Rules API memungkinkan pemuatan halaman dimulai sebelum pengguna benar-benar membuka halaman. Hal ini dapat meningkatkan pemuatan halaman di masa mendatang dengan menyelesaikan sebagian atau semua pekerjaan lebih awal. Hingga saat ini, browser mengizinkan dua jenis spekulasi: pengambilan data terlebih dahulu dan pra-render.
Pengambilan data awal hanya mengambil dokumen HTML. Tindakan ini akan mengambil resource pertama yang penting tersebut terlebih dahulu, yang kemudian akan meningkatkan performa saat URL dibuka. Halaman ini tidak memuat sub-resource apa pun (misalnya, CSS, JavaScript, atau gambar), maupun menjalankan JavaScript, sehingga masih ada banyak pekerjaan yang harus dilakukan browser saat halaman dimuat.
Pra-render dapat melakukan lebih banyak hal. Hal ini mengambil subresource, dan mulai merender halaman serta mengeksekusi JavaScript, hampir seolah-olah halaman dibuka di tab latar belakang yang tersembunyi. Saat mengklik link, pengguna bisa mendapatkan navigasi instan jika browser telah menyelesaikan semua tugas yang diperlukan untuk merender halaman.
Menggunakan opsi pra-render berpotensi jauh lebih baik untuk performa, tetapi menimbulkan biaya penerapan tambahan, serta biaya resource tambahan. Jika tidak dipertimbangkan dengan cermat, hal ini juga dapat menyebabkan efek samping yang tidak terduga saat melakukan pra-render halaman sepenuhnya sebelum pengguna benar-benar membuka halaman tersebut. Misalnya, analisis dapat diaktifkan sebelum pengguna menjelajah—sehingga memengaruhi statistik—jika penyedia analisis tidak memperhitungkan spekulasi.
Situs yang menggunakan pra-render juga harus berhati-hati agar tidak menayangkan halaman yang sudah usang kepada pengguna. Misalnya, jika Anda berspekulasi tentang halaman di situs e-commerce, lalu menambahkan sesuatu ke keranjang, dan kemudian memuat halaman yang sebelumnya dispekulasi, Anda mungkin melihat jumlah keranjang lama jika situs tidak berupaya ekstra untuk memastikan jumlah ini diperbarui.
Komplikasi ini juga ada untuk pengambilan data terlebih dahulu jika beberapa pengelolaan status ini terjadi di sisi server, tetapi sering kali menjadi masalah yang lebih besar untuk pra-render. Penggunaan pra-render di situs yang lebih kompleks bisa lebih rumit.
Namun, kami mendengar dari developer bahwa mereka sudah melihat peningkatan performa dari pengambilan data halaman dan ingin melangkah lebih jauh dengan aturan spekulasi untuk mendapatkan manfaat yang lebih besar. Di sinilah prerender hingga skrip berperan.
Apa yang dimaksud dengan pra-render hingga skrip?
Prerender hingga skrip adalah titik tengah baru antara pengambilan data dan pra-render. Fitur ini melakukan pengambilan data terlebih dahulu untuk dokumen HTML (seperti yang dilakukan pengambilan data terlebih dahulu), lalu mulai merender halaman, termasuk mengambil semua subresource (seperti yang dilakukan pra-render). Namun, yang penting, browser akan menghindari eksekusi elemen <script> (untuk skrip inline dan skrip src). Saat menemukan tag <script> yang memblokir, parser akan dijeda dan menunggu hingga pengguna membuka halaman sebelum melanjutkan. Sementara itu, pemindai pra-muat dapat melanjutkan dan mengambil subresource yang diperlukan oleh halaman sehingga subresource tersebut akan siap digunakan saat halaman dapat melanjutkan pemuatan.
Dengan menahan elemen <script> yang memblokir, sebagian besar kompleksitas implementasi dapat dihindari. Pada saat yang sama, dengan memulai proses rendering dan mengambil subresource, ada peningkatan besar dibandingkan dengan pengambilan data sebelumnya—berpotensi hampir sama dengan prerender penuh.
Dalam skenario terbaik (jika tidak ada skrip di halaman sama sekali), opsi ini akan melakukan pra-render seluruh halaman. Atau, jika halaman hanya memiliki elemen skrip di footer atau hanya skrip dengan atribut async atau defer, halaman akan di-pra-render sepenuhnya tanpa JavaScript tersebut. Bahkan dalam skenario terburuk (jika ada skrip pemblokiran di <head>), dimulainya rendering halaman, dan khususnya pengambilan data awal subresource, akan menghasilkan pemuatan halaman yang jauh lebih baik.
Cara menggunakan pra-render hingga skrip?
Pertama, aktifkan fitur, lalu lakukan pra-render hingga skrip digunakan dengan cara yang sama seperti opsi Speculation Rules API lainnya dengan kunci prerender_until_script baru (perhatikan garis bawah untuk menjadikannya nama kunci JSON yang valid)
Ini dapat digunakan dengan aturan daftar URL statis:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
Fitur ini juga dapat digunakan dengan aturan dokumen yang URL untuk dispekulasikan tersedia sebagai link di halaman:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Lakukan pra-render hingga skrip dapat digunakan dengan opsi Speculation Rules API biasa, termasuk berbagai nilai kesiapan.
Karena JavaScript tidak akan dijalankan, document.prerendering tidak dapat dibaca dan peristiwa prerenderingchange juga tidak dapat dibaca. Namun, waktu activationStart tidak akan nol.
Contoh berikut menunjukkan cara men-deploy contoh sebelumnya dengan penggantian untuk melakukan pengambilan data terlebih dahulu bagi browser yang tidak mendukung prerender_until_script:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome akan menangani duplikasi ini tanpa masalah dan menjalankan aturan yang paling sesuai untuk setiap setelan kesiapan.
Atau, Anda dapat menggunakannya dengan tingkat keaktifan yang berbeda, untuk melakukan pengambilan data terlebih dahulu secara aktif, lalu mengupgrade ke pra-render hingga skrip dengan lebih banyak sinyal seperti yang disarankan sebelumnya dengan pengambilan data terlebih dahulu/pra-render:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Perhatikan bahwa Anda tidak dapat mengupgrade pra-render hingga skrip ke pra-render penuh dengan cara ini, tetapi beri tahu kami jika itu adalah pola yang Anda inginkan agar didukung Chrome dengan membintangi bug ini.
Apakah semua JavaScript dijeda?
Tidak, hanya elemen <script> yang menyebabkan parser dijeda. Artinya, handler skrip inline (misalnya onload) atau URL javascript: tidak akan menyebabkan jeda dan dapat dieksekusi.
Misalnya, ini dapat mencatat Hero image is now loaded ke konsol sebelum halaman dibuka:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Sedangkan jika pemroses peristiwa ditambahkan dengan <script>, Hero image is now loaded tidak akan dicatat ke konsol hingga setelah halaman diaktifkan:
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
Hal ini mungkin tampak berlawanan dengan intuisi, tetapi dalam banyak kasus (seperti pada contoh sebelumnya), sebaiknya ambil tindakan segera dan menundanya dapat menyebabkan komplikasi yang lebih tidak terduga.
Selain itu, sebagian besar peristiwa inline memerlukan tindakan pengguna (misalnya, onclick, onhover) sehingga tidak akan dieksekusi hingga pengguna dapat berinteraksi dengan halaman.
Terakhir, skrip pemblokiran sebelumnya akan menjeda parser dan mencegah pengendali peristiwa inline ditemukan. Jadi, pesan ini tidak akan dimuat ke konsol hingga aktivasi, meskipun merupakan pengendali peristiwa inline:
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Hal ini terutama relevan untuk handler skrip inline yang menggunakan kode yang ditentukan sebelumnya, yang akan terus berfungsi seperti yang diharapkan:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
Bagaimana dengan skrip yang memiliki atribut async dan defer?
Skrip dengan atribut async dan defer ditunda hingga aktivasi, tetapi tidak akan memblokir parser untuk terus memproses bagian halaman lainnya. Skrip didownload, tetapi tidak dieksekusi hingga halaman dibuka.
Cara mengaktifkan pra-render hingga skrip?
Pra-render hingga skrip adalah opsi baru yang sedang kami kerjakan, dan opsi tersebut dapat berubah, sehingga tidak tersedia untuk digunakan tanpa mengaktifkannya terlebih dahulu untuk memilih ikut serta.
Fitur ini dapat diaktifkan secara lokal untuk developer dengan tanda Chrome chrome://flags/#prerender-until-script atau dengan tanda command line --enable-features=PrerenderUntilScript.
Prerender hingga skrip juga kini tersedia sebagai uji coba origin mulai Chrome 144. Uji coba origin memungkinkan pemilik situs mengaktifkan fitur di situs mereka agar pengguna sungguhan dapat menggunakan fitur tersebut tanpa harus mengaktifkannya secara manual. Hal ini memungkinkan dampak fitur diukur pada pengguna sungguhan untuk memastikan fitur tersebut berfungsi seperti yang diharapkan.
Coba jalankan dan sampaikan masukan Anda
Kami sangat antusias dengan penambahan yang diusulkan ini pada Speculation Rules API dan mendorong pemilik situs untuk mencobanya.
Berikan masukan Anda tentang proposal di repo GitHub. Untuk memberikan masukan tentang penerapan ECH di Chrome, laporkan bug Chromium.