Speculation Rules ile anında yüklenen sayfalar

Yeni speculation rules API ile sayfaları anında yükleyerek Core Web Vitals'ı nasıl iyileştirebileceğinizi öğrenin

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2026-02-07

'Speculation Rules API' ile Core Web Vitals'ı anında iyileştirin

Bazı sayfaların neden anında yüklendiğini hiç merak ettiniz mi? Bunun nedeni muhtemelen o sayfanın Speculation Rules uygulamış olmasıdır!

Speculation Rules API, çok sayfalı uygulamalarda (MPA'lar) gelecekteki sayfa yüklemelerinin hızını prefetching veya prerendering yoluyla artırır. Geliştiriciler, daha hızlı (veya anlık) sayfa yüklemeleri için tarayıcıya belgeleri prefetch veya prerender etmesini önermek üzere speculation rules'ı yapılandırabilir. Speculation rules, kaynakları prefetching için kullanılan `<link rel="prefetch">` gibi eski tekniklerin veya kullanımdan kaldırılmış yalnızca Chrome'a özgü özellik olan `<link rel="prerender">`'ın yerini alır.

Speculation rules belge düzeyinde çalışır ve bu da onu tam sayfa geçişleri içeren MPA'lar için uygun hale getirir. Öncelikle API çağrıları veya kısmi içerik güncellemeleri kullanan tek sayfa uygulamaları (SPA'lar), dahili rota değişiklikleri için bu API'den çok fazla fayda sağlamaz. Ancak Speculation Rules, uygulamanın başlangıç durumunu bir açılış sayfasından prerendering yaparak SPA'lara da fayda sağlayabilir ve başlangıç yükleme süresini potansiyel olarak telafi edebilir.

Speculation rules Hızlı Başlangıç

Speculation rules'ın ne olduğunu zaten biliyor musunuz? Harika! İşte hemen başlamanız için hazır kod parçacıkları. Size uygun parçacığı seçin ve <head> bölümüne yerleştirin (preload'u prefetch olarak ve/veya eagerness'ı değiştirmekten çekinmeyin)! 

<!-- 
   WordPress speculation rules by corewebvitals.io 
   prefetches all internal links
   skips links that match wp-login, wp-admin, wp content 
   skips links that have the nofollow attribute
   skips links that have a questy string for example: /search?q=welcome
->
<script type="speculationrules">
{
    "prefetch": [{
        "source": "document",
        "where": {
            "and": [{ "href_matches": "\/*"},{ "not": {     "href_matches": [         "\/wp-login.php",         "\/wp-admin\/*",         "\/*\\?*",         "\/wp-content\/*",     ] }
                },{ "not": {     "selector_matches": "a[rel~=\\"nofollow\\"]" }
                }]
        },
        "eagerness": "moderate"
    }]
}
</script>
<!-- Data-preload triggered speculation rules by corewebvitals.io -->
<script type="speculationrules">
{
    "prefetch": [{
        "source": "document",
        "where": {
            "selector_matches": "a[data-preload]"
        },
        "eagerness": "moderate"
    }]
}
</script>

İpucu: hızlıca kendi speculation rules'ınızı oluşturmanız gerekiyorsa neden speculation rules generator'ı denemiyorsunuz

Speculation Rules'ın Faydaları


Geliştirilmiş user experience (UX): İçeriği tahmin ederek ve önceden yükleyerek, Speculation Rules neredeyse anlık sayfa yüklemeleri sağlar ve kullanıcılar için gezinmeyi sorunsuz hale getirir. Bu, geleneksel çok sayfalı web siteleri için bile JavaScript bağımlılığı ve karmaşıklık olmadan tek sayfa uygulamalarının performansına rakip olur. Daha hızlı yükleme süreleri, daha iyi bir gezinme deneyimi anlamına gelir ve kullanıcı etkileşimini artırıp hemen çıkma oranlarını düşürür.

SEO Avantajları: Geliştirilmiş sayfa hızı doğrudan bir sıralama faktörü olduğundan ve daha iyi bir Time to First Byte daha iyi bir Largest Contentful Paint ile sonuçlanacağından, speculation rules uygulamak Core Web Vitals'ı iyileştirecek ve size o pagespeed bonusunu kazandıracaktır.

