Speculation Rules API: Tıklanmadan Önce Yüklenen Sayfalar

Bir sayfanın ne kadar hızlı yüklendiğini optimize etmek için yıllarca dosya boyutlarını küçülttük, görselleri sıkıştırdık, CDN'ler kurduk. Peki kullanıcı tıklamadan önce sayfayı hazırlamak mümkün olsaydı? Speculation Rules API tam olarak bunu yapar: tarayıcıya, kullanıcının büyük olasılıkla gideceği sayfaları arka planda önceden getirmesini, hatta tamamen render etmesini söyler. Sonuç, tıklandığı anda açılan, bekleme süresi sıfıra yakın sayfalar.

Prefetch ve Prerender Farkı

Speculation Rules iki seviyede çalışır:

• prefetch: Yalnızca sayfanın HTML belgesini önceden indirir. Maliyeti düşüktür; tıklandığında sunucu yanıtını beklemek gerekmez ama sayfa yine de render edilir.
• prerender: Sayfayı görünmez bir sekmede tamamen yükler, alt kaynaklarını getirir ve JavaScript'ini çalıştırır. Tıklandığında sayfa anında görünür; LCP neredeyse sıfıra iner.

Nasıl Kullanılır?

Kurallar, sayfaya eklenen bir JSON bloğuyla tanımlanır. En pratik yöntem, belirli URL'ler listelemek yerine sitedeki bağlantılara göre çalışan "document rules" kullanmaktır:

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

eagerness değeri, tahminin ne zaman yapılacağını belirler. moderate, masaüstünde kullanıcı bir bağlantının üzerinde kısa bir süre beklediğinde (hover) tetiklenir; conservative ise yalnızca tıklama başladığında (pointerdown) devreye girer. eager ve immediate daha agresif davranır ve daha fazla kaynak tüketir.

"En hızlı istek, kullanıcı tıklamadan önce tamamlanmış olandır."

Dikkat Edilmesi Gerekenler

Prerender güçlü ama sınırsız değil. Tarayıcı sayfayı gerçekten açılmış gibi yüklediği için bazı noktalar önemli:

• Analitik: Önceden render edilen ama hiç açılmayan sayfalar sahte sayfa görüntülemesi üretmemeli. Google Analytics gibi yaygın araçlar bunu kendiliğinden ele alır; özel izleme kodlarında document.prerendering kontrol edilmeli.
• Yan etkiler: Sepete ekleme, çıkış yapma ya da form gönderme gibi durum değiştiren bağlantılar kurallardan mutlaka hariç tutulmalı.
• Kaynak tüketimi: Tarayıcı, veri tasarrufu modunda veya düşük pilde spekülasyonu kendiliğinden kısıtlar; yine de çok sayıda ağır sayfayı agresif şekilde önceden yüklemekten kaçınılmalı.
• Destek: API şu an Chromium tabanlı tarayıcılarda (Chrome, Edge) çalışıyor. Diğer tarayıcılar script bloğunu yok sayar; site bozulmaz, sadece hızlanma olmaz.

Astro ile Kullanımı

Astro'nun yerleşik prefetch özelliği, bağlantıları hover veya görünürlük anında önceden getirmeyi tek ayarla sağlar ve deneysel clientPrerender seçeneğiyle Speculation Rules'u arka planda kullanabilir. View Transitions ile birlikte kullanıldığında, statik bir site gerçek anlamda "anında açılan" bir deneyime dönüşür.