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

Chrome ekibi, kullanıcının gitme olasılığı yüksek olan gelecekteki sayfaların tam ön oluşturma özelliğini geri getirdi.

Önceden oluşturmanın kısa bir geçmişi

Chrome geçmişte <link rel="prerender" href="/next-page"> kaynak ipucunu desteklemesine rağmen bu özellik Chrome dışında yaygın olarak desteklenmemiştir ve çok etkileyici bir API değildir.

Bağlantı rel=prerender ipucunu kullanan bu eski ön oluşturma özelliğinin desteği sonlandırıldı ve bunun yerine gelecekteki sayfanın ihtiyaç duyduğu kaynakları getiren ancak sayfayı tamamen önceden oluşturmayan veya JavaScript'i yürütmeyen NoState Prefetch özelliği kullanıma sunuldu. NoState ön getirme, kaynak yüklemeyi iyileştirerek sayfa performansını artırmaya yardımcı olur ancak tam ön oluşturma gibi anında sayfa yüklemesi sağlamaz.

Chrome ekibi, tam ön oluşturmayı Chrome'a geri getirdi. 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.

Sayfalar nasıl önceden oluşturulur?

Bir sayfa, gezinmeyi hızlandırmayı 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 göre bu sayfayı ziyaret edeceğiniz konusunda yüksek güvene sahipse 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 tuttuğunuzda sayfayı sizin için otomatik olarak önceden oluşturabilir.
3. Chrome adres çubuğuna bir arama terimi yazdığınızda Chrome, arama motoru tarafından talimat verildiğinde 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"...>'ün eski işlevinin yerini alır ve sitelerin sayfadaki spekülasyon kurallarına göre sayfayı proaktif olarak önceden oluşturmasına 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 oluşturulmuş sayfa, sayfa görünmez bir arka plan sekmesinde açılmış gibi davranır ve ardından ön plan sekmesi bu önceden oluşturulmuş sayfayla değiştirilerek "etkinleştirilir". Bir sayfa tamamen önceden işlenmeden önce etkinleştirilirse mevcut durumu "ön planlı" olur ve yüklenmeye devam eder. Bu, iyi bir başlangıç yapabileceğiniz anlamına gelir.

Önceden oluşturulmuş sayfa gizli durumda açıldığından rahatsız edici 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 oluşturma, aşağıdaki videoda gösterildiği gibi sayfanın anında yüklenmesine olanak tanır:

Örnek site zaten hızlı bir sitedir ancak buna rağmen ön oluşturmanın kullanıcı deneyimini nasıl iyileştirdiğini görebilirsiniz. Bu nedenle, sıfıra yakın LCP, azaltılmış CLS (herhangi bir yükleme CLS'si ilk görüntülemeden önce gerçekleştiği için) ve iyileştirilmiş INP (yükleme, kullanıcı etkileşime geçmeden önce tamamlanması gerektiği için) ile sitenin Önemli Web Verileri'ni de doğrudan etkileyebilir.

Bir sayfa tamamen yüklenmeden önce etkinleştirilse bile sayfa yükleme işlemine erken başlamak, yükleme deneyimini iyileştirecektir. Önceden oluşturma işlemi devam ederken bir bağlantı etkinleştirildiğinde, önceden oluşturma sayfası ana çerçeveye taşınır ve yüklemeye devam eder.

Ancak ön oluşturma, ek bellek ve ağ bant genişliği kullanır. Kullanıcı kaynaklarını tüketecek şekilde fazla ön oluşturmamaya dikkat edin. Yalnızca sayfaya gitme olasılığı yüksek olduğunda önceden oluşturma.

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, ön oluşturmayı tetikleyecek kadar güven olduğunu gösterir. Bu örnekte "s" yazıldığında makul bir güven düzeyi (amber) elde edilir. Ancak "sh" yazıldığında Chrome, neredeyse her zaman https://sheets.google.com adresine gideceğinize dair yeterli güvene sahip olur.

Bu ekran görüntüsü, nispeten yeni bir Chrome yüklemesinde ve sıfır güven tahminleri filtrelenerek alınmıştır. Ancak kendi tahminlerinizi 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 karakter gerekebilir.

Bu tahminler, fark etmiş olabileceğiniz adres çubuğu önerilen seçeneklerini de yönlendirir:

Chrome, tahmin araçlarını yazdıklarınıza ve seçimlerinize göre sürekli olarak günceller.

• %50'den yüksek güven düzeyi (amber renkle gösterilir) için Chrome, alana proaktif olarak ö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

Spekülasyon Kuralları API ön oluşturma seçeneği için web geliştiricileri, tarayıcıyı hangi URL'lerin önceden oluşturulacağı konusunda bilgilendirmek üzere sayfalarına JSON talimatları ekleyebilir:

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

Alternatif olarak, href seçicilere (URL Pattern API'ye dayalı) veya CSS seçicilere göre belgedeki bağlantıları önceden oluşturan belge kuralları (Chrome 121'den itibaren kullanılabilir) tarafından da oluşturulabilir:

<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ı.

Heves

Spekülasyonların ne zaman tetiklenmesi gerektiğini belirtmek için bir eagerness ayarı kullanılır. Bu ayar özellikle belge kuralları için kullanışlıdır:

• immediate: Bu, spekülasyonu en kısa sürede, yani spekülasyon kuralları gözlemlenir gözlemlenmez yapmak için kullanılır.
• eager: Bu ayar, immediate ayarıyla aynı şekilde çalışır ancak gelecekte bu ayarı immediate ile moderate arasında bir yere yerleştirmeyi planlıyoruz.
• moderate: İşaretçiyi bir bağlantının üzerinde 200 milisaniye boyunca tutarsanız (veya daha erken gerçekleşirse pointerdown etkinliğinde ve hover etkinliğinin olmadığı mobil cihazlarda) bu işlem tahminler gerçekleştirir.
• conservative: Bu, işaretçi veya dokunmayla ilgili tahminde bulunur.

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

document kuralları için varsayılan eagerness değeri conservative'dir. Bir doküman birçok URL'den oluşabileceğinden, document kuralları için immediate veya eager kullanımı dikkatli bir şekilde yapılmalıdır (Ayrıca sonraki Chrome sınırları bölümüne bakın).

Kullanılacak eagerness ayarı sitenize bağlıdır. Hafif ve statik bir site için daha hevesli bir şekilde tahminde bulunmak çok maliyetli olmayabilir ve kullanıcılar için yararlı olabilir. Daha karmaşık mimarilere ve daha ağır sayfa yükü boyutlarına sahip siteler, kullanıcılardan israfı sınırlamayla ilgili daha olumlu bir sinyal alana kadar daha az spekülasyon yaparak israfı azaltmayı tercih edebilir.

moderate seçeneği orta bir yoldur. Birçok site, tahmin kurallarının temel ancak güçlü bir uygulaması olarak işaretçiyi bağlantının üzerinde 200 milisaniye boyunca tuttuğunda veya pointerdown etkinliğinde bir bağlantıyı önceden oluşturacak aşağıdaki tahmin kuralından yararlanabilir:

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

Önceden getirme

Tahmin kuralları, tam bir ön oluşturma işlemi yapmadan sayfaları yalnızca önceden getirmek için de kullanılabilir. Bu, ön oluşturma yolunda genellikle iyi bir ilk adım olabilir:

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

Chrome sınırları

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şturma
immediate/eager	50	10
moderate/conservative	2 (FIFO)	2 (FIFO)

Kullanıcı etkileşimine bağlı olan moderate ve conservative ayarları ilk giren ilk çıkar (FIFO) yöntemiyle çalışır: Sınıra ulaşıldığında yeni bir spekülasyon, en eski spekülasyonun iptal edilmesine ve bellek tasarrufu sağlamak için yeni spekülasyonla 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 tahmin, önbelleğe alınabilir tüm kaynakları ilgili URL'nin HTTP önbelleğine önbelleğe aldığından, daha fazla tahminde bulunmak daha düşük maliyetli olacaktır. Bu nedenle sınır, 2'nin mütevazı eşiğine ayarlanmıştır. Statik liste kuralları bir kullanıcı işlemi tarafından tetiklenmez. Bu nedenle, tarayıcı hangilerinin gerekli olduğunu ve ne zaman gerekli olduğunu bilmediği için daha yüksek bir sınıra sahiptir.

immediate ve eager sınırları da dinamiktir. Bu nedenle, bir list URL komut dosyası öğesi kaldırıldığında, kaldırılan spekülasyonlar iptal edilerek kapasite oluşturulur.

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

• Veri Tasarrufu'nu seçin.
• Enerji Tasarrufu etkinken ve pil seviyesi düşükken.
• 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, etkinleştirilene kadar önceden oluşturulmuş sayfalarda çapraz kaynaklı iFrame'leri de 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.

Spekülasyon kurallarını bir sayfaya ekleme

Spekülasyon kuralları, sayfanın HTML'sine statik olarak veya JavaScript tarafından sayfaya dinamik olarak eklenebilir:

• Statik olarak dahil edilen tahmin kuralları: Örneğin, bir haber medya sitesi veya blog, kullanıcıların büyük bir kısmı için genellikle bir sonraki gezinme öğesi olan en yeni makaleyi önceden oluşturabilir. Alternatif olarak, kullanıcılar bağlantılarla etkileşim kurarken tahminde bulunmak için moderate veya conservative içeren doküman kuralları kullanılabilir.
• Dinamik olarak eklenen spekülasyon kuralları: Bu kurallar, uygulama mantığına dayalı, kullanıcıya göre kişiselleştirilmiş veya diğer sezgisel kurallara dayalı olabilir.

Fareyle üzerine gelme veya bir bağlantıyı tıklama gibi işlemlere dayalı dinamik eklemeyi tercih edenlerin (birçok kitaplığın geçmişte <link rel=prefetch> ile yaptığı gibi) belge kurallarına bakması önerilir. Bu kurallar, tarayıcının kullanım alanlarınızın çoğunu işlemesine olanak tanır.

Spekülasyon kuralları, ana çerçevenin <head> veya <body> bölümüne 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 dahil edilmek yerine Speculation-Rules HTTP üst bilgisi kullanılarak da yayınlanabilir. 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 başlığı, belgeyle birlikte döndürülür ve spekülasyon kurallarını içeren bir JSON dosyasının konumunu gösterir:

Speculation-Rules: "/speculationrules.json"

Bu kaynak doğru MIME türünü kullanmalı ve kaynak farklıysa CORS kontrolünü 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ı ekleyebilirsiniz. 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 gezinmelerinde desteklenir. Tek sayfalık uygulamalar (SPA'lar) veya uygulama kabuğu sayfalarında desteklenmez. Bu mimarilerde belge getirme işlemi kullanılmaz. Bunun yerine, veriler veya sayfalar için API veya kısmi getirme işlemi yapılır. Bu veriler veya sayfalar daha sonra işlenip mevcut sayfada sunulur. "Yumuşak gezinmeler" olarak adlandırılan bu işlemler için gereken veriler, uygulama tarafından tahmin kuralları dışında önceden getirilebilir ancak önceden oluşturulamaz.

Tahmin Kuralları, uygulamanın kendisini önceki bir sayfadan önceden oluşturmak 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.

Spekülasyon kurallarında hata ayıklama

Bu yeni API'yi görüntülemenize ve hata ayıklamanıza yardımcı olacak yeni Chrome DevTools özellikleri için tahmin kurallarıyla ilgili hata ayıklamayla ilgili özel yayına göz atın.

Birden fazla spekülasyon kuralı

Aynı sayfaya birden fazla spekülasyon kuralı da eklenebilir. Bu kurallar, mevcut kurallara eklenir. Bu nedenle, aşağıdaki farklı yöntemlerin tümü hem one.html hem de two.html ön oluşturma işlemiyle sonuçlanır:

URL listesi:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["one.html", "two.html"]
    }
  ]
}
</script>

