Speculation Rules API'deki iyileştirmeler

Barry Pollard

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

Bu değişiklikler, sayfaların önceden getirilmesini ve önceden oluşturulmasını çok daha kolay hale getirir ve daha az israf olmasını sağlar. Bunun daha fazla benimsenmesini teşvik edeceğini umuyoruz.

Ek özellikler

İlk olarak, Speculation Rules API'ye eklediğimiz yeni eklemelerin ve bunların nasıl kullanılacağıyla ilgili bir açıklamadır. Ardından, demoyu çalışırken görebilmeniz için size bir demo göstereceğiz.

Doküman kuralları

Speculation Rules API, önceden getirilecek veya önceden işlenecek URL'lerin bir listesini belirterek çalışıyordu:

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

Yeni tahmin kuralı komut dosyaları eklenebileceği ve bu tahminleri çıkarmak için eski komut dosyaları kaldırılabileceği için tahmin kuralları yarı dinamiktir (mevcut bir tahmin kuralları komut dosyasının urls listesini güncellemenin, tahminlerde bir değişikliği tetiklemediğini unutmayın). Ancak yine de URL seçeneklerini, sayfa isteği sırasında sunucudan göndererek veya bu listeyi istemci taraflı JavaScript ile dinamik bir şekilde oluşturarak siteye bırakmıştır.

Liste kuralları, daha basit kullanım örnekleri (bir sonraki gezinmenin bariz olanlardan oluşan küçük bir gruptan gelmesi) veya daha gelişmiş kullanım alanları (URL listesinin site sahibinin kullanmak istediği buluşsal yöntemlere göre dinamik olarak hesaplanıp daha sonra sayfaya eklenmesi) için bir seçenek olarak kalmaya devam eder.

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 göre URL'leri dokümanın kendisinden alarak çalışır. Bu, bağlantıların kendisine dayalı olabilir:

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

Not: Doküman kurallarının önceki bir sürümünde (kaynak denemesi sırasında kullanılabilen), URL parametrelerini ve parçalarını ({"href_matches": "/*\\?*#*"}) eşleştirmek için ek söz dizimi gerektiren daha karmaşık bir href_matches bulunuyordu. Bu durum, sürüm sürümünde basitleştirilmiştir.

CSS seçiciler, geçerli sayfadaki bağlantıları bulmak için alternatif olarak veya href eşleşmeleri ile 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, her sayfa için belirli kurallar eklemek yerine sitenin tamamında tek bir spekülasyon kuralı grubunun kullanılmasına olanak tanıyarak sitelerin spekülasyon kurallarını dağıtmasını çok daha kolay hale getirir.

Bir sayfadaki tüm bağlantıların önceden oluşturulması kesinlikle boşa yol açacağından bu yeni özellik sayesinde eagerness ayarını kullanıma sunduk.

İsteklilik

Her türlü spekülasyonda, hassasiyet ile geri çağırma ve teslimat süresi arasında bir denge söz konusudur. Tüm bağlantıları sayfa yükleme sırasında önceden görüntülemek, kullanıcının tıkladığı bir bağlantıyı (sayfada aynı sitedeki bir bağlantıyı tıkladığı varsayılırsa) neredeyse kesinlikle önceden oluşturacağınız, ancak mümkün olduğunca fazla bekleme süresi sağlayacağınız ancak potansiyel olarak büyük bir bant genişliği israfına yol açacağınız anlamına gelir.

Öte yandan, yalnızca kullanıcı bir bağlantıyı tıkladığında önceden işleme yapmak israfı önler ancak bu işlem çok daha kısa bir süre anlamına gelir. Bu nedenle, tarayıcı bu sayfaya geçmeden önce önceden işlemeyi tamamlamış olma olasılığı düşüktür.

eagerness ayarı, hangi URL'lerden tahmin gerçekleştirileceğine ilişkin ne zaman tahminde bulunulacağı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 mümkün olan en kısa sürede, yani spekülasyon kuralları gözlemlendiği anda spekülasyon yapmak için kullanılır.
• eager: Bu, şu anda immediate ayarıyla aynı şekilde davranmaktadır, ancak gelecekte bunu immediate ile moderate arasında bir yere yerleştirmek istiyoruz.
• moderate: Bu işlem, fareyle bir bağlantının üzerine gelip 200 milisaniye (veya bu süre daha erken olduğunda pointerdown etkinliğinde ve hover etkinliğinin olmadığı mobil cihazlarda) tahmin yürütür.
• conservative: İşaretçi veya aşağı temas üzerine spekülasyon yapar.

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