Azaltılmış karmaşıklık: Neredeyse anlık sayfa yüklemeleri eskiden bir SPA kullanarak veya MPA'lar için özel prefetch mantığı yazarak mümkündü.
Birçok kullanım durumunda bir SPA'nın dezavantajı, JavaScript'e büyük ölçüde bağımlı olması nedeniyle önemli olabilen başlangıç açılış süresi ve bir MPA ile karşılaştırıldığında artan karmaşıklıktır. Speculation rules bu sorunlara sahip değildir. Bu, hızlı yüklemeyi daha geniş bir web sitesi yelpazesi için, özellikle içerik odaklı olanlar için erişilebilir kılar.
API ayrıca hangi sayfaların prerender edileceğine karar verme sürecini mantığın çoğunu tarayıcıya devrederek basitleştirir. Bu, bu kontrolleri yapmak ve önceden yüklenecek sayfaları enjekte etmek için JavaScript'e dayanan önceki yöntemlere göre büyük bir gelişmedir. Tarayıcılar, prerender edip etmeme kararı verirken mobil cihazlarda düşük bellek veya pil tasarrufu modu gibi kullanıcı bağlamını doğal olarak hesaba katabilir. Bu dinamik uyum, kullanıcı kaynaklarını korumaya yardımcı olur ve kısıtlamalar altında bile daha sorunsuz bir deneyim sağlar.

Diğer faydalar: Speculation-Rules HTTP header'ı, doğrudan belge içeriğini değiştirmeye gerek kalmadan İçerik Dağıtım Ağları (CDN'ler) aracılığıyla daha kolay dağıtım sağlar. Document Rules ile Ayrıntılı Kontrol, geliştiricilerin URL kalıplarına veya CSS selectors'a dayalı olarak prefetching veya prerendering için kesin koşullar tanımlamasına olanak tanır. Bu, manuel URL belirtimini azaltır ve site genelinde speculation rulesets'e olanak tanır. "eagerness" ayarı, speculation'ın ne zaman gerçekleşeceği üzerinde ince ayarlı kontrol sağlar ve önceden yükleme hızı ile kaynak tüketimi arasında denge kurar. Bu, gereksiz önceden yüklemeyi azaltmaya ve kaynak israfını önlemeye yardımcı olur.

Speculation Rules Mekaniği

Speculation rules bir JSON yapısı kullanılarak tanımlanır ve iki şekilde uygulanabilir:

  • Satır İçi Script: JSON'u ana HTML belgesinin `<head>` veya `<body>` bölümünde bir `<script type="speculationrules">` etiketi içine dahil edin.
  • HTTP Header: Kuralları belgenin yanıtında `Speculation-Rules` HTTP header'ı kullanarak iletin. Bu header, kuralları içeren bir JSON dosyasına işaret eder ve HTML içeriğini doğrudan değiştirmeden daha kolay CDN dağıtımlarını kolaylaştırır.

JSON yapısı, her spekülatif yükleme türü için kurallar içermek üzere "prefetch" ve "prerender" dizilerini kullanır. Her kural farklı kaynaklar kullanabilir: bir urls listesi veya document rules

  • urls (bir url listesi) Prefetch veya prerender edilecek URL'lerin bir dizisi.
  • where (document rules) Sayfadaki hangi bağlantıların prefetch veya prerender edilmesi gerektiğini belirlemek için koşulları kullanan bir nesne.

Her kural, aşağıdaki gibi özellikleri içeren bir nesne olarak tanımlanır:

  • requires Speculation'lar üzerinde kısıtlamalar belirlemek için bir dize dizisi. Şu anda geçerli olan tek dize, bir cross-origin prefetch'in istemcinin IP adresini anonimleştirmesi gerektiğini belirten "anonymous-client-ip-when-cross-origin"dır.
  • target_hint Gezinilebilir hedef adı hakkında bir ipucu sağlayan bir dize olup kullanıcı aracısının yükleme sürecini optimize etmesine olanak tanır. Bir ipucu olmanın ötesinde herhangi bir normatif etkisi yoktur.
  • referrer_policy Prefetch veya prerender edilen URL'lere uygulanacak bir referrer policy.
  • relative_to (Yalnızca "list" kaynağı için) "urls" dizisinde sağlanan URL'lerin belgenin temel URL'sine ("document") mi yoksa speculation rules JSON dosyasının konumuna ("ruleset") mı göre göreli olduğunu belirtir.
  • eagerness Tarayıcının ne kadar agresif bir şekilde prefetch veya prerender yapması gerektiğini kontrol eder. Mevcut ayarlar "immediate", "eager", "moderate" ve "conservative" olup her birinin farklı tetikleyicileri vardır.
  • expects_no_vary_search Geliştiricilerin speküle edilen URL'nin arama parametrelerine göre farklı bir yanıt vermesinin beklenip beklenmediğini belirtmesine olanak tanıyan, bir URL arama varyans ipucu sağlamak için kullanılan bir dize.

