bu Web Verileri uzantısı geliştiricilerin Önemli Web Verileri sorunlarını ölçmesine ve ele almasına yardımcı olmak için Önemli Web Verileri teşhis bilgilerine kolay erişim sağlar. Geliştiricilerin web sitelerindeki deneyimleri iyileştirmelerine yardımcı olmak için Chrome ekibi tarafından sağlanan diğer araçları tamamlar.
Uzantıyı, performans sorunlarını anlamalarını ve çözmelerini kolaylaştırmak için geliştiricilere ek hata ayıklama bilgileri sağlayacak şekilde güncelledik.
Konsolda hata ayıklama bilgilerini gösterme #
Web Vitals uzantısında bir süredir “Konsol Günlüğü” hata ayıklama seçeneği bulunuyor. Seçenekler ekranında etkinleştirilebilir:
Bu son yükseltmeden önce, bu, çıkışları günlüğe kaydetti. web-vitals library (uzantının temelini oluşturan) bir JSON nesnesinde:
Bu nesne daha sonra tüm ayrıntıları elde etmek için genişletilebilir ve LCP görüntüsü gibi öğeler ana panelde vurgulamak için üzerine getirilebilir:
Bu yardımcı oldu, ancak çıktı biçimi özellikle kullanıcı dostu değildi ve daha iyi bir geliştirici deneyimi sağlayabileceğimizi düşündük. Bu nedenle, en önemli bilgileri daha görünür hale getirmek için uzantıyı geliştirdik ve daha fazla ayrıntı isteyenler için tüm nesneyi dahil etmeye devam ediyoruz.
Her metrik için yeni hata ayıklama bilgileri #
Yeni sürümle birlikte, sorunları bulmanıza ve çözmenize yardımcı olmak için daha okunaklı bir biçimde yeni hata ayıklama bilgileri ekledik. Her biri farklı olduğu için her bir metrik için farklı bilgiler sağlanır.
LCP hata ayıklama bilgileri #
En Büyük İçerikli Boyama (LCP) için, Optimize LCP kılavuzumuzda ayrıntılı olarak açıklanan 4 aşamanın hem öğesini hem de dökümünü gösteriyoruz:
LCP süresi (2.876 milisaniye — veya yaklaşık 2,9 saniye), “İyileştirme Gerekiyor” kategorisinde olduğu gibi kehribar rengiyle vurgulanır.
Bu örnekte, Resource load time en uzun süredir, bu nedenle LCP sürenizi iyileştirmek için, belki de bunları ayrı bir etki alanında barındırmaktan kaçınarak veya daha küçük resimler veya daha verimli biçimler kullanarak, bunu optimize etmeye çalışırsınız. Bu durumda, çıktıyı göstermek için yapay olarak yavaşlatılmasından kaynaklanır—web.dev hızlı bir sitedir 😀
Öğe ayrıca görüntüyü vurgulamak için üzerine getirilebilir:
Öğeye sağ tıklamak, öğeyi öğeler panelinde göstermenize de olanak tanır.
Burada LCP öğesi bir resimdir ve sağdaki konsolda bunun üzerine gelindiğinde soldaki sitedeki öğe de vurgulanır.
CLS hata ayıklama bilgileri #
Kümülatif Düzen Kaymasına (CLS) katkıda bulunan vardiyalar da artık listeleniyor ve ilgili öğeyi vurgulamak için üzerine getirilebilir:
Yukarıdaki ekran görüntüsü, ilki iki öğeden oluşan (banner resmi yüklendiğinde ve altındaki içerik indirildiğinde) ve ikincisi 4 öğeden oluşan (dinamik reklam yüklendiğinde ve sayfanın çoğu aşağı kaydırıldı).
bu h2 sağdaki konsoldaki bu ekran görüntüsünde öğenin üzerine geliniyor ve bunun soldaki sitede öğeyi vurguladığını görebilirsiniz.
FID hata ayıklama bilgisi #
İlk Giriş Gecikmesi (FID) için, etkilenen öğeyi (sayfada vurgulamak için üzerine gelinebilir) ve etkileşim türünü, her zamanki gibi tam JSON nesnesiyle birlikte gösteririz:
INP hata ayıklama bilgileri #
Sonraki Boyayla Etkileşim (INP) için iki yeni günlük ekledik:
- INP – en uzun etkileşim
- Etkileşimler – tüm etkileşimler
INP metriği #
İlk olarak, değiştiğinde INP metriğini vurgularız:
LCP’ye benzer şekilde, uzantı INP zamanını üç aşamayı gösterecek şekilde ayırır:
- Giriş gecikmesi
- İşlem süresi
- Sunum gecikmesi
Bu, etkinliğin diğer etkinlikler tarafından durdurulması nedeniyle yavaş olup olmadığını belirlemenize yardımcı olur (giriş gecikmesi), kodunuz nedeniyle olay işleyicisinin kendisi yavaş olduğundan (işlem süresi), eğer sebep işlem sonrası oluşturma gecikmesiyse (sunum gecikmesi) veya bunlardan iki veya daha fazlasının bir kombinasyonu.
Etkileşimler #
INP, ana iş parçacığını bloke eden önceki etkileşimler nedeniyle yavaş olabilir ve bu nedenle yüksek giriş gecikmesine neden olabilir. Bu nedenle, tüm etkileşimleri INP günlüğüne benzer bir biçimde listeliyoruz:
Bu, bir web sitesiyle etkileşime girerek ve konsolda hangi etkileşimlerin, hangi kombinasyonlarda bir INP sorununa neden olabileceğini görerek bir web sitesini “canlı olarak izlemenize” olanak tanır.
Bu aynı zamanda yanıt verme yeteneğinizi geliştirirken kuyruğunuzu takip etme hissinden kaçınmanıza yardımcı olmak için en büyük INP etkileşimi yerine birden çok yavaş etkileşimi tanımlamanıza olanak tanır.
Konsol günlüklerini filtreleme #
Tüm bu ekstra bilgiler yararlı olmakla birlikte, Core Web Vitals ile ilgisi olmayan başka geliştirmeler yapıyorsanız veya o sırada yalnızca belirli bir Core Web Vital ile ilgileniyorsanız dikkat dağıtıcı olabilir.
kullanabilirsiniz DevTools’ta konsol filtreleme seçenekleri mesajların bir kısmını veya tamamını filtrelemek için:
- Tüm uzantı mesajlarını kaldırmak için seçeneklerden bunu kapatabilir veya
-Extensionfiltre. - Yalnızca LCP’ye bakmak için şunu kullanabilirsiniz:
Web Vitals Extension LCPfiltre. - Yalnızca INP’ye ve etkileşimlere bakmak için
Web Vitals Extension -LCP -CLS -FIDfiltre.
Bu uzantı için seçenek sayısını düşük tutmaya çalışıyoruz, ancak bir tane yükselterek bize bildirin. GitHub sorunu DevTools filtreleme yeterli değilse ve buradaki seçenekleri tercih ederseniz.
Çözüm #
Uzantının en son sürümündeki yeni hata ayıklama seçeneklerini faydalı bulacağınızı ve bunların, web sitenizdeki kullanıcı deneyimlerini iyileştirerek Önemli Web Verileri sorunlarını tanımlamayı ve çözmeyi kolaylaştıracağını umuyoruz.
Geliştirici bilgisayarınızdaki deneyimlerinizin, gerçek kullanıcılarınızın yaşadıklarını temsil etmeyebileceğini unutmayın. Deneyimlerinizin kullanıcılarınızla ne kadar uyumlu olduğunu anlamak için sitenizin CrUX alan verilerini uzantıda nasıl görüntüleyebileceğinizle ilgili önceki blog gönderimize göz atın.
Bu iyileştirmelerle ilgili herhangi bir geri bildirim veya diğer önerilerinizi duymaktan memnun oluruz. GitHub sorun izleyicisi.