document kuralları için varsayılan eagerness değeri conservative'dir. Bir doküman çok sayıda URL içerebilir. Bu nedenle, document kuralları için immediate veya eager kullanımı dikkatli bir şekilde kullanılmalıdır (bir sonraki Chrome sınırları bölümüne de bakın).

Hangi eagerness ayarının kullanılacağı sitenize bağlıdır. Çok basit bir statik site için daha istekli bir şekilde spekülasyon yapmak hem düşük bir maliyet hem de kullanıcılar için yararlı olabilir. Daha karmaşık mimarilere ve daha ağır sayfa yüklerine sahip siteler, israfı azaltmak için kullanıcılardan daha olumlu niyet sinyali alana kadar daha az spekülasyon yaparak israfı azaltmayı tercih edebilir.

Dikkat: Aşırı spekülasyonun, kullanıcılar için bant genişliği, bellek ve CPU maliyetleri olduğu gibi, siteler için de açık bir maliyeti vardır. Spekülasyonları uygularken kullanıcılarınıza katacağınız etkinin farkında olun. eagerness ayarları, boşa giden spekülasyonların olasılığını azaltmanıza olanak tanır. Chrome, aşırı kullanımın etkisini azaltmak için spekülasyonlara sınırlar da uygular.

moderate seçeneği bir orta yol sunar ve birçok site, fareyle üzerine gelindiğinde veya işaretçiyle aşağılandığında tüm bağlantıları temel ama güçlü bir tahmin kurallarının uygulanması olarak ö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 sunulsa da Chrome'da bu API'nin aşırı kullanımını önleyecek sınırlar vardır:

eagerness	Önceden getir	Önceden oluşturucu
immediate / eager	50	10
moderate / conservative	2 (FIFO)	2 (FIFO)

Chrome'daki spekülasyon sınırları

Kullanıcı etkileşimine bağlı olan moderate ve conservative ayarları İlk Giren, İlk Çıkar (FIFO) tarzında çalışır. Sınıra ulaşıldıktan sonra, yeni bir tahmin, bellekten tasarruf etmek için en eski tahminin iptal edilmesine ve yeni tahminle değiştirilmesine neden olur.

moderate ve conservative tahminlerinin kullanıcılar tarafından tetiklenmesi, bellekten tasarruf etmek için 2'lik daha düşük bir eşik kullanmamıza olanak tanır. immediate ve eager ayarları herhangi bir kullanıcı işlemiyle tetiklenmez. Bu nedenle, tarayıcı hangi ayarların ne zaman gerektiğini bilmesi mümkün olmadığından daha yüksek bir sınıra sahiptir.

FIFO sırasından çıkarılarak iptal edilen bir spekülasyon, örneğin fareyle ilgili bağlantının üzerine tekrar gelerek tekrar tetiklenebilir. 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ğindeki bazı kaynakları önbelleğe almasına neden olmuş olacaktır. Dolayısıyla, spekülasyonun tekrarlanması çok daha düşük bir ağ ve dolayısıyla zaman kaybına neden olur.

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

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

• Verileri Kaydet.
• Enerji tasarrufu.
• Bellek kısıtlamaları.
• "Sayfaları önceden yükle" ayarı kapatıldığında (uBlock Origin gibi Chrome uzantıları da açıkça devre dışı bırakılır).
• Arka plan sekmelerinde açılan sayfalar.

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

İsteğe bağlı source

Chrome 122'de, url veya where anahtarlarının varlığından anlaşılabildiği için source anahtarını isteğe bağlı hale getirir. Dolayısıyla 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 üst bilgisi

Spekülasyon kuralları, doğrudan dokümanın HTML'sine eklemek yerine Speculation-Rules HTTP üst bilgisi kullanılarak da yayınlanabilir. Bu, doküman içeriklerinin kendilerini değiştirmeye gerek kalmadan CDN'ler tarafından daha kolay dağıtım yapılmasına olanak tanır.

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

