Speculation Rules API'deki iyileştirmeler

Barry Pollard

Chrome ekibi, gelecekteki gezinmeleri önceden önbelleğe alarak veya hatta önceden oluşturarak gezinme performansını iyileştirmek için kullanılan Speculation Rules API'de bazı heyecan verici güncellemeler üzerinde çalışıyor. Bu ek iyileştirmelerin tümü artık Chrome 122'den itibaren kullanılabilir (bazı özellikler daha önceki sürümlerde de kullanılabilir).

Bu değişiklikler, sayfaların önceden getirilmesini ve önceden oluşturulmasını önemli ölçüde daha kolay ve daha az israflı hale getiriyor. Bu da daha fazla benimsenmesini teşvik edeceğini umduğumuz bir durum.

Ek özellikler

Öncelikle, Spekülasyon Kuralları API'ye eklediğimiz yeni özellikler ve bunların nasıl kullanılacağı hakkında bilgi vereceğiz. Ardından, bu özellikleri çalışırken görebilmeniz için size bir demo göstereceğiz.

Belge kuralları

Daha önce Spekülasyon Kuralları API'si, ön beslemesi veya ön oluşturması yapılacak URL'lerin listesini belirterek çalışıyordu:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

Spekülasyon kuralları, yeni spekülasyon kuralı komut dosyaları eklenebildiği ve bu spekülasyonları atmak için eski komut dosyaları kaldırılabildiği için yarı dinamikti (mevcut bir spekülasyon kuralı komut dosyasının urls listesinin güncellenmesinin spekülasyonlarda bir değişiklik tetiklemediğini unutmayın). Ancak URL'lerin seçimi, sayfa isteği sırasında sunucudan gönderilerek veya istemci tarafı JavaScript aracılığıyla dinamik olarak oluşturularak siteye bırakılmaya devam etti.

Liste kuralları, daha basit kullanım alanları (sonraki gezinmenin küçük bir belirgin gruptan olduğu) veya daha gelişmiş kullanım alanları (URL listesinin, site sahibinin kullanmak istediği tüm sezgisel kurallara göre dinamik olarak hesaplandığı ve ardından sayfaya yerleştirildiği) için bir seçenek olarak kalır.

Alternatif olarak, belge kurallarını kullanarak otomatik bağlantı bulmak için yeni bir seçenek sunmaktan memnuniyet duyuyoruz. Bu işlem, where koşuluna göre URL'leri belgenin kendisinden alır. Bu, bağlantıların kendisine bağlı olabilir:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/logout/*"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

CSS seçicileri, mevcut sayfadaki bağlantıları bulmak için href eşleşmelerine alternatif olarak veya bu eşleşmelerle birlikte de kullanılabilir:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Bu sayede, sayfa başına belirli kurallar yerine site genelinde tek bir spekülasyon kural kümesi kullanılabilir. Bu da sitelerin spekülasyon kurallarını dağıtmasını çok daha kolay hale getirir.

Elbette bir sayfadaki tüm bağlantıları önceden oluşturmak kesinlikle israf olur. Bu nedenle, bu yeni özellikle birlikte bir eagerness ayarı da kullanıma sunduk.

İstemek

Her türlü spekülasyonda hassasiyet ve geri çağırma ile teslimat süresi arasında bir denge vardır. Sayfa yüklenirken tüm bağlantıların önceden oluşturulması, kullanıcının tıkladığı bağlantıyı (sayfada aynı sitenin bağlantısını tıkladığı varsayılarak) neredeyse kesinlikle önceden oluşturacağınız anlamına gelir. Bu işlem mümkün olduğunca kısa sürede yapılır ancak büyük olasılıkla çok fazla bant genişliği harcanır.

Öte yandan, yalnızca kullanıcı bir bağlantıyı tıkladıktan sonra ön oluşturma yapmak israfı önler ancak teslimat süresi çok daha kısa olur. Bu nedenle, tarayıcı ilgili sayfaya geçmeden önce ön oluşturma işleminin tamamlanması olası değildir.

