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

Barry Pollard

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.

rel=prerender bağlantısı ipucunu kullanan bu eski önceden işleme, NoState Önceden Getirme'nin yerini alarak kullanımdan kaldırıldı. Bunun yerine gelecekteki sayfanın ihtiyaç duyduğu kaynaklar getirildi ancak sayfayı tamamen önceden oluşturmadı veya JavaScript'i yürütmedi. 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 komplikasyonları önlemek ve ön oluşturmanın gelecekte genişletilmesine olanak tanımak için bu yeni ön oluşturma mekanizmasında <link rel="prerender"...> söz dizimi kullanılmayacaktır. NoState ön getirme için bu söz dizimi gelecekte kullanımdan kaldırılacaktı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 dayanarak söz konusu 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 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 olarak yerleştirilebilir.

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ığı az sayıda durumda ön oluşturma iptal edilir. Chrome ekibi, ön oluşturma iptal nedenlerini API olarak göstermek ve bu tür uç durumların tespitini kolaylaştırmak için DevTools özelliklerini geliştirmek üzere ç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 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 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 önceden işleme, 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 nasıl ölçeceğiniz 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 alınmış ve sıfır güven tahmini 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 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.

• 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.
• Güven düzeyi% 80'den yüksekse (yeşil renkle gösterilir) Chrome, URL'yi önceden oluşturur.

Spekülasyon Kuralları API'si

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: 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ğinin olmadığı mobil cihazlarda) tutarak tahminler gerçekleştirir.
• conservative: İşaretçi veya dokunma işlemiyle ilgili tahminler içerir.

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. 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ü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, Spekülasyon Kuralları API'sinin aşırı kullanımını önlemek için sınırlamalar vardır:

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 tasarruf etmek için en eski spekülasyonun iptal edilmesine ve yenisiyle değiştirilmesine neden olur. İptal edilen bir tahmin, örneğin fareyle bağlantının üzerine gelerek tekrar tetiklenebilir. Bu durumda, söz konusu URL için yeniden tahmin yapılır ve en eski tahmin silinir. 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 olan küçük eşik olarak belirlenmiştir. 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.
• Etkinleştirildiğinde ve pil seviyesi düşük olduğunda Enerji tasarrufu.
• Bellek kısıtlamaları.
• "Sayfaları önceden yükle" ayarı devre dışı bırakıldığında (uBlock Origin gibi Chrome uzantıları tarafından da açıkça devre dışı bırakılır).
• Arka plan sekmelerinde açılan sayfalar.

Chrome, etkinleştirilene kadar önceden oluşturulmuş sayfalarda çapraz kaynaklı iFrame'leri de oluşturmaz.

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

Spekülasyon kurallarını bir sayfaya ekleme

Spekülasyon kuralları, sayfanın HTML'sine statik olarak dahil edilebilir 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 tahmin kuralları işleme alınmaz ve önceden oluşturulmuş sayfalardaki tahmin kuralları yalnızca ilgili sayfa etkinleştirildikten sonra işleme alını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, CDN'ler tarafından belge içeriklerinde değişiklik yapmadan 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 spekülasyon kuralları JSON dosyasının URL'sine göre olur. Bu, özellikle aynı kaynaktaki bağlantıların bazılarını veya tümünü seçmeniz gerektiğinde 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 ek ilk yükleme maliyetlerinin bir kısmını telafi etmeye 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ına neden olmaz. 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 önerisi, sunucunun, yayınlanan kaynakta bir farka neden olmayan parametreleri belirtmesine ve dolayısıyla tarayıcının, bir belgenin yalnızca bu parametrelerle farklı olan daha önce önbelleğe alınmış sürümlerini yeniden kullanmasına olanak tanır. 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 üstbilgisinin nerede döndürüleceğini belirtmek için expects_no_vary_search kullanımı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. Bu nedenle, bu URL'yi istekli olarak önceden getiririz ve sayfanın herhangi bir id arama parametresi için kullanılabileceğini gösteren bir No-Vary-Search HTTP başlığı döndürmelidir.

