Speculation Rules API'deki iyileştirmeler

Barry Pollard

Chrome ekibi, önceden getirme ve hatta gelecekteki gezinmeleri önceden işleme yoluyla gezinme performansını iyileştirmek için kullanılan Speculation Rules API ile ilgili bazı heyecan verici güncellemeler üzerinde çalışıyor. Bu ek iyileştirmelerin tümü artık Chrome 122 sürümünde kullanılabilir (bazı özellikler önceki sürümlerde kullanılabilir).

Bu değişiklikler, önceden getirme ve önceden işleme sayfalarının dağıtımını önemli ölçüde daha kolay hale getirir ve daha az israf yaratır. Bu değişikliklerin, daha fazla benimsenmesini teşvik edeceğini umuyoruz.

Ek özellikler

İlk olarak, Speculation Rules API'ye eklediğimiz yeni eklemeler ve bunların nasıl kullanılacağıyla ilgili bir açıklama yapacağız. Ardından, size bir demo göstereceğiz.

Belge kuralları

Speculation Rules API, daha önce önceden getirilecek veya önceden işlenecek bir URL listesi belirterek çalışıyordu:

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

Yeni tahmin kuralı komut dosyaları eklenebilmesi ve bu tahminleri yok etmek için eski komut dosyaları kaldırıldığı için spekülasyon kuralları yarı dinamiktir (mevcut bir tahmin kuralları komut dosyasının urls listesini güncellemenin, spekülasyonlar için bir değişikliği tetiklemediğini unutmayın). Ancak yine de URL seçimini, ya sayfa isteği anında sunucudan göndererek ya da bu listeyi istemci taraflı JavaScript aracılığıyla dinamik bir şekilde oluşturarak siteye bırakır.

Liste kuralları, daha basit kullanım alanları (sonraki gezinmenin az sayıda bariz olandan geldiği) veya daha gelişmiş kullanım alanları (URL listesinin site sahibinin kullanmak istediği buluşsal yöntemlere göre dinamik olarak hesaplanıp sayfaya eklendiği) için bir seçenek olarak kalır.

Alternatif olarak, doküman kurallarını kullanarak otomatik bağlantı bulma için yeni bir seçenek sunmaktan heyecan duyuyoruz. Bu işlem, where koşuluna dayalı olarak dokümanın kendisindeki URL'lerin sağlanmasıyla çalışır. Bu tercih, bağlantıların kendisine dayalı olabilir:

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

CSS seçiciler, alternatif olarak veya geçerli sayfadaki bağlantıları bulmak için href eşleşmeleriyle 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 tüm sitede tek bir spekülasyon kuralı grubu kullanılabilir. Böylece, sitelerin spekülasyon kuralları uygulaması çok daha kolay olur.

Elbette, bir sayfadaki tüm bağlantıları önceden oluşturmak gereksiz bir iş olacaktır. Bu nedenle, bu yeni özellikle birlikte bir eagerness ayarını kullanıma sunduk.

İsteklilik

Her türlü spekülasyonda, hassasiyet, geri çağırma ve teslimat süresi arasında bir denge vardır. Sayfa yüklemesinde tüm bağlantıları önceden oluşturmak, neredeyse kesinlikle kullanıcının tıkladığı (sayfada aynı site bağlantısını tıkladıkları varsayılır) bir bağlantıyı önceden oluşturmanız anlamına gelir. Bu durumda süreç mümkün olduğunca uzun sürer ancak potansiyel olarak büyük bir bant genişliği kaybına yol açar.

Öte yandan, yalnızca kullanıcı bir bağlantıyı tıkladığında önceden işleme, israfı önler ancak teslimat süresinin çok daha kısa olmasını sağlar. Bu, tarayıcı bu sayfaya geçmeden önce önceden işlemeyi tamamlama olasılığının düşük olduğu anlamına gelir.

eagerness ayarı, hangi URL'lerden spekülasyon gerçekleştireceğinize dair ne zaman tahmin yapılacağını ayırarak, tahminlerin ne zaman yayınlanacağını tanımlamanıza olanak tanır. eagerness ayarı, hem list hem de document kaynak kuralları için kullanılabilir ve Chrome'un aşağıdaki buluşsal yöntemlere sahip olduğu dört ayara sahiptir:

• immediate: Bu özellik, en kısa sürede, yani tahmin kuralları gözlemlenir olmaz spekülasyon yapmak için kullanılır.
• eager: Bu, şu anda immediate ayarıyla aynı şekilde davranır ancak gelecekte bunu immediate ile moderate arasında bir yere yerleştirmek istiyoruz.
• moderate: Bu komut, fareyle bir bağlantının üzerine 200 milisaniye boyunca (veya daha önceyse pointerdown etkinliğinin üzerine) gelip hover etkinliğinin olmadığı mobil cihazlarda tahminler yapar.
• conservative: Bu, işaretçi veya dokunmayla ilgili tahminde bulunur.

list kural için varsayılan eagerness, immediate olarak belirlenmiştir. moderate ve conservative seçenekleri, list kurallarını bir kullanıcının belirli bir listeyle etkileşimde bulunduğu URL'lerle sınırlamak için kullanılabilir. Bununla birlikte, birçok durumda, uygun where koşuluna sahip document kuralları daha uygun olabilir.

document kural için varsayılan eagerness, conservative olarak belirlenmiştir. Bir doküman çok sayıda URL içeriyor olabileceğinden, document kuralları için immediate veya eager kullanımı dikkatli bir şekilde kullanılmalıdır (ayrıca bir sonraki Chrome sınırlamaları bölümüne bakın).

Hangi eagerness ayarının kullanılacağı sitenize bağlıdır. Çok basit bir statik sitede daha iddialı tahminlerde bulunmak, düşük bir maliyet getirebilir ve kullanıcılar için faydalı olabilir. Daha karmaşık mimarilere ve daha ağır sayfa yüklerine sahip siteler, kullanıcılardan israfı sınırlamaya yönelik daha olumlu bir sinyal alana kadar daha seyrek spekülasyon yaparak israfı azaltmayı tercih edebilir.

moderate seçeneği bir orta temeldir ve birçok site, spekülasyon kurallarının temel ancak ancak güçlü bir uygulaması olarak, fareyle üzerine gelme veya işaretçi aşağı işaretçideki tüm bağlantıları önceden işleyen aşağıdaki basit tahmin kuralından yararlanabilir:

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

Chrome sınırlamaları

eagerness seçeneği belirlense bile Chrome, bu API'nin aşırı kullanımını engellemek için bazı sınırlamalar getirmiştir:

Kullanıcı etkileşimine bağlı olan moderate ve conservative ayarları İlk Gelen, İlk Çıkış (FIFO) yöntemiyle çalışır. Sınıra ulaşıldığında yeni bir spekülasyon, bellekten tasarruf etmek için en eski spekülasyonun iptal edilmesine ve yeni spekülasyonla değiştirilmesine neden olur.

moderate ve conservative spekülasyonlarının kullanıcılar tarafından tetiklenmesi, hafızayı korumak için daha düşük olan 2 eşiği kullanmamıza olanak tanır. immediate ve eager ayarları, kullanıcı işlemi tarafından tetiklenmez. Bu nedenle, tarayıcının hangi ayarların ve ne zaman gerekli olduğunu bilmesi mümkün olmadığından daha yüksek bir sınıra sahiptir.

FIFO kuyruğundan çıkarılarak iptal edilen bir spekülasyon (örneğin fareyle bağlantının üzerine tekrar getirildiğinde) tekrar tetiklenebilir ve bu durumda URL'nin yeniden spekülasyona yol açması sağlanır. Bu durumda, önceki spekülasyon büyük olasılıkla tarayıcının bu URL için HTTP Önbelleğindeki bazı kaynakları önbelleğe almasına neden olmuştur; bu nedenle, spekülasyonu tekrarlamanın ağ maliyeti çok daha düşük olacaktır, dolayısıyla da zaman maliyetleri düşecektir.

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

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

• Kaydet'i seçin.
• Enerji tasarrufu.
• Bellek kısıtlamaları.
• "Sayfaları önceden yükle" seçeneği (bu ayar, uBlock Origin gibi Chrome uzantıları tarafından da açıkça kapatılır.)
• Arka plan sekmelerinde açılan sayfalar.

Tüm bu koşulların amacı, kullanıcılar için zararlı olduğu durumlarda aşırı spekülasyonların etkisini azaltmaktır.

İsteğe bağlı source

url veya where anahtarlarının varlığından anlaşılabileceği için Chrome 122'de source anahtarı isteğe bağlıdır. Dolayısıyla şu iki tahmin 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 üst bilgisi

