Core Web Vitals görselleştirici

Core Web Vitals görselleştiriciyi gururla sunuyoruz.

Bugün ücretsiz Core Web Vitals görselleştiriciyi Chrome Web Store'da yayınladık. 

Core Web Vitals görselleştirici, kullanıcıların bir sayfanın Core Web Vitals metriklerini takip etmelerine ve görselleştirmelerine yardımcı olan bir Chrome eklentisidir. Bu metrikler arasında Largest Contentful Paint, First Input Delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint ve Time to First Byte yer alır. Eklenti, kullanıcıya hangi öğelerin görsel kararsızlığa neden olduğunu ve hangi olayların girişte gecikmeye yol açtığını gösteren bir kaplama oluşturur. Ayrıca eklenti, Core Web Vitals metriklerini temel bileşenlerine ayırarak kullanıcıların bir sayfanın performansını daha ayrıntılı anlamalarını sağlar. Eklenti Chrome Web Store'da ücretsiz olarak mevcuttur.

Bir Core Web Vitals uzmanı olarak, bir sayfayla etkileşime girdiğimde nasıl tepki verdiğini ve yanıt verdiğini kontrol etmek için çok zaman harcıyorum.  Bu Core Web Vitals metriklerini nasıl etkiliyor ve mobil emülasyona geçtiğimde veya tarayıcı önbelleğini devre dışı bıraktığımda Core Web Vitals nasıl değişiyor?

Elbette RUM takibi kullanıyorum.  Bu bana sayfa bazında hangi metriklerin Core Web Vitals'ı geçtiğini ve hangilerinin başarısız olduğunu söylüyor.  Ama neden başarısız oluyorlar?  Bunu gerçekten ancak sayfayla etkileşime girdiğinizde anlayabilirsiniz.

Kendime  büyük miktarda zaman kazandırmak için uzun bir sürecin küçük bir bölümünü otomatikleştirmeye ve sıkıcı işlerin bir kısmını benim yerime yapacak bir Chrome eklentisi oluşturmaya karar verdim.  Sonuç Core Web Vitals görselleştirici oldu.  Bu eklentiyi herkes için kullanılabilir hale getirmeye karar verdim.  Hadi Chrome Web Store'da göz atın.

Core Web Vitals  görselleştirici ne yapıyor?

Öncelikle sayfayla etkileşiminize dayalı olarak Core Web Vitals metriklerini kaydeder.  Largest Contentful Paint,  First Input Delay,  Cumulative  Layout Shift,  First Contentful Paint,  Interaction to Next Paint ve  Time to First Byte metriklerini takip eder.

Ardından tüm bu metrikleri görselleştirecek bir kaplama oluşturur. Bu size Largest Contentful Paint öğesinin ne olduğunu,  hangi öğelerin  görsel kararsızlığa neden olduğunu  ve sayfayla etkileşime girdiyseniz hangi olayın First Input Delay'e neden olduğunu gösterir.

Son olarak herhangi bir metriğe tıkladığınızda Core Web Vitals görselleştirici  bu metrikleri en temel bileşenlerine ayırır.

Neden Lighthouse kullanmıyorsunuz?

Core Web Vitals Görselleştiriciyi deneyin!

Chrome Store'a gidin ve Core Web Vitals görselleştiriciyi yükleyin. Ve belki... beğenirseniz bir yorum bırakın. Buna çok sevinirim.