eagerness ayarı, spekülasyonların ne zaman çalıştırılacağını tanımlamanıza olanak tanır. Bu ayarla, spekülasyon yapılacak zaman ile spekülasyonların hangi URL'lerde yapılacağı birbirinden ayrılır. eagerness ayarı hem list hem de document kaynak kuralları için kullanılabilir. Dört ayarı vardır ve Chrome'da aşağıdaki sezgisel kurallar geçerlidir:

• immediate: Bu, spekülasyonu en kısa sürede, yani spekülasyon kuralları gözlemlenir gözlemlenmez yapmak için kullanılır.
• eager: Bu ayar şu anda immediate ayarıyla aynı şekilde çalışır ancak gelecekte immediate ile moderate arasında bir yere yerleştirmeyi planlıyoruz.
• moderate: Fareyle bir bağlantının üzerine 200 milisaniye boyunca geldiğinizde (veya daha önce gerçekleşirse pointerdown etkinliğinde ve hover etkinliğinin olmadığı mobil cihazlarda) bu işlem tahminler gerçekleştirir.
• conservative: İşaretçi veya dokunma işlemiyle ilgili tahminler içerir.

list kuralları için varsayılan eagerness değeri immediate'dir. moderate ve conservative seçenekleri, list kurallarını kullanıcının etkileşimde bulunduğu URL'lerle belirli bir listeyle sınırlamak için kullanılabilir. Ancak çoğu durumda, uygun bir where koşulu içeren document kuralları daha uygun olabilir.

document kuralları için varsayılan eagerness değeri conservative'dir. Bir doküman birçok URL'den oluşabileceğinden, document kuralları için immediate veya eager kullanımı dikkatli bir şekilde yapılmalıdır (Ayrıca sonraki Chrome sınırları bölümüne bakın).

Kullanılacak eagerness ayarı sitenize bağlıdır. Çok basit bir statik site için daha hevesli bir şekilde tahminde bulunmak çok maliyetli olmayabilir ve kullanıcılar için yararlı olabilir. Daha karmaşık mimarilere ve daha ağır sayfa yükü boyutlarına sahip siteler, kullanıcılardan israfı sınırlamayla ilgili daha olumlu bir sinyal alana kadar daha az spekülasyon yaparak israfı azaltmayı tercih edebilir.

moderate seçeneği orta bir yoldur. Birçok site, spekülasyon kurallarının temel ancak güçlü bir uygulaması olarak fareyle üzerine gelindiğinde veya fare ucu aşağı indiğinde tüm bağlantıları önceden oluşturacak aşağıdaki basit spekülasyon kuralından yararlanabilir:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "href_matches": "/*"
    },
    "eagerness": "moderate"
  }]
}
</script>

Chrome sınırları

eagerness seçeneğiyle bile Chrome'da bu API'nin aşırı kullanımını önlemek için sınırlamalar vardır:

Kullanıcı etkileşimine bağlı olan moderate ve conservative ayarları ilk giren ilk çıkar (FIFO) şeklinde çalışır. Sınıra ulaşıldığında, yeni bir spekülasyon, bellek tasarrufu sağlamak için en eski spekülasyonun iptal edilmesine ve yeni spekülasyonun yerine geçmesine neden olur.

moderate ve conservative spekülasyonlarının kullanıcılar tarafından tetiklenmesi, bellek tasarrufu sağlamak için daha mütevazı bir eşik olan 2'yi kullanmamıza olanak tanır. immediate ve eager ayarları kullanıcı işlemi tarafından tetiklenmez. Bu nedenle, tarayıcı hangilerinin gerekli olduğunu ve ne zaman gerekli olduğunu bilmediği için bu ayarların daha yüksek bir sınırı vardır.

FIFO kuyruğundan çıkarılarak iptal edilen bir tahmin, tekrar tetiklenebilir (ör. fareyle bağlantının üzerine gelerek). Bu durumda, söz konusu URL yeniden tahmin edilir. Bu durumda, önceki tahmin büyük olasılıkla tarayıcının söz konusu URL için HTTP önbelleğine bazı kaynakları önbelleğe almasına neden olmuştur. Bu nedenle, tahmini tekrarlamak çok daha az ağ ve dolayısıyla zaman maliyeti gerektirir.

