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.

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 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 kullanılmaya devam edecek ancak gelecekte kullanımdan kaldırılacaktır.

Sayfalar nasıl önceden oluşturulur?

Bir sayfa, dört yöntemden biriyle önceden oluşturulabilir. Bu yöntemlerin tümü, gezinmeyi hızlandırmayı amaçlar:

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 oluşturulacağını programatik olarak bildirmek için Speculation Rules API'yi kullanabilir. Bu, <link rel="prerender"...>'ün eski işlevini yerine getirir 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 ön oluşturmadan önce etkinleştirilirse geçerli durumu "ön planda" olur ve yüklenmeye devam eder. Bu durumda, iyi bir başlangıç yapabilirsiniz.

Ö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 oluşturmanın 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 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 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 belirler:

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.
• 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ıya hangi URL'lerin önceden oluşturulacağı hakkında bilgi vermek ü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: İş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. 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, 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ı 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 tahmin, tekrar tetiklenebilir (ör. fareyle bağlantının üzerine gelerek). 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'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ı 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.

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

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 dahil edilmek yerine Speculation-Rules HTTP üst bilgisi kullanılarak da yayınlanabilir. 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ı bir kaynaktan geliyorsa 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ı 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 uygulamadaki rota değişiklikleri önceden oluşturulamaz.

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

Spekülasyon kuralları, bir 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çeriği, id arama parametresini kullanarak ürün verilerini almak için JavaScript'i kullanan istemci tarafı oluşturmaya göre değişir. 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ışıyoruz.

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). Bu özelliği kullanmak için tahmin edilen sayfanın (bu örnekte https://b.example.com) 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'lerini ö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 kökenli bağlantılar için çapraz köken spekülasyonlarını önlemek üzere uygulanan kısıtlama, güvenlik için gereklidir. 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 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.

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 öğesi, innerHTML kullanılarak doğrudan DOM'a eklenirse spekülasyon kuralları güvenlik nedeniyle kaydedilmez ve daha önce gösterildiği gibi eklenmelidir.<script type = "speculationrules"> 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 ekleyebilecek 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.

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ğinde, ö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'a yeni bir inline-speculation-rules eklenebilir. Bu, karma oluşturma veya tek seferlik komut dosyalarından enjekte edilen <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 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 sunar. Bu nedenle, hem kullanıcı hem de site sahibi bu durumdan yararlanır.

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, bellek miktarı 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 tüm ön getirme sayfaları 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. Ancak en iyi deneyimi sunmak için bunun yerine ön oluşturmaya izin vermeniz, ancak yalnızca sayfa gerçekten görüntülendiğinde gerçekleşmesi gereken tüm işlemleri JavaScript kullanarak ertelemeniz önerilir.

JavaScript'te ön oluşturmayı algılama

Sayfa ön oluşturma işlemi sırasında document.prerendering API true değerini döndürür. Bu, sayfalar tarafından ön oluşturma sırasında belirli etkinlikleri sayfa gerçekten etkinleştirilene kadar önlemek veya ertelemek 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'a 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 (ör. sayfa görüntülemelerini ve etkinlikleri ölçmek için Google Analytics kullanılır). 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 doküman şu anda oluşturuluyorsa 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 diğer durumlarda bu durumlar 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, ö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, ş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, ö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'ınızı 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 sayede analizleriniz, diğer gezinme türlerine kıyasla kaç gezinmenin önceden oluşturulduğunu gösterebilir ve performans metriklerini veya işletme metriklerini 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ç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, ö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. (Ö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.)

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 eklemeyi ve ayrıca ön oluşturmanın neden başarısız olduğunu gösteren bir API eklemeyi planlıyor.

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

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 deposunda veya sorun izleyicimizi 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'ta Marc-Olivier Jodoin tarafından oluşturulan küçük resim