Sonraki sayfa yükleme performansını iyileştirme

Web özellikleri: Tahmin kuralları

Sitede gezinen kullanıcılar için sayfa yükleme performansını iyileştirmenin en etkili yollarından biri, ziyaret etmek üzere oldukları bir sonraki sayfayı ziyaret etmeden önce yüklemeye başlamaktır. Bu işlem, Speculation Rules API kullanılarak tahmine dayalı içerik adlı bir teknikle yapılabilir.

İşleyiş şekli

Tahmine dayalı içerik, JSON tabanlı tahmin kurallarını kullanarak tarayıcıya önceden getirilebilecek veya önceden işlenebilecek bağlantıları bildirir. Böylece kullanıcılar bu bağlantıları tıkladığında sayfa yükleme performansı artar.

Kurallar, urls anahtarı içeren sabit kodlu bir URL listesi (liste kuralı olarak bilinir) veya sayfadaki bağlantıları bulmak için kullanılan bir dizi href ve CSS seçici içeren where anahtarı (document kuralı olarak bilinir) olabilir.

Kurallar, sayfanın ne zaman önceden getirileceğini veya önceden işleneceğini belirten isteğe bağlı bir eagerness özelliği de içerebilir. eagerness özelliği immediate, eager, moderate veya conservative olarak ayarlanabilir. immediate mümkün olan en kısa sürede tahminde bulunurken diğerleri sırasıyla kısa bir süre, daha uzun bir süre fareyle üzerine gelme veya sayfayı tıklamaya başlama gibi kullanıcı sinyallerini bekler.

Kurallar, farklı istek ayarlarıyla birleştirilerek istekli bir şekilde önceden getirme ve ardından kullanıcı daha fazla etkileşimde bulunduğunda önceden işleme yapılabilir.

Ne zaman kullanılır?

Tahmine dayalı içerik, özellikle içeriğin sık sık değişme olasılığının düşük olduğu ve sayfaların daha az maliyetle üretildiği statik sayfalar için kullanışlıdır. Bu durum, özellikle uçta önbelleğe alınmış sayfalar için geçerlidir. Dinamik sayfalar için de kullanılabilir ancak eski içerik olasılığına karşı dikkatli olunması önemlidir.

Tahmine dayalı içerik genellikle aynı kaynaklı bağlantılar için kullanılır ancak daha gelişmiş seçenekler, bazı çapraz kaynaklı tahminlere olanak tanır. Bu kılavuzda, daha yaygın olan aynı kaynak kullanım alanına odaklanılmıştır.

Daha istekli tahmine dayalı içerik, bir sonraki ziyaret edilmesi muhtemel sayfalar (ör. manşet makalesi veya kurs öğrenme gibi aşamalı bir süreçteki sonraki sayfa) için iyi bir seçimdir.

Kullanıcının bir sonraki adımda ne yapacağının daha az belirgin olduğu ve sayfada her birinin ziyaret edilme olasılığı eşit olan çok sayıda bağlantı bulunduğu durumlarda, daha az istekli tahmine dayalı içerik iyi bir seçimdir. Fareyle üzerine gelme veya sayfayı tıklamaya başlama gibi daha fazla sinyal bekleyerek sonraki sayfaya önceden başlayabilir ve tamamen önceden getirilmemiş veya önceden işlenmemiş olsa bile kullanıcı deneyimini iyileştirebilirsiniz.

Benzer şekilde, önceden getirme, önceden işlemeye kıyasla daha muhafazakar bir seçimdir. Daha az kaynak kullanır (hem istemci hem de sunucu tarafında) ancak kullanıcıya daha az fayda sağlar. İlk uygulama için iyi bir seçimdir. Geliştirici açıkça talep ettiğinde daha sonra önceden işleme özelliğini kullanacak şekilde genişletilebilir.

Nasıl kullanılır?

Tahmin kuralları JSON tabanlı bir biçime sahiptir ve <script type="speculationrules"> etiketine dahil edilebilir. Kurallar, dokümanın <head> veya <body> bölümüne eklenebilir ya da JavaScript kullanılarak dinamik olarak eklenebilir.