immediate ve eager sınırları da dinamiktir. Bu isteklilik düzeylerini kullanarak bir spekülasyon kuralları komut dosyası öğesini kaldırmak, kaldırılan spekülasyonları iptal ederek kapasite oluşturur. Bu URL'ler, yeni bir URL komut dosyasına dahil edilirse ve sınıra ulaşılmadıysa yeniden tahmin edilebilir.

Chrome, aşağıdakiler de dahil olmak üzere belirli koşullarda spekülasyonların kullanılmasını engeller:

• Veri Tasarrufu'nu seçin.
• Enerji tasarrufu.
• Bellek kısıtlamaları.
• "Sayfaları önceden yükle" ayarı devre dışı bırakıldığında (uBlock Origin gibi Chrome uzantıları tarafından da açıkça devre dışı bırakılır).
• Arka plan sekmelerinde açılan sayfalar.

Bu koşulların tümü, kullanıcılar için zararlı olduğunda aşırı spekülasyonun etkisini azaltmayı amaçlar.

İsteğe bağlı source

Chrome 122, url veya where anahtarlarının varlığından anlaşılabileceği için source anahtarını isteğe bağlı hale getirir. Bu nedenle, bu iki spekülasyon kuralı aynıdır:

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

Speculation-Rules HTTP üstbilgisi

Spekülasyon kuralları, doğrudan dokümanın HTML'sine dahil edilmek yerine Speculation-Rules HTTP üst bilgisi kullanılarak da yayınlanabilir. Bu sayede, CDN'ler tarafından belge içeriklerinde değişiklik yapmadan daha kolay dağıtım yapılabilir.

Speculation-Rules HTTP başlığı, belgeyle birlikte döndürülür ve spekülasyon kurallarını içeren bir JSON dosyasının konumunu gösterir:

Speculation-Rules: "/speculationrules.json"

Bu kaynak doğru MIME türünü kullanmalı ve kaynak farklı bir kaynaktan geliyorsa CORS kontrolünden geçmelidir.

Content-Type: application/speculationrules+json
Access-Control-Allow-Origin: *

Göreli URL'ler kullanmak istiyorsanız spekülasyon kurallarınıza "relative_to": "document" anahtarını ekleyebilirsiniz. Aksi takdirde, göreli URL'ler spekülasyon kuralları JSON dosyasının URL'sine göreli olur. Bu, özellikle aynı kaynaktaki bağlantıların bazılarını veya tümünü seçmeniz gerektiğinde yararlı olabilir.

Daha iyi önbellek yeniden kullanımı

Bir dokümanın ön beslemesi (veya hatta ön oluşturması) için kaynakların HTTP önbelleğine depolanması ve yeniden kullanılması amacıyla Chrome'da önbelleğe alma konusunda çeşitli iyileştirmeler yaptık. Bu, spekülasyon kullanılmasa bile spekülasyonun gelecekte fayda sağlayabileceği anlamına gelir.

Ayrıca Chrome, önbelleğe alınabilir kaynaklar için HTTP önbelleğini kullanacağından, yeniden tahmin etme işlemi (örneğin, moderate isteklilik ayarına sahip doküman kuralları için) önemli ölçüde daha ucuz hale gelir.

Ayrıca, önbelleğin yeniden kullanımını daha da iyileştirmek için yeni No-Vary-Search önerisini destekliyoruz.

No-Vary-Search desteği

Bir sayfayı önceden getirme veya önceden oluşturma işlemi sırasında, belirli URL parametreleri (teknik olarak arama parametreleri olarak bilinir) sunucu tarafından aslında yayınlanan sayfa için önemsiz olabilir ve yalnızca istemci tarafı JavaScript tarafından kullanılabilir.

Örneğin, UTM parametreleri Google Analytics tarafından kampanya ölçümü için kullanılır ancak genellikle sunucudan farklı sayfaların yayınlanmasına neden olmaz. Bu, page1.html?utm_content=123 ve page1.html?utm_content=456'ün sunucudan aynı sayfayı yayınlayacağı anlamına gelir. Böylece aynı sayfa önbellekten yeniden kullanılabilir.

Benzer şekilde, uygulamalar yalnızca istemci tarafında işlenen diğer URL parametrelerini kullanabilir.

