Yayınlanma tarihi: 23 Ocak 2026
Chrome, Speculation Rules API'ye prerender until script eklenmesi için Chrome 144'ten itibaren yeni bir kaynak denemesi başlatıyor. Bu kaynak denemesi, sitelerin yeni eklemeyi gerçek kullanıcılarla denemesine olanak tanır. Amaç, özelliği saha testine tabi tutmak ve Chrome ekibine geri bildirim vererek özelliğin şekillenmesine yardımcı olmak ve web platformuna eklenip eklenmeyeceğine karar vermektir.
Bu özellik hangi sorunu çözmeyi amaçlıyor?
Tahmin Kuralları API'si, kullanıcılar sayfalara gitmeden önce sayfa yüklemelerinin başlatılmasına olanak tanır. Bu, işin bir kısmını veya tamamını önceden tamamlayarak gelecekteki sayfa yüklemelerini iyileştirebilir. Şimdiye kadar iki tür spekülasyona izin veriyordu: önceden getirme ve önceden oluşturma.
Önceden getirme yalnızca HTML dokümanını getirir. Bu, kritik ilk kaynağı önceden alır ve daha sonra bir URL'ye gidildiğinde performansı artırır. Alt kaynakları (ör. CSS, JavaScript veya resimler) yüklemez ya da JavaScript'i yürütmez. Bu nedenle, tarayıcının sayfa yüklemelerinde yapması gereken önemli işlemler olabilir.
Önceden oluşturma çok daha fazlasını yapar. Alt kaynakları getirir, sayfayı oluşturmaya ve JavaScript'i yürütmeye başlar. Bu işlemler, sayfa gizli bir arka plan sekmesinde açılmış gibi yapılır. Kullanıcı bağlantıyı tıkladığında, tarayıcı sayfayı oluşturmak için gereken tüm işlemleri tamamlamışsa anında gezinme gerçekleşebilir.
Önceden oluşturma seçeneğini kullanmak performans açısından çok daha iyi olabilir ancak ek kaynak maliyetlerinin yanı sıra ek uygulama maliyetine de yol açar. Bu durum dikkatli bir şekilde ele alınmazsa kullanıcı sayfaya gitmeden önce sayfanın tamamen önceden oluşturulması sırasında beklenmedik yan etkilere de neden olabilir. Örneğin, analiz sağlayıcı tahminleri dikkate almazsa analizler, kullanıcı gezinmeden önce tetiklenebilir ve bu da istatistiklerin çarpıtılmasına neden olur.
Önceden oluşturma kullanan siteler, kullanıcılara eski bir sayfa sunmamaya da dikkat etmelidir. Örneğin, bir e-ticaret sitesindeki bir sayfayı tahmin edip sepetinize bir ürün ekledikten sonra daha önce tahmin edilen sayfayı yüklerseniz site, bu bilginin güncellenmesini sağlamak için ekstra özen göstermezse eski sepet miktarını görebilirsiniz.
Bu durum yönetimi sunucu tarafında gerçekleşiyorsa önceden getirme için de bu tür sorunlar yaşanabilir ancak bu durum genellikle önceden oluşturma için daha büyük bir sorundur. Önceden oluşturma özelliğini daha karmaşık sitelerde kullanmak daha zor olabilir.
Ancak geliştiricilerden, sayfayı önceden getirmenin performans açısından fayda sağladığı ve daha da fazla avantaj elde etmek için tahmin kurallarını kullanmak istedikleri yönünde geri bildirimler alıyoruz. Bu noktada, komut dosyasına kadar önceden oluşturma devreye girer.
What is prerender until script?
Komut dosyası yüklenene kadar önceden oluşturma, önceden getirme ve önceden oluşturma arasında yeni bir orta yol sunar. HTML dokümanını önceden getirir (prefetch işleminde olduğu gibi) ve ardından tüm alt kaynakları getirerek (prerender işleminde olduğu gibi) sayfayı işlemeye başlar. Ancak en önemlisi, tarayıcı <script> öğelerini (hem satır içi komut dosyaları hem de src komut dosyaları için) yürütmekten kaçınır. Bir engelleme <script> etiketiyle karşılaştığında ayrıştırıcıyı duraklatır ve devam etmeden önce kullanıcının sayfaya gitmesini bekler. Bu sırada ön yükleme tarayıcısı devam edebilir ve sayfanın yüklenmeye devam edebilmesi için gerekli olan alt kaynakları getirebilir.
Engelleme <script> öğeleri tutularak uygulama karmaşıklığının büyük bir kısmı önlenir. Aynı zamanda, oluşturma sürecini başlatıp alt kaynakları getirerek önceden getirme işlemine kıyasla büyük bir avantaj elde edilir. Bu avantaj, tam bir önceden oluşturma işleminde elde edilen avantaj kadar olabilir.
En iyi durumda (sayfada hiç komut dosyası yoksa) bu seçenek, sayfanın tamamını önceden oluşturur. Alternatif olarak, bir sayfanın altbilgisinde yalnızca komut dosyası öğeleri veya yalnızca async ya da defer özelliklerine sahip komut dosyaları varsa sayfa, bu JavaScript olmadan tamamen önceden oluşturulur. En kötü senaryoda bile (<head> içinde engelleme komut dosyası olduğu durumlarda) sayfa oluşturma işleminin başlatılması ve özellikle alt kaynakların önceden getirilmesi, sayfa yükleme işleminin büyük ölçüde iyileşmesini sağlar.
How to use prerender until script?
Öncelikle özelliği etkinleştirin, ardından yeni bir prerender_until_script anahtarıyla komut dosyası diğer Speculation Rules API seçenekleriyle aynı şekilde kullanılana kadar önceden oluşturun (geçerli bir JSON anahtar adı olması için alt çizgilere dikkat edin).
Bu, statik URL'lerin liste kurallarıyla birlikte kullanılabilir:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
Ayrıca, tahmin edilecek URL'lerin sayfada bağlantı olarak bulunduğu doküman kurallarıyla da kullanılabilir:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Komut dosyası kullanılana kadar önceden oluşturma işlemi, çeşitli istekli olma değerleri de dahil olmak üzere normal Speculation Rules API seçenekleriyle kullanılabilir.
JavaScript çalıştırılmayacağından document.prerendering okunamayacak ve prerenderingchange etkinliği de okunamayacaktır. Ancak activationStart süresi sıfır olmayacaktır.
Aşağıdaki örnekte, prerender_until_script özelliğini desteklemeyen tarayıcılar için önceden getirme yedeklemesiyle önceki örneğin nasıl dağıtılacağı gösterilmektedir:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome bu yinelemeyi sorunsuz bir şekilde ele alır ve her istek ayarı için en uygun kuralı uygular.
Alternatif olarak, bunları farklı istek düzeyleriyle birlikte kullanarak istekli bir şekilde önceden getirebilir ve ardından daha fazla sinyal içeren komut dosyası gelene kadar daha önce önceden getirme/önceden oluşturma ile önerildiği gibi önceden oluşturmaya yükseltebilirsiniz:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Bu şekilde, komut dosyası oluşturulana kadar önceden oluşturma işlemini tam önceden oluşturma işlemine yükseltemeyeceğinizi unutmayın. Ancak Chrome'un desteklemesini istediğiniz bir kalıpsa bu hataya yıldız ekleyerek bize bildirin.
Tüm JavaScript'ler duraklatıldı mı?
Hayır, ayrıştırıcının duraklatılmasına yalnızca <script> öğeleri neden olur. Bu, satır içi komut dosyası işleyicilerin (ör. onload) veya javascript: URL'lerinin duraklamaya neden olmayacağı ve yürütülebileceği anlamına gelir.
Örneğin, bu işlem, sayfaya gidilmeden önce konsola Hero image is now loaded kaydını yazabilir:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Etkinlik işleyici <script> ile eklenirse Hero image is now loaded, sayfa etkinleştirilene kadar konsola kaydedilmez:
<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>
Bu durum sezgisel olarak ters gibi görünse de birçok durumda (örneğin, önceki örnekte olduğu gibi) işlemi hemen yapmak daha iyi olabilir ve gecikme, daha fazla beklenmedik komplikasyona yol açabilir.
Ayrıca, çoğu satır içi etkinlik bir kullanıcı işlemi (örneğin, onclick, onhover) gerektirir ve bu nedenle kullanıcı sayfayla etkileşime girene kadar yürütülmez.
Son olarak, önceki engelleme komut dosyaları ayrıştırıcıyı duraklatır ve satır içi etkinlik işleyicilerinin bulunmasını engeller. Bu nedenle, satır içi bir etkinlik işleyici olmasına rağmen etkinleştirilene kadar iletiyi konsola yüklemez:
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Bu durum, özellikle daha önce tanımlanmış kodu kullanan satır içi komut dosyası işleyicileri için geçerlidir. Bu işleyiciler beklendiği gibi çalışmaya devam edecektir:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
async ve defer özelliklerine sahip komut dosyaları ne olacak?
async ve defer özelliklerine sahip komut dosyaları etkinleştirilene kadar ertelenir ancak ayrıştırıcının sayfanın geri kalanını işlemeye devam etmesini engellemez. Komut dosyaları indirilir ancak sayfaya gidilene kadar yürütülmez.
Komut dosyasına kadar önceden oluşturma nasıl etkinleştirilir?
Komut dosyası hazır olana kadar önceden oluşturma, üzerinde çalıştığımız ve değişime tabi olan yeni bir seçenektir. Bu nedenle, önce etkinleştirilip kabul edilmeden kullanılamaz.
Bu özellik, geliştiriciler için chrome://flags/#prerender-until-script Chrome flag'i veya --enable-features=PrerenderUntilScript komut satırı flag'i ile yerel olarak etkinleştirilebilir.
Prerender until script özelliği de Chrome 144'ten itibaren kaynak denemesi olarak kullanılabilir. Kaynak denemeleri, site sahiplerinin sitelerinde bir özelliği etkinleştirmesine olanak tanır. Böylece gerçek kullanıcılar, özelliği manuel olarak etkinleştirmek zorunda kalmadan kullanabilir. Bu sayede, özelliğin beklendiği gibi çalıştığından emin olmak için gerçek kullanıcılar üzerindeki etkisi ölçülebilir.
Test edin ve geri bildirimlerinizi paylaşın
Speculation Rules API'ye eklenmesi önerilen bu özellikten çok heyecan duyuyoruz ve site sahiplerini bu özelliği test etmeye teşvik ediyoruz.
Önerilerle ilgili geri bildiriminizi GitHub kod deposunda paylaşın. Chrome'un uygulamasıyla ilgili geri bildirim için Chromium hatası bildirin.