Spekülasyon kuralları, bir önceki yayında ayrıntılı olarak açıklandığı şekilde sonraki sayfada gezinmeleri önceden getirmek ve önceden oluşturmak için kullanılabilir. Bu, sayfa yüklemelerinin çok daha hızlı, hatta anında yüklenmesini sağlayarak bu ek sayfada gezinme işlemleri için Önemli Web Verileri'ni büyük ölçüde iyileştirebilir.
Spekülasyon kurallarında hata ayıklamak zor olabilir. Bu durum özellikle önceden oluşturulmuş sayfalar için geçerlidir. Çünkü bu sayfalar, etkinleştirildiğinde geçerli sekmenin yerini alan gizli bir arka plan sekmesi gibi ayrı bir oluşturucuda oluşturulur. Bu nedenle, hataları ayıklamak için olağan Geliştirici Araçları seçenekleri her zaman 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.
"Öncesi" açıklaması şartlar
Çok sayıda "önceden" kafa karıştırıcı olabilir, o yüzden bunları açıklayarak başlayacağız:
- Önceden getirme: Gelecekteki performansı iyileştirmek için bir kaynağı veya dokümanı önceden getirme. Bu yayın, genellikle alt kaynakları önceden getirmek için kullanılan eski
<link rel="prefetch">seçeneği yerine Speculation Rules API kullanılarak dokümanları önceden getirme konusunu ele almaktadır. - Önceden işleme: Bu, önceden getirmenin bir adım ötesine geçer ve sayfanın tamamını kullanıcı o sayfaya gelmiş gibi oluşturur ancak kullanıcı gerçekten oraya gidiyorsa sayfayı gizli bir arka plan oluşturucu işleminde hazır tutar. Yine bu belgede de eski
<link rel="prerender">seçeneği (artık tam önceden işleme yapılmaz) yerine, Speculation Rules API, bu yeni sürümle 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 service çalışanı gezinme ön yüklemeleri dahil olmak üzere bir dizi teknoloji ve işlemi ifade edebilen aşırı yüklenmiş bir terim. Bu öğelere burada değinilmeyecek ancak söz konusu öğeler "gezinme spekülasyonlarından" açıkça ayırt edilebilmesi için terime dahil edilmiştir. terim.
prefetch için tahmin kuralları
Spekülasyon kuralları, bir sonraki gezinmenin dokümanını önceden getirmek 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ı avantajlara sahiptir (ör. daha anlamlı bir API ve sonuçların HTTP disk önbelleği yerine bellek önbelleğinde depolanması).
prefetch tahmin kuralında hata ayıkla
Tahmin kuralları tarafından tetiklenen önceden getirmeler, Ağ panelinde diğer getirmelerle aynı şekilde 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 gezinmelerde olduğu için Lowest önceliğinde getirilir ve Chrome, geçerli 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 hatalarını ayıklayın
Chrome Geliştirici Araçları'nın Uygulama panelindeki Arka plan hizmetleri bölümüne, tahmin kurallarında hata ayıklamaya yardımcı olması için yeni bir Tahmine dayalı yüklemeler bölümü eklendi:
Bu bölümde üç sekme vardır:
- Geçerli sayfanın önceden işlenmiş durumunu listeleyen spekülatif yüklemeler.
- Geçerli sayfada bulunan tüm kural gruplarını listeleyen kurallar.
- Kural kümelerinden önceden getirilen ve önceden oluşturulmuş tüm URL'leri listeleyen spekülasyonlar.
Önceki ekran görüntüsünde Spekülasyonlar sekmesi gösterilmektedir. Bu örnek sayfada, 3 sayfanın önceden getirilmesi için tek bir tahmin kuralı grubu olduğunu görebiliyoruz. Bu önceden getirme işlemlerinden ikisi başarılı, diğeri başarısız olmuştur. 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.
Spekülasyonlar sekmesinde tüm hedef URL'ler, işlemle (önceden getirme veya önceden işleme), hangi kural grubundan (bir sayfada birden fazla olabilir) geldikleri ve her bir tahminin durumu listelenir:
URL'lerin üzerinde, tüm kural gruplarındaki URL'leri veya yalnızca belirli bir kural grubundaki URL'leri göstermek için bir açılır liste kullanılabilir. Bu bölümün altında ise tüm URL'ler listelenir. Bir URL'yi tıklayarak daha ayrıntılı bilgi edinebilirsiniz.
Bu ekran görüntüsünde, next3.html sayfasının (mevcut olmayan ve bu nedenle 2xx olmayan bir HTTP durum kodu olan 404 hatası döndüren) hata nedenini görebiliyoruz.
Özet sekmesi (Tahmine dayalı yüklemeler), bu sayfada önceden getirme veya önceden işleme kullanılıp kullanılmadığını göstermek üzere Bu sayfa için tahmine dayalı yükleme durumu raporunu gösterir.
Önceden getirilen bir sayfa için şuraya gidildiğinde başarılı bir mesaj görmeniz gerekir:
Eşsiz spekülasyonlar
Önceden getirme veya önceden işlemenin kullanılmasına yol açmayan tahmin kurallarına sahip bir sayfada gezinme gerçekleştiğinde, sekmenin ek bir bölümünde URL'nin tahmin URL'lerinin hiçbiriyle neden eşleşmediğiyle ilgili daha fazla ayrıntı gösterilir. Bu, spekülasyon kurallarınızdaki yazım hatalarını tespit etmenize yardımcı olur.
Ö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.
Tahmine dayalı yüklemeler sekmeleri, tahmin kurallarının kendilerinde hata ayıklamak ve JSON'de söz dizimi hatalarını bulmak için çok kullanışlıdır.
Ağ paneli, önceden getirmelerin kendilerine daha tanıdık gelecek 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 tahmin kuralları
Önceden işleme tahmin kuralları, önceden getirme spekülasyon kurallarıyla aynı söz dizimini uygular. Örneğin:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Bu kural grubu, belirtilen sayfaların tamamen yüklenmesini ve oluşturulmasını tetikler (belirli kısıtlamalara tabidir). Bu, ekstra kaynak maliyetlerine rağmen anında yükleme deneyimi sağlayabilir.
Bununla birlikte, önceden getirmelerden farklı olarak bunlar Chrome'da ayrı bir oluşturma işleminde getirilip oluşturulduğundan bunlar Ağ panelinde görünmez. Bu, Tahmine dayalı yüklemeler sekmelerinin, önceden işleme spekülasyon kurallarında hata ayıklamak için daha önemli olmasını sağlar.
Tahmine dayalı yüklemeler sekmeleriyle prerender hatalarını ayıklayın
Üç sayfayı önceden getirmek yerine, önceden işlemeyi deneyen benzer bir demo sayfasında gösterildiği gibi, aynı Tahmine dayalı yüklemeler ekranları, önceden işleme tahmin kuralları için kullanılabilir:
Burada yine üç URL'den birinin önceden işlenemediğini ve geliştiricilerin 2 Hazır, 1 Hata bağlantısını tıklayarak Spekülasyonlar sekmesindeki her URL için ayrıntıları alabileceğini tekrar görüyoruz.
Chrome 121'de doküman kuralları desteğini kullanıma sunduk. Bu, tarayıcının belirli bir URL grubunu listelemek yerine bunları sayfadaki aynı kaynak bağlantılardan 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ı kaynak bağlantılarının tümü seçilir.
Ayrıca, eagerness önceden işlemesini 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 vardır ve bu sitedeki yeni Tahmine dayalı yüklemeler bölümünün kullanılması, tarayıcının sayfada bulduğu tüm uygun URL'ler listelendiği için bu yeni sekmenin kullanışlılığını gösterir:
Bunlar için önceden işleme süreci başlamadığından Durum bölümü Tetiklenmedi olarak gösterilir. Bununla birlikte, işaretçiyi bağlantıların üzerinde tuttuğumuzda, her bir 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 de dahil olmak üzere önceden işlemelerle ilgili sınırlar belirlemiştir. Bu nedenle, 3. bağlantının üzerine geldikten sonra bu URL'nin hata nedenini görürüz:
Diğer Geliştirici Araçları panelleriyle prerender hatalarını ayıklayın
Önceden getirmelerin aksine, önceden işlenmiş sayfalar kendi sahne arkası oluşturucularında oluşturulduğundan Ağ paneli gibi Geliştirici Araçları panellerindeki mevcut oluşturma işlemlerinde görünmez.
Ancak artık Geliştirici Araçları panelleri tarafından kullanılan oluşturucuyu sağ üstteki açılır menüyü kullanarak veya panelin üst kısmından bir URL seçip İncele'yi seçerek değiştirebilirsiniz:
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 başlığı ile ayarlandığını görebiliriz:
Alternatif olarak, sayfa içeriklerini görebileceğiniz Öğeler panelidir. Örneğin, aşağıdaki ekran görüntüsünde yer alan <h1> öğesinin önceden oluşturulmuş sayfaya ait olduğunu görüyoruz.
Alternatif olarak, önceden işlenmiş sayfa tarafından yayınlanan konsol günlüklerini görebileceğiniz Konsol paneli:
Önceden işlenmiş sayfada spekülasyon kurallarında hata ayıkla
Ö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 bu bilgileri önceki bölümde açıklanan şekilde 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. Neden yapıldığına dair bir açıklama önceden oluşturulamıyorsa:
Ayrıca (önceden getirmede olduğu gibi), geçerli sayfayla eşleşmeyen tahmin kurallarına sahip bir sayfada gezinirken URL'lerin, Tahmine dayalı yüklemeler sekmesinde bir önceki sayfanın tahmin kurallarında ele alınan URL'lerle 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ıklamak için kullanabilecekleri çeşitli yöntemleri gösterdik. Ekip, spekülasyon kuralları için araçlar üzerinde çalışmaya devam ediyor. Bu heyecan verici yeni API'de hata ayıklama konusunda başka hangi yolların faydalı olabileceği konusunda geliştiricilerden önerilerinizi duymak isteriz. Geliştiricilerin, özellik istekleri veya tespit edilen hatalar için Chrome Sorun Takip Aracı'nda sorun bildirmelerini öneririz.
Teşekkür
Nubelson Fernandes'in Unsplash'teki küçük resmi.