No-Vary-Search teklifi, sunucunun, yayınlanan kaynakta bir fark oluşturmayan parametreleri belirtmesine ve dolayısıyla tarayıcının, bir dokümanın yalnızca bu parametrelerle farklı olan daha önce önbelleğe alınmış sürümlerini yeniden kullanmasına olanak tanır. Not: Bu özellik şu anda yalnızca Chrome'da (ve Chromium tabanlı tarayıcılarda) ön besleme gezinme spekülasyonları için desteklenmektedir.

Spekülasyon kuralları, bir No-Vary-Search HTTP başlığının nerede döndürülmesinin beklendiğini belirtmek için expects_no_vary_search kullanılmasını destekler. Bu işlem, gereksiz indirmelerin önüne geçmenize yardımcı olabilir.

<script type="speculationrules">
{
  "prefetch": [{
    "urls": ["/products*"],
    "expects_no_vary_search": "params=(\"id\")"
  }]
}
</script>

<a href="/products?id=123">Product 123</a>
<a href="/products?id=124">Product 124</a>

Bu örnekte, /products ilk sayfa HTML'si hem 123 hem de 124 ürün kimlikleri için aynıdır. Ancak sayfa içeriği, id arama parametresini kullanarak ürün verilerini almak için JavaScript'i kullanan istemci tarafı oluşturmaya göre değişir. Bu nedenle, bu URL'yi istekli olarak önceden getiririz ve sayfanın herhangi bir id arama parametresi için kullanılabileceğini gösteren bir No-Vary-Search HTTP başlığı döndürmelidir.

Ancak kullanıcı, ön getirme işlemi tamamlanmadan bağlantılardan herhangi birini tıklarsa tarayıcı /products sayfasını almayabilir. Bu durumda tarayıcı, No-Vary-Search HTTP üst bilgisinin bulunup bulunmadığını bilemez. Ardından tarayıcı, bağlantıyı tekrar getirip getirmeme veya No-Vary-Search HTTP üstbilgisi içerip içermediğini görmek için ön getirme işleminin tamamlanmasını bekleme seçeneğiyle karşı karşıya kalır. expects_no_vary_search ayarı, tarayıcının sayfa yanıtının No-Vary-Search HTTP başlığı içermesi gerektiğini bilmesine ve bu ön getirme işleminin tamamlanmasını beklemesine olanak tanır.

Demo

moderate isteklilik ayarının kullanıldığı doküman kurallarını görmek için https://speculative-rules.glitch.me/common-fruits.html adresinde bir demo oluşturduk:

Geliştirici Araçları'nı açın, Uygulama panelini tıklayın. Ardından, Arka plan hizmetleri bölümünde Spekülatif yükler'i, ardından Spekülasyonlar bölmesini tıklayın ve Durum sütununa göre sıralayın.

Fareyle meyvelerin üzerine geldiğinizde sayfaların ön oluşturma işlemini görürsünüz. Bunları tıkladığınızda, önceden oluşturulmamış tariflerden birine kıyasla çok daha hızlı bir LCP süresi gösterilir. Bu demo, aşağıdaki videoda da açıklanmıştır:

Spekülasyon kurallarında hata ayıklama için DevTools'u kullanma hakkında daha fazla bilgi edinmek isterseniz önceki spekülasyon kurallarında hata ayıklamayla ilgili blog yayınını da inceleyebilirsiniz.

Spekülasyon kuralları için platform desteği

Spekülasyon kuralları, <script type="speculationrules"> öğesine ekleyerek uygulandığında nispeten basit olsa da platform desteği bu işlemi tek tıklamayla gerçekleştirebilir. Spekülasyon kurallarını uygulamayı kolaylaştırmak için çeşitli platform ve iş ortaklarıyla birlikte çalışıyoruz.

Ayrıca, Web Incubator Community Group (WICG) aracılığıyla API'yi standartlaştırmak için yoğun şekilde çalışıyoruz. Böylece, diğer tarayıcıların da bu heyecan verici API'yi uygulamasını sağlayabiliriz.

WordPress

