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şlayalım:
- Ö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:
![Chrome Geliştirici Araçları'nda, önceden getirilen dokümanları gösteren ağ paneli](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/network-panel-chrome-devtools-prefetch.png?authuser=8&hl=tr)
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:
![Chrome Geliştirici Araçları'nın önceden getirme üstbilgileri, Sec-Purpose'a ayarlanmış olarak önceden getirme](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/chrome-devtools-prefetch-sec-purpose-header.png?authuser=8&hl=tr)
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:
![Chrome Geliştirici Araçları, önceden getirme kuralını gösteren tahmine dayalı yükleme sekmeleri](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-rules-tab-prefetch.png?authuser=8&hl=tr)
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:
![Önceden getirilen URL'leri durumlarıyla birlikte gösteren Chrome Geliştirici Araçları Spekülasyonlar sekmesi](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-prefetch-annotated.png?authuser=8&hl=tr)
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:
![Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi, başarılı bir önceden getirme işlemini gösteriyor](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/successful-prefetch.png?authuser=8&hl=tr)
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.
![Geçerli URL'nin, bir önceki sayfanın tahmin kurallarındaki URL'lerin hiçbiriyle eşleşmediğini gösteren Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/unsuccessful-prefetch.png?authuser=8&hl=tr)
Ö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:
![Başarısız bir önceden getirme işlemini gösteren Chrome Geliştirici Araçları Ağ paneli](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/chrome-devtools-network-failed-prefetch.png?authuser=8&hl=tr)
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:
![Chrome Geliştirici Araçları Spekülatif, önceden işleme spekülasyon kuralları içeren bir sayfa için sekmeleri yükler](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-rules-tab-prerender.png?authuser=8&hl=tr)
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:
![Tetiklenmeyen URL'lerin yer aldığı Chrome Geliştirici Araçları Spekülasyonlar sekmesi](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/document-rules-not-triggered.png?authuser=8&hl=tr)
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:
![Önceden işlenmiş sayfaların tetiklendiği Chrome Geliştirici Araçları Spekülasyonlar sekmesi](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/document-rules-triggered.png?authuser=8&hl=tr)
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:
![Başarısız önceden yüklemelerin gösterildiği Chrome Geliştirici Araçları Spekülasyonlar sekmesi gösteriliyor](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/replaced-prerender-shows-as-failure.png?authuser=8&hl=tr)
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:
![Chrome Geliştirici Araçları artık ilgili bilgilerin gösterildiği oluşturucuları değiştirmenize olanak tanıyor](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/switch-renderers.png?authuser=8&hl=tr)
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.
![Önceden oluşturulmuş sayfa için ağ isteklerini gösteren Chrome Geliştirici Araçları Ağ paneli](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/network-with-different-renderer.png?authuser=8&hl=tr)
Bu kaynakların HTTP üstbilgilerine baktığımızda, tümünün Sec-Purpose: prefetch;prerender
başlığı ile ayarlandığını görüyoruz:
![Önceden işlenmiş bir sayfanın Sec-Purpose başlığını gösteren Chrome Geliştirici Araçları ağ paneli](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/sec-purpose-headers-prerender.png?authuser=8&hl=tr)
Alternatif olarak, sayfa içeriklerini görebileceğiniz Elements 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.
![Önceden oluşturulmuş sayfa için Chrome Geliştirici Araçları Öğe paneli](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/prerender-elements-panel.png?authuser=8&hl=tr)
Alternatif olarak, önceden işlenmiş sayfa tarafından yayınlanan konsol günlüklerini görebileceğiniz Konsol paneli:
![Önceden oluşturulmuş bir sayfadan konsol çıkışını gösteren Chrome Geliştirici Araçları konsol paneli](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/prerender-console-panel.png?authuser=8&hl=tr)
Ö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ğı anlatılmaktadı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:
![Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi, hem başarılı hem de başarısız olan önceden işlenmiş sayfayı gösteren](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/success-failed-prerender.png?authuser=8&hl=tr)
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:
![Chrome Geliştirici Araçları Tahmine dayalı yüklemeler sekmesi, mevcut URL ile önceki sayfada kapsanan URL uyuşmazlıklarını gösterir](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/unsuccessful-prerender.png?authuser=8&hl=tr)
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.