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 bildirimde bulunarak özelliğin şekillenmesine yardımcı olmak ve web platformuna eklenip eklenmeyeceğine karar vermektir.
Bu özellik hangi sorunu çözmeyi amaçlıyor?
Speculation Rules API, 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. Chrome, şimdiye kadar iki tür spekülasyona izin veriyordu: önceden getirme ve önceden oluşturma.
Önceden getirme yalnızca HTML belgesini getirir. Bu, kritik ilk kaynağı önceden alır ve bir URL'ye gidildiğinde performans artışı sağlar. Alt kaynakları (ör. CSS, JavaScript veya resimler) yüklemez ya da JavaScript'i yürütmez. Bu nedenle, tarayıcının sayfa yüklemeleri sırasında 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ı 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 ettiğiniz sayfayı yüklerseniz site, bu bilginin güncellenmesini sağlamak için ekstra özen göstermiyorsa eski sepet miktarını görebilirsiniz.
Bu tür sorunlar, durum yönetiminin bir kısmı sunucu tarafında gerçekleşiyorsa önceden getirme için de geçerlidir ancak 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 prerender until script devreye girer.
prerender until script nedir?
prerender until script, önceden getirme ve önceden oluşturma arasında yeni bir orta yol sunar. HTML belgesini ö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 önceden yükleme tarayıcısı devam edebilir ve sayfanın yüklenmeye devam edebilmesi için gerekli olan alt kaynakları getirebilir.
Engelleme <script> öğelerini kullanmayarak 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.
prerender until script nasıl kullanılır?
Önce özelliği etkinleştirin. Ardından, prerender until script yeni bir prerender_until_script anahtarıyla diğer Speculation Rules API seçenekleriyle aynı şekilde kullanılır (Geçerli bir JSON anahtar adı olması için alt çizgileri unutmayın).
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>
prerender until script, çeşitli istek değerleri de dahil olmak üzere normal Spekülasyon Kuralları API seçenekleriyle birlikte kullanılabilir.
JavaScript çalıştırılmayacağından document.prerendering okunamayacağı gibi prerenderingchange etkinliği de okunamayacaktır. Ancak activationStart süresi sıfır olmayacaktır.
Aşağıdaki örnekte, prerender_until_script'yı 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ı istekli önceden getirme düzeyleriyle kullanabilir, istekli önceden getirme işlemi yapabilir ve ardından önceden getirme/önceden oluşturma ile daha önce önerildiği gibi daha fazla sinyalle prerender until script'ya yükseltebilirsiniz:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
prerender until script öğesini bu şekilde tam önceden oluşturmaya 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 yazabilir:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
Ancak etkinlik dinleyici <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 (ör. 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.
prerender until script nasıl etkinleştirilir?
prerender until script, üzerinde çalıştığımız ve değişime tabi olan yeni bir seçenektir. Bu nedenle, önce etkinleştirilmeden kullanılamaz.
Bu özellik, geliştiriciler için chrome://flags/#prerender-until-script Chrome flag'i veya --enable-features=PrerenderUntilScript komut satırı işareti ile yerel olarak etkinleştirilebilir.
prerender until script, Chrome 144'ten itibaren kaynak denemesi olarak de 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.
Önerinizle ilgili geri bildiriminizi GitHub kod deposunda paylaşın. Chrome'un uygulamasıyla ilgili geri bildirim için Chromium hatası bildirin.