Tahmin kuralları, önceki yayında ayrıntılı olarak açıklandığı gibi sonraki sayfada gezinme işlemlerini önceden getirmek ve önceden işlemek için kullanılabilir. Bu sayede sayfalar çok daha hızlı, hatta anında yüklenebilir ve bu ek sayfa gezinmeleri için Core Web Vitals önemli ölçüde iyileştirilebilir.
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şturucuda işlenir. Bu, etkinleştirildiğinde mevcut sekmenin yerini alan gizli bir arka plan sekmesi gibidir. Bu nedenle, sorunları ayıklamak için her zaman her zamanki Geliştirici Araçları seçenekleri kullanılamaz.
Chrome ekibi, spekülasyon kuralları hata ayıklama için Geliştirici Araçları desteğini iyileştirmek üzere yoğun bir şekilde çalışıyor. Bu yayında, bir sayfanın spekülasyon kurallarını, neden çalışmayabileceğini ve geliştiricilerin daha tanıdık Geliştirici Araçları seçeneklerini ne zaman kullanabileceğini ve ne zaman kullanamayacağını anlamak için bu araçları kullanmanın çeşitli yollarını göreceksiniz.
"Ön" terimlerinin açıklaması
"Ön" ile başlayan birçok kafa karıştırıcı terim vardır. Bu nedenle, önce bunları açıklayacağız:
- Önceden getirme: Gelecekteki performansı iyileştirmek için bir kaynağı veya dokümanı önceden getirme. Bu yayında, alt kaynakları önceden getirmek için sıkça kullanılan benzer ancak daha eski
<link rel="prefetch">seçeneği yerine Speculation Rules API kullanılarak belgelerin önceden getirilmesi ele alınmaktadır. - Önceden işleme: Bu, önceden getirmenin bir adım ötesine geçer ve tüm sayfayı kullanıcı sayfaya gitmiş gibi oluşturur ancak kullanıcı gerçekten sayfaya giderse kullanılmaya hazır, gizli bir arka plan oluşturucu işleminde tutar. Bu dokümanda, eski
<link rel="prerender">seçeneği (artık tam önceden işleme yapmaz) yerine bu özelliğin daha yeni Speculation Rules API sürümü ele alınmaktadır. - Tahmini gezinmeler: Tahmin kuralları tarafından tetiklenen yeni önceden getirme ve önceden işleme seçeneklerinin ortak adıdır.
- Önceden yükleme:
<link rel="preload">, önceden yükleme tarayıcısı ve hizmet çalışanı gezinme önceden yüklemeleri dahil olmak üzere bir dizi teknoloji ve süreci ifade edebilen aşırı yüklenmiş bir terimdir. Bu öğeler burada ele alınmayacaktır ancak bu terim, "tahmini gezinmeler" teriminden net bir şekilde ayırt edilmesi için eklenmiştir.
prefetch için spekülasyon kuralları
Tahmin kuralları, bir sonraki gezinme işleminin dokümanını önceden getirmek için kullanılabilir. Örneğin, aşağıdaki JSON bir sayfaya eklendiğinde next.html ve next2.html önceden getirilir:
<script type="speculationr>ules"
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
Gezinme önceden getirmeleri için tahmin kurallarını kullanmanın, eski <link rel="prefetch"> söz dizimine kıyasla bazı avantajları vardır. Örneğin, daha açıklayıcı bir API ve sonuçların HTTP disk önbelleği yerine RAM önbelleğinde depolanması gibi.
prefetch spekülasyon kuralında hata ayıkla
Tahmin kuralları tarafından tetiklenen önceden getirme işlemleri, diğer getirme işlemleriyle aynı şekilde Ağ panelinde görülebilir:
Kırmızıyla vurgulanan iki istek, Tür sütununda görülebileceği gibi önceden getirilmiş kaynaklardır. Bunlar, gelecekteki gezinmeler için olduğundan Lowest önceliğinde getirilir ve Chrome, mevcut sayfanın kaynaklarına öncelik verir.
Satırlardan birini tıkladığınızda, bu isteklerin sunucu tarafında nasıl tanımlanabileceğini gösteren Sec-Purpose: prefetch HTTP üstbilgisi de gösterilir:
Tahmine dayalı içerik sekmeleriyle prefetch sayfasında hata ayıklama
Tahmine dayalı içerik kurallarında hata ayıklamaya yardımcı olmak için Chrome Geliştirici Araçları'nın Uygulama panelindeki Arka plan hizmetleri bölümüne yeni bir Tahmine dayalı içerikler bölümü eklendi:
Bu bölümde üç sekme bulunur:
- Mevcut sayfanın önceden işlenmiş durumunu listeleyen Tahmine dayalı içerikler.
- Kurallar: Geçerli sayfada bulunan tüm kural kümelerini URL'ler veya varsa kural etiketleri olarak listeler.
- Kural kümelerindeki önceden getirilmiş ve önceden işlenmiş tüm URL'leri listeleyen Speculations (Tahminler).
Önceki ekran görüntüsünde Tahminler sekmesi gösterilmektedir. Bu örnek sayfada, 3 sayfayı önceden getirmek için tek bir tahmin kuralı grubu olduğunu görebiliriz. Bu önceden getirme işlemlerinden ikisi başarılı, biri başarısız oldu. Kural kümesi'nin yanındaki simgeyi tıklayarak Öğeler panelindeki kural kümesinin kaynağına gidebilirsiniz. Alternatif olarak, Durum bağlantısını tıklayarak bu kural kümesine göre filtrelenmiş Tahminler sekmesine gidebilirsiniz.
Speculations sekmesinde tüm hedef URL'ler, işlem (önceden getirme veya önceden işleme), hangi kural kümesinden geldikleri (bir sayfada birden fazla kural kümesi olabilir) ve her bir tahmini işlemin durumu listelenir:
URL'lerin üst kısmında, tüm kural kümelerindeki URL'leri veya yalnızca belirli bir kural kümesindeki URL'leri göstermek için bir açılır liste 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ığı için 404 döndürür, bu da 2xx olmayan bir HTTP durum kodudur) başarısızlık nedenini görebiliriz.
Tahmine dayalı içerikler özet sekmesinde, bu sayfa için önceden getirme veya önceden işleme özelliğinin kullanılıp kullanılmadığını gösteren Bu sayfanın tahmine dayalı içerik durumu raporu gösterilir.
Önceden getirilen bir sayfaya gidildiğinde başarılı mesajı görürsünüz:
Eşleşmeyen tahminler
Tahmin kuralları içeren bir sayfadan gezinme işlemi gerçekleştiğinde ve bu işlem, önceden getirme veya önceden işleme ile sonuçlanmadığında sekmenin ek bir bölümünde, URL'nin tahmin URL'lerinden herhangi biriyle neden eşleşmediğiyle ilgili daha fazla ayrıntı gösterilir. Bu, tahmin kurallarınızdaki yazım hatalarını tespit etmek için kullanışlıdır.
Örneğin, burada next4.html sayfasına gittik ancak yalnızca next.html, next2.html veya next3.html önceden getiriliyor. Bu nedenle, bunun bu üç kuraldan herhangi biriyle tam olarak eşleşmediğini görebiliriz.
Tahmine dayalı içerikler sekmeleri, tahmine dayalı içerik kurallarında hata ayıklamak ve JSON'daki söz dizimi hatalarını bulmak için çok kullanışlıdır.
Önceden getirmelerin kendileri için Ağ paneli muhtemelen daha tanıdık bir yerdir. Önceden getirme hatası örneğinde, önceden getirme için 404 hatasını burada görebilirsiniz:
Ancak Tahmine dayalı içerikler sekmeleri, bir sonraki bölümde ele alınacak olan önceden işleme spekülasyon kuralları için çok daha kullanışlıdır.
prerender için spekülasyon kuralları
Önceden işleme spekülasyon kuralları, önceden getirme spekülasyon kurallarıyla aynı söz dizimini kullanır. Örneğin:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
Bu kural kümesi, 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 sağlayabilir.
Ancak önceden getirmelerin aksine, bunlar Chrome'da ayrı bir oluşturma işleminde getirilip oluşturulduğundan Ağ panelinde gösterilmez. Bu nedenle, önceden işleme tahmine dayalı içerik kurallarında hata ayıklamak için Tahmine dayalı içerikler sekmeleri daha önemlidir.
Tahmine dayalı içerik sekmeleriyle prerender sayfasında hata ayıklama
Aynı Tahmine dayalı içerikler ekranları, önceden işleme tahmin kuralları için kullanılabilir. Bu durum, üç sayfayı önceden getirmek yerine önceden işlemeye çalışan benzer bir demo sayfasında gösterilmiştir:
Burada, üç URL'den birinin önceden işlenemediğini tekrar görüyoruz. Geliştiriciler, 2 Hazır, 1 Başarısız bağlantısını tıklayarak Tahminler sekmesinde her URL'nin ayrıntılarını görebilir.
Chrome 121'de belge kuralları desteğini kullanıma sunduk. Bu sayede tarayıcı, belirli bir URL grubu listelemek yerine sayfadaki aynı kaynak bağlantılarından bunları alabilir:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_match<es">;: "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
/script
Bu örnekte, önceden işleme adayları olarak /not-safe-to-prerender ile başlayanlar hariç tüm aynı kaynak bağlantıları seçilir.
Ayrıca önceden işlemeyi eagerness olarak moderate ayarlar. Bu, bağlantının üzerine gelindiğinde (masaüstünde), görüntü alanına göre (mobil cihazda) veya tıklandığında gezinmelerin önceden işlendiği anlamına gelir.
Tahmine dayalı kurallar demo sitesinde buna benzer kurallar vardır. Bu sitedeki yeni Tahmine dayalı içerikler bölümü kullanıldığında, tarayıcının sayfada bulduğu tüm uygun URL'ler listelendiği için bu yeni sekmenin ne kadar yararlı olduğu görülür:
Bunlar için önceden işleme süreci başlamadığından Durum, Tetiklenmedi olarak gösterilir. Ancak işaretçiyi bağlantıların üzerine getirdiğimizde, her URL önceden işlenirken durumun değiştiğini görürüz:
Chrome, moderate isteklilik için en fazla 2 önceden işleme dahil olmak üzere önceden işleme için sınırlar belirlemiştir. Bu nedenle, fareyle 3. bağlantının üzerine geldiğimizde bu URL'nin başarısızlık nedenini görürüz:
Diğer Geliştirici Araçları panelleriyle prerender hata ayıklama
Önceden işlenen sayfalar, önceden getirilen sayfaların aksine, kendi arka plan oluşturucularında oluşturuldukları için Geliştirici Araçları panellerindeki (ör. Ağ paneli) mevcut oluşturma işlemlerinde gösterilmez.
Ancak artık sağ üstteki açılır menüyü kullanarak veya panelin üst kısmında bir URL seçip Denetle'yi tıklayarak Geliştirici Araçları panelleri tarafından kullanılan oluşturucuyu değiştirebilirsiniz:
Bu açılır liste (ve seçilen değer), istenen sayfanın önceden işlenmiş sayfa 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 ayarlanacağını görebiliriz:
İsterseniz sayfa içeriklerini görebileceğiniz Öğeler panelini de kullanabilirsiniz. Aşağıdaki ekran görüntüsünde, önceden işlenen sayfa için <h1> öğesini görebilirsiniz:
Önceden işlenen sayfa tarafından yayınlanan konsol günlüklerini görebileceğiniz Konsol paneli:
Önceden işlenmiş sayfadaki tahmin kurallarında hata ayıklama
Önceki bölümlerde, önceden işlenmiş sayfaların, önceden işlemeyi başlatan sayfada nasıl hata ayıklanacağı açıklanmıştır. Ancak önceden işlenen sayfaların kendileri de analiz çağrıları yaparak veya konsola giriş yaparak (önceki bölümde açıklandığı gibi görüntülenebilir) hata ayıklama bilgileri sağlayabilir.
Ayrıca, önceden işlenmiş bir sayfa, kullanıcı tarafından sayfaya gidilerek etkinleştirildiğinde Tahmine dayalı içerikler sekmesinde bu durum ve sayfanın başarıyla önceden işlenip işlenmediği gösterilir. Önceden işlenemiyorsa bunun nedeni açıklanır:
Ayrıca, önceden getirme işlemlerinde olduğu gibi, mevcut sayfayla eşleşmeyen tahmine dayalı içerik kuralları içeren bir sayfadan gezinme işlemi, URL'lerin neden önceki sayfanın tahmine dayalı içerik kurallarında yer alan URL'lerle eşleşmediğini Tahmine dayalı içerik sekmesinde göstermeye çalışır:
Sonuç
Bu yayında, geliştiricilerin önceden getirme ve önceden işleme tahmin kurallarında hata ayıklamak için kullanabileceği çeşitli yöntemleri gösterdik. Ekip, spekülasyon kuralları için araçlar üzerinde çalışmaya devam ediyor. Geliştiricilerin, bu heyecan verici yeni API'de hata ayıklama konusunda yardımcı olabilecek diğer yöntemlerle ilgili önerilerini duymak isteriz. Geliştiricilerin, özellik istekleri veya tespit edilen hatalar için Chrome Issue Tracker'da sorun bildirmelerini öneririz.
Onaylar
Küçük resim, Unsplash'te Nubelson Fernandes tarafından sağlanmıştır.