Anında sayfada gezinme için Chrome'da sayfaları önceden oluştur

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:

1. 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.
2. 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.
3. 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.
4. 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:

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, 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

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 bunu immediate ile moderate 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 önceyse pointerdown etkinliğinin üzerinde ve hover 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 veya conservative 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.

Doğrudan DOM'ye bir <script type = "speculationrules"> öğesi eklendiğinde, daha önce gösterildiği gibi eklenmesi gerektiğinden, spekülasyon kuralları kaydedilmez. Örneğin, <script type = "speculationrules"> öğesini eklemek için Chrome Geliştirici Araçları'ndaki Öğeler panelini doğrudan düzenlemek, spekülasyon kurallarını kaydetmez. Bunun yerine, bunu DOM'ye dinamik olarak ekleyecek komut dosyasının, kuralların eklenmesi için 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:

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:

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