Son olarak her kuralın, speculation'ların ne zaman çalışması gerektiğini tanımlamanıza olanak tanıyan ve ne zaman speküle edileceğini hangi URL'ler üzerinde speculation yapılacağından ayıran bir eagerness ayarı vardır. Eagerness ayarı hem list hem de document source rules için kullanılabilir ve dört ayarı vardır: immediate, eager, moderate ve conservative.

  • immediate: Mümkün olan en kısa sürede, speculation rules gözlemlenir gözlemlenmez speküle etmek için kullanılır.
  • eager: Şu anda immediate ayarıyla aynı şekilde davranır, ancak gelecekte immediate ve moderate arasında bir yere konumlandırılacaktır.
  • moderate: Bir bağlantının üzerine 200 milisaniye geldiğinizde speculation yapar (veya daha erken gerçekleşirse pointerdown olayında ve hover olayının olmadığı mobilde).
  • conservative: Pointer veya dokunma basışında speküle eder.

Prefetch veya Prerender

Speculation Rules API, spekülatif yüklemenin iki temel biçimini destekler: prefetching ve prerendering. Her iki teknik de daha hızlı sayfa yüklemelerine yol açabilse de, karmaşıklık ve kaynak tüketimi açısından farklılık gösterirler.

  • Prefetching, spekülatif yüklemenin 'daha hafif biçimi'dir. Hedef url'nin HTML'sini sayfayı veya alt kaynaklarını render etmeden indirir ve önbelleğe alır. Bu yaklaşım esas olarak Time To First Byte'ı iyileştirir. Geliştirilmiş bir Time to First Byte, Largest Contentful Paint ve First Contentful Paint gibi daha iyi boya metriklerine yol açar.
  • Prerendering yalnızca HTML'yi indirmekten çok daha fazlasını yapar. HTML'yi, tüm alt kaynakları indirir ve sayfanın tamamını gizli, görünmez bir sekmede render eder. Bu sayfaya gezinildiğinde neredeyse anlık görüntüleme sağlar. Bu teknik Largest Contentful Paint'i yalnızca Time to First Byte'ı iyileştirmenin ötesinde daha fazla şekilde iyileştirir. Ayrıca LCP öğesini indirir ve render eder. Prerendering, kaynak boyutları prerendering sonrasında zaten bilindiğinden Cumulative Layout Shift'i de ortadan kaldırabilir.

Peki hangisi daha iyi? Prerendering mi yoksa Prefetching mi? Bu, sayfaya ve 'ortalama ziyaretçiye' bağlıdır. Prerendering tasarım gereği daha hızlı olsa da aynı zamanda hem istemci hem de sunucu tarafında çok daha fazla kaynak kullanır. Prerendering veya prefetching tercihi şunlara bağlıdır:

  • Kullanıcının cihaz özellikleri: Ziyaretçilerin yüksek bir yüzdesinin sınırlı belleğe sahip cihazlarla ziyaret etmesi durumunda prerendering en iyi seçim olmayabilir
  • Prerender veya prefetch kural özgüllüğü. 'Bazı bağlantıların tıklanma olasılığı daha yüksektir ve bazı sayfaların dönüşüm sağlama olasılığı daha yüksektir' Bu sayfalar prerender kuralı için mükemmel adaylardır. Diğer sayfalar prefetch için daha uygun olabilir.

CoreWebVitals.io, özellikle mobil cihazlarda veya daha yavaş bağlantılarda kaynak talepleri nedeniyle aşırı prerendering'e karşı uyarıda bulunmak ister. Prerendering'in potansiyel faydaları, performans düşüşü ve kaynak israfı riskiyle tartılmalıdır.

Doğru 'Eagerness'ı Ayarlamak - dengeleme sanatı

Hangi eagerness ayarının kullanılacağı sitenize bağlıdır. Çok basit bir statik site için, daha agresif speküle etmek düşük maliyetli olabilir ve kullanıcılar için faydalı olabilir. Daha karmaşık mimarilere ve daha ağır sayfa payload'larına sahip siteler, israfı azaltmak için kullanıcılardan daha olumlu bir niyet sinyali alana kadar daha az sıklıkta speküle etmeyi tercih edebilir.

Speculation Rules API'deki eagerness ayarı, bir tarayıcının tahmin edilen kullanıcı gezinmesine dayalı olarak içeriği ne zaman prefetch veya prerender etmesi gerektiğini etkiler. Bu ayar, önceden yükleme faydalarını maksimize etmek ile kaynak israfını minimize etmek arasında bir denge sunar.

List rules için varsayılan eagerness immediate'dir. moderate ve conservative seçenekleri, list rules'ı bir kullanıcının belirli bir listeyle etkileşime girdiği URL'lerle sınırlamak için kullanılabilir. Birçok durumda, uygun bir where koşuluna sahip document rules daha uygun olabilir.

Document rules için varsayılan eagerness conservative'dir. Bir belge birçok URL'den oluşabileceğinden, document rules için immediate veya eager kullanımı dikkatli yapılmalıdır.