Global düzeyde veya kural bazında tag da kullanılabilir. Bu etiket ayarlandığında Sec-Speculation-Tags başlığına dahil edilir ve sunucu tarafında hangi spekülasyonların yapıldığını belirlemenize olanak tanır.

Önceden tanımlanmış URL'leri önceden getirmek için basit bir URL listesi kuralı örneği

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Bir sayfadaki tüm aynı kaynaklı bağlantıları önceden işlemek için basit bir belge kuralı örneği

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "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>

Karma kural kümesi örneği

Bu örnekte, tüm bağlantıları istekli bir şekilde önceden getiren ve ardından moderate isteklilikle daha fazla sinyal aldığında aynı bağlantıları önceden işlemek için daha da ileri giden bir kural kümesi gösterilmektedir.

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

En İyi Uygulamalar

  • Kullanıcının bir sonraki ziyaret etme olasılığı yüksek olan sayfaları önceden getirmek ve önceden işlemek için tahmin kurallarını KULLANIN.
  • İçeriğin sık sık değişme ihtimalinin düşük olduğu ve sayfaların daha az maliyetle üretildiği statik siteler için (özellikle de uçta önbelleğe alınmışsa) spekülasyon kurallarını KULLANIN.
  • YAPIN: İçeriğin daha sık değişebileceği, güncelliğini yitirebileceği ve sayfaların oluşturulmasının daha maliyetli olduğu dinamik sayfalarda spekülasyon kurallarını kullanırken daha dikkatli olun.
  • Daha esnek oldukları, aynı kuralın birden fazla sayfada paylaşılmasına olanak tanıdıkları ve önceden bilinmeyen sayfaları önceden getirmek ve önceden işlemek için kullanılabildikleri için liste kuralları yerine belge kurallarını tercih EDİN.
  • Önceden getirme ve önceden işleme arasındaki dengeyi göz önünde bulundurun ve kullanım alanınıza uygun olanı seçin. Önceden işleme, önceden getirmeden daha maliyetlidir ve dinamik durum gösteren karmaşık uygulamalarda daha fazla istenmeyen yan etkiye neden olabilir ancak daha iyi bir kullanıcı deneyimi sunar. Emin değilseniz geliştiriciye tercihini sorun.
  • Farklı eagerness seviyeleri arasındaki avantaj ve dezavantajları değerlendirerek kullanım alanınıza uygun olanı SEÇİN. Daha istekli spekülasyon, daha iyi bir kullanıcı deneyimi sağlar ancak daha fazla kaynak kullanır ve dinamik durum gösteren karmaşık uygulamalarda daha fazla istenmeyen yan etkiye neden olabilir. Emin değilseniz geliştiriciye tercihini sorun.
  • Tahmin kurallarını AŞIRI KULLANMAYIN. Örneğin, sayfadaki her bağlantı için tahmin kuralı kullanmayın. Tarayıcıların sınırları vardır (istekli olmayan spekülasyonlar için 2 spekülasyon). immediate yalnızca çok az sayıda bağlantı için kullanılmalıdır.
  • /logout veya /add-to-cart gibi durum değişikliklerini tetikleme olasılığı yüksek olan URL'leri tahmin ETMEYİN ve doküman kurallarına dahil edilme olasılıkları varsa bunları tahmin kurallarınızdan açıkça hariç tutun.
  • Tek sayfalık uygulamalarda (SPA) spekülasyon kuralları KULLANMAYIN. Tahmin kuralları, tarayıcının her gezinmede yeni bir dokümana gittiği çok sayfalı uygulamalar (MPA'lar) için tasarlanmıştır. Tek sayfalık uygulamalarda tarayıcı, her gezinmede yeni bir dokümana gitmez. Bu nedenle, tahmin kuralları beklendiği gibi çalışmaz.

Tarayıcı desteği ve yedek stratejiler

Ancak tahmine dayalı içerik, progresif bir geliştirmedir. Bu özelliği geliştirme amacıyla kullanmak tamamen güvenlidir ve potansiyel performans avantajları nedeniyle kesinlikle önerilir. Bir tarayıcı, spekülasyon kurallarını desteklemiyorsa bunları yok sayar.