Speculation-Rules: "/speculationrules.json"

Uyarı: Bu, yapılandırılmış bir başlık olduğu için tırnak işaretleri önemlidir ve başlık değerine dahil edilmelidir.

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 "relative_to": "document" anahtarını tahmin kurallarınıza dahil etmek isteyebilirsiniz. Aksi takdirde, göreli URL'ler spekülasyon kuralları JSON dosyasının URL'siyle göreli olur. Bu, özellikle aynı kaynaklı bağlantılardan bazılarını veya tümünü seçmeniz gerekiyorsa yararlı olabilir.

Önbelleğin daha iyi yeniden kullanımı

Bir dokümanın önceden yüklenmesi (hatta önceden oluşturulması) için kaynakları HTTP önbelleğinde saklayıp yeniden kullanmak üzere Chrome'da önbelleğe almayla ilgili birkaç iyileştirme yaptık. Diğer bir deyişle, kullanılmasa bile spekülasyon gelecekte de fayda sağlayabilir.

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

Önbelleğin yeniden kullanımını daha da iyileştirmek için yeni No-Vary-Search teklifini de destekliyoruz.

No-Vary-Search desteği

Bir sayfanın önceden yüklenmesi veya önceden oluşturulması sırasında, belirli URL parametreleri (teknik olarak arama parametreleri olarak bilinirler), gerçekte sunucu tarafından sunulan ve yalnızca istemci tarafı JavaScript tarafından kullanılan sayfa için önemsiz olabilir.

Örneğin, UTM parametreleri Google Analytics tarafından kampanya ölçümü için kullanılır, ancak genellikle sunucudan farklı sayfaların yayınlanmasıyla sonuçlanmaz. Bu, page1.html?utm_content=123 ve page1.html?utm_content=456 yöntemlerinin sunucudan aynı sayfayı sunacağı 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, bir sunucunun, yayınlanan kaynakta bir farka yol açmayan parametreleri belirtmesine ve böylece tarayıcının, dokümanın yalnızca bu parametrelerle farklılık gösteren önceden ö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) önceden getirme gezinme tahminleri için desteklenmektedir.

Spekülasyon kuralları, No-Vary-Search HTTP üst bilgisinin nerede döndürülmesi gerektiğ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çerikleri, ürün verilerini id arama parametresiyle getirmek için JavaScript'in kullanılmasıyla istemci tarafında oluşturulmasına bağlı olarak farklılık gösterir. Bu URL'yi etraflıca önceden getiririz ve sayfanın herhangi bir id arama parametresi için kullanılabileceğini gösteren bir No-Vary-Search HTTP üst bilgisi döndürmesi gerekir.

Ancak, kullanıcı önceden getirme tamamlanmadan 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çermediğini bilemez. Ardından tarayıcıya, bağlantıyı tekrar getirme veya No-Vary-Search HTTP üst bilgisi içerip içermediğini görmek için önceden getirme işleminin tamamlanmasını bekleme seçeneği sunulur. expects_no_vary_search ayarı, tarayıcının, sayfa yanıtının No-Vary-Search HTTP üstbilgisi 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 bir demo oluşturduk. Bu demo, moderate isteklilik ayarı etkinken doküman kurallarını görmek için kullanılabilir:

Spekülasyon kuralları demosu

DevTools'u açıp Uygulama panelini tıklayın. Ardından, Arka plan hizmetleri bölümünde, Tahmine dayalı yüklemeler'i ve ardından Tahminler bölmesini tıklayıp Durum sütununa göre sıralayın.

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

Geliştirici Araçları'nı kullanarak tahmin kurallarında hata ayıklama hakkında daha fazla bilgi edinmek için önceki spekülasyon kurallarıyla ilgili hata ayıklama konulu blog yayınına da göz atabilirsiniz.

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

Spekülasyon kurallarının, kuralları bir <script type="speculationrules"> öğesine ekleyerek uygulanması nispeten kolay olsa da platform desteği bu işlemi tek tıklamayla yapabilir. Tahmin kurallarını kullanıma sunmayı kolaylaştırmak için çeşitli platformlar ve iş ortaklarıyla birlikte çalışıyoruz.

