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ı
Kafa karıştıran birçok "ön" terimi olduğu için 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 terimler 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ını ayıkla
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
hatalarını ayıklayın
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, 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
hataları ayıklayın
Ö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.
Tahmine dayalı kurallar demo sitesinde buna benzer kurallar bulunmaktadır. Ayrıca, bu sitedeki yeni Tahmine dayalı yüklemeler bölümünü kullanmak, tarayıcının sayfada bulduğu tüm uygun URL'leri listelediğinden, 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, işaretçiyi bağlantıların üzerinde tuttuğumuzda, her URL önceden işlendiğinde 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
hata ayıklaması yapın
Önceden oluşturulmuş sayfalar kendi kamera arkası oluşturucularında oluşturulduklarından, önceden getirmelerin aksine Ağ paneli gibi Geliştirici Araçları panellerindeki mevcut oluşturma süreçlerinde 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. Dosya önceden oluşturulamadıysa durumun neden olduğuna dair bir açıklama sağlanmıştı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.