Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Barry Pollard

Tarayıcı Desteği

Chrome ekibi, kullanıcının gitme olasılığı yüksek olan sayfaların tamamen önceden oluşturulmasını sağlama seçenekleri üzerinde çalışıyor.

Ö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:

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

Not: Önceden oluşturulmuş sayfalar bir ipucu ve progresif geliştirme olarak değerlendirilmelidir. preload'den farklı olarak önceden işleme spekülatif bir ipucudur ve tarayıcı kullanıcı ayarları, mevcut bellek kullanımı veya diğer buluşsal yöntemlere dayanarak ipucuna göre hareket etmemeyi seçebilir.

Ö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:

Girilen metne göre düşük (gri), orta (amber) ve yüksek (yeşil) tahminleri gösterecek şekilde filtrelenmiş Chrome Tahminleri sayfasının ekran görüntüsü. — 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:

Adres çubuğundaki 'Typeahead' özelliğinin ekran görüntüsü — 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ümandaki bağlantıları href veya CSS seçicilere dayalı olarak önceden işleyen doküman kurallarına (Chrome 121'de kullanılabilir) göre:

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel=nofollow]"}}
      ]
    }
  }]
}
</script>

İsteklilik

Tarayıcı Desteği

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, fareyle bir bağlantının üzerine gelip 200 milisaniye (veya bu süre daha erken olduğunda pointerdown etkinliğinde ve hover etkinliğinin olmadığı mobil cihazlarda) 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, fareyle üzerine gelindiğinde veya fare ile aşağı çekildiğinde tüm bağlantıları temel ama yine de güçlü bir tahmin kurallarının uygulanması olarak önceden işleyen aşağıdaki spekülasyon 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>

Not: HTTP önbelleğine önceden getirilen eski <link rel="prefetch"> kaynak ipucundan farklı olarak, tahmin kuralları kullanılarak yüklenen dokümanlar, gezinmelerle (ancak oluşturulmadan) aynı şekilde işlenir ve bellekte tutulur. Böylece gerektiğinde tarayıcıda daha hızlı kullanılabilir. Bu, HTTP önbelleğinde önbelleğe alınamayan dokümanların önceden getirilmesine de olanak tanır. <link rel="prefetch"> kullanılarak dokümanların önceden getirilmesiyle ilgili sorunlar nedeniyle, <link rel="prefetch"> yalnızca alt kaynakları önceden getirmek için kullanılır.

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

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:

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

`No-Vary-Search` desteği

Tarayıcı Desteği

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 özellik, Chrome'da (ve Chromium tabanlı tarayıcılarda) yalnızca önceden getirme gezinme tahminleri için desteklenir.

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ıtlamaları azaltmak için çalışıyoruz. Varsayılan olarak önceden işleme, aynı kaynak sayfalarla sınırlandırılmıştır.

Aynı sitenin çapraz kaynak sayfalarını önceden oluşturmak (örneğin, https://a.example.com, https://b.example.com sitesindeki bir sayfayı önceden oluşturabilir). Bunu kullanmak için önceden oluşturulmuş sayfanın (bu örnekte https://b.example.com), Supports-Loading-Mode: credentialed-prerender HTTP üst bilgisi ekleyerek etkinleştirilmesi gerekir. Aksi takdirde Chrome, önceden işlemeyi iptal eder.

Gelecekteki sürümlerde, kaynaklar arası sayfaların önceden oluşturulmasına izin verilebilir (sitenin benzer bir Supports-Loading-Mode: uncredentialed-prerender HTTP üstbilgisiyle etkinleştirilmesi) ve yeni sekmelerde önceden işlemenin etkinleştirilmesi.

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.

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ı'nda, sayfanın önceden işlendiğini belirten pozitif bir activationStart'ı 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.

Uyarı: PerformanceNavigationTiming.type, daha eski, orijinal <link rel="prerender"...> gezinme türü için olan prerender değerini kullanmaz. Bu durum ileride değişebilir ancak şimdilik müşteriler, önceden oluşturma sayfalarını tanımlamak için document.prerendering API'yi, etkinleştirilmiş olan önceden işlenmiş sayfaları tanımlamak için sıfır olmayan bir PerformanceNavigationTiming.activationStart alanını kullanmalıdır.

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 da, etkinlikleri sayfa ilk önce görünür hale gelene kadar ertelemektir. Bu, hem önceden işleme durumunu hem de sekmelerin arka planda açıldığından geçerli olur (örneğin, sağ tıklayıp yeni sekmede açılır):

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

İlgili bağlantılar

Teşekkür

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

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

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

Sayfa nasıl önceden oluşturulur?

Önceden işlemenin etkisi

Chrome'un adres çubuğu tahminlerini görüntüleme

Speculation Rules API

İsteklilik

Önceden getir

Chrome sınırlamaları

Sayfaya tahmin kuralları ekleme

Speculation-Rules HTTP üstbilgisi

Spekülasyon kuralları ve SPA'lar

Tahmin kurallarında hata ayıklama

Birden fazla spekülasyon kuralı

No-Vary-Search desteği

Spekülasyon kuralları kısıtlamaları ve gelecekteki geliştirmeler

Speculation Rules API desteğini algılama

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

Tahmin kurallarını iptal et

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

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

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

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

JavaScript'te önceden işlemeyi algılama

Analize etkisi

Performansı ölçün

Önceden işlemeleri ölçme

İsabet oranlarını ölçün

Uzantılara etkisi

Geri bildirim

İlgili bağlantılar

Teşekkür

`Speculation-Rules` HTTP üstbilgisi

`No-Vary-Search` desteği