WordPress Core Performance ekibi (Google'daki geliştiriciler dahil), bir Spekülasyon Kuralları eklentisi oluşturdu. Bu eklenti, herhangi bir WordPress sitesine tek tıklamayla doküman kuralları desteği eklemenize olanak tanır. Bu eklenti, WordPress Performance Lab eklentisi aracılığıyla da yüklenebilir. Ekip tarafından sunulan ilgili performans eklentileriyle ilgili güncel bilgileri size sunacağından bu eklentiyi de yüklemenizi öneririz.

İki ayar grubu vardır: Spekülasyon modu ve İlgilenme ayarı:

Daha karmaşık kurulumlar için (ör. belirli URL'lerin önceden getirilmesini veya önceden oluşturulmasını hariç tutmak için) dokümanları okuyun.

Akamai

Dünyanın önde gelen CDN sağlayıcılarından biri olan Akamai, bir süredir Speculation Rules API ile aktif olarak denemeler yapıyor. Akamai, müşterilerin bu API'yi CDN ayarlarında nasıl etkinleştirebileceğiyle ilgili dokümanlar yayınladı. Ayrıca daha önce bu yeni API ile elde edilebilecek etkileyici sonuçları da paylaşmışlardı.

NitroPack

NitroPack, spekülasyon kurallarına hangi sayfaların ekleneceğini tahmin etmek için özel Gezinme Yapay Zeka'sını kullanan bir performans optimizasyonu çözümüdür. Bu çözüm, fareyle bağlantının üzerine gelmek yerine daha uzun bir ön plan süresi sağlamayı amaçlar ancak gözlemlenen tüm bağlantılar hakkında gereksiz yere spekülasyon yapmanın boşa harcanan zamanını ortadan kaldırır. Daha fazla bilgi için Nitropack Spekülasyon Kuralları API belgelerine göz atın. Bu yenilikçi çözüm, eski liste kurallarının siteye özgü analizlerle birlikte kullanıldığında sunabileceği çok şey olduğunu gösteriyor.

Chrome ekibi, daha fazla bilgi edinmek isteyenler için NitroPack ile birlikte Spekülasyon Kuralları API'si ile ilgili bir webinar düzenledi. Bu webinarda, erken ve sık spekülasyon yapmanın yanı sıra geç ve daha seyrek spekülasyon yapmanın avantajları ve dezavantajları hakkında ayrıntılı bir tartışma yer alıyor.

Astro

Astro, 4.2'de Speculation Rules API'yi kullanarak sayfaları önceden oluşturma özelliğini deneysel olarak ekledi. Bu sayede Astro kullanan geliştiriciler bu özelliği kolayca etkinleştirebilirken Speculation Rules API'yi desteklemeyen tarayıcılar için standart bir ön beslemeye geri dönebilir. Daha fazla bilgi için istemci ön oluşturma belgelerini okuyun.

Sonuç

Spekülasyon Kuralları API'sine eklenen bu özellikler, siteler için bu heyecan verici yeni performans özelliğinin çok daha basit bir şekilde kullanılmasını sağlar ve kullanılmayan spekülasyonlarla kaynak israf etme riskini azaltır. Platformların bu API'yi kullanmaya başladığını görmek heyecan verici. 2024'te bu API'nin daha geniş bir şekilde benimsenmesini ve bunun sonucunda da son kullanıcılara daha iyi performans sunmayı umuyoruz.

Spekülasyon Kuralları API'sinin sağladığı performans kazançlarının yanı sıra bu özelliğin ne gibi yeni fırsatlar sunduğunu görmek de bizi heyecanlandırıyor. Görüntü Geçişleri, geliştiricilerin gezinme işlemleri arasındaki geçişleri daha kolay belirtmesine olanak tanıyan yeni bir API'dir. Bu özellik şu anda tek sayfalık uygulamalar (SPA'lar) için kullanılabilir ancak çok sayfalı sürüm üzerinde çalışılıyor (ve Chrome'da bir işaretin arkasında kullanılabilir). Ön oluşturma, gecikme olmaması için bu özelliğe doğal bir eklentidir. Aksi takdirde, geçişin sağlaması amaçlanan kullanıcı deneyimi iyileştirmesi engellenir. Bu kombinasyonu deneyen siteler gördük.

Spekülasyon Kuralları API'sinin 2024'te daha fazla kullanıcı tarafından benimsenmesini umuyoruz. API'de yaptığımız diğer iyileştirmeler hakkında sizi bilgilendireceğiz.

Teşekkür ederiz

Unsplash'taki Robbie Down tarafından oluşturulan küçük resim