Birden fazla 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 getirme veya önceden oluşturma işlemi sırasında, belirli URL parametreleri (teknik olarak arama parametreleri olarak bilinir) sunucu tarafından aslında yayınlanan sayfa için önemsiz olabilir ve yalnızca istemci tarafı JavaScript tarafından kullanılabilir.

Ö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'ün sunucudan aynı sayfayı yayınlayacağı anlamına gelir. Böylece aynı sayfa önbellekten yeniden kullanılabilir.

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 önizleme gezinme spekülasyonları için desteklenir (ön oluşturma için de bu özelliği desteklemeyi planlıyoruz).

Spekülasyon kuralları, No-Vary-Search HTTP başlığının nerede döndürülmesinin beklendiğ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ı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 bilgisinin bulunup bulunmadığını bilemez. Ardından tarayıcı, bağlantıyı tekrar getirip getirmeme veya No-Vary-Search HTTP üstbilgisi içerip içermediğini görmek için ön getirme işleminin tamamlanmasını bekleme seçeneğiyle karşı karşıya kalır. 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 kuralları 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ı sitedeki farklı kaynaklı sayfaların tahmini (örneğin, https://a.example.com, https://b.example.com'daki bir sayfayı önceden oluşturabilir). Bunu kullanmak için tahmin edilen sayfanın (bu örnekte https://b.example.com) bir Supports-Loading-Mode: credentialed-prerender HTTP üst bilgisi ekleyerek etkinleştirilmesi gerekir. Aksi takdirde Chrome, tahmini iptal eder.

Gelecekteki sürümlerde, önceden oluşturulmuş sayfa için çerez olmadığı ve önceden oluşturulmuş sayfa benzer bir Supports-Loading-Mode: uncredentialed-prerender HTTP başlığıyla etkinleştirildiği sürece aynı sitede olmayan, kaynakta çapraz sayfalar için önceden oluşturmaya da izin verilebilir.

Spekülasyon kuralları, kaynakta çapraz ön getirmeyi zaten desteklemektedir ancak yine yalnızca kaynakta çapraz alan adı çerezleri olmadığında. Kullanıcının daha önce bu siteyi ziyaret ettiği çerezler varsa spekülasyon tetiklenmez ve DevTools'ta bir hata gösterilir.

Mevcut sınırlamalar göz önüne alındığında, mümkün olduğunda hem dahili hem de harici bağlantılar için kullanıcılarınızın deneyimini iyileştirebilecek bir yöntem, 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>

Varsayılan olarak çapraz kaynak bağlantıları için çapraz kaynak spekülasyonlarını önlemek üzere uygulanan kısıtlama, güvenlik için gereklidir. 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 işçileri tarafından kontrol edilen sayfaların ön beslemesi için desteklenmez. Bu desteği eklemek için çalışıyoruz. Güncellemeler için bu Destek hizmet çalışanı sorunu sayfasını takip edin. Önceden oluşturma, 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

Aşağıda, JavaScript ile prerender spekülasyon kuralı ekleme örneği verilmiştir:

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);
}

