Web Vitals uzantısı artık Core Web Vitals sorunlarının temel nedenlerini belirlemenize yardımcı olmak için daha fazla hata ayıklama bilgisi gösteriyor.
Yayınlanma tarihi: 4 Mayıs 2023
Web Verileri uzantısı, geliştiricilerin Core Web Vitals sorunlarını ölçmelerine ve gidermelerine yardımcı olmak için Core Web Vitals teşhis bilgilerine kolay erişim sağlar. Bu araç, geliştiricilerin web sitelerindeki deneyimleri iyileştirmelerine yardımcı olmak için Chrome ekibi tarafından sağlanan diğer araçları tamamlayıcı niteliktedir.
Geliştiricilerin performans sorunlarını daha kolay anlayıp giderebilmesi için uzantıyı, geliştiricilere ek hata ayıklama bilgileri sağlayacak şekilde güncelledik.
Konsolda hata ayıklama bilgileri gösteriliyor
Web Vitals uzantısında bir süredir "Konsol Günlüğü" hata ayıklama seçeneği bulunuyor. Bu özellik, Seçenekler ekranından etkinleştirilebilir:
Bu son yükseltmeden önce web-vitals library (uzantının temelini oluşturan) üzerinden alınan çıkışları bir JSON nesnesine kaydediyordu:
Ardından bu nesne, tüm ayrıntıları görmek için genişletilebilir ve LCP resmi gibi öğeler, ana panelde vurgulanmak için fareyle üzerlerine gelinebilir:
Bu özellik yararlı olsa da çıkış biçimi kullanıcı dostu değildi. Bu nedenle, geliştiricilere daha iyi bir deneyim sunabileceğimizi düşündük. Bu nedenle, daha fazla ayrıntı isteyenler için nesnenin tamamını içermeye devam ederken en önemli bilgileri daha görünür hale getirmek için uzantıyı iyileştirdik.
Her metrik için yeni hata ayıklama bilgileri
Yeni sürümde, sorunları bulup gidermenize yardımcı olmak için daha okunaklı bir biçimde yeni hata ayıklama bilgileri ekledik. Her biri farklı olduğundan metriklerin her biri için farklı bilgiler sağlanır.
LCP hata ayıklama bilgileri
Largest Contentful Paint (LCP) için hem öğeyi hem de LCP'yi optimize etme rehberimizde ayrıntılı olarak açıklanan 4 aşamanın dökümünü gösteririz:
LCP süresi (2.876 milisaniye veya yaklaşık 2,9 saniye), "İyileştirme Gerekiyor" kategorisinde olduğu gibi sarı renkle vurgulanır.
Bu örnekte, Resource load time öğesinin en uzun süre olduğunu görüyoruz. Bu nedenle, LCP sürenizi iyileştirmek için bu öğeyi optimize etmeniz gerekir. Örneğin, öğeleri ayrı bir alanda barındırmaktan kaçınabilir, daha küçük resimler veya daha verimli biçimler kullanabilirsiniz. Bu örnekte, sonucu göstermek için yapay olarak yavaşlatılmasından kaynaklanmaktadır. Web.dev hızlı bir sitedir 😀
Resmin üzerine gelerek resmi de vurgulayabilirsiniz:
Öğeyi sağ tıklayarak da öğe panelinde gösterebilirsiniz.
Burada LCP öğesi bir resimdir ve sağdaki konsolda fareyle üzerine geldiğinizde sol taraftaki sitede de bu öğe vurgulanır.
CLS hata ayıklama bilgileri
Kümülatif Düzen Değişimi (CLS)'ne katkıda bulunan kaymalar da artık listelenmektedir. Fareyle ilgili öğenin üzerine gelerek ilgili öğeyi vurgulayabilirsiniz:
Yukarıdaki ekran görüntüsünde 2 kaydırma gösterilmektedir. İlki iki öğeden (banner resmi yüklendiğinde ve altındaki içerik aşağı kaydırıldığında) ikincisi ise 4 öğeden (dinamik reklam yüklendiğinde ve sayfanın büyük kısmı aşağı kaydırıldığında) oluşmaktadır.
Sağdaki konsoldaki bu ekran görüntüsünde fareyle h2 öğesinin üzerine geliniyor. Bu işlem, soldaki sitedeki öğenin vurgulandığını görebilirsiniz.
FID hata ayıklama bilgileri
İlk Giriş Gecikmesi (FID) için, etkilenen öğeyi (yine fareyle üzerine gelerek sayfada vurgulanabilen) ve etkileşim türünü, her zamanki gibi JSON nesnesinin tamamıyla birlikte gösteririz:
INP hata ayıklama bilgileri
Sonraki Boyamayla 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, INP metriği değiştiğinde bunu vurgularız:
LCP'ye benzer şekilde, uzantı INP süresini üç aşamaya ayırır:
- Giriş gecikmesi
- İşleme süresi
- Sunum gecikmesi
Bu, etkinliğin diğer etkinlikler tarafından duraklatılması (giriş gecikmesi) nedeniyle yavaş olup olmadığını belirlemenize yardımcı olur. Bunun nedeni, etkinlik işleyicinin kodunuzdan (işlem süresi), neden işleme sonrası oluşturma gecikmesinin mi (sunum gecikmesi) yoksa bunlardan iki veya daha fazlasının bir kombinasyonundan mı kaynaklandığını gösterir.
Etkileşimler
INP, ana iş parçacığını engelleyerek önceki etkileşimler nedeniyle yüksek giriş gecikmesine neden olduğu için yavaş olabilir. Bu nedenle, tüm etkileşimleri INP günlüğüne benzer bir biçimde listelliyoruz:
Bu sayede, web sitesiyle etkileşime geçerek ve konsolda hangi etkileşimlerin hangi kombinasyonlarda INP sorununa neden olabileceğini görerek web sitesini "canlı olarak izleyebilirsiniz".
Ayrıca, yanıt verme hızınızı iyileştirirken kendinizi bir döngüdeymiş gibi hissetmenizi önlemek için yalnızca en büyük INP etkileşimini değil, birden fazla yavaş etkileşimi de belirlemenize olanak tanır.
Konsol günlüklerini filtreleme
Yararlı olsa da tüm bu ek bilgiler, Core Web Vitals ile ilgili olmayan başka bir geliştirme yapıyorsanız veya o anda yalnızca belirli bir Core Web Vitals metriğiyle ilgileniyorsanız dikkatinizi dağıtabilir.
İletilerin bir kısmını veya tamamını filtrelemek için Geliştirici Araçları'ndaki konsol filtreleme seçeneklerini kullanabilirsiniz:
- Tüm uzantı mesajlarını kaldırmak için seçeneklerden bu özelliği devre dışı bırakabilir veya
-Extensionfiltresini kullanabilirsiniz. - Yalnızca LCP'ye bakmak için
Web Vitals Extension LCPfiltresini kullanabilirsiniz. - Yalnızca INP'ye ve etkileşimlere bakmak için
Web Vitals Extension -LCP -CLS -FIDfiltresini kullanabilirsiniz.
Bu uzantı için çok sayıda seçeneği sınırlı tutmaya çalışıyoruz. Ancak Geliştirici Araçları filtrelemesi yeterli değilse ve siz de buradaki seçenekleri tercih ediyorsanız GitHub ile ilgili sorun bildirerek bize bildirebilirsiniz.
Sonuç
Uzantının en son sürümündeki yeni hata ayıklama seçeneklerinin faydalı olacağını ve Önemli Web Verileri sorunlarını tespit edip çözmeyi kolaylaştırarak web sitenizdeki kullanıcı deneyimlerini iyileştireceğini umuyoruz.
Geliştirici bilgisayarınızdaki deneyimlerinizin, gerçek kullanıcılarınızın deneyimlerini temsil etmeyebileceğini unutmayın. Sunduğunuz deneyimlerin kullanıcılarınızla ne kadar uyumlu olduğunu anlamak için uzantıdaki sitenizin CrUX alan verilerini nasıl görüntüleyebileceğinizle ilgili önceki blog yayınımıza göz atın.
Bu iyileştirmeler veya GitHub sorun takipçimizde yer alan diğer öneriler hakkındaki geri bildirimlerinizi öğrenmekten memnuniyet duyarız.