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ıklamak zor 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 mevcut 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ıklaması için Geliştirici Araçları desteğini iyileştirmek amacıyla yoğun bir şekilde çalışıyor. Bu gönderide, bir sayfanın spekülasyon kurallarını, neden çalışmadıklarını ve geliştiricilerin daha bilinen Geliştirici Araçları seçeneklerini ne zaman kullanabileceğini ve ne zaman kullanılamayacağını anlamak için bu araçları kullanmanın çeşitli yollarını öğreneceksiniz.
"Ön" terimlerinin açıklaması
Kafa karıştırıcı birçok "önce" terimi vardır. Bu nedenle, öncelikle bu terimleri açıklamakla başlayacağı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. - Gezinme spekülasyonları: Tahmin kuralları tarafından tetiklenen yeni önceden getirme ve önceden işleme seçeneklerine ilişkin toplu terim.
- Ö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, "gezinme spekülasyonları" 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 eklenirken, next.html ve next2.html önceden getirilir:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Gezinmeyi önceden getirme işlemleri için tahmin kurallarının kullanılması, eski <link rel="prefetch"> söz dizimine kıyasla bazı avantajlar sunar (ör. daha etkileyici bir API ve sonuçların HTTP disk önbelleği yerine bellek önbelleğinde depolanması).
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:
Kırmızı renkle vurgulanan iki istek, Tür sütununda görülebileceği gibi, önceden getirilen kaynaklardır. Bunlar, gelecekteki gezinmeler için olduğundan Lowest öncelikli olarak getirilir ve Chrome, mevcut sayfanın kaynaklarına öncelik verir.
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 vardır:
- 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 simge tıklayarak Öğeler panelinde kural grubunun kaynağına gidebilirsiniz. Alternatif olarak, Durum bağlantısını tıklayarak bu kural grubuna göre filtrelenmiş 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. URL'leri tıklayarak 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şsiz spekülasyonlar
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 önceden getirme işlevi olduğundan, bunun bu üç kuraldan hiçbiriyle tam olarak eşleşmediğini görebiliriz.
Spekülatif yüklemeler sekmeleri, spekülasyon kurallarının hatalarını gidermek 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. Önceden getirme hatası örneğinde, önceden getirme için 404 kodunu burada görebilirsiniz:
Bununla birlikte, Tahmine dayalı yüklemeler sekmeleri, bir sonraki bölümde ele alınacak olan tahmin kuralları önceden işleme konusunda çok daha yararlı hale gelir.
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 hatalarını ayıklayın
Üç 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ının ü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ü kullanarak, tarayıcının sayfada 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 Geliştirici Araçları panelleriyle prerender hatalarını ayıklayın
Ö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 DevTools panelleri tarafından kullanılan oluşturma aracını değiştirmek mümkün:
Bu açılır liste (ve seçilen değer), Ağ paneli gibi diğer tüm panellerde de paylaşılır. İstenen sayfanın önceden işlenmiş sayfa olduğunu görebilirsiniz.
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:
Alternatif olarak, önceden işlenmiş sayfa tarafından yayınlanan konsol günlüklerini görebileceğiniz Konsol paneli:
Önceden oluşturulmuş sayfada spekülasyon kurallarıyla ilgili hata ayıklama
Önceki bölümlerde, önceden işlemeyi başlatan sayfadaki önceden işlenmiş sayfalarda nasıl hata ayıklanacağı açıklanmaktadır. Bununla birlikte, önceden işlenmiş sayfaların hata ayıklama bilgileri sağlamaları da mümkün olabilir. Bunun için Analytics çağrıları yaparak veya konsola giriş yaparak önceki bölümde açıklanan bilgileri görüntüleyebilirsiniz.
Ayrıca, önceden işlenmiş bir sayfa, oraya giden kullanıcı tarafından etkinleştirildikten sonra Tahmine dayalı yüklemeler sekmesi bu durumu ve sayfanın başarıyla önceden işlenip işlenmediğini 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 önceden getirme ve önceden işleme spekülasyon kurallarında hata ayıklamak için kullanabilecekleri çeşitli yöntemleri gösterdik. 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 öneriler almaktan memnuniyet duyarız. Geliştiricilerin, Chrome sorun izleyici üzerinden özellik isteklerine veya tespit edilen hatalara dair sorun bildirmelerini öneririz.
Teşekkür ederiz
Nubelson Fernandes tarafından Unsplash'teki küçük resim.