JavaScript ekleme özelliğini kullanarak Speculation Rules API önceden oluşturma özelliğinin bir demosunu bu önceden oluşturma demo sayfasında görüntüleyebilirsiniz.

innerHTML öğesi, innerHTML kullanılarak doğrudan DOM'a eklenirse spekülasyon kuralları güvenlik nedeniyle kaydedilmez ve daha önce gösterildiği gibi eklenmelidir. Ancak yeni bağlantılar içeren innerHTML kullanılarak dinamik olarak eklenen içerikler, sayfadaki mevcut kurallar tarafından alınır.

Benzer şekilde, Chrome Geliştirici Araçları'ndaki Öğeler panelini doğrudan düzenleyerek <script type = "speculationrules"> öğesini eklemek spekülasyon kurallarını kaydetmez. Bunun yerine, kuralları eklemek için bu öğeyi DOM'a dinamik olarak ekleyen komut dosyasının Console'dan çalıştırılması gerekir.

Etiket yöneticisi aracılığıyla spekülasyon kuralları ekleme

Google Etiket Yöneticisi (GTM) gibi bir etiket yöneticisi kullanarak spekülasyon kuralları eklemek için, daha önce belirtilen nedenlerle <script type = "speculationrules"> öğesini doğrudan GTM üzerinden eklemek yerine JavaScript üzerinden eklemeniz gerekir:

GTM, const'yi desteklemediğinden bu örnekte var kullanıldığını unutmayın.

Tahmin kurallarını iptal et

