Tahmin kuralları, önceki yayında ayrıntılı olarak açıklandığı gibi sonraki sayfa gezinmelerini önceden almak ve önceden oluşturmak için kullanılabilir. Bu, sayfaların çok daha hızlı hatta anında yüklenmesini sağlayarak bu ek sayfa gezinmelerinde Core Web Vitals metriğini önemli ölçüde iyileştirir.
Spekülasyon kurallarında hata ayıklama işlemi karmaşık olabilir. Bu durum, özellikle önceden işlenmiş sayfalar için geçerlidir. Bu sayfalar ayrı bir oluşturma aracında oluşturulur. Bu, etkinleştirildiğinde geçerli sekmenin yerini alan gizli bir arka plan sekmesi gibidir. Bu nedenle, sorunları gidermek için her zaman normal Geliştirici Araçları seçenekleri kullanılamaz.
Chrome ekibi, spekülasyon kuralları hata ayıklama için DevTools desteğini iyileştirmek üzere yoğun bir şekilde çalışıyor. Bu yayında, bir sayfanın spekülasyon kurallarını, bu kuralların neden çalışmayabileceğini ve geliştiricilerin daha aşina oldukları DevTools seçeneklerini ne zaman kullanabileceklerini ve ne zaman kullanamayacaklarını anlamak için bu araçları kullanmanın tüm farklı yollarını göreceksiniz.
"Ön" terimlerinin açıklaması
Kafa karıştırıcı birçok "önce" terimi vardır. Bu nedenle, öncelikle bu terimlerin açıklamalarını paylaşacağız:
- Ön getirme: Gelecekteki performansı artırmak için bir kaynağı veya dokümanı önceden getirme. Bu gönderi, genellikle alt kaynakları ön beslemek için kullanılan benzer ancak eski
<link rel="prefetch">seçeneği yerine Speculation Rules API'yi kullanarak belgelerin ön beslemesini kapsamaktadır. - Önceden oluşturma: Bu işlem, ön beslemenin bir adım ötesine geçer ve sayfanın tamamını kullanıcı sayfaya gitmiş gibi oluşturur ancak kullanıcı gerçekten sayfaya giderse kullanılmaya hazır olarak gizli bir arka plan oluşturma işleminde tutar. Bu doküman, eski
<link rel="prerender">seçeneği (artık tam ön oluşturma yapmaz) yerine bunun daha yeni Speculation Rules API sürümüyle ilgilidir. - Spekülatif gezinmeler: Spekülasyon kuralları tarafından tetiklenen yeni ön getirme ve ön oluşturma seçeneklerinin toplu terimi.
- Önceden yükleme:
<link rel="preload">, önceden yükleme tarayıcı ve hizmet çalışanı gezinme önceden yüklemeleri dahil olmak üzere çeşitli teknolojileri ve süreçleri ifade edebilen, aşırı yüklenmiş bir terimdir. Bu öğeler burada ele alınmayacaktır ancak bu terim, "spekülatif gezinmeler" teriminden net bir şekilde ayırt edilebilmesi için dahil edilmiştir.
prefetch için spekülasyon kuralları
Spekülasyon kuralları, sonraki gezinme işleminin dokümanlarını önceden almak için kullanılabilir. Örneğin, aşağıdaki JSON bir sayfaya eklendiğinde next.html ve next2.html önceden getirilir:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Gezinme ön getirme işlemleri için spekülasyon kuralları kullanmak, daha etkileyici bir API ve sonuçların HTTP disk önbelleği yerine bellek önbelleği içinde depolanması gibi eski <link rel="prefetch"> söz dizimine kıyasla bazı avantajlara sahiptir.
prefetch spekülasyon kurallarında hata ayıklama
Spekülasyon kuralları tarafından tetiklenen ön getirmeler, diğer getirmelerle aynı şekilde Ağ panelinde görülebilir:
Tür sütununda da görüldüğü gibi, kırmızı renkle vurgulanan iki istek önceden getirilmiş kaynaklardır. Bunlar, gelecekteki gezinmeler için olduğundan ve Chrome mevcut sayfanın kaynaklarına öncelik verdiğinden Lowest öncelikli olarak getirilir.
Satırlardan birini tıkladığınızda Sec-Purpose: prefetch HTTP üst bilgisi de gösterilir. Bu istekler, sunucu tarafında bu şekilde tanımlanabilir:
Tahmine dayalı yükleme sekmeleriyle prefetch'te hata ayıklama
Spekülasyon kurallarıyla ilgili hata ayıklama işlemine yardımcı olmak için Chrome DevTools'un Uygulama panelinde Arka plan hizmetleri bölümünün altına yeni bir Spekülatif yüklemeler bölümü eklendi:
Bu bölümde üç sekme bulunur:
- Geçerli sayfanın önceden oluşturulmuş durumunu listeleyen Tahmine dayalı yüklemeler.
- Geçerli sayfada bulunan tüm kural gruplarını listeleyen Kurallar.
- Kural kümelerindeki önceden getirilen ve önceden oluşturulan tüm URL'leri listeleyen Tahminler.
Önceki ekran görüntüsünde Tahminler sekmesi gösterilmektedir. Bu örnek sayfada, 3 sayfayı önceden getirmeyle ilgili tek bir tahmin kuralı grubu olduğunu görebiliriz. Bu ön getirme işlemlerinden ikisi başarılı, biri başarısız oldu. Kural grubu'nun yanındaki simgeyi tıklayarak Öğeler panelinde kural grubunun kaynağına gidebilirsiniz. Alternatif olarak, Durum bağlantısını tıklayarak ilgili kural kümesine göre filtrelenen Spekülasyonlar sekmesine gidebilirsiniz.
Tahminler sekmesinde, tüm hedef URL'ler, işlem (ön besleme veya ön oluşturma), hangi kural grubundan geldikleri (bir sayfada birden fazla olabilir) ve her tahminin durumu listelenir:
URL'lerin üzerinde, tüm kural kümelerindeki veya yalnızca belirli bir kural kümesindeki URL'leri göstermek için bir açılır menü kullanılabilir. Bunun altında tüm URL'ler listelenir. Bir URL'yi tıkladığınızda daha ayrıntılı bilgi edinebilirsiniz.
Bu ekran görüntüsünde, next3.html sayfasının (mevcut olmadığı ve bu nedenle 2xx olmayan bir HTTP durum kodu olan 404 döndürdüğü) başarısız olma nedeni gösterilmektedir.
Tahmine dayalı yüklemeler özet sekmesinde, bu sayfa için önceden getirme veya önceden oluşturma işleminin kullanılıp kullanılmadığını gösteren bir Bu sayfanın tahmine dayalı içerik durumu raporu gösterilir.
Önceden getirilen bir sayfaya gidildiğinde başarılı olduğunu belirten bir mesaj görürsünüz:
Eşleşmeyen tahminler
Tahmin kuralları içeren bir sayfadan, önceden getirme veya önceden oluşturma işleminin kullanılmasıyla sonuçlanmayan bir gezinme yapıldığında, sekmenin ek bir bölümünde URL'nin tahmin URL'lerinden hiçbiriyle eşleşmemesinin nedenine dair daha fazla ayrıntı gösterilir. Bu, tahmin kurallarınızdaki yazım hatalarını tespit etmek için yararlıdır.
Örneğin, burada next4.html adresine gittik ancak yalnızca next.html, next2.html veya next3.html ön getirme işlemidir. Dolayısıyla bu, üç kuraldan hiçbiriyle tam olarak eşleşmez.
Spekülatif yüklemeler sekmeleri, spekülasyon kurallarının hatalarını ayıklama ve JSON'da söz dizimi hatalarını bulmak için çok kullanışlıdır.
Ön beslemelerin kendisi için ise Ağ paneli muhtemelen daha aşina bir yerdir. Ön besleme hatası örneğinde, ön besleme için 404 hatasını burada görebilirsiniz:
Ancak Spekülatif yüklemeler sekmeleri, spekülasyon kurallarını önceden işleme konusunda çok daha faydalı hale gelir. Bu konu aşağıda ele alınmaktadır.
prerender için spekülasyon kuralları
Önceden oluşturma spekülasyonu kuralları, önceden getirme spekülasyonu kurallarıyla aynı söz dizimini izler. Örneğin:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Bu kural grubu, belirtilen sayfaların tam olarak yüklenmesini ve oluşturulmasını tetikler (belirli kısıtlamalara tabidir). Bu, ek kaynak maliyetleri olsa da anında yükleme deneyimi sunabilir.
Ancak ön getirme işlemlerinin aksine, Chrome'da ayrı bir oluşturma işleminde getirilip oluşturuldukları için bu ön yüklemeler Ağ panelinde görülemez. Bu nedenle, ön oluşturma spekülasyonu kurallarında hata ayıklama için Spekülatif yüklemeler sekmeleri daha önemlidir.
Tahmine dayalı yüklemeler sekmeleriyle prerender'te hata ayıklama
Üç sayfayı önceden almak yerine önceden oluşturma denemesi yapan benzer bir demo sayfasında gösterildiği gibi, önceden oluşturma spekülasyonu kuralları için aynı Spekülatif yüklemeler ekranları kullanılabilir:
Burada, üç URL'den birinin ön oluşturma işleminin başarısız olduğunu tekrar görüyoruz. Geliştiriciler, 2 Hazır, 1 Hata bağlantısını tıklayarak Tahminler sekmesinde URL başına ayrıntıları görebilir.
Chrome 121'de doküman kuralları desteğini kullanıma sunduk. Bu sayede tarayıcı, belirli bir URL grubunu listelemek yerine bunları sayfadaki aynı kaynak bağlantılarından alabilir:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
Bu örnekte, ön oluşturma adayları olarak /not-safe-to-prerender ile başlayanlar hariç tüm aynı kaynak bağlantıları seçilir.
Ayrıca, ön oluşturma eagerness değerini moderate olarak ayarlar. Bu, bağlantı fareyle üzerine gelindiğinde veya tıklandığında gezinme öğelerinin önceden oluşturulacağı anlamına gelir.
Tahmini kurallar demo sitesinde buna benzer kurallar vardır. Bu sitedeki yeni Tahmini yüklemeler bölümünü kullandığınızda, tarayıcı sayfasında bulduğu tüm uygun URL'ler listelenir. Bu da bu yeni sekmenin ne kadar yararlı olduğunu gösterir:
Bunların ön oluşturma işlemi başlatılmadığı için Durum Tetiklenmedi olarak görünür. Ancak, işaretçiyi bağlantıların üzerinde tuttuğumuzda her URL önceden oluşturulduğu için durumun değiştiğini görürüz:
Chrome, moderate istekliliği için maksimum 2 ön oluşturma dahil olmak üzere ön oluşturmalarla ilgili sınırlar belirlemiştir. Bu nedenle, fareyle 3. bağlantının üzerine geldiğinizde söz konusu URL'nin neden başarısız olduğunu görebilirsiniz:
Diğer DevTools panelleriyle prerender'te hata ayıklama
Ön beslemenin aksine, önceden oluşturulmuş sayfalar kendi sahne arkası oluşturucuda oluşturuldukları için Ağ paneli gibi DevTools panellerindeki mevcut oluşturma işlemlerinde gösterilmez.
Ancak artık sağ üstteki açılır menüden veya panelin üst kısmında bir URL seçip İncele'yi tıklayarak Geliştirici Araçları panellerinin kullandığı oluşturma aracını değiştirmek mümkün:
Bu açılır menü (ve seçilen değer), istenen sayfanın önceden oluşturulmuş olduğunu görebileceğiniz Ağ paneli gibi diğer tüm panellerde de paylaşılır:
Bu kaynakların HTTP üstbilgilerine baktığımızda hepsinin Sec-Purpose: prefetch;prerender üstbilgisiyle ayarlandığını görebiliriz:
Dilerseniz sayfa içeriğini görebileceğiniz Öğeler panelini de kullanabilirsiniz. Aşağıdaki ekran görüntüsünde, <h1> öğesinin önceden oluşturulmuş sayfa için olduğunu görebilirsiniz:
Dilerseniz önceden oluşturulmuş sayfanın yayınladığı konsol günlüklerini görebileceğiniz Konsol panelini de kullanabilirsiniz:
Önceden oluşturulmuş sayfada spekülasyon kurallarıyla ilgili hata ayıklama
Önceki bölümlerde, önceden oluşturmayı başlatan sayfada önceden oluşturulmuş sayfaların nasıl hata ayıklayacağı açıklanmaktadır. Ancak, önceden oluşturulmuş sayfaların da analiz çağrıları yaparak veya konsola (önceki bölümde açıklandığı gibi görüntülenebilir) giriş yaparak hata ayıklama bilgileri sağlaması mümkündür.
Ayrıca, önceden oluşturulmuş bir sayfa kullanıcı tarafından etkinleştirildikten sonra Tahmini yüklemeler sekmesi bu durumu ve sayfanın başarıyla önceden oluşturulup oluşturulmadığını gösterir. İçerik önceden oluşturulamadıysa bunun nedeni açıklanır:
Ayrıca, önceden getirme işlemlerinde olduğu gibi, tahmin kuralları mevcut sayfayla eşleşmeyen bir sayfadan gezinirken Tahmine dayalı yüklemeler sekmesinde, URL'lerin önceki sayfanın tahmin kurallarında yer alan URL'lerle neden eşleşmediğini size göstermeye çalışır:
Sonuç
Bu yayında, geliştiricilerin ön getirme ve ön oluşturma spekülasyonu kurallarıyla ilgili hataları gidermek için kullanabileceği çeşitli yöntemler gösterilmiştir. Ekip, spekülasyon kurallarıyla ilgili araçlar üzerinde çalışmaya devam ediyor. Geliştiricilerden, bu heyecan verici yeni API'de hata ayıklamayla ilgili yardımcı olabilecek diğer yöntemlerle ilgili önerilerini duymak isteriz. Geliştiricilerin, Chrome sorun izleyici üzerinden özellik isteklerine veya tespit edilen hatalara dair sorun bildirmelerini öneririz.
Teşekkür ederiz
Unsplash'ta Nubelson Fernandes tarafından oluşturulan küçük resim.