Tarayıcı Desteği
- 109
- 109
- x
- x
Chrome ekibi, kullanıcıların gitme ihtimali yüksek olan gelecekteki sayfaların tamamen önceden oluşturulmasını sağladı.
Önceden işlemenin kısa geçmişi
Geçmişte Chrome, <link rel="prerender" href="/next-page">
kaynak ipucunu destekliyordu. Ancak bu ipucu, Chrome dışında yaygın olarak desteklenmiyordu. İpucu, son derece etkileyici bir API de değildi.
rel=prerender
bağlantısı ipucunu kullanan bu eski önceden işleme, NoState Önceden Getirme'nin yerini alarak kullanımdan kaldırılmıştır. Bunun yerine gelecekteki sayfanın ihtiyaç duyduğu kaynaklar getirmiş ancak sayfayı tamamen önceden oluşturmamış veya JavaScript'i yürütmemiştir. NoState Önceden Getirme, kaynak yüklemeyi iyileştirerek sayfa performansını iyileştirmeye yardımcı olur, ancak tam bir önceden işlemenin aksine anında sayfa yükleme sağlamaz.
Chrome ekibi şimdi de Chrome'da tam önceden işlemeyi yeniden tanıttı. Mevcut kullanımla ilgili sorunları önlemek ve önceden işlemenin ileride genişletilmesine olanak tanımak için bu yeni önceden işleme mekanizması, NoState Önceden Getirme için kullanımda kalan <link rel="prerender"...>
söz dizimini kullanmaz ve bu söz dizimini gelecekte kullanımdan kaldıracağımızı öngörür.
Bir sayfa nasıl önceden oluşturulur?
Bir sayfa, gezinmeyi daha hızlı hale getirmeyi amaçlayan dört yöntemden biriyle önceden oluşturulabilir:
- Chrome adres çubuğuna ("çok amaçlı adres çubuğu" olarak da bilinir) bir URL yazdığınızda, Chrome, önceki tarama geçmişinize dayanarak sayfayı ziyaret edeceğinize güveniyorsa sayfayı sizin için otomatik olarak önceden oluşturabilir.
- Yer işaretleri çubuğunu kullandığınızda Chrome, işaretçiyi yer işareti düğmelerinden birinin üzerinde tutarak sayfayı sizin için otomatik olarak önceden oluşturabilir.
- Chrome adres çubuğuna bir arama terimi yazdığınızda, arama motoru tarafından talimat verildiğinde Chrome, arama sonuçları sayfasını otomatik olarak önceden oluşturabilir.
- Siteler, Chrome'a hangi sayfaların önceden işleneceğini programatik olarak bildirmek için Speculation Rules API'yi kullanabilir. Bu,
<link rel="prerender"...>
ürününün daha önce yaptığı işlemin yerini alır ve sitelerin sayfadaki spekülasyon kurallarına göre sayfayı proaktif bir şekilde önceden işlemesine olanak tanır. Bunlar sayfalarda statik olarak bulunabilir veya sayfa sahibinin uygun gördüğü şekilde JavaScript tarafından dinamik bir şekilde eklenebilir.
Bu durumların her birinde, önceden işleme, sayfa görünmez bir arka plan sekmesinde açılmış gibi davranır ve ardından, ön plan sekmesinin önceden işlenmiş sayfayla değiştirilmesiyle "etkinleştirilir". Bir sayfa tamamen önceden işlenmeden önce etkinleştirilirse mevcut durumu "ön planlı" olur ve yüklenmeye devam eder. Bu, yine de iyi bir başlangıç yapabileceğiniz anlamına gelir.
Önceden işlenmiş sayfa gizli bir durumda açıldığından, araya giren davranışlara neden olan bazı API'ler (ör. istemler) bu durumda etkinleştirilmez ve sayfa etkinleştirilene kadar ertelenir. Bunun henüz mümkün olmadığı birkaç durumda önceden işleme iptal edilir. Chrome ekibi, önceden işleme iptal nedenlerini API olarak gösterme ve bu tür uç durumları daha kolay tanımlamak amacıyla Geliştirici Araçları özelliklerini geliştirme üzerinde çalışıyor.
Önceden işlemenin etkisi
Önceden işleme, aşağıdaki videoda gösterildiği gibi sayfanın neredeyse anında yüklenmesini sağlar:
Örnek site zaten hızlı bir sitedir, ancak bununla bile önceden işlemenin kullanıcı deneyimini nasıl iyileştirdiğini görebilirsiniz. Bu nedenle bu, neredeyse sıfır LCP, azaltılmış CLS (tüm yük CLS'si ilk görünümden önce gerçekleştiği için) ve iyileştirilmiş INP (yükleme kullanıcı etkileşimde bulunmadan önce tamamlanması gerektiği için) ile sitenin Core Web Vitals'ı da doğrudan etkileyebilir.
Bir sayfa tam olarak yüklenmeden etkinleştirilse bile, sayfanın yüklenmeye başlamasına yardımcı olmak yükleme deneyimini iyileştirebilir. Önceden işleme devam ederken bir bağlantı etkinleştirildiğinde önceden işleme sayfası ana çerçeveye taşınır ve yüklenmeye devam eder.
Ancak önceden işleme, ek bellek ve ağ bant genişliği kullanır. Kullanıcı kaynağı pahasına, videoyu gereğinden fazla önceden oluşturmamaya dikkat edin. Yalnızca sayfanın gitme olasılığı yüksek olduğunda önceden işleme.
Analizlerinizdeki gerçek performans etkisini ölçme hakkında daha fazla bilgi için Performansı ölçme bölümüne bakın.
Chrome'un adres çubuğu tahminlerini görüntüleme
İlk kullanım alanında, Chrome'un URL'lerle ilgili tahminlerini chrome://predictors
sayfasında görüntüleyebilirsiniz:
![Chrome Tahmin Araçları sayfası, girilen metne göre düşük (gri), orta (amber) ve yüksek (yeşil) tahminleri gösterecek şekilde filtrelendi.](https://developer.chrome.google.cn/static/docs/web-platform/prerender-pages/image/screenshot-the-chrome-pr-ec7e1506f8378.png?authuser=5&hl=tr)
Yeşil çizgiler, önceden işlemeyi tetiklemek için yeterli güveni gösterir. Bu örnekte "s" yazmak makul bir güvenir (amber), ancak "sh" yazdığınızda Chrome, neredeyse her zaman https://sheets.google.com
uygulamasına gitmenizi sağlayacak kadar güvene sahip olur.
Bu ekran görüntüsü, görece yeni bir Chrome yüklemesinde alınmış ve sıfır güven tahminleri filtrelenerek alınmıştır. Ancak kendi tahmincilerinizi görüntülerseniz muhtemelen çok daha fazla giriş görürsünüz ve yeterince yüksek bir güven düzeyine ulaşmak için daha fazla karaktere ihtiyaç duyabilirsiniz.
Bu göstergeler ayrıca, adres çubuğunda önerilen seçeneklerde olup olmadığını fark etmiş olabilirsiniz.
![Chrome adres çubuğu "Typeahead" (İleride) özelliği](https://developer.chrome.google.cn/static/docs/web-platform/prerender-pages/image/screenshot-the-address-b-7938093dbbc3c.png?authuser=5&hl=tr)
Chrome, yazdıklarınıza ve seçimlerinize göre tahmin araçlarını sürekli olarak günceller.
- Chrome, %50'den yüksek bir güven düzeyi için (kehribar rengiyle gösterilir) alana proaktif bir şekilde önceden bağlanır, ancak sayfayı önceden oluşturmaz.
- Chrome, %80'den yüksek bir güven düzeyi için (yeşil renkte gösterilmiş) URL'yi önceden işler.
Speculation Rules API
Speculation Rules API önceden işleme seçeneği için web geliştiricileri, tarayıcıya hangi URL'lerin önceden işleneceği hakkında bilgi vermek amacıyla sayfalarına JSON talimatlarını ekleyebilir:
<script type="speculationrules">
{
"prerender": [
{
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Alternatif olarak, href
seçicilere (URL Pattern API'ye göre) veya CSS seçicilere göre dokümanda bulunan bağlantıları önceden işleyen doküman kurallarını (Chrome 121'den kullanılabilir) kullanabilirsiniz:
<script type="speculationrules">
{
"prerender": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": {"href_matches": "/wp-admin"}},
{ "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
{ "not": {"selector_matches": ".do-not-prerender"}},
{ "not": {"selector_matches": "[rel~=nofollow]"}}
]
}
}]
}
</script>
Chrome ekibi bir siteye Spekülasyon Kuralları ekleme konusunda size yol gösterecek bir Spekülasyon Kuralları Codelab'i hazırladı.
İsteklilik
Tarayıcı Desteği
- 121
- 121
- x
- x
Tahminlerin ne zaman etkinleşeceğini belirtmek için eagerness
ayarı kullanılır. Bu, özellikle doküman kuralları için kullanışlıdır:
immediate
: Bu özellik, en kısa sürede, yani spekülasyon kuralları gözlemlenir olmaz spekülasyon yapmak için kullanılır.eager
: Bu,immediate
ayarıyla aynı şekilde davranır ancak gelecekte bunuimmediate
ilemoderate
arasında bir yere yerleştirmek istiyoruz.moderate
: Bu işlem, işaretçiyi bir bağlantı üzerinde 200 milisaniye boyunca (veya daha kısa bir süre önceysepointerdown
etkinliğinin üzerinde vehover
etkinliği olmayan mobil cihazlarda) tutmanız halinde tahminler gerçekleştirir.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. Basit ve statik bir 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, tahmin kurallarının temel ancak ancak güçlü bir uygulaması olarak işaretçiyi bağlantının üzerinde 200 milisaniye boyunca veya işaretçi etkinliği üzerinde tutarken bir bağlantıyı önceden işleyen aşağıdaki tahmin kuralından yararlanabilir:
<script type="speculationrules">
{
"prerender": [{
"where": {
"href_matches": "/*"
},
"eagerness": "moderate"
}]
}
</script>
Önceden getirme
Spekülasyon kuralları, tam bir önceden işleme olmadan yalnızca sayfaları önceden getirmek için de kullanılabilir. Bu, genellikle önceden işleme yolunda iyi bir ilk adım olabilir:
<script type="speculationrules">
{
"prefetch": [
{
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Chrome sınırlamaları
Chrome'da, Speculation Rules API'nin aşırı kullanımını engellemek için bazı sınırlamalar vardır:
isteklilik | Önceden getirme | Ö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 Gelen, İlk Çıkış (FIFO) yöntemiyle çalışır: Sınıra ulaşıldıktan sonra, yeni bir spekülasyon, bellekten korumak için en eski spekülasyonun iptal edilmesine ve yenisiyle değiştirilmesine neden olur. İptal edilen bir spekülasyon tekrar tetiklenebilir (örneğin fareyle bağlantının üzerine tekrar getirildiğinde). Bu durumda URL yeniden tahmin edilir ve en eski spekülasyon ortaya çıkar. Bu durumda, önceki spekülasyon, söz konusu URL için HTTP Önbelleğindeki önbelleğe alınabilir tüm kaynakları önbelleğe almış olur; bu nedenle, daha ileri bir zamana yönelik spekülasyon yapmanın maliyeti daha düşük olacaktır. Bu nedenle sınır, 2 olan küçük eşik olarak belirlenmiştir. Statik liste kuralları, kullanıcı işlemi tarafından tetiklenmez ve bu nedenle, tarayıcının hangi kuralların ne zaman gerekli olduğunu bilmesi mümkün olmadığından daha yüksek bir sınıra sahiptir.
immediate
ve eager
sınırları da dinamiktir. Bu nedenle, list
URL komut dosyası öğesini kaldırmak, kaldırılan bu tahminleri iptal ederek kapasite oluşturur.
Chrome, aşağıdakiler de dahil olmak üzere belirli durumlarda spekülasyonların kullanılmasını da engeller:
- Kaydet'i seçin.
- Etkinleştirildiğinde ve pil seviyesi düşük olduğunda Enerji tasarrufu.
- Bellek kısıtlamaları.
- "Sayfaları önceden yükle" ayarı kapatıldığında (bu ayar, uBlock Origin gibi Chrome uzantıları tarafından da açıkça kapatılır).
- Arka plan sekmelerinde açılan sayfalar.
Chrome ayrıca, etkinleştirme tarihine kadar önceden oluşturulmuş sayfalardaki çapraz kaynak iframe'leri oluşturmaz.
Tüm bu koşulların amacı, kullanıcılar için zararlı olduğu durumlarda aşırı spekülasyonların etkisini azaltmaktır.
Sayfaya tahmin kuralları ekleme
Spekülasyon kuralları, sayfanın HTML'sine statik olarak veya JavaScript tarafından sayfaya dinamik olarak eklenebilir:
- Statik olarak dahil edilen spekülasyon kuralları: Örneğin, bir haber medyası sitesi veya bir blog, en yeni makaleyi önceden oluşturabilir (kullanıcıların büyük bir çoğunluğu için sonraki gezinme bölümüyse). Alternatif olarak, kullanıcıların bağlantılarla etkileşim kurma şekli hakkında tahminde bulunmak için
moderate
veyaconservative
içeren doküman kuralları kullanılabilir. - Dinamik olarak eklenen tahmin kuralları: Bu, uygulama mantığına, kullanıcıya göre kişiselleştirilmiş veya başka buluşsal yöntemlere dayalı olabilir.
Fareyle bir bağlantının üzerine gelme veya bağlantıyı tıklama gibi işlemleri temel alan dinamik eklemeyi tercih edenlere (daha önce birçok kitaplığın <link rel=prefetch>
ile yaptığı gibi) doküman kurallarına bakmaları önerilir. Bu kurallar, tarayıcının kullanım alanlarınızın çoğunu yönetmesine olanak tanır.
Spekülasyon kuralları, ana çerçevedeki <head>
veya <body>
içine eklenebilir. Alt çerçevelerdeki spekülasyon kurallarına göre işlem yapılmaz ve önceden işlenmiş sayfalardaki spekülasyon kuralları yalnızca sayfa etkinleştirildikten sonra uygulanır.
Speculation-Rules
HTTP üstbilgisi
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'sine göre olur. Bu, özellikle aynı kaynak bağlantılarından bazılarını veya tümünü seçmeniz gerekiyorsa yararlı olabilir.
Spekülasyon kuralları ve SPA'lar
Spekülasyon kuralları yalnızca tarayıcı tarafından yönetilen tam sayfa gezinmeleri için desteklenir, Tek Sayfalık Uygulamalar (SPA) veya uygulama kabuğu sayfaları için desteklenmez. Bu mimari, belge getirme işlemlerini kullanmaz. Bunun yerine, verilerin veya sayfaların API ya da kısmi getirmelerini yapar ve bunlar daha sonra geçerli sayfada işlenip sunulur. "Esnek gezinmeler" olarak adlandırılan bunlar için gereken veriler, spekülasyon kuralları dışında uygulama tarafından önceden getirilebilir ancak önceden işlenemez.
Spekülasyon Kuralları, uygulamanın kendisini önceki bir sayfadan önceden işlemek için kullanılabilir. Bu, bazı SPA'ların sahip olduğu ekstra başlangıç yükleme maliyetlerinin bir kısmını dengelemeye yardımcı olabilir. Ancak uygulama içindeki rota değişiklikleri önceden işlenemez.
Hata ayıklama spekülasyon kuralları
Bu yeni API'yi görüntülemeye ve hata ayıklamaya yardımcı olacak yeni Chrome Geliştirici Araçları özellikleri için hata ayıklama spekülasyon kurallarıyla ilgili özel gönderi bölümüne bakın.
Birden çok tahmin kuralı
Aynı sayfaya birden çok tahmin kuralı da eklenebilir ve bunlar mevcut kurallara eklenir. Bu nedenle, aşağıdaki farklı yolların tümü hem one.html
hem de two.html
önceden işlemeyle sonuçlanır:
URL listesi:
<script type="speculationrules">
{
"prerender": [
{
"urls": ["one.html", "two.html"]
}
]
}
</script>
Birden çok speculationrules
komut dosyası:
<script type="speculationrules">
{
"prerender": [
{
"urls": ["one.html"]
}
]
}
</script>
<script type="speculationrules">
{
"prerender": [
{
"urls": ["two.html"]
}
]
}
</script>
Tek bir speculationrules
kümesinde birden fazla liste
<script type="speculationrules">
{
"prerender": [
{
"urls": ["one.html"]
},
{
"urls": ["two.html"]
}
]
}
</script>
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
ürününün 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, bir sunucunun, yayınlanan kaynakta bir farkla sonuçlanmayan parametreler belirtmesine ve böylece 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. Bu özellik, Chrome'da (ve Chromium tabanlı tarayıcılarda) önceden getirme gezinme spekülasyonları için desteklenir (ancak bunu önceden işleme için de desteklemek istiyoruz).
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.
Spekülasyon kuralı kısıtlamaları ve gelecekteki geliştirmeler
Spekülasyon kuralları, aynı sekmede açılan sayfalarla sınırlıdır ancak bu kısıtlamayı azaltmak için çalışmalarımız devam etmektedir.
Varsayılan olarak spekülasyonlar aynı kaynak sayfalarla sınırlıdır. Aynı sitenin çapraz kaynak sayfalarının spekülasyonu (örneğin, https://a.example.com
, https://b.example.com
sitesindeki bir sayfayı önceden oluşturabilir). Bunu kullanmak için tahmin edilen sayfanın (bu örnekte https://b.example.com
) Supports-Loading-Mode: credentialed-prerender
HTTP başlığı ekleyerek etkinleştirmesi gerekir. Aksi takdirde Chrome spekülasyonu iptal eder.
Önceden işlenmiş sayfa için çerezler bulunmadığı ve önceden işlenmiş sayfa benzer bir Supports-Loading-Mode: uncredentialed-prerender
HTTP başlığıyla etkinleştirildiği sürece, gelecekteki sürümler, aynı siteye ait olmayan, kaynaklar arası sayfaların önceden oluşturulmasına da izin verebilir.
Spekülasyon kuralları, kaynaklar arası önceden getirme işlemlerini zaten desteklemektedir. Ancak bu durum, yalnızca kaynaklar arası alan için çerezler bulunmadığında yapılır. Daha önce siteyi ziyaret eden kullanıcıya ait çerezler mevcutsa tahmin tetiklenmez ve Geliştirici Araçları'nda bir hata gösterilir.
Bu mevcut sınırlamalar göz önünde bulundurulduğunda, mümkün olduğunda hem dahili bağlantılar hem de harici bağlantılar için kullanıcılarınızın deneyimini iyileştirebilecek bir kalıp, aynı kaynak URL'leri önceden oluşturmak ve çapraz kaynak URL'leri önceden getirmeye çalışmaktır:
<script type="speculationrules">
{
"prerender": [
{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}
],
"prefetch": [
{
"where": { "not": { "href_matches": "/*" } },
"eagerness": "moderate"
}
]
}
</script>
Kaynaklar arası bağlantılara yönelik kaynaklar arası spekülasyonların varsayılan olarak önlenmesine yönelik kısıtlama, güvenlik açısından zorunludur. Bu, aynı zamanda çerez göndermeyen ancak yine de önceden getirme girişiminde bulunan kaynaklar arası hedefler için <link rel="prefetch">
üzerindeki bir iyileştirmedir. Bu durum, ya yeniden gönderilmesi gereken önceden boşa alınmış bir önceden getirme işlemine ya da daha da kötüsü, sayfanın yanlış yüklenmesine neden olur.
Spekülasyon kuralları, hizmet çalışanları tarafından kontrol edilen sayfalar için önceden getirme için desteklenmez. Bu desteği eklemek için çalışıyoruz. Güncellemeler için bu destek hizmeti çalışanı sorununu inceleyin. Önceden işleme, hizmet çalışanı tarafından kontrol edilen sayfalarda desteklenir.
Detect Speculation Rules API desteği
Spekülasyon Kuralları API'si desteğini standart HTML kontrolleriyle algılama özelliğini kullanabilirsiniz:
if (HTMLScriptElement.supports && HTMLScriptElement.supports('speculationrules')) {
console.log('Your browser supports the Speculation Rules API.');
}
Tahmin kurallarını JavaScript aracılığıyla dinamik olarak ekleme
Burada, JavaScript ile prerender
tahmin kuralının eklendiği bir örnek gösterilmektedir:
if (HTMLScriptElement.supports &&
HTMLScriptElement.supports('speculationrules')) {
const specScript = document.createElement('script');
specScript.type = 'speculationrules';
specRules = {
prerender: [
{
urls: ['/next.html'],
},
],
};
specScript.textContent = JSON.stringify(specRules);
console.log('added speculation rules to: next.html');
document.body.append(specScript);
}
Bu önceden işleme demo sayfasında, JavaScript ekleme özelliğini kullanarak Spekülasyon Kuralları API'sinin önceden işlemesinin bir demosunu görüntüleyebilirsiniz.
innerHTML
kullanarak doğrudan DOM'ye bir <script type = "speculationrules">
öğesi eklendiğinde, güvenlik nedeniyle tahmin kuralları kaydedilmez ve bu, daha önce gösterildiği gibi eklenmelidir. Bununla birlikte, yeni bağlantılar içeren innerHTML
kullanılarak dinamik olarak eklenen içerik, sayfadaki mevcut kurallar tarafından alınır.
Benzer şekilde, <script type = "speculationrules">
öğesini eklemek üzere Chrome Geliştirici Araçları'nda Öğeler panelinin doğrudan düzenlenmesi, tahmin kurallarını kaydetmez. Bunun yerine, kuralların eklenmesi için bunu DOM'ye dinamik olarak ekleyecek komut dosyasının konsoldan çalıştırılması gerekir.
Etiket yöneticisi aracılığıyla tahmin kuralları ekleme
Google Etiket Yöneticisi (GTM) gibi bir etiket yöneticisi kullanarak spekülasyon kuralları eklemek için, <script type = "speculationrules">
öğesini doğrudan GTM aracılığıyla eklemek yerine daha önce belirtildiği gibi bu kuralların JavaScript üzerinden eklenmesi gerekir:
![Google Etiket Yöneticisi'nde özel HTML etiketi yapılandırması](https://developer.chrome.google.cn/static/docs/web-platform/prerender-pages/image/adding-speculation-rules-via-gtm.png?authuser=5&hl=tr)
GTM const
desteklemediğinden bu örneğin var
kullandığını unutmayın.
Tahmin kurallarını iptal et
Spekülasyon kurallarının kaldırılması, önceden işlemenin iptal edilmesine neden olur. Ancak bu gerçekleşene kadar kaynaklar, önceden işlemeyi başlatmak için zaten harcanmış olacaktır. Bu nedenle, önceden işlemeyi iptal etme olasılığı varsa önceden işlemenin yapılmaması önerilir.
Spekülasyon kuralları ve İçerik Güvenliği Politikası
Spekülasyon kuralları bir <script>
öğesi kullandığından, yalnızca JSON içerseler de sitede karma veya tek seferlik rastgele sayı kullanılarak bu öğelerin script-src
İçerik Güvenliği Politikası'na eklenmesi gerekir.
script-src
öğesine yeni bir inline-speculation-rules
eklenebilir. Bu sayede, karma veya değiştirilmemiş komut dosyalarından yerleştirilen <script type="speculationrules">
öğelerinin desteklenmesi sağlanır. Bu, ilk HTML'de yer alan kuralları desteklemez. Bu nedenle, katı bir CSP kullanan siteler için kuralların JavaScript tarafından yerleştirilmesi gerekir.
Önceden işlemeyi algılama ve devre dışı bırakma
Önceden oluşturma, sayfaların hızlı şekilde (çoğunlukla anında) oluşturulmasına olanak tanıdığından genellikle kullanıcılar için olumlu bir deneyimdir. Önceden oluşturulmuş sayfalar başka şekilde başarılması zor olabilecek daha iyi bir kullanıcı deneyimine olanak tanıdığından bu hem kullanıcı hem de site sahibi için yararlıdır.
Bununla birlikte, sayfaların önceden oluşturulmasını istemediğiniz durumlara örnek olarak verilebilir. Örneğin, ilk isteğe veya sayfada JavaScript'in yürütülmesine bağlı olarak sayfaların durumu değişebilir.
Chrome'da önceden oluşturmayı etkinleştirme ve devre dışı bırakma
Önceden oluşturma, yalnızca chrome://settings/performance/
içindeki "Sayfaları önceden yükle" ayarını kullanan Chrome kullanıcıları için etkinleştirilir. Ayrıca, düşük bellekli cihazlarda veya işletim sistemi Veri Tasarrufu ya da Enerji Tasarrufu modlarındaysa önceden işleme de devre dışı bırakılır. Chrome sınırlamaları bölümünü inceleyin.
Sunucu tarafında önceden işlemeyi algılama ve devre dışı bırakma
Önceden oluşturulmuş sayfalar, Sec-Purpose
HTTP başlığıyla gönderilir:
Sec-Purpose: prefetch;prerender
Spekülasyon Kuralları API'si kullanılarak önceden getirilen sayfalarda bu başlık yalnızca prefetch
olarak ayarlanır:
Sec-Purpose: prefetch
Sunucular spekülasyon isteklerini günlüğe kaydetmek, farklı içerik döndürmek veya önceden işlemenin gerçekleşmesini engellemek için bu başlığa göre yanıt verebilir. Başarısız olan bir yanıt kodu döndürülürse (yani, 200 veya 304 değilse) sayfa önceden işlenmez ve önceden getirme sayfaları silinir.
Belirli bir sayfanın önceden oluşturulmasını istemiyorsanız bunun gerçekleşmediğinden emin olmanın en iyi yolu budur. Bununla birlikte, en iyi deneyimi sunmak için bunun yerine önceden işlemeye izin vermeniz, ancak JavaScript kullanarak yalnızca sayfanın gerçekten görüntülenmesinden sonra gerçekleşmesi gereken işlemleri geciktirmeniz önerilir.
JavaScript'te önceden işlemeyi algılama
Sayfa önceden işlenirken document.prerendering
API'si true
değerini döndürür. Bu özellik, sayfalar tarafından önceden işleme sırasında sayfa gerçekten etkinleştirilene kadar belirli etkinlikleri önlemek veya geciktirmek için kullanılabilir.
Önceden işlenmiş bir belge etkinleştirildikten sonra, PerformanceNavigationTiming
activationStart
değeri de önceden işlemenin başlatıldığı zaman ile dokümanın gerçekten etkinleştirildiği zaman arasındaki süreyi temsil eden sıfır olmayan bir zamana ayarlanır.
Aşağıdaki gibi önceden oluşturma ve önceden işlenmiş sayfaları kontrol edecek bir işleviniz olabilir:
function pagePrerendered() {
return (
document.prerendering ||
self.performance?.getEntriesByType?.('navigation')[0]?.activationStart > 0
);
}
Bir sayfanın önceden oluşturulup oluşturulmadığını (tamamen veya kısmen) görmenin en kolay yolu, sayfa etkinleştirildikten sonra Geliştirici Araçları'nı açmak ve konsola performance.getEntriesByType('navigation')[0].activationStart
yazmaktır. Sıfır olmayan bir değer döndürülürse sayfanın önceden işlendiğini bilirsiniz:
![Chrome Geliştirici Araçları'nda, sayfanın önceden işlendiğini gösteren pozitif bir aktivasyon başlatan konsol](https://developer.chrome.google.cn/static/docs/web-platform/prerender-pages/image/console-chrome-devtools-7d567e77e3ca6.png?authuser=5&hl=tr)
Sayfa, sayfayı görüntüleyen kullanıcı tarafından etkinleştirildiğinde prerenderingchange
etkinliği document
cihazına gönderilir. Bu etkinlik daha sonra sayfa yüklendiğinde varsayılan olarak başlatılan ancak sayfa kullanıcı tarafından gerçekten görüntülenene kadar ertelemek istediğiniz etkinlikleri etkinleştirmek için kullanılabilir.
Bu API'leri kullanarak ön uç JavaScript'i, önceden işlenmiş sayfaları uygun şekilde algılayıp bunlarla ilgili işlem yapabilir.
Analiz üzerindeki etkisi
Analytics, web sitesi kullanımını ölçmek için kullanılır. Örneğin, sayfa görüntülemelerini ve etkinlikleri ölçmek için Google Analytics kullanılabilir. Alternatif olarak, Gerçek Kullanıcı İzleme (RUM) kullanarak sayfaların performans metriklerini ölçebilirsiniz.
Sayfalar yalnızca, sayfanın kullanıcı tarafından yüklenme olasılığı yüksek olduğunda önceden işlenmelidir. Chrome adres çubuğu önceden oluşturma seçeneklerinin yalnızca bu kadar yüksek bir olasılık (%80'den fazla) olduğunda ortaya çıkmasının nedeni budur.
Bununla birlikte, özellikle Speculation Rules API, kullanılırken önceden oluşturulmuş sayfalar Analytics'i etkileyebilir ve tüm analiz sağlayıcıları bunu varsayılan olarak yapmayabileceğinden, site sahiplerinin yalnızca önceden oluşturulmuş sayfalara yönelik analizleri etkinleştirmek için ekstra kod eklemesi gerekebilir.
Bu, bir belge önceden işleniyorsa prerenderingchange
etkinliğini bekleyen bir Promise
kullanılarak veya şu anda aşağıdaki durumlarda hemen çözümlenerek gerçekleştirilebilir:
// Set up a promise for when the page is activated,
// which is needed for prerendered pages.
const whenActivated = new Promise((resolve) => {
if (document.prerendering) {
document.addEventListener('prerenderingchange', resolve, {once: true});
} else {
resolve();
}
});
async function initAnalytics() {
await whenActivated;
// Initialise your analytics
}
initAnalytics();
Alternatif bir yaklaşım, analiz etkinliklerini sayfa ilk kez görünür hale gelene kadar ertelemektir. Bu, hem önceden işleme durumunu hem de sekmeler arka planda açıldığında (örneğin, sağ tıklayıp yeni sekmede açıldığında) kapsar:
// Set up a promise for when the page is first made visible
const whenFirstVisible = new Promise((resolve) => {
if (document.hidden) {
document.addEventListener('visibilitychange', resolve, {once: true});
} else {
resolve();
}
});
async function initAnalytics() {
await whenFirstVisible;
// Initialise your analytics
}
initAnalytics();
Bu, analizler ve benzer kullanım alanları için mantıklı olabilir ancak diğer durumlarda bu durumlar için daha fazla içeriğin yüklenmesini isteyebilirsiniz. Bu nedenle, özellikle önceden oluşturma sayfalarını hedeflemek için document.prerendering
ve prerenderingchange
öğelerini kullanmak isteyebilirsiniz.
Önceden işleme sırasında diğer içerikleri beklet
Daha önce bahsettiğimiz API'ler, ön işleme aşamasında diğer içerikleri engellemek için kullanılabilir. Bu, önceden işleme aşamasında çalıştırmamayı tercih edeceğiniz JavaScript'in belirli kısımları veya tam komut dosyası öğeleri olabilir.
Örneğin, verilen komut dosyası şu şekildedir:
<script src="https://example.com/app/script.js" async></script>
Bunu, yalnızca önceki whenActivated
işlevine göre eklenen, dinamik olarak eklenen bir komut dosyası öğesiyle değiştirebilirsiniz:
async function addScript(scriptUrl) {
await whenActivated;
const script = document.createElement('script');
script.src = 'scriptUrl';
document.body.appendChild(script);
}
addScript('https://example.com/app/script.js');
Bu, analizler içeren farklı komut dosyalarını tutmak veya bir ziyaretin süresi boyunca değişebilecek duruma ya da diğer değişkenlere dayalı olarak içerik oluşturmak için yararlı olabilir. Örneğin, en güncel bilgilerin sunulması için öneriler, giriş durumu veya alışveriş sepeti simgelerinin tümü kısıtlanabilir.
Bu durumun önceden işleme kullanıldığında daha sık gerçekleşmesi olası olsa da bu koşullar daha önce bahsedilen arka plan sekmelerinde yüklenen sayfalar için de geçerlidir (bu nedenle, whenActivated
yerine whenFirstVisible
işlevi kullanılabilir).
Çoğu durumda, ideal olarak durum genel visibilitychange
değişiklikleriyle de kontrol edilmelidir. Örneğin, arka planda olan bir sayfaya döndüğünüzde, tüm alışveriş sepeti sayaçları sepetteki en son öğe sayısıyla güncellenmelidir. Yani, bu önceden işlemeye özgü bir sorun değildir ancak önceden işleme, yalnızca mevcut bir sorunu daha açık hale getirir.
Chrome'un komut dosyalarını veya işlevlerini manuel olarak sarmalama ihtiyacının bir kısmını azaltmanın bir yolu, belirli API'lerin daha önce belirtildiği gibi bekletilmesi ve üçüncü taraf iframe'lerin oluşturulmamasıdır. Bu nedenle, manuel olarak kaldırılması gereken tek içeriktir.
Performansı ölçün
Analizler, performans metriklerini ölçmek için bu metriklerin tarayıcı API'lerinin rapor edeceği sayfa yükleme süresi yerine etkinleştirme süresine göre mi ölçüleceğini dikkate almalıdır.
Chrome tarafından Chrome User Experience Report aracılığıyla ölçülen Core Web Vitals değerleri, kullanıcı deneyimini ölçmeyi amaçlar. Bunlar, etkinleştirme süresine göre ölçülür. Örneğin, bu işlem genellikle 0 saniyelik LCP gerektirir. Core Web Vitals'ı iyileştirmek için çok iyi bir yöntem budur.
3.1.0 sürümünden itibaren web-vitals
kitaplığı, önceden işlenmiş gezinmeleri Chrome'un Core Web Vitals'ı ölçtüğü gibi işleyecek şekilde güncellendi. Bu sürüm, sayfa tamamen veya kısmen önceden işlenmişse Metric.navigationType
özelliğindeki metrikler için önceden işlenmiş gezinmeleri de işaretler.
Önceden işlemeleri ölçme
Bir sayfanın önceden işlenip oluşturulmadığı, PerformanceNavigationTiming
değerindeki sıfır olmayan bir activationStart
girişiyle görülebilir. Bu değer, daha sonra daha önce açıklanan pagePrerendered
işlevi kullanılarak sayfa görüntülemeleri günlüğe kaydedilirken Özel Boyut ya da benzer bir yöntemle günlüğe kaydedilebilir:
// Set Custom Dimension for Prerender status
gtag('set', { 'dimension1': pagePrerendered() });
// Initialise GA - including sending page view by default
gtag('config', 'G-12345678-1');
Bu, analizlerinizin diğer gezinme türlerine kıyasla kaç tane gezinmenin önceden işlendiğini göstermesine ve herhangi bir performans metriğini veya işletme metriğini bu farklı gezinme türleriyle ilişkilendirmenize olanak tanır. Daha hızlı sayfalar, daha mutlu kullanıcılar anlamına gelir. Bu da örnek olaylarda gösterildiği gibi, genellikle işletme ölçümleri üzerinde gerçekten gerçek etkileri olabilir.
Anında gezinmeler için sayfaları önceden oluşturmanın işe olan etkisini ölçerken daha fazla gezinmenin önceden işlenmesini sağlamak için bu teknolojiyi kullanmaya daha fazla zaman ayırmanın veya sayfaların neden önceden oluşturulmadığını araştırmanın gerekip gerekmediğine karar verebilirsiniz.
İsabet oranlarını ölçün
Önceden oluşturma işleminden sonra ziyaret edilen sayfaların etkisini ölçmenin yanı sıra, önceden işlenen ve daha sonra ziyaret edilmeyen sayfaların ölçülmesi de önemlidir. Bu durum, çok fazla önceden işleme uyguladığınız ve kullanıcının değerli kaynaklarını çok az fayda sağladığı için kullandığınız anlamına gelebilir.
Bu, spekülasyon kuralları eklendiğinde bir Analytics etkinliği tetiklenerek ölçülebilir (tarayıcının, önceden işlemenin istendiğini belirtmek için HTMLScriptElement.supports('speculationrules')
kullanılarak önceden işlemeyi desteklediği kontrol edildikten sonra). (Daha önce de belirtildiği gibi, önceden işleme tarayıcı için bir ipucu olduğundan ve kullanıcı ayarları, geçerli bellek kullanımı veya diğer buluşsal yöntemlerde sayfaları önceden oluşturmamayı tercih edebileceğinden, bir önceden işleme isteğinde bulunulduğundan, önceden işlemenin başlatıldığını veya tamamlandığını belirtmediğini unutmayın.)
Daha sonra bu etkinliklerin sayısını, önceden oluşturulmuş gerçek sayfa görüntülemeleriyle karşılaştırabilirsiniz. Alternatif olarak, karşılaştırmayı kolaylaştırmak için etkinleştirme sırasında başka bir etkinlik tetikleyebilirsiniz.
Daha sonra, "başarılı isabet oranı" bu iki sayı arasındaki farka bakılarak tahmin edilebilir. Sayfaları önceden işlemek için Speculation Rules API'yi kullandığınız sayfalarda, kuralları uygun şekilde ayarlayarak, kullanıcılara yardımcı olacak kullanıcı kaynaklarını kullanma ile gereksiz kullanma arasındaki dengeyi koruyabilirsiniz.
Bazı önceden işlemelerin, yalnızca tahmin kurallarınızdan değil, adres çubuğunun önceden işlemesi nedeniyle gerçekleşebileceğini unutmayın. Bunları ayırt etmek isterseniz document.referrer
öğesini (önceden işlenmiş adres çubuğu gezinmeleri dahil olmak üzere adres çubuğunda gezinme için boş olan) işaretleyebilirsiniz.
Önceden işleme içermeyen sayfalara da göz atmayı unutmayın. Bu durum, bu sayfaların adres çubuğundan bile önceden işleme için uygun olmadığını gösterebilir. Bu durum, söz konusu performans artışından yararlanamadığınız anlamına gelebilir. Chrome ekibi, önceden işleme uygunluğunu test etmek için ek araçlar (örneğin, bfcache test aracına benzer) ve bir önceden işlemenin neden başarısız olduğunu ortaya koyacak bir API de eklemek istiyor.
Uzantılar üzerindeki etkisi
Uzantı yazarlarının önceden oluşturulmuş sayfalar için göz önünde bulundurması gereken bazı ek hususların ayrıntılı olarak açıklandığı Chrome Extensions: Extending API to Time Instant Navigation başlıklı özel yayına bakın.
Geri bildirim
Önceden işleme, Chrome ekibi tarafından aktif bir geliştirme aşamasındadır ve Chrome 108 sürümünde kullanıma sunulanların kapsamını genişletmeye yönelik birçok plan bulunmaktadır. GitHub deposu veya sorun izleyicimizin kullanımıyla ilgili geri bildirimlerinizi bekliyoruz. Heyecan verici bu yeni API ile ilgili örnek olayları dinlemek ve paylaşmak için sabırsızlanıyoruz.
İlgili bağlantılar
- Spekülasyon Kuralları Codelab'i
- Spekülasyon kurallarında hata ayıklama
- NoState Önceden Getirme ile Tanışın
- Speculation Rules API spesifikasyonu
- Gezinme spekülasyon GitHub deposu
- Chrome Uzantıları: API'yi Anında Gezinmeyi destekleyecek şekilde genişletme
Teşekkür
Marc-Olivier Jodoin tarafından Unsplash'teki küçük resim