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>
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 andaimmediate
ayarıyla aynı şekilde davranmaktadır, ancak gelecekte bunuimmediate
ilemoderate
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ğundapointerdown
etkinliğinde vehover
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.
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) |
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"
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:
![Meyvelerle etiketlenmiş bir dizi bağlantının listelendiği, kusurla oluşturulmuş bir demo sitenin ekran görüntüsü. Geliştirici Araçları açık ve bağlantılardan ikisinin (apple.html ve orange.html) başarıyla önceden işlenmiş olduğunu gösteriyor.](https://developer.chrome.google.cn/static/blog/speculation-rules-improvements/images/speculation-rules-demo.png?authuser=5&hl=tr)
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ı:
![Spekülasyon Kuralları ayarlarının bulunduğu WordPress Ayarları Okuma panelinin ekran görüntüsü. İki seçenek vardır: Önceden Getirme veya Önceden Oluşturma seçeneği sunan Spekülasyon Modu ve Konservatif, Orta veya Eager ayarlarıyla Eagerness ayarı.](https://developer.chrome.google.cn/static/blog/speculation-rules-improvements/images/wordpress-speculation-rules.png?authuser=5&hl=tr)
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