Ancak kullanıcı, ön getirme işlemi tamamlanmadan bağlantılardan herhangi birini tıklarsa tarayıcı /products sayfasını almayabilir. 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 No-Vary-Search HTTP başlığı içermesi gerektiğini bilmesine ve bu ön getirme işleminin tamamlanmasını beklemesine olanak tanır.

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

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>

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. Kaynaklar arası hedefler için <link rel="prefetch">'e kıyasla bir iyileştirmedir. Bu yöntemde de çerez gönderilmez ancak ön getirme denemesi yapılır. Bu da ya yeniden gönderilmesi gereken boşa harcanan bir ön getirme işlemine ya da daha da kötüsü yanlış sayfa 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 hizmet çalışanı sorunu sayfasını takip edin. Önceden işleme, hizmet çalışanı tarafından kontrol edilen sayfalarda desteklenir.

Spekülasyon Kuralları API'si desteğini algılama

Standart HTML kontrolleriyle Spekülasyon Kuralları API desteğini algılayabilirsiniz:

if (HTMLScriptElement.supports && HTMLScriptElement.supports('speculationrules')) {
  console.log('Your browser supports the Speculation Rules API.');
}

Spekülasyon 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 kullanarak doğrudan DOM'ye bir <script type = "speculationrules"> öğesi eklendiğinde, güvenlik nedeniyle tahmin kuralları kaydedilmez. Bu, 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 tahmin 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.

Spekülasyon kurallarını iptal etme

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ı 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'ye dahil edilen kuralları desteklemez. Bu nedenle, katı CSP kullanan siteler için kuralların JavaScript tarafından eklenmesi gerekir.

Önceden oluşturmayı 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 bazen sayfaların önceden oluşturulmasını istemediğiniz durumlar olabilir. Örneğin, ilk isteğe veya sayfada JavaScript'in yürütülmesine bağlı olarak sayfaların durumu değiştiğ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 önceden işlemenin gerçekleşmesini engellemek 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 ön oluşturma için de geçerli olmadığını ancak ön 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 işlendiğini bilirsiniz:

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 ön uç JavaScript'i, önceden işlenmiş sayfaları uygun şekilde algılayıp bunlarla ilgili 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. Bu nedenle, Chrome adres çubuğu ön oluşturma seçenekleri yalnızca bu kadar yüksek bir olasılık olduğunda (zaman içinde% 80'den fazla) gerçekleşir.

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 doküman ön oluşturma işlemindeyse prerenderingchange etkinliğini bekleyen veya şu anda oluşturma işleminde değilse hemen çözen bir Promise kullanılarak yapılabilir:

// 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ı olsa da bazı durumlarda bu alanlar için daha fazla içerik yüklenmesini isteyebilirsiniz. Bu nedenle, ön oluşturma sayfalarını özel olarak hedeflemek için document.prerendering ve prerenderingchange öğelerini kullanabilirsiniz.

Önceden oluşturma sırasında diğer içerikleri bekletme

Önceden bahsedilen API'ler, ön oluşturma aşamasında diğer içerikleri bekletmek 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, şu komut dosyası:

<script src="https://example.com/app/script.js" async></script>

Bunu, yalnızca önceki whenActivated işlevine göre ekleme yapan 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ını sağlamak için öneriler, giriş durumu veya alışveriş sepeti simgelerinin tümü engellenebilir.

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 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. Örneğin, bu işlem genellikle 0 saniyelik LCP gerektirir. Core Web Vitals'ı iyileştirmek için çok iyi bir yöntemdir.

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 işlemeleri ö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 değer, daha sonra daha önce açıklanan pagePrerendered işlevi kullanılarak sayfa görüntülemelerinin kaydı sırasında Özel Boyut ya da benzer bir boyut 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 olaylarımızda gösterildiği gibi, işletme ölçümleri üzerinde gerçek bir etki yaratabilir.

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çü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, ç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, ön oluşturma isteğinin gönderildiğini belirtmek için spekülasyon kuralları eklendiğinde (HTMLScriptElement.supports('speculationrules') kullanılarak tarayıcıda ön oluşturmanın desteklendiği kontrol edildikten sonra) bir analiz etkinliği tetiklenerek ölçülebilir. (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.)

Ardından bu etkinliklerin sayısını gerçek ön oluşturma 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 Spekülasyon Kuralları API'yi kullandığınız sayfalarda, kullanıcılara yardımcı olmak için kullanıcı kaynaklarını kullanma ile gereksiz yere kullanma arasındaki dengeyi korumak amacıyla yüksek bir isabet oranı elde etmek için kuralları uygun şekilde ayarlayabilirsiniz.

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ılara 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 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şletmek için pek çok plan bulunmaktadır. 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