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

Tarayıcı Desteği

  • 109
  • 109
  • x
  • x

Chrome ekibi, kullanıcının gitme olasılığı yüksek olan sayfaların tamamen önceden oluşturulmasını yeniden sağladı.

Önceden işlemenin kısa geçmişi

Geçmişte Chrome <link rel="prerender" href="/next-page"> kaynak ipucunu destekliyordu ancak bu, Chrome dışında yaygın bir şekilde desteklenmiyordu ve çok etkileyici bir API değildi.

Bağlantı rel=prerender ipucunun kullanıldığı bu eski önceden oluşturma işleminin desteği sonlandırıldı. Bunun yerine, NoState Önceden Getirme kullanıma sunuldu. Bunun yerine, gelecekteki sayfanın ihtiyaç duyduğu kaynakları getirdi, ancak sayfayı tam olarak önceden oluşturmadı ve JavaScript'i yürütmedi. NoState Önceden Getirme, kaynak yüklemesini iyileştirerek sayfa performansının iyileştirilmesine yardımcı olur ancak tam önceden oluşturmada olduğu gibi anında sayfa yükleme işlemi sağlamaz.

Chrome ekibi şimdi tam önceden oluşturma özelliğini Chrome'da yeniden kullanıma sundu. Bu yeni önceden işleme mekanizması, mevcut kullanımla ilgili sorunları önlemek ve önceden işlemenin ileride genişletilmesini sağlamak için NoState Önceden Getirme için geçerli olan <link rel="prerender"...> söz dizimini kullanmayacak ve bu söz diziminin gelecekte kullanımdan kaldırılması planlanmaktadır.

Sayfa nasıl önceden oluşturulur?

Bir sayfa, gezinmeyi hızlandırmayı amaçlayan dört yöntemden biriyle önceden işlenebilir:

  1. Chrome adres çubuğuna ("çok amaçlı adres çubuğu" olarak da bilinir) bir URL yazdığınızda, söz konusu sayfayı ziyaret edeceğiniz kesinse Chrome sizin için sayfayı 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 sizin için sayfayı otomatik olarak önceden oluşturabilir.
  3. Chrome adres çubuğuna bir arama terimi yazdığınızda, arama motoru tarafından istendiğinde Chrome, arama sonuçları sayfasını otomatik olarak önceden oluşturabilir.
  4. Siteler, Chrome'a hangi sayfaların önceden oluşturulduğunu programatik olarak bildirmek için Speculation Rules API'yi kullanabilir. Bu, <link rel="prerender"...> tarafından kullanılan eski yaklaşımın yerini almıştır ve sitelerin sayfadaki tahmin kurallarına göre bir sayfayı proaktif olarak önceden işlemesine olanak tanır. Bunlar, sayfalarda statik olarak bulunabilir veya sayfa sahibinin uygun gördüğü şekilde JavaScript tarafından dinamik bir şekilde eklenebilir.

Bu durumların her birinde bir önceden işleme, sayfa görünmez bir arka plan sekmesinde açılmış gibi davranır ve ardından ön plan sekmesinin önceden işlenmiş sayfayla değiştirilmesiyle "etkinleştirilir". Bir sayfa tam olarak önceden işlenmeden önce etkinleştirilirse, geçerli durumu "ön planda" olur ve yüklenmeye devam eder. Bu, yine de iyi bir başlangıç yapabileceğiniz anlamına gelir.

Önceden işlenmiş sayfa gizli bir durumda açıldığından, araya giren davranışlara neden olan bazı API'ler (örneğin, istemler) bu durumda etkinleştirilmez ve bunun yerine sayfa etkinleştirilene kadar ertelenir. Bunun henüz mümkün olmadığı nadir durumlarda, önceden işleme iptal edilir. Chrome ekibi, önceden oluşturma iptal nedenlerini API olarak göstermek ve bu tür uç durumların daha kolay tespit edilmesini sağlamak için Geliştirici Araçları özelliklerini geliştirmek üzerinde çalışmaktadır.

Önceden işlemenin etkisi

Önceden oluşturma, aşağıdaki videoda gösterildiği gibi sayfanın neredeyse anında yüklenmesine olanak tanır:

Önceden işlemenin örnek etkisi.