Eagerness seçimi, web sitesinin yapısına, kullanıcı davranış kalıplarına ve geliştiricinin potansiyel kaynak tüketimi ile user experience faydaları değerlendirmesine bağlıdır. Örneğin, basit bir statik site "eager" ayarından fayda görebilir ve daha hızlı yükleme sürelerine yol açabilir. Tersine, karmaşık mimarilere ve zorlu sayfa payload'larına sahip web siteleri, daha net kullanıcı niyeti algılanana kadar kaynak kullanımını sınırlamak için daha az agresif "moderate" veya "conservative" yaklaşımını tercih edebilir.

Eagerness'ı yapılandırırken, geliştiriciler user experience, kaynak maliyetleri ve tarayıcı sınırlamalarını hesaba katmalıdır. Aşırı speculation, kullanıcının bant genişliğini, belleğini ve CPU'sunu zorlayabilir ve özellikle kısıtlı ağlarda veya cihazlarda performansı düşürebilir. Chrome, aşırı kullanımı azaltmak için eşzamanlı prefetch ve prerender edilen sayfa sayısını sınırlar. Ayrıca, kullanıcı tarafından yapılandırılan Veri Tasarrufu modları, düşük pil durumları veya tarayıcı uzantıları gibi faktörler, kaynak korumayı önceliklendirerek speculation rules'ı geçersiz kılabilir.

Speculation rules'ı kontrol etme ve hata ayıklama 

Bir sayfadaki speculation rules'ı kontrol etmek için Chrome DevTools'u açın, Application paneline gidin ve Background Services > Speculative Loads > Speculations'a gidin. (hata ayıklamak istediğiniz sayfayı yüklemeden önce Speculations bölmesini açın) Bu panel şu bilgileri sağlar:

  • Başarılı speculation sayısı.
  • Prerender veya prefetch edilen bireysel URL'ler.
  • Her speculation'ın durumu.

Performance panelindeki Network izi, DevTools bağlamını değiştirmeye gerek kalmadan prerender edilen kaynaklarla ilgili ağ etkinliğini gösterir. Ayrıca, DevTools bağlamını prerender edilen bir sayfaya geçirerek onu normal bir sayfa gibi inceleyebilirsiniz.

Speculation Rules'ı İzleme ve Analiz Etme 

  • Real User Monitoring (RUM): Gerçek user experience'ı ölçmek için RUM araçlarını kullanın. Speculation rules'ın sayfa yükleme süreleri üzerindeki etkisini değerlendirmek için Largest Contentful Paint (LCP) gibi metrikleri gözlemleyin. Prerender edilen sayfalar için LCP'deki iyileşmeleri prerender edilmeyen sayfalarla karşılaştırarak arayın.
  • A/B Testi: Farklı speculation rule yapılandırmalarını karşılaştırmak ve özel web siteniz ve kullanıcı tabanınız için en optimal kurulumu belirlemek üzere A/B testleri yapın.

Dikkat Edilmesi Gerekenler - olumsuz yönler

Kaynak Tüketimi: Speculation'ın aşırı kullanımı bant genişliği, bellek ve CPU kullanımını olumsuz etkileyebilir.

Tarayıcı Uyumluluğu: Tüm tarayıcılar Speculation Rules API'yi tam olarak desteklemez, bu nedenle uygulamadan önce tarayıcı uyumluluğunu kontrol edin.

Gizlilik: Geliştiriciler, speculation rules'ın kullanıcı gezinme kalıplarını nasıl ortaya çıkarabileceğine dikkat etmeli ve uygun gizlilik önlemlerini uygulamalıdır.

Speculation Rules API, web uygulamalarının performansını ve user experience'ını geliştirmek için güçlü bir yaklaşım sunar. Mekaniklerini, faydalarını ve dikkat edilmesi gerekenleri anlayarak, geliştiriciler daha hızlı ve daha ilgi çekici web siteleri oluşturmak için bu API'den yararlanabilir.

Speculation Rules WordPress Kodu

WordPress Core Performance ekibi, herhangi bir WordPress sitesine document rule desteği eklemeyi tek tıklamayla yapılabilir hale getiren bir Speculation Rules eklentisi oluşturmuştur. Eklenti iki grup ayar sunar:

  • Speculation Modu: prefetch ve prerender arasında seçim yapın. Prerendering, prefetching'den daha hızlı yükleme süreleri sağlayacaktır. Ancak prefetching, etkileşimli içerik için daha güvenli bir seçim olabilir.
  • Eagerness: conservative (genellikle tıklamada), moderate (genellikle üzerine gelmede) veya eager (en küçük öneri ile) arasında seçim yapın. Eagerness ayarı, spekülatif yüklemelerin ne kadar hızlı tetikleneceğini belirler.
Speculation Rules ile anında yüklenen sayfalar Core Web Vitals Speculation Rules ile anında yüklenen sayfalar