Spekülasyon kurallarının kaldırılması, ön oluşturmanın iptal edilmesine neden olur ancak bu işlem gerçekleştiği zaman, ön oluşturmayı başlatmak için kaynaklar büyük olasılıkla zaten harcanmıştır. Bu nedenle, ön oluşturmayı iptal etmeniz gerekme olasılığı varsa ön oluşturma yapmamanız önerilir.

Spekülasyon kuralları ve İçerik Güvenliği Politikası

Spekülasyon kuralları yalnızca JSON içermesine rağmen bir <script> öğesi kullandığından, sitede kullanılıyorsa script-src Content-Security-Policy'ye (hash veya tek seferlik sayı kullanılarak) dahil edilmelidir.

script-src öğesine yeni bir inline-speculation-rules eklenebilir. Bu, karma oluşturma veya tek seferlik komut dosyalarından eklenen <script type="speculationrules"> öğelerinin desteklenmesine olanak tanır. Bu, ilk HTML'ye dahil edilen kuralları desteklemez. Bu nedenle, katı CSP kullanan siteler için kuralların JavaScript tarafından eklenmesi gerekir.

Önceden işlemeyi algılama ve devre dışı bırakma

Hızlı sayfa oluşturmaya (genellikle anında) olanak tanıdığı için ön oluşturma genellikle kullanıcılar için olumlu bir deneyimdir. Önceden oluşturulmuş sayfalar, aksi takdirde elde edilmesi zor olabilecek daha iyi bir kullanıcı deneyimi sağladığından bu durum hem kullanıcıya hem de site sahibine fayda sağlar.

Ancak, sayfaların önceden oluşturulmasını istemediğiniz durumlar olabilir. Örneğin, sayfalar ilk isteğe veya sayfadaki JavaScript'in yürütülmesine göre durum değiştirdiğinde.

Chrome'da ön oluşturmayı etkinleştirme ve devre dışı bırakma

Önceden oluşturma yalnızca chrome://settings/performance/'te "Sayfaları önceden yükle" ayarını etkinleştirmiş Chrome kullanıcıları için etkindir. Ayrıca, önceden oluşturma özelliği, belleği düşük cihazlarda veya işletim sistemi Veri Tasarrufu ya da Enerji Tasarrufu modlarındaysa da devre dışı bırakılır. Chrome sınırları bölümüne bakın.

Sunucu tarafında ön oluşturmayı algılama ve devre dışı bırakma

Önceden oluşturulmuş sayfalar Sec-Purpose HTTP başlığıyla gönderilir:

Sec-Purpose: prefetch;prerender

Speculation Rules API kullanılarak önceden getirilen sayfalarda bu üstbilgi yalnızca prefetch olarak ayarlanır:

Sec-Purpose: prefetch

Sunucular, spekülasyon isteklerini günlüğe kaydetmek, farklı içerik döndürmek veya ön oluşturma işlemini önlemek için bu başlığa göre yanıt verebilir. Başarılı olmayan bir nihai yanıt kodu döndürülürse (yani yönlendirmelerden sonra 200-299 aralığında değilse) sayfa önceden oluşturulmaz ve önceden getirme sayfası atılır. Ayrıca 204 ve 205 yanıtlarının da önceden işleme için geçerli olmadığını, ancak önceden getirme için geçerli olduğunu unutmayın.

Belirli bir sayfanın önceden oluşturulmasını istemiyorsanız bunun olmaması için en iyi yöntem, 2XX olmayan bir yanıt kodu (ör. 503) döndürmektir. 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 ön oluşturmayı algılama

Sayfa ön oluşturma işlemi sırasında document.prerendering API true döndürür. Bu, sayfalar tarafından ön oluşturma sırasında belirli etkinlikleri sayfa gerçekten etkinleştirilene kadar önlemek veya geciktirmek için kullanılabilir.

Önceden işlenmiş bir doküman etkinleştirildikten sonra PerformanceNavigationTiming'nin activationStart özelliği de sıfır olmayan bir değere ayarlanır. Bu değer, önceden oluşturma işleminin başlatıldığı andan dokümanın etkinleştirildiği ana kadar geçen süreyi temsil eder.

