Dipublikasikan: 23 Januari 2026
Chrome meluncurkan uji coba origin baru dari Chrome 144 untuk penambahan prerender until script ke Speculation Rules API. Uji coba origin ini memungkinkan situs mencoba penambahan 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?
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 seluruh pekerjaan lebih awal. Hingga saat ini, API ini memungkinkan dua jenis spekulasi: pengambilan data dan pra-rendering.
Pengambilan data hanya mengambil dokumen HTML. Hal ini akan mendapatkan resource pertama yang penting lebih awal, yang kemudian memberikan peningkatan performa saat URL dibuka. Pengambilan data tidak memuat subresource apa pun (misalnya, CSS, JavaScript, atau gambar), maupun menjalankan JavaScript, sehingga mungkin masih ada banyak pekerjaan yang harus dilakukan browser saat pemuatan halaman.
Pra-rendering melakukan lebih banyak hal. Pra-rendering mengambil subresource, dan mulai merender halaman serta menjalankan JavaScript, seolah-olah halaman dibuka di tab latar belakang tersembunyi. Saat pengguna mengklik link, mereka bisa mendapatkan navigasi instan jika browser telah menyelesaikan semua pekerjaan yang diperlukan untuk merender halaman.
Penggunaan opsi pra-rendering berpotensi jauh lebih baik untuk performa, tetapi memerlukan 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-rendering halaman sepenuhnya sebelum pengguna benar-benar membuka halaman. Misalnya, analisis dapat diaktifkan sebelum pengguna membuka halaman—yang akan memengaruhi statistik—jika penyedia analisis tidak memperhitungkan spekulasi.
Situs yang menggunakan pra-rendering juga harus berhati-hati agar tidak menayangkan halaman yang tidak valid kepada pengguna. Misalnya, jika Anda berspekulasi tentang halaman di situs e-commerce, lalu menambahkan sesuatu ke keranjang, dan kemudian memuat halaman yang sebelumnya berspekulasi, Anda mungkin melihat jumlah keranjang lama jika situs tidak berhati-hati untuk memastikan jumlah tersebut diperbarui.
Komplikasi ini juga ada untuk pengambilan data jika beberapa pengelolaan status ini terjadi di sisi server, tetapi sering kali menjadi masalah yang lebih besar untuk pra-rendering. Penggunaan pra-rendering di situs yang lebih kompleks bisa menjadi lebih rumit.
Namun, kami mendengar dari developer bahwa mereka sudah melihat peningkatan performa dari pengambilan data halaman dan ingin melanjutkan dengan aturan spekulasi untuk mendapatkan manfaat yang lebih besar. Di sinilah prerender until script berperan.
Apa yang dimaksud dengan prerender until script?
prerender until script adalah solusi tengah baru antara pengambilan data dan pra-rendering. Pra-rendering hingga skrip mengambil dokumen HTML (seperti yang dilakukan pengambilan data), lalu mulai merender halaman, termasuk mengambil semua subresource (seperti yang dilakukan pra-rendering). Namun, yang terpenting, browser akan menghindari eksekusi elemen <script> (untuk skrip inline dan skrip src). Saat menemukan tag <script> yang memblokir, browser akan menjeda parser dan menunggu hingga pengguna membuka halaman sebelum melanjutkan. Sementara itu, pemindai pramuat dapat melanjutkan dan mengambil subresource yang diperlukan oleh halaman sehingga akan siap digunakan saat halaman dapat terus dimuat.
Dengan menahan elemen <script> yang memblokir, sebagian besar kompleksitas penerapan dapat dihindari. Pada saat yang sama, dengan memulai proses rendering dan mengambil subresource, ada peningkatan besar dibandingkan pengambilan data—berpotensi hampir sama dengan pra-rendering penuh.
Dalam skenario terbaik (jika tidak ada skrip di halaman sama sekali), opsi ini akan melakukan pra-rendering seluruh halaman. Atau, jika halaman hanya memiliki elemen skrip di footer atau hanya skrip dengan async atau defer atribut, halaman akan sepenuhnya di-pra-render tanpa JavaScript tersebut. Bahkan dalam skenario terburuk (jika ada skrip yang memblokir di <head>), memulai render halaman, dan khususnya pengambilan data subresource, akan menghasilkan pemuatan halaman yang jauh lebih baik.
Cara menggunakan prerender until script?
Pertama, aktifkan fitur ini, lalu prerender until script 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)
Hal ini dapat digunakan dengan aturan daftar URL statis:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
Hal ini juga dapat digunakan dengan aturan dokumen jika URL yang akan dispekulasikan tersedia sebagai link di halaman:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
prerender until script kemudian dapat digunakan dengan opsi Speculation Rules API biasa, termasuk berbagai nilai kesiapan.
Karena JavaScript tidak akan dieksekusi, document.prerendering tidak dapat dibaca dan peristiwa prerenderingchange juga tidak dapat dibaca. Namun, waktu activationStart akan bukan nol.
Contoh berikut menunjukkan cara men-deploy contoh sebelumnya dengan penggantian ke pengambilan data untuk 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 kesiapan yang berbeda, untuk mengambil data dengan cepat, lalu mengupgrade ke prerender until script dengan lebih banyak sinyal seperti yang disarankan sebelumnya dengan pengambilan data/pra-rendering:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Perhatikan bahwa Anda tidak dapat mengupgrade prerender until script ke pra-rendering penuh dengan cara ini, tetapi beri tahu kami jika itu adalah pola yang ingin Anda dukung di Chrome dengan memberi bintang pada bug ini.
Apakah semua JavaScript dijeda?
Tidak, hanya elemen <script> yang menyebabkan parser dijeda. Artinya, pengendali skrip inline (misalnya onload) atau URL javascript: tidak akan menyebabkan jeda dan dapat dieksekusi.
Misalnya, hal 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 tidak intuitif, tetapi dalam banyak kasus (seperti pada contoh sebelumnya), sebaiknya segera ambil tindakan 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 sangat relevan untuk pengendali 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 dengan 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 prerender until script?
prerender until script adalah opsi baru yang sedang kami kerjakan, dan dapat berubah, sehingga tidak dapat digunakan tanpa mengaktifkannya terlebih dahulu untuk ikut serta.
Fitur ini dapat diaktifkan secara lokal untuk developer dengan flag Chrome chrome://flags/#prerender-until-script atau dengan flag command line --enable-features=PrerenderUntilScript.
prerender until script kini juga tersedia sebagai uji coba origin dari Chrome 144. Uji coba origin memungkinkan pemilik situs mengaktifkan fitur di situs mereka untuk pengguna sebenarnya agar dapat menggunakan fitur tersebut tanpa harus mengaktifkannya secara manual. Hal ini memungkinkan dampak fitur diukur pada pengguna sebenarnya untuk memastikan fitur tersebut berfungsi seperti yang diharapkan.
Lakukan uji coba dan berikan masukan Anda
Kami sangat antusias dengan penambahan yang diusulkan ini ke Speculation Rules API dan mendorong pemilik situs untuk melakukan uji coba.
Bagikan masukan Anda tentang proposal di repo GitHub. Untuk memberikan masukan tentang penerapan Chrome, laporkan bug Chromium.