Spekülasyon kuralları, doğrudan dokümanın HTML'sine eklemek yerine bir Speculation-Rules HTTP üst bilgisi kullanılarak da iletilebilir. Bu sayede, doküman içeriklerini değiştirmeye gerek kalmadan CDN'ler tarafından daha kolay dağıtım yapılabilir.

Speculation-Rules HTTP üst bilgisi dokümanla birlikte döndürülür ve spekülasyon kurallarını içeren bir JSON dosyasının konumuna işaret eder:

Speculation-Rules: "/speculationrules.json"

Bu kaynak, doğru MIME türünü kullanmalı ve kaynaklar arası bir kaynaksa 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ı dahil edebilirsiniz. Aksi takdirde, göreli URL'ler tahmin kuralları JSON dosyasının URL'siyle göreli olur. Bu, özellikle aynı kaynak bağlantılarından bazılarını veya tümünü seçmeniz gerekiyorsa yararlı olabilir.

Önbelleği daha iyi yeniden kullanma

Bir dokümanın önceden getirilmesinin (hatta önceden oluşturulması), kaynakların HTTP önbelleğinde depolanmasını ve yeniden kullanılmasını sağlamak için Chrome'da önbelleğe almayla ilgili çeşitli iyileştirmeler yaptık. Yani, bu spekülasyon kullanılmasa bile spekülasyon yapmanın gelecekte faydaları olabilir.

Chrome, önbelleğe alınabilir kaynaklar için HTTP önbelleğini kullanacağından, bu yöntem yeniden tahmin yapmayı (örneğin, moderate isteklilik ayarına sahip doküman kuralları için) önemli ölçüde daha ucuz hale getirir.

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

No-Vary-Search desteği

Bir sayfayı önceden getirirken veya oluştururken belirli URL parametreleri (teknik olarak arama parametreleri olarak bilinir), aslında sunucu tarafından yayınlanan sayfa için önemsiz olabilir ve yalnızca istemci taraflı JavaScript tarafından kullanılır.

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

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

No-Vary-Search teklifi, sunucunun yayınlanan kaynakta bir farkla sonuçlanmayan parametreleri belirtmesine ve dolayısıyla tarayıcının bir dokümanın yalnızca bu parametrelere göre farklı önceden önbelleğe alınmış sürümlerini yeniden kullanmasına izin verir. Not: Şu anda bu özellik yalnızca Chrome'da (ve Chromium tabanlı tarayıcılarda) önceden getirme gezinme tahminleri için desteklenmektedir.

Spekülasyon kuralları, No-Vary-Search HTTP üstbilgisinin nerede döndürüleceğini belirtmek için expects_no_vary_search kullanımını destekler. Böylece, gereksiz indirmelerin önüne geçebilirsiniz.

<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çerikleri, ürün verilerini id arama parametresiyle getirmek için JavaScript'in kullanıldığı istemci taraflı oluşturmaya göre sonuçta farklılık gösterir. Dolayısıyla, bu URL'yi istekle önceden getiririz ve sayfanın herhangi bir id arama parametresi için kullanılabildiğini gösteren bir No-Vary-Search HTTP başlığı döndürmesi gerekir.

Bununla birlikte, kullanıcı önceden getirme işlemi tamamlanmadan önce bağlantılardan herhangi birini tıklarsa tarayıcı, /products sayfasını almamış olabilir. Bu durumda, tarayıcı No-Vary-Search HTTP üst bilgisini içerip içermeyeceğini bilemez. Tarayıcı, bağlantının tekrar getirilmesini veya bir No-Vary-Search HTTP üst bilgisi içerip içermediğini görmek için önceden getirme işleminin tamamlanmasını bekler. expects_no_vary_search ayarı, tarayıcının, sayfa yanıtının bir No-Vary-Search HTTP üst bilgisi içermesinin beklendiğini bilmesini ve bu önceden getirme işleminin tamamlanmasını beklemesini sağlar.

Demo

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

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

Meyvelerin üzerine geldiğinizde sayfaların önceden oluşturulduğunu görürsünüz. Bunları tıkladığınızda, önceden işlenmemiş tariflerin birinden ç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ıklamak için Geliştirici Araçları'nın nasıl kullanılacağı hakkında daha fazla bilgi edinmek isterseniz önceki spekülasyon kurallarıyla ilgili hata ayıklama blog yayınına da göz atabilirsiniz.

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

Spekülasyon kurallarının bir <script type="speculationrules"> öğesine eklenmesiyle uygulanması nispeten daha basit olsa da platform desteği, bunu tek tıkla yapılabilecek bir işlem haline getirebilir. Spekülasyon kurallarının kullanıma sunulmasını kolaylaştırmak için çeşitli platformlarla 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 bir şekilde çalışıyoruz. Böylece, diğer tarayıcıların da isterlerse bu heyecan verici API'yi uygulayabilmelerini sağlıyoruz.

WordPress

WordPress Temel Performans ekibi (Google'daki geliştiriciler de dahil), bir Spekülasyon Kuralları eklentisi oluşturmuştur. Bu eklenti, herhangi bir WordPress sitesine doküman kuralları desteğinin tek tıklamayla basit bir şekilde eklenmesini sağlar. Bu eklentiyi, ekip tarafından sunulan ilgili performans eklentileri hakkında güncel bilgiler sağlamak için WordPress Performance Lab eklentisi aracılığıyla da yükleyebilirsiniz.

İki ayar grubu kullanılabilir: Spekülasyon modu ve İsteklilik ayarı:

Daha karmaşık ayarlar için (örneğin, belirli URL'lerin önceden getirilmesini veya önceden oluşturulmasını engellemek üzere) belgeleri 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 CDN ayarlarında bu API'yi nasıl etkinleştirebilecekleriyle ilgili dokümanlar yayınladı. Ayrıca, bu yeni API ile mümkün olan etkileyici sonuçları da paylaştılar.

NitroPack

NitroPack, spekülasyon kurallarına hangi sayfaların ekleneceğini tahmin etmek için özel Gezinme AI'sını kullanan bir performans optimizasyonu çözümüdür. Bu çözüm, imleçle bir bağlantının üzerine gelmekten daha uzun bir hazırlık süresi sağlamayı amaçlar. Ancak, gözlemlenen tüm bağlantılar üzerinde gereksiz tahminler yapmamaya zaman ayırmaz. Daha fazla bilgi için Nitropack Speculation Rules API dokümanlarına bakın. Bu yenilikçi çözüm, siteye özel analizlerle birlikte eski liste kurallarının sunabileceği birçok şey olduğunu gösteriyor.

Chrome ekibi ayrıca, daha fazla bilgi arayanlara yönelik Speculation Rules API, webinar'ı kapsamında da NitroPack ile birlikte çalıştı. Bu webinar'da, erken ve sık, geç ve daha seyrek spekülasyon yapma arasında dikkat edilmesi gereken noktalar üzerine iyi bir tartışma gerçekleştirildi.

Astro

Astro, deneysel olarak 4.2'deki Speculation Rules API'yi kullanarak sayfaları önceden işleme özelliğini ekledi. Bu sayede, Astro kullanan geliştiricilerin bu özelliği kolayca etkinleştirmesine olanak tanıdı. Daha fazla bilgi için istemci önceden oluşturma belgelerini okuyun.

Sonuç

Speculation Rules API, siteler için bu heyecan verici yeni performans özelliğinin çok daha basit bir şekilde kullanılmasını sağlar. Kullanılmayan spekülasyonlarla kaynakların israf edilme riski daha azdır. Platformların bu API'ye ağırlık verdiğini görmek heyecan verici. 2024'te bu API'nin daha geniş çapta kullanıma sunulmasını ve bunun sonucunda son kullanıcılara daha iyi bir performans sunmayı umuyoruz.

Speculation Rules API, performans kazanımlarının yanı sıra, bu geçişin beraberinde getirdiği yeni fırsatları da görmek bizi heyecanlandırıyor. View Transitions, geliştiricilerin gezinmeler arasındaki geçişleri daha kolay bir şekilde 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 işlenmeye devam etmektedir (ve Chrome'da bir işaretin arkasındadır). Önceden işleme, gecikme olmamasını sağlayan doğal bir eklentidir. Aksi takdirde, geçişin sağlamayı amaçladığı kullanıcı deneyimini iyileştirmesini engelleyebilir. Daha önce bu kombinasyonla denemeler yapan siteler gördük.

Speculation Rules API, 2024 boyunca daha fazla benimsenecektir. Bu API'de yapacağımız iyileştirmeler konusunda sizi bilgilendireceğiz.

Teşekkür

Robbie Down'un Unsplash'teki küçük resmi