Aşağıdaki gibi ön oluşturma ve ön oluşturulmuş sayfaları kontrol eden 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ı (tam veya kısmen) görmenin en kolay yolu, sayfa etkinleştirildikten sonra Geliştirici Araçları'nı açıp konsola performance.getEntriesByType('navigation')[0].activationStart yazmaktır. Sıfır olmayan bir değer döndürülürse sayfanın önceden oluşturulduğu anlaşılır:

Sayfa, sayfayı görüntüleyen kullanıcı tarafından etkinleştirildiğinde prerenderingchange etkinliği document'e gönderilir. Bu etkinlik daha sonra, daha önce sayfa yüklendiğinde varsayılan olarak başlatılan ancak sayfanın kullanıcı tarafından gerçekten görüntülenmesine kadar geciktirmek istediğiniz etkinlikleri etkinleştirmek için kullanılabilir.

Bu API'leri kullanarak kullanıcı arabirimi JavaScript'i, önceden oluşturulmuş sayfaları algılayabilir ve bunlara uygun şekilde işlem yapabilir.

Analizler ü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)'yi kullanarak sayfaların performans metriklerini ölçebilirsiniz.

Sayfalar yalnızca kullanıcı tarafından yüklenme olasılığı yüksek olduğunda önceden oluşturulmalıdır. 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.

Ancak, özellikle Speculation Rules API kullanılırken önceden oluşturulmuş sayfalar analizleri etkileyebilir ve tüm analiz sağlayıcılar bunu varsayılan olarak yapamayacağından, site sahiplerinin etkinleştirme sırasında yalnızca önceden oluşturulmuş sayfalar için analizleri etkinleştirmek üzere ek 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 ertelemek olabilir. Bu yaklaşım hem ön oluşturma durumunu hem de sekmelerin arka planda açılmasını (ör. sağ tıklayıp yeni sekmede açma) 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

Önceden bahsedilen API'ler, ön oluşturma aşamasında diğer içerikleri bekletmek için kullanılabilir. Bu, ön oluşturma aşamasında çalıştırmayı tercih etmeyeceğiniz JavaScript'in belirli bölümleri veya komut dosyası öğelerinin tamamı 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ı bekletmek veya içeriği duruma ya da ziyaret süresi boyunca değişebilecek diğer değişkenlere göre 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, ön oluşturma kullanılarak daha sık gerçekleşme olasılığı 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 genel visibilitychange değişikliklerinde de durum kontrol edilmelidir. Örneğin, arka planda olan bir sayfaya geri dönüldüğünde, alışveriş sepeti sayaçları sepetteki en son öğe sayısıyla güncellenmelidir. Bu nedenle, bu sorun ön oluşturmaya özgü değildir. Ön oluşturma, mevcut bir sorunu daha belirgin hale getirir.

Chrome'un komut dosyalarını veya işlevleri manuel olarak sarmalama ihtiyacının bir kısmını azaltmasının bir yolu, belirli API'lerin daha önce belirtildiği gibi engellenmesidir. Ayrıca üçüncü taraf iframe'leri oluşturulmaz. Bu nedenle, yalnızca bunun üzerindeki içeriğin manuel olarak engellenmesi gerekir.

Performansı ölçün

Performans metriklerini ölçerken analizler, bunları tarayıcı API'lerinin raporlayacağı sayfa yükleme süresi yerine etkinleşme süresine göre ölçmenin daha iyi olup olmadığını dikkate almalıdır.

Chrome Kullanıcı Deneyimi Raporu aracılığıyla Chrome tarafından ölçülen Core Web Vitals için bu metrikler, kullanıcı deneyimini ölçmek için tasarlanmıştır. Bu nedenle, bu metrikler etkinleşme süresine göre ölçülür. Bu, genellikle 0 saniyelik bir LCP ile sonuçlanır. Bu da bunun, Core Web Vitals'ı iyileştirmenin mükemmel bir yolu olduğunu gösterir.

3.1.0 sürümünden itibaren web-vitals kitaplığı, önceden oluşturulmuş gezinmeleri Chrome'un Core Web Vitals'ı ölçtüğü şekilde işlemesi için güncellendi. Bu sürüm, sayfa tamamen veya kısmen önceden oluşturulduysa Metric.navigationType özelliğindeki bu metrikler için önceden oluşturulmuş gezinmeleri de işaretler.

Önceden oluşturma işlemlerini ölçme

Bir sayfanın önceden oluşturulup oluşturulmadığı, PerformanceNavigationTiming değerinin sıfır olmayan bir activationStart girişiyle görülebilir. Bu, daha sonra bir özel boyut kullanılarak veya sayfa görüntülemelerini günlüğe kaydederken benzer bir şekilde (ör. daha önce açıklanan pagePrerendered işlevi kullanılarak) 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şletmeniz üzerindeki etkisini ölçerken, daha fazla gezinmenin önceden oluşturulmasına izin vermek amacıyla bu teknolojiyi kullanmak için daha fazla çaba harcamaya değip değmeyeceğine veya sayfaların neden önceden oluşturulmadığına karar verebilirsiniz.

İsabet oranlarını ölçme

Ön oluşturma işleminden sonra ziyaret edilen sayfaların etkisini ölçmenin yanı sıra, ön oluşturulan ve daha sonra ziyaret edilmeyen sayfaları ölçmek de önemlidir. Bu, çok fazla ön oluşturma yaptığınız ve kullanıcının değerli kaynaklarını çok az fayda için kullandığınızı gösterebilir.

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). (Önceden işleme isteğinin gönderilmesi, önceden işleme işleminin başlatıldığı veya tamamlandığı anlamına gelmez. Daha önce de belirtildiği gibi, önceden işleme işlemi tarayıcıya verilen bir ipucu niteliğindedir ve tarayıcı, kullanıcı ayarlarına, mevcut bellek kullanımına veya diğer sezgisel kurallara göre sayfaları önceden işlememeyi seçebilir.)

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ıracaksa etkinleştirme sırasında başka bir etkinlik tetikleyebilirsiniz.

Ardından, bu iki değer arasındaki farka bakılarak "başarılı isabet oranı" yaklaşık olarak hesaplanabilir. Sayfaları önceden oluşturmak 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ı ön oluşturma işlemlerinin yalnızca spekülasyon kurallarınız nedeniyle değil, adres çubuğu ön oluşturma nedeniyle de gerçekleşebileceğini unutmayın. Bunları ayırt etmek istiyorsanız document.referrer seçeneğini işaretleyebilirsiniz (önceden oluşturulmuş adres çubuğu gezinmeleri dahil olmak üzere adres çubuğu gezinmeleri için boş olur).

Adres çubuğundan bile ön oluşturmaya uygun olmadıklarını gösterebileceğinden, ön oluşturma işlemi yapılmayan sayfalara da bakmayı unutmayın. Bu durum, bu performans geliştirmesinden yararlanmadığınız anlamına gelebilir. Chrome ekibi, ön oluşturma uygunluğunu test etmek için bfcache test aracına benzer ek araçlar eklemek ve ayrıca ön oluşturmanın neden başarısız olduğunu gösteren bir API eklemek istiyor.

Uzantılar üzerindeki etkisi

Uzantı yazarlarının önceden oluşturulmuş sayfalar için dikkate alması gereken bazı ek hususların ayrıntılı olarak açıklandığı Chrome Uzantıları: Anında Gezinme'yi desteklemek için API'yi genişletme başlıklı özel yayına göz atın.

Geri bildirim

Önceden oluşturma, Chrome ekibi tarafından aktif olarak geliştirilmektedir ve Chrome 108 sürümünde kullanıma sunulan özelliklerin kapsamını genişletmek için birçok planımız var. GitHub kod deposu üzerinden veya sorun takipçimizi kullanarak vereceğiniz geri bildirimleri bekliyoruz. Bu heyecan verici yeni API ile ilgili örnek olaylarınızı 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 ön getirme özelliğini kullanıma sunuyoruz
• Speculation Rules API spesifikasyonu
• Navigational speculation GitHub repo
• Chrome Uzantıları: API'yi Anında Gezinme'yi desteklemek için genişletme

Teşekkür ederiz

Unsplash'taki Marc-Olivier Jodoin tarafından oluşturulan küçük resim