Ayrıca, diğer tarayıcıların da tercih etmeleri halinde bu heyecan verici API'yi uygulayabilmeleri için Web Incubator Community Group (WICG) (Web Incubator Topluluk Grubu) aracılığıyla API'yi standart hale getirmek amacıyla yoğun bir çalışma yürütüyoruz.

WordPress

WordPress Core Performance ekibi (Google'daki geliştiriciler de dahil), Speculation Rules eklentisi oluşturdu. Bu eklenti, herhangi bir WordPress sitesine tek tıklamayla belge kuralları desteğini kolayca eklemenize olanak tanır. Bu eklenti, WordPress Performance Lab eklentisi üzerinden de yüklenebilir. Bu eklenti, ekibin ilgili performans eklentilerini takip etmenizi sağlar.

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

WordPress Speculation Rules eklentisi

Daha karmaşık kurulumlar için (örneğin, belirli URL'lerin önceden getirilmesini veya önceden oluşturulmasını engellemek üzere) dokümanları okuyun.

Akamai

Akamai, dünyanın önde gelen CDN sağlayıcılarından biridir ve bir süredir Speculation Rules API ile ilgili aktif olarak bir süredir denemeler yapmaktadır. Akamai, müşterilerin CDN ayarlarında bu API'yi nasıl etkinleştirebilecekleriyle ilgili belgeler yayınladı. Bu yeni API ile elde edilebilecek etkileyici sonuçları da daha önce paylaşmıştılar.

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, bağlantıların üzerine gelmeye kıyasla bekleme süresini artırırken, gözlemlenen tüm bağlantılar üzerinde gereksiz yere yorum yapmaya gerek kalmaz. Daha fazla bilgi için Nitropack Speculation Rules API dokümanlarına bakın. Bu yenilikçi çözüm, siteye özel analizlerle birlikte kullanıldığında eski liste kurallarının halen sunabileceği pek çok şey olduğunu gösteriyor.

Chrome ekibi ayrıca, daha fazla bilgi edinmek isteyenlere yönelik Speculation Rules API için bir web seminerinde NitroPack ile birlikte çalıştı. Bu seminerde, erken ve sık, geç ve daha seyrek spekülasyon yapmak arasındaki dikkat edilmesi gereken noktalar üzerine iyi bir tartışma da bulunuyordu.

Astro

Astro, deneysel olarak 4.2 sürümündeki Speculation Rules API'yi kullanan önceden oluşturma sayfalarını ekledi. Böylece, Astro kullanan geliştiricilerin bu özelliği kolayca etkinleştirmelerine olanak tanırken, Speculation Rules API'yi desteklemeyen tarayıcılar için standart bir önceden getirme işlemine geri dönüyorlardı. Daha fazla bilgi için müşteri önceden oluşturma dokümanlarını okuyun.

Sonuç

Spekülasyon Kuralları API'sine yapılan bu eklemeler, siteler için bu heyecan verici yeni performans özelliğinin çok daha basit bir şekilde kullanılmasını sağlıyor ve kullanılmayan spekülasyonlarla kaynakların boşa harcanma riskini azaltıyor. Platformların bu API'ye yöneldiğini görmek heyecan verici. 2024'te bu API'nin daha geniş bir kullanıcı kitlesine ulaşmasını ve sonuç olarak son kullanıcılara daha iyi performans sunmayı umuyoruz.

Speculation Rules API'nin sağladığı performans kazanımlarına ek olarak, bunun ne gibi yeni fırsatlar doğuracağını görmek için sabırsızlanıyoruz. View Transitions, 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ı Uygulamalar (SPA'lar) için kullanılabilir, ancak çok sayfalı sürüm de geliştirilmektedir (ve Chrome'da bir bayrakla kullanıma sunulacaktır). Önceden oluşturma, gecikme olmamasını sağlayan doğal bir eklentidir. Aksi takdirde, geçişin sağlamayı amaçladığı kullanıcı deneyimi iyileştirmesini engelleyebilir. Daha önce bu kombinasyonla denemeler yapan siteler gördük.

Speculation Rules API'nin 2024 boyunca daha da benimsenmesini bekliyor ve API'de yaptığımız diğer iyileştirmeler hakkında sizi bilgilendireceğiz.

Teşekkür

Robbie Down'ın Unsplash'teki küçük resmi