Örnek site zaten hızlı bir sitedir, ancak burada bile önceden oluşturma özelliğinin kullanıcı deneyimini nasıl iyileştirdiğini görebilirsiniz. Bu nedenle, neredeyse sıfır LCP ile, daha düşük CLS (tüm yük CLS'si ilk görüntülemeden önce gerçekleştiğinden) ve iyileştirilmiş INP ile (yüklemenin kullanıcı etkileşimde bulunmadan önce tamamlanması gerektiğinden) bu durum, sitelerin Önemli Web Verileri'ni de doğrudan etkileyebilir.

Bir sayfa tam olarak yüklenmeden etkinleşse bile, sayfanın yüklenmeye başlanması hızlı bir şekilde başlamak yükleme deneyimini iyileştirir. Önceden oluşturma devam ederken bir bağlantı etkinleştirildiğinde, önceden oluşturma sayfası ana çerçeveye taşınır ve yüklenmeye devam eder.

Ancak, önceden oluşturma ek bellek ve ağ bant genişliği kullanır. Kullanıcı kaynakları pahasına, gereğinden fazla önceden oluşturmamaya dikkat edin. Yalnızca sayfaya gidilme olasılığı yüksek olduğunda önceden oluşturur.

Analizlerinizdeki gerçek performans etkisinin nasıl ölçüleceği 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 durumunda, chrome://predictors sayfasında Chrome'un URL'lerle ilgili tahminlerini görüntüleyebilirsiniz:

Chrome Tahminleri sayfası, girilen metne dayalı olarak düşük (gri), orta (amber) ve yüksek (yeşil) tahminleri gösterecek şekilde filtrelendi.
Chrome Tahminleri sayfası.

Yeşil çizgiler, önceden işlemeyi tetiklemek için yeterli güveni gösterir. Bu örnekte "s" yazmak makul bir güven (amber) verir, ancak "sh" yazdığınızda Chrome neredeyse her zaman https://sheets.google.com konumuna gitmenize yetecek güvene sahiptir.

Bu ekran görüntüsü, nispeten yeni bir Chrome yüklemesinde alınmıştır ve sıfır güven tahmini filtrelenerek hariç tutulur. Ancak kendi tahminlerinizi görüntülerseniz muhtemelen çok daha fazla giriş ve yeterince yüksek bir güven düzeyine ulaşmak için gereken karakter sayısı görürsünüz.

Şu tahmin ediciler aynı zamanda adres çubuğunda önerilen seçenekleri de fark etmiş olabilirsiniz:

Chrome adres çubuğundaki &quot;Typeahead&quot; özelliği
Adres çubuğu "Typeahead" özelliği.

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

  • %50'nin üzerinde bir güven düzeyi (sarı renkle gösterilir) için, Chrome proaktif bir şekilde alana ö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österilir) URL'yi önceden oluşturur.

Speculation Rules API

Üçüncü önceden işleme seçeneği için web geliştiricileri, tarayıcıya hangi URL'lerin önceden oluşturulacağı konusunda bilgi vermek amacıyla sayfalarına JSON talimatları ekleyebilir:

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

Alternatif olarak, dokümanda bulunan bağlantıları href seçicilere (URL Pattern API'ye göre) veya CSS seçicilere göre önceden işleyen doküman kurallarına (Chrome 121'de kullanılabilir) göre:

<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, siteye Spekülasyon Kuralları ekleme konusunda size rehberlik edecek bir Spekülasyon Kuralları Codelab'i hazırladı.

İsteklilik

Tarayıcı Desteği

  • 121
  • 121
  • x
  • x

eagerness ayarı, tahminlerin ne zaman etkinleşeceğini belirtmek için kullanılır ve özellikle doküman kuralları için kullanışlıdır:

  • immediate: Bu özellik mümkün olan en kısa sürede, yani spekülasyon kuralları gözlemlendiği anda spekülasyon yapmak için kullanılır.
  • eager: Bu, immediate ayarıyla aynı şekilde davranır ancak gelecekte bunu immediate ile moderate arasında bir yere yerleştirmek istiyoruz.
  • moderate: Bu işlem, işaretçiyi bir bağlantı üzerinde 200 milisaniye (veya bu daha erkenyse pointerdown etkinliğinde ve hover etkinliğinin olmadığı mobil cihazlarda) tutarsanız tahmin yürütür.
  • conservative: İşaretçi veya aşağı temas üzerine spekülasyon yapar.

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

document kuralları için varsayılan eagerness değeri conservative'dir. Bir doküman çok sayıda URL içerebilir. Bu nedenle, document kuralları için immediate veya eager kullanımı dikkatli bir şekilde kullanılmalıdır (bir sonraki Chrome sınırları bölümüne de bakın).

Hangi eagerness ayarının kullanılacağı sitenize bağlıdır. Hafif ve statik bir sitede daha isteklice spekülasyon yapmak hem düşük maliyetli hem de kullanıcılar için faydalı olabilir. Daha karmaşık mimarilere ve daha ağır sayfa yüklerine sahip siteler, israfı azaltmak için kullanıcılardan daha olumlu niyet sinyali alana kadar daha az spekülasyon yaparak israfı azaltmayı tercih edebilir.

moderate seçeneği bir orta yol niteliğindedir ve birçok site, işaretçiyi bağlantının üzerinde 200 milisaniye süreyle tuttuğunda bir bağlantıyı önceden işleyen aşağıdaki tahmin kuralından yararlanabilir.

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

Önceden getir

Spekülasyon kuralları, tam bir önceden işleme olmadan yalnızca sayfaları önceden getirmek için de kullanılabilir. Bu, çoğu zaman önceden işlemeye giden yolda iyi bir ilk adım olabilir:

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

Chrome sınırlamaları

Chrome'da, Speculation Rules API'nin aşırı kullanımını önleyen sınırlar vardır:

heveslilik Önceden getir Önceden oluşturucu
immediate / eager 50 10
moderate / conservative 2 (FIFO) 2 (FIFO)
Chrome'daki spekülasyon sınırları.

Kullanıcı etkileşimine bağlı olan moderate ve conservative ayarları İlk Giren, İlk Kestiren (FIFO) tarzında çalışır: Sınıra ulaşıldıktan sonra, yeni bir spekülasyon, bellek tasarrufu için en eski spekülasyonun iptal edilmesine ve yenisiyle değiştirilmesine neden olur. İptal edilen bir tahmin tekrar tetiklenebilir. Örneğin, fareyle ilgili bağlantının üzerine geldiğinizde bu URL yeniden tahmin edilir ve en eski tahmin dışa aktarılır. Bu durumda önceki tahmin, söz konusu URL için HTTP Önbelleğinde önbelleğe alınabilir kaynakları önbelleğe almış olur. Dolayısıyla, daha ileri tarihli spekülasyon yapmak daha düşük bir maliyete sahip olacaktır. Bu nedenle sınır, en düşük eşik olan 2 olarak belirlenmiştir. Statik liste kuralları bir kullanıcı işlemiyle tetiklenmez. Bu nedenle, tarayıcı hangilerinin gerekli ve ne zaman gerekli olduğunu bilmesi mümkün olmadığından, daha yüksek bir sınır uygulanır.

immediate ve eager sınırları da dinamik olduğundan list URL komut dosyası öğesini kaldırmak, kaldırılan bu tahminleri iptal ederek kapasite oluşturur.

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

  • Verileri Kaydet.
  • Etkinleştirildiğinde ve pil seviyesi düşük olduğunda enerji tasarrufu.
  • Bellek kısıtlamaları.
  • "Sayfaları önceden yükle" ayarı kapatıldığında (uBlock Origin gibi Chrome uzantıları da açıkça devre dışı bırakılır).
  • Arka plan sekmelerinde açılan sayfalar.

Ayrıca Chrome, etkinleştirme işlemine kadar önceden işlenmiş sayfalarda çapraz kaynak iframe'leri oluşturmaz.

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

Sayfaya tahmin kuralları ekleme

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

  • Statik olarak dahil edilen spekülasyon kuralları: Örneğin, bir haber medya sitesi veya blog, genellikle kullanıcıların büyük bir bölümünün sonraki gezinme menüsüyse en yeni makaleyi önceden işleyebilir. Alternatif olarak, kullanıcılar bağlantılarla etkileşimde bulunurken tahmin yürütmek için moderate veya conservative içeren doküman kuralları da kullanılabilir.
  • Dinamik olarak eklenen tahmin kuralları: Uygulama mantığını temel alan, kullanıcıya göre kişiselleştirilmiş veya başka buluşsal yöntemler olabilir.

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

Tahmin kuralları, ana çerçevenin <head> veya <body> bölümüne eklenebilir. Alt çerçevelerdeki tahmin kurallarına göre işlem yapılmaz ve önceden işlenmiş sayfalardaki tahmin kurallarına yalnızca bu sayfa etkinleştirildiğinde uygulanır.

Speculation-Rules HTTP üstbilgisi

Tarayıcı Desteği

  • 121
  • 121
  • x
  • x

Kaynak

Spekülasyon kuralları, doğrudan dokümanın HTML'sine eklemek yerine Speculation-Rules HTTP üst bilgisi kullanılarak da yayınlanabilir. Bu, doküman içeriklerinin kendilerini değiştirmeye gerek kalmadan CDN'ler tarafından daha kolay dağıtım yapılmasına olanak tanır.

Speculation-Rules HTTP üst bilgisi belgeyle birlikte döndürülür ve spekülasyon kurallarını içeren bir JSON dosyasının konumunu işaret eder:

Speculation-Rules: "/speculationrules.json"

Bu kaynak, doğru MIME türünü kullanmalı ve kaynaklar arası bir kaynaksa CORS kontrolünden geçmelidir.

Content-Type: application/speculationrules+json
Access-Control-Allow-Origin: *

Göreli URL'ler kullanmak istiyorsanız "relative_to": "document" anahtarını tahmin kurallarınıza dahil etmek isteyebilirsiniz. Aksi takdirde, göreli URL'ler spekülasyon kuralları JSON dosyasının URL'sine göre olur. Bu, özellikle aynı kaynaklı bağlantılardan bazılarını veya tümünü seçmeniz gerekiyorsa yararlı olabilir.

Spekülasyon kuralları ve SPA'lar

Spekülasyon kuralları yalnızca tarayıcı tarafından yönetilen tam sayfa gezinmeleri için desteklenir, Tek Sayfalık Uygulamalar (SPA) veya uygulama kabuğu sayfalarında desteklenmez. Bu mimari, belge getirme kullanmaz. Bunun yerine, verilerin veya sayfaların API veya kısmi getirmelerini yapar. Bunlar daha sonra işlenip geçerli sayfada sunulur. "Kolay gezinme" olarak adlandırılan bu işlemler için gereken veriler, uygulama tarafından tahmin kurallarının dışında önceden getirilebilir, ancak önceden işlenemez.

Spekülasyon Kuralları, uygulamayı önceki bir sayfadan önceden oluşturmak için kullanılabilir. Bu, bazı SPA'ların sahip olduğu ekstra başlangıç yükleme maliyetlerinden bir kısmını dengelemeye yardımcı olabilir. Ancak, uygulama içindeki rota değişiklikleri önceden işlenemez.

Tahmin kurallarında hata ayıklama

Bu yeni API'yi görüntüleyip hata ayıklamanıza yardımcı olacak yeni Chrome Geliştirici Araçları özellikleri için Spekülasyon kurallarında hata ayıklama ile ilgili özel yayına bakın.

Birden fazla spekülasyon kuralı

Aynı sayfaya birden fazla tahmin kuralı da eklenebilir ve bu kurallar mevcut kurallara eklenir. Bu nedenle, aşağıdaki farklı yolların tümü hem one.html hem de two.html önceden işleme ile sonuçlanır:

URL listesi:

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

Birden çok speculationrules komut dosyası:

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

Bir speculationrules grubunda birden fazla liste

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

Tarayıcı Desteği

  • 121
  • 121
  • x
  • x

Kaynak

Bir sayfanın önceden yüklenmesi veya önceden oluşturulması sırasında, belirli URL parametreleri (teknik olarak arama parametreleri olarak bilinirler), gerçekte sunucu tarafından sunulan ve yalnızca istemci tarafı JavaScript tarafından kullanılan sayfa için önemsiz olabilir.

Örneğin, UTM parametreleri Google Analytics tarafından kampanya ölçümü için kullanılır, ancak genellikle sunucudan farklı sayfaların yayınlanmasıyla sonuçlanmaz. Bu, page1.html?utm_content=123 ve page1.html?utm_content=456 yöntemlerinin sunucudan aynı sayfayı sunacağı ve böylece aynı sayfanın önbellekten yeniden kullanılabileceği anlamına gelir.

Benzer şekilde, uygulamalar yalnızca istemci tarafında işlenen diğer URL parametrelerini kullanabilir.

No-Vary-Search teklifi, bir sunucunun, yayınlanan kaynakta bir farka yol açmayan parametreleri belirtmesine ve böylece tarayıcının, dokümanın yalnızca bu parametrelerle farklılık gösteren önceden önbelleğe alınmış sürümlerini yeniden kullanmasına olanak tanır. Bu, Chrome'da (ve Chromium tabanlı tarayıcılarda) önceden getirme gezinme spekülasyonları için desteklenir (ancak önceden oluşturma için de bunu desteklemek istiyoruz).

Spekülasyon kuralları, No-Vary-Search HTTP üst bilgisinin nerede döndürülmesi gerektiğ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ılmasıyla istemci tarafında oluşturulmasına bağlı olarak farklılık gösterir. Bu URL'yi etraflıca önceden getiririz ve sayfanın herhangi bir id arama parametresi için kullanılabileceğini gösteren bir No-Vary-Search HTTP üst bilgisi döndürmesi gerekir.

Ancak, kullanıcı önceden getirme tamamlanmadan bağlantılardan herhangi birini tıklarsa tarayıcı /products sayfasını almamış olabilir. Bu durumda, tarayıcı No-Vary-Search HTTP üst bilgisini içerip içermediğini bilemez. Ardından tarayıcıya, bağlantıyı tekrar getirme veya No-Vary-Search HTTP üst bilgisi içerip içermediğini görmek için önceden getirme işleminin tamamlanmasını bekleme seçeneği sunulur. expects_no_vary_search ayarı, tarayıcının, sayfa yanıtının No-Vary-Search HTTP üstbilgisi 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ışıyoruz.

Tahminler, varsayılan olarak aynı kaynak sayfalarla sınırlandırılmıştır. Aynı sitenin çapraz kaynak sayfaları (örneğin, https://a.example.com sitesi 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 üst bilgisi ekleyerek etkinleştirilmesi gerekir. Aksi takdirde Chrome, tahmini iptal eder.

Önceden işlenmiş sayfaya ait çerezler bulunmadığı ve önceden işlenmiş sayfa benzer bir Supports-Loading-Mode: uncredentialed-prerender HTTP başlığıyla etkinleştirildiği sürece, gelecek sürümlerde aynı siteyle ilişkilendirilmeyen, çapraz kaynak sayfaların önceden oluşturulmasına izin verilebilir.

Spekülasyon kuralları, kaynaklar arası önceden getirme işlemlerini zaten destekler. Ancak bu durum, yalnızca çapraz kaynak alan adına yönelik çerezler mevcut olmadığında desteklenir. Söz konusu siteyi daha önce ziyaret eden kullanıcıya ait çerezler varsa tahmin tetiklenmez ve Geliştirici Araçları'nda bir hata gösterilir.

Bu mevcut sınırlamalar göz önüne alındığında, mümkün olduğunda hem dahili bağlantılar hem de harici bağlantılar açısından kullanıcılarınızın deneyimini iyileştirebilecek bir kalıp, aynı kaynak URL'lerini ö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>

Güvenlik amacıyla, kaynaklar arası bağlantılar için kaynaklar arası tahminleri varsayılan olarak engelleme kısıtlaması zorunludur. Kaynaklar arası hedefler için <link rel="prefetch"> üzerinde bir iyileştirmedir. Bu iyileştirme aynı zamanda çerez göndermeyecek ancak önceden getirme işlemini gerçekleştirmeyi deneyecektir. Bu durum, yeniden gönderilmesi gereken bir önceden getirme işlemine veya daha da kötüsü, yanlış sayfa yüklemesine yol açar.

Speculation Rules API desteğini algılama

Speculation Rules API desteğini standart HTML kontrollerini kullanarak tespit edebilirsiniz:

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

JavaScript aracılığıyla tahmin kurallarını dinamik olarak ekleme

Bu, JavaScript ile prerender spekülasyon kuralı eklemeye ilişkin bir örnektir:

if (HTMLScriptElement.supports &&
    HTMLScriptElement.supports('speculationrules')) {
  const specScript = document.createElement('script');
  specScript.type = 'speculationrules';
  specRules = {
    prerender: [
      {
        urls: ['/next.html'],
      },
    ],
  };
  specScript.textContent = JSON.stringify(specRules);
  console.log('added speculation rules to: next.html');
  document.body.append(specScript);
}

Bu önceden oluşturma demo sayfasında, JavaScript ekleme özelliğini kullanarak Speculation Rules API'nin önceden işlemesine ilişkin bir demoyu görüntüleyebilirsiniz.

Doğrudan DOM içine <script type = "speculationrules"> öğesi eklemek, önceden gösterildiği gibi eklenmesi gerektiğinden spekülasyon kurallarını kaydetmez. Örneğin, Öğeler panelinin <script type = "speculationrules"> öğesini eklemek üzere doğrudan düzenlenmesi, spekülasyon kurallarını kaydetmez. Bunun yerine, kuralları DOM'ye dinamik olarak eklemek için komut dosyasının Konsol'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 belirtildiği gibi <script type = "speculationrules"> öğesini doğrudan GTM üzerinden eklemek yerine bunların JavaScript aracılığıyla eklenmesi gerekir:

Google Etiket Yöneticisi&#39;nde özel HTML etiketi yapılandırması
Google Etiket Yöneticisi Aracılığıyla Spekülasyon Kuralları Ekleme.

GTM const desteklemediğinden bu örneğin var kullandığını unutmayın.

Tahmin kurallarını iptal et

Tahmin kurallarının kaldırılması, önceden işlemenin iptal edilmesine neden olur. Ancak bu gerçekleştiğinde, kaynaklar büyük olasılıkla önceden işlemeyi başlatmak için harcanmış olacaktır. Bu nedenle, önceden işlemeyi iptal etmeniz gerekmesi ihtimali varsa önceden işlemenin yapılmaması önerilir.

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

Spekülasyon kuralları <script> öğesi kullandığından, yalnızca JSON içeriyor olsalar bile, site bunu kullanıyorsa bunların karma veya tek seferlik rastgele sayı kullanılarak script-src Content-Security-Policy'ye dahil edilmesi gerekir.

script-src öğesine, karma veya olmayan komut dosyalarından yerleştirilen <script type="speculationrules"> öğelerinin desteklenmesine olanak tanıyan yeni bir inline-speculation-rules eklenebilir. Bu, ilk HTML'de yer alan kuralları desteklemez. Dolayısıyla, katı bir CSP kullanan siteler için kuralların JavaScript tarafından yerleştirilmesi gerekir.

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

Önceden oluşturma, hızlı sayfa oluşturmaya olanak tanıdığından (genellikle anında) kullanıcılar için genellikle olumlu bir deneyimdir. Bu durum hem kullanıcıya hem de site sahibine fayda sağlar. Çünkü önceden oluşturulmuş sayfalar, aksi halde elde edilmesi zor olabilecek daha iyi bir kullanıcı deneyimine olanak tanır.

Bununla birlikte, 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 durumunun değişmesi.

Chrome'da önceden işlemeyi etkinleştirme ve devre dışı bırakma

Önceden oluşturma yalnızca chrome://settings/performance/ içinde "Sayfaları önceden yükle" ayarı olan Chrome kullanıcıları için etkinleştirilir. Ayrıca, düşük bellek kapasiteli cihazlarda veya işletim sistemi Veri Kaydet ya da Enerji Tasarrufu modlarında olduğunda önceden işleme devre dışıdır. Chrome sınırlamaları bölümüne bakın.

Sunucu tarafını önceden işlemeyi algıla ve devre dışı bırak

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

Sec-Purpose: prefetch;prerender

Speculation Rules API kullanılarak önceden getirilen sayfalarda bu başlık yalnızca prefetch olarak ayarlanır:

Sec-Purpose: prefetch

Sunucular tahmin isteklerini günlüğe kaydetmek, farklı içerik döndürmek veya önceden işlemenin gerçekleşmesini önlemek için bu üstbilgiye göre yanıt verebilir. Başarısız bir yanıt kodu döndürülürse (yani, 200 veya 304 değilse) sayfa önceden işlenmez ve tüm önceden getirme sayfaları silinir.

Belirli bir sayfanın önceden oluşturulmasını istemiyorsanız bunun olmamasını sağlamanın en iyi yolu budur. Bununla birlikte, en iyi deneyimi sunmak için bunun yerine önceden oluşturmaya izin vermeniz ancak JavaScript kullanılarak yalnızca sayfa gerçekten görüntülendikten sonra gerçekleşmesi gereken işlemleri geciktirmeniz önerilir.

JavaScript'te önceden işlemeyi algılama

document.prerendering API, sayfa önceden işleme yapılırken true değerini döndürür. Bu, sayfalar tarafından, sayfa gerçekten etkinleştirilene kadar önceden oluşturma sırasında belirli etkinlikleri önlemek veya ertelemek için kullanılabilir.

Önceden işlenmiş bir doküman etkinleştirildikten sonra, PerformanceNavigationTiming adlı öğenin activationStart değeri de önceden işlemenin başlatıldığı zamanla dokümanın gerçekten etkinleştirilmesi arasındaki süreyi temsil eden sıfır olmayan bir zamana ayarlanır.

Aşağıdakiler gibi önceden oluşturma ve önceden işlenmiş sayfaları kontrol edecek bir işleviniz olabilir:

function pagePrerendered() {
  return (
    document.prerendering ||
    self.performance?.getEntriesByType?.('navigation')[0]?.activationStart > 0
  );
}

Bir sayfanın önceden işlenip oluşturulmadığını (tamamen veya kısmen) görmenin en kolay yolu, sayfa etkinleştirildikten sonra Geliştirici Araçları'nı açmak ve konsola performance.getEntriesByType('navigation')[0].activationStart yazmaktır. Sıfır olmayan bir değer döndürülürse sayfanın önceden işlenmiş olduğunu anlarsınız:

Chrome Geliştirici Araçları&#39;nda, sayfanın önceden işlendiğini belirten pozitif bir activationStart&#39;ı gösteren konsol
Konsolda önceden işlemeyi test etme.

Sayfa, sayfayı görüntüleyen kullanıcı tarafından etkinleştirildiğinde document üzerinde prerenderingchange etkinliği gönderilir ve bu etkinlik daha sonra, önceden sayfa yükleme sırasında varsayılan olarak başlatılan, ancak sayfa gerçekten kullanıcı tarafından görüntülenene kadar ertelemek istediğiniz etkinlikleri etkinleştirmek için kullanılabilir.

Bu API'leri kullanarak ön uç JavaScript'i, önceden oluşturulmuş sayfaları algılayıp bunlarla ilgili uygun şekilde hareket edebilir.

Analize 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'ten yararlanabilirsiniz. Alternatif olarak, Gerçek Kullanıcı İzleme (RUM) aracılığıyla sayfaların performans metriklerini ölçebilirsiniz.

Sayfalar yalnızca kullanıcı tarafından yüklenme olasılığının yüksek olduğu durumlarda önceden işlenmelidir. Bu nedenle, Chrome adres çubuğu önceden oluşturma seçenekleri yalnızca yüksek bir olasılık olduğunda (%80'den fazla) ortaya çıkar.

Bununla birlikte, özellikle Speculation Rules API kullanılırken, önceden oluşturulmuş sayfaların analizleri etkilemesi olabilir ve tüm analiz sağlayıcıları varsayılan olarak bunu yapmayabileceğinden, yalnızca etkinleştirme sırasında önceden oluşturulmuş sayfalar için analizleri etkinleştirmek üzere ekstra kod eklemeleri gerekebilir.

Bu, doküman önceden oluşturuluyorsa prerenderingchange etkinliğini bekleyen veya şu andaysa hemen çözümlenen bir Promise kullanılarak elde edilebilir:

// 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, sayfa ilk kez görünür oluncaya kadar etkinlikleri ertelemektir. Bu, hem önceden oluşturma durumunu hem de sekmelerin arka planda açıldığında (örneğin, sağ tıklayıp yeni sekmede açıldığında) olmasını sağlar:

// Set up a promise for when the page is first made visible
const whenActivated = new Promise((resolve) => {
  if (document.hidden) {
    document.addEventListener('visibilitychange', resolve, {once: true});
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenActivated;
  // Initialise your analytics
}

initAnalytics();

Bu, analizler ve benzer kullanım alanları için mantıklı olsa da başka durumlarda daha fazla içerik yüklenmesini isteyebilirsiniz. Bu nedenle, önceden oluşturma sayfalarını özel olarak hedeflemek için document.prerendering ve prerenderingchange öğelerini kullanmak isteyebilirsiniz.

Performansı ölçün

Performans metriklerini ölçmek için Analytics, bunları tarayıcı API'lerinin bildireceği sayfa yüklenme süresi yerine etkinleştirme süresine göre ölçmenin daha iyi olup olmadığını dikkate almalıdır.

Chrome tarafından Chrome Kullanıcı Deneyimi Raporu aracılığıyla ölçülen Önemli Web Verileri için kullanıcı deneyimini ölçmeniz amaçlanmıştır. Bunlar, etkinleştirme süresine göre ölçülür. Bu işlem genellikle 0 saniyelik LCP ile sonuçlanır. Bunun, Core Web Vitals'ı iyileştirmenin harika bir yolu olduğunu göstermek.

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

Önceden işlemeleri ölçme

Bir sayfanın önceden işlenip oluşturulmadığı, PerformanceNavigationTiming değerinin sıfır olmayan bir activationStart girişiyle görülebilir. Bu daha sonra, özel boyut kullanılarak veya sayfa görüntülemeleri kaydedilirken benzer bir boyut kullanılarak (ö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');

Böylece, analizleriniz diğer gezinme türlerine kıyasla kaç gezinmenin önceden işlendiğini 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 demektir. Bu durum, örnek olaylarımızda görüldüğü gibi çoğu zaman işle ilgili ölçümler üzerinde gerçek bir etkiye sahip olabilir.

Anında gezinme için sayfaları önceden oluşturmanın iş üzerindeki etkisini ölçtüğünüzde, daha fazla gezinmenin önceden işlenmesine olanak tanımak amacıyla bu teknolojiyi kullanmak için daha fazla çaba harcamaya veya sayfaların neden önceden işlenmediğini araştırmaya değer olup olmadığı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şlenmiş ve daha sonra ziyaret edilmeyen sayfaları ölçmek de önemlidir. Bu, çok fazla önceden işleme yaptığınız ve kullanıcının değerli kaynaklarını çok az faydayla kullandığınız anlamına gelebilir.

Bu, önceden işlemenin istendiğini belirtmek için tahmin kuralları eklendiğinde (tarayıcının HTMLScriptElement.supports('speculationrules') kullanarak önceden işlemeyi desteklediği kontrol edildikten sonra) bir analiz etkinliği tetiklenerek ölçülebilir. (Daha önce belirtildiği gibi, önceden işlemenin tarayıcıya bir ipucu niteliğinde olduğundan ve kullanıcı ayarları, mevcut bellek kullanımı veya diğer buluşsal yöntemlerde sayfaları önceden işlememeyi seçebileceği için, önceden işleme isteğinde bulunulması nedeniyle bir önceden işlemenin başlatıldığını veya tamamlandığını belirtmediğini unutmayın.)

Daha sonra, bu etkinliklerin sayısını gerçek önceden oluşturma sayfa görüntülemeleriyle karşılaştırabilirsiniz. Alternatif olarak, karşılaştırmayı kolaylaştırıyorsa etkinleştirme sırasında başka bir etkinlik de tetikleyebilirsiniz.

Ardından, "başarılı isabet oranı", bu iki değer arasındaki farka bakılarak tahmin edilebilir. Sayfaları önceden oluşturmak için Speculation Rules API'yi kullandığınız sayfalarda, kullanıcı kaynaklarını onlara yardımcı olmak için kullanma ile gereksiz yere kullanma arasındaki dengeyi korumak amacıyla yüksek bir isabet oranı elde ettiğinizden emin olmak için kuralları uygun şekilde ayarlayabilirsiniz.

Bazı önceden işlemelerin yalnızca tahmin kurallarınızın değil, adres çubuğunun önceden oluşturulması nedeniyle de gerçekleşebileceğini unutmayın. Bunları ayırt etmek isterseniz document.referrer öğesini (önceden oluşturulmuş adres çubuğu gezinmeleri de dahil olmak üzere adres çubuğu gezinmesi için boş) işaretleyebilirsiniz.

Önceden işlemesi olmayan sayfalara da bakmayı unutmayın. Bu durum, söz konusu sayfaların adres çubuğundan bile önceden işleme için uygun olmadığını gösterebilir. Bu durum, söz konusu performans iyileştirmesinden yararlanmadığınız anlamına gelebilir. Chrome ekibi, ön işleme uygunluğunu test etmek için bfcache test aracına benzer ek araçlar eklemek ve önceden işlemenin neden başarısız olduğunu gösterecek bir API eklemek istiyor.

Uzantılara etkisi

Uzantı yazarlarının önceden işlenmiş sayfalar için göz önünde bulundurması gereken bazı ek noktaların ayrıntılı olarak açıklandığı Chrome Uzantıları: Anında Gezinmeyi desteklemek için genişletme API'si konulu yayına bakın.

Geri bildirim

Önceden işleme, Chrome ekibi tarafından aktif bir şekilde 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 mevcuttur. GitHub deposu veya sorun izleyicimiz ile ilgili geri bildirimlerinizi bekliyoruz. Heyecan verici bu yeni API ile ilgili örnek olayları duymayı ve paylaşmayı sabırsızlıkla bekliyoruz.

Bildirimler

Marc-Olivier Jodoin tarafından Unsplash'ta yayınlanan küçük resim