Spekülasyon kuralları, önceki yayında ayrıntılı olarak açıklandığı şekilde sonraki sayfadaki gezinmeleri önceden getirmek ve önceden oluşturmak için kullanılabilir. Bu da sayfaların çok daha hızlı (hatta anında) yüklenmesine olanak tanıyabilir ve bu ek sayfa gezinmeleri için Önemli Web Verileri'nin önemli ölçüde iyileştirilmesini sağlayabilir.
Spekülasyon kurallarında hata ayıklamak zor olabilir. Bu, özellikle önceden işlenmiş sayfalar için geçerlidir. Çünkü bu sayfalar ayrı bir oluşturucuda oluşturulur. Bu durum, etkinleştirildiğinde geçerli sekmenin yerini alan gizli bir arka plan sekmesi gibidir. Bu nedenle, olağan Geliştirici Araçları seçenekleri, sorunları ayıklamak için her zaman kullanılamaz.
Chrome ekibi, spekülasyon kurallarında hata ayıklamaya yönelik Geliştirici Araçları desteğini iyileştirmek için yoğun bir şekilde çalışıyor. Bu yayında, bir sayfanın spekülasyon kurallarını anlamak için bu araçları kullanmanın çeşitli yollarını, bunların neden çalışmayabileceğini ve geliştiricilerin daha bilinen Geliştirici Araçları seçeneklerini ne zaman kullanabileceğini, ne zaman kullanamayacağını göreceksiniz.
"Öncesi" terimlerinin açıklaması
Kolayca karıştırılan birçok "ön" terimi bulunduğundan, bunları bir açıklamayla başlayalım:
- Önceden getir: Gelecekteki performansı iyileştirmek için bir kaynağı veya dokümanı önceden getirmek. Bu yayında, benzer ancak alt kaynakları önceden getirmek için genellikle kullanılan daha eski bir
<link rel="prefetch">seçeneği yerine Speculation Rules API'yi kullanarak belgelerin önceden yüklenmesi anlatılmaktadır. - Önceden oluşturma: Bu, önceden getirme işleminin bir adım ötesine geçer ve tüm sayfayı kullanıcı buraya gitmiş gibi oluşturur, ancak kullanıcı gerçekten oraya gittiğinde sayfayı kullanılmaya hazır bir gizli arka plan oluşturucu işleminde tutar. Bu belgede de, eski
<link rel="prerender">seçeneği (artık tam önceden işleme işlemi yapmayan) yerine, bu Speculation Rules API'nin yeni sürümü ile ilgilidir. - Gezinme tahminleri: Tahmin kuralları tarafından tetiklenen yeni önceden getirme ve önceden işleme seçenekleri için kullanılan toplu terim.
- Önceden yükleme:
<link rel="preload">, önceden yükleme tarayıcısı ve hizmet çalışanı gezinme önceden yüklemeleri dahil olmak üzere çeşitli teknolojilere ve işlemlere işaret edebilecek aşırı yüklenmiş bir terim. Bu unsurlar burada ele alınmamaktadır. Bununla birlikte söz konusu terim, bunları "gezinme spekülasyonları" teriminden açıkça ayırt etmek için eklenmiştir.
prefetch için spekülasyon kuralları
Spekülasyon kuralları, bir sonraki gezinmenin dokümanını önceden getirmek için kullanılabilir. Örneğin, aşağıdaki JSON öğesini bir sayfaya eklerken next.html ve next2.html önceden getirilir:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Gezinme önceden getirmeleri için tahmin kurallarını kullanmak, daha ifade gücü yüksek bir API ve sonuçların HTTP disk önbelleği yerine bellek önbelleğinde saklanması gibi eski <link rel="prefetch"> söz dizimine göre bazı avantajlara sahiptir.
prefetch tahmin kuralının hataları ayıklanıyor
Tahmin kuralları tarafından tetiklenen önceden getirmeler, Ağ panelinde diğer getirmelerle aynı şekilde görülebilir:
Kırmızı renkle vurgulanmış iki istek, Tür sütununda görülebileceği gibi önceden getirilmiş kaynaklardır. Bu sayfalar, gelecekteki gezinmelerde olduğu için Lowest önceliğinde getirilir ve Chrome geçerli sayfanın kaynaklarına öncelik verir.
Satırlardan biri tıklandığında aynı zamanda Sec-Purpose: prefetch HTTP başlığı da gösterilir. Bu istekler sunucu tarafında şu şekilde tanımlanabilir:
Tahmine dayalı yükleme sekmeleriyle prefetch için hata ayıklama
Spekülasyon kurallarında hata ayıklamaya yardımcı olmak için Chrome Geliştirici Araçları'nın Uygulama paneline Arka plan hizmetleri bölümünün altına yeni bir Tahmine dayalı yüklemeler bölümü eklendi:
Bu bölümde üç sekme bulunur:
- Tahmine dayalı yüklemeler: Geçerli sayfanın önceden işlenmiş durumunu listeler.
- Kurallar: Geçerli sayfada bulunan tüm kural kümelerini listeler.
- Kural kümelerindeki önceden getirilen ve önceden oluşturulmuş tüm URL'leri listeleyen Tahminler.
Önceki ekran görüntüsünde Tahminler sekmesi gösterilmiştir. Bu örnek sayfada, 3 sayfanın önceden yüklenmesi için tek bir tahmin kuralları grubu yer almaktadır. Bu önceden getirmelerden ikisi başarılı, biri başarısız oldu. Kural grubu'nun yanındaki simgeyi tıkladığınızda, Öğeler panelindeki kural grubunun kaynağına gidebilirsiniz. Alternatif olarak, Durum bağlantısını tıklayarak sizi bu kural kümesine göre filtrelenmiş Tahminler sekmesine yönlendirebilirsiniz.
Tahminler sekmesi, tüm hedef URL'leri eylem (önceden getirme veya önceden oluşturma), hangi kural grubundan geldikleri (bir sayfada birden fazla olabileceğinden) ve her tahminin durumuyla birlikte listeler:
URL'lerin üst kısmında, tüm kural kümelerindeki URL'leri veya yalnızca belirli bir kural grubundaki URL'leri göstermek için bir açılır menü kullanılabilir. Bunun altında ise 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 hata nedenini görebiliriz (sayfa mevcut değildir ve bu nedenle 2xx olmayan bir HTTP durum kodu olan 404 döndürür).
Tahmine dayalı yüklemeler özet sekmesi, bu sayfa için önceden getirme veya önceden oluşturma kullanılıp kullanılmadığını göstermek üzere Bu sayfanın tahmine dayalı yükleme durumu raporunu gösterir.
Önceden getirilen bir sayfa için, söz konusu sayfaya aşağıdaki adrese gidildiğinde başarılı bir mesaj görmeniz gerekir:
Eşleşmeyen tahminler
Önceden getirme veya önceden işleme kullanılmasına yol açmayan, tahmin kurallarının bulunduğu bir sayfadan gezinme yapıldığında sekmenin ek bir bölümünde, URL'nin tahmin URL'lerinin hiçbiriyle eşleşmemesine 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 öğesine gittik, ancak yalnızca next.html, next2.html veya next3.html önceden getirildi. Dolayısıyla bunun, bu üç kuraldan hiçbiriyle tam olarak eşleşmediğini görebiliriz.
Tahmine dayalı yüklemeler sekmeleri, tahmin kurallarındaki hataları ayıklamak ve JSON'daki söz dizimi hatalarını bulmak için çok kullanışlıdır.
Önceden getirme işlemlerinde, Ağ paneli muhtemelen daha tanıdık bir yerdir. Önceden getirme hatası örneği için burada önceden getirmeyle ilgili 404 bilgisini görebilirsiniz:
Bununla birlikte, Tahmine dayalı yüklemeler sekmeleri, daha sonra ele alınacak olan spekülasyon kurallarının önceden işlemesi için çok daha yararlı hale gelir.
prerender için spekülasyon kuralları
Önceden işleme tahmin kuralları, önceden getirme tahmin kurallarıyla aynı söz dizimini kullanır. Ö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 maliyetlerine rağmen anında yükleme deneyimi sağlayabilir.
Bununla birlikte, önceden getirmelerin aksine bunlar Chrome'da ayrı bir oluşturma işleminde getirilip oluşturuldukları için Ağ panelinde görünmez. Bu, önceden oluşturma spekülasyon kurallarında hata ayıklamak için Tahmine dayalı yüklemeler sekmelerinin daha önemli olmasını sağlar.
Tahmine dayalı yüklemeler sekmeleriyle prerender için hata ayıklama
Önceden işleme spekülasyon kuralları için, üç sayfayı önceden getirmek yerine önceden işlemeye çalışan benzer bir demo sayfasıyla gösterildiği gibi aynı Tahmine dayalı yüklemeler ekranları kullanılabilir:
Burada da yine üç URL'den birinin önceden oluşturulamadığını görüyoruz. Geliştiriciler 2 Hazır, 1 Hata bağlantısını tıklayarak Tahminler sekmesindeki her URL için ayrıntıları alabilirler.
Chrome 121'de doküman kuralları desteğini kullanıma sunduk. Bu, tarayıcının belirli bir URL grubunu listelemek yerine sayfadaki aynı kaynak bağlantılardan bunları almasını sağlar:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
Bu örnekte, önceden işleme adayları olarak /not-safe-to-prerender ile başlayanlar hariç aynı tüm kaynak bağlantıları seçilir.
Ayrıca, önceden işleme eagerness değerini moderate olarak ayarlar. Bu, bağlantının üzerine gelindiğinde veya tıklandığında gezinmelerin önceden işlendiği anlamına gelir.
Bu demo sitesinde buna benzer kurallar bulunmaktadır. Ayrıca, bu sitedeki yeni Tahmine dayalı yüklemeler bölümünü kullandığınızda, tarayıcının sayfada bulduğu tüm uygun URL'ler listelendiği için bu yeni sekmenin faydasını görebilirsiniz:
Bunlar için önceden oluşturma işlemi başlamadığından Durum durumu Tetiklenmedi olarak gösterilir. Ancak, fareyle bağlantıların üzerine gelindiğinde her URL önceden oluşturuldukça durumun değiştiğini görürüz:
Chrome, moderate istekliliği için en fazla 2 önceden işleme dahil olmak üzere önceden işlemeyle ilgili sınırlar belirlemiştir. Bu nedenle, fareyle 3. bağlantının üzerine geldiğinizde bu URL'nin hata nedenini görürüz:
Diğer Geliştirici Araçları panelleriyle prerender hataları ayıklanıyor
Önceden işlenmiş sayfalar, kendi kamera arkası oluşturucularında oluşturulduklarından, önceden getirme işlemlerinin aksine Ağ paneli gibi Geliştirici Araçları panellerindeki mevcut oluşturma işlemlerinde görünmez.
Bununla birlikte, artık DevTools panelleri tarafından kullanılan oluşturucuyu sağ üstteki açılır menüden değiştirebilir veya panelin üst kısmından bir URL seçip İncele'yi seçerek değiştirebilirsiniz:
Bu açılır menü (ve seçilen değer) diğer tüm panellerde de paylaşılır. Ağ paneli gibi burada istenen sayfanın önceden oluşturulmuş sayfa olduğunu görebilirsiniz:
Bu kaynakların HTTP üstbilgilerine baktığımızda hepsinin Sec-Purpose: prefetch;prerender başlığıyla ayarlandığını görebiliriz:
İsterseniz sayfa içeriklerini görebileceğiniz Öğeler panelini de seçebilirsiniz. Örneğin, <h1> öğesinin önceden işlenmiş sayfa için olduğunu gördüğümüz aşağıdaki ekran görüntüsünde olduğu gibi:
Alternatif olarak, önceden işlenmiş sayfa tarafından yayınlanan konsol günlüklerini görebileceğiniz Konsol paneli:
Önceden işlenmiş sayfada tahmin kurallarında hata ayıklama
Önceki bölümlerde, önceden işlemeyi başlatan sayfadaki önceden işlenmiş sayfalarda nasıl hata ayıklanacağı ele alınmaktadır. Bununla birlikte, önceden işlenmiş sayfaların kendileri, 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ğlayabilirler.
Ayrıca, önceden işlenmiş bir sayfa, sayfaya giden kullanıcı tarafından etkinleştirildiğinde Tahmine dayalı yüklemeler sekmesi bu durumu ve sayfanın başarıyla önceden işlenip işlenmediğini gösterir. Önceden işlenemediyse durumun neden olduğuna dair bir açıklama sağlanır:
Ayrıca önceden getirmelerde olduğu gibi, geçerli sayfayla eşleşmeyen tahmin kurallarının bulunduğu bir sayfadan gidildiğinde URL'lerin, önceki sayfanın Tahmine dayalı yüklemeler sekmesindeki tahmin kurallarında açıklananlarla neden eşleşmediğini göstermeye çalışır:
Sonuç
Bu yayında, geliştiricilerin önceden getirme ve önceden işleme spekülasyon kurallarında hata ayıklayabileceği çeşitli yöntemleri gösterdik. Ekip, spekülasyon kurallarına yönelik araçlar üzerinde çalışmaya devam ediyor ve bu heyecan verici yeni API'da hata ayıklamaya yardımcı olabilecek diğer yollar konusunda geliştiricilerden öneriler almak istiyoruz. Geliştiricilerin, özellik istekleri veya tespit edilen hatalar için Chrome sorun izleyicisinde sorun bildirmelerini öneririz.
Teşekkür
Nubelson Fernandes tarafından Unsplash'ta yayınlanan küçük resim.