Önemli Web Verileri: Performans darboğazlarını belirlemek için 7 araç ve teknik

Önemli Web Verileri (CWV) şu anda sıcak bir konudur. Burada, Google'ın Mayıs 2021'deki sıralama güncellemesine hazırlık olarak web sitesi performans sorunlarını belirlemeye yardımcı olmak için kullanabileceğimiz bazı araçlara bakacağız.

Önemli Web Verileri hakkında bilgi tazelemeye mi ihtiyacınız var? Önemli Web Verileri Açıklaması makalemde bunların ne olduğunu ve onlar için nasıl optimize edileceğini öğrenin.

CWV metriklerinin otomatik olarak izlenmesi

Testten sonra manuel olarak test yapmak zorunda kalmadan zaman içinde izlemek istediğiniz birkaç web siteniz veya önemli sayfanız varsa, Digital Inspiration'ın bu elektronik tablosu sizin için olabilir. Sadece bir Lighthouse PageSpeed ​​API anahtarı alın, bazı URL'leri ekleyin ve yola çıkın!

Elektronik tablo, temel CWV göstergeleri etrafındaki olası performans sorunlarını ve bunların ne zaman ortaya çıkmış olabileceğini belirlemeye yardımcı olur ve bu da bize sebebin ne olabileceğine dair ipuçları verebilir. Ayrıca, bir web sitesi büyüdükçe veya temel sayfa hızı algoritmalarında değişiklikler yapıldığında hız puanlarının zaman içinde doğal olarak nasıl değişebileceğini göstermek için de kullanılabilir.

Birkaç aydır bu e-tablonun değiştirilmiş bir sürümünü kullanıyoruz ve birkaç web sitesinin performansını iyileştirme fırsatlarını belirlememize yardımcı oldu.

Sayfa Hızı Analizleri

Google'ın PageSpeed ​​Insights'ı, hem mobil hem de masaüstü cihazlarda performans ve CWV ile ilgili sorunlara yönelik ilk, üst düzey araştırmalar için başvurduğum araçtır. Raporlar 'Alan Verileri' içerir; gerçek dünyadaki kullanıcıların, tekrarlanabilir ve tutarlı testler için yararlı olan bir sayfa yüklemesini simüle eden Lighthouse 'Lab' verileriyle birlikte web sitesini nasıl deneyimlediklerini.

Temel Web Vital metrikleri, basit, renk kodlu göstergelerle açıkça vurgulanır. Zayıf metrikler kırmızı, iyi metrikler yeşil renkle vurgulanır. Bu metrikler, genel bir hız puanı vermek için birleştirilir ve yeşil bir "geçer" için %90 veya daha fazlasına ihtiyacınız vardır.

Bu raporlarda, kaydedilebilecek toplam saniye cinsinden en yüksek etkiye sahip öğelere göre sıralanan bir dizi öneri ve teşhis de verilmektedir.

Chrome DevTools Performans İzleyicisi

Performans ve CWV ile ilgili sorunların daha ayrıntılı bir analizi için genellikle DevTools içindeki Chrome'un Performans İzleyicisi'ne dönüyorum ve kullandığım bazı önemli CWV göstergeleri aşağıdaki ekran görüntüsünde numaralandırılmıştır.

1. İlk olarak, LCP ve CLS öğeleri genellikle farklı çözünürlüklerde değişeceğinden, performans monitörünü doğru çözünürlükte çalıştırdığınızdan emin olmak isteyeceksiniz. PageSpeed ​​Insights mobil görünümünü çoğaltmak için benimki 350 x 636 piksele ayarlandı.
2. Raporu çalıştırmadan önce, bir mobil cihazın bağlanabilirliğini ve gücünü de simüle etmek isteyebilirsiniz. Genellikle Hızlı 3g ve 4x CPU yavaşlamasını seçiyorum.
3. Bir rapor oluşturulduktan sonra LCP metriğinin seçilmesi, en büyük öğenin ne olduğunu tanımlar. Bu, FCP'ye (First Contentful Paint) mümkün olduğunca yakın olmalıdır. Bir boşluk varsa, en büyük öğenin dağıtımını belirlemek ve kolaylaştırmak isteyeceksiniz.
4. Uzun CPU görevleri, gri çubuklardaki kırmızı köşegenlerle vurgulanır. Bu genellikle sarı çubuklarla temsil edilen daha ağır JavaScript'ten kaynaklanır ve etkileşim ölçümlerinizi (FID, TBT ve TTI) etkiler. Aşağıdaki çubukların detayına inmek genellikle sorunlu JavaScript dosyalarına ve işlevlerine işaret eder.
5. Düzen Kaydırmaları bu kırmızı çubuklarla vurgulanır ve bunları seçmek genellikle hangi öğenin kaydırıldığını vurgular. Bunların büyük bir miktarı daha yüksek CLS değerleri oluşturacaktır.
6. Çerçeve görünümü, içeriğin nasıl göründüğünü ve yüklendikçe mizanpajın nasıl değiştirildiğini görsel olarak vurgulamanın harika bir yolu olabilir. Yüksek CLS değerleri için, çerçevelerden nedenin ne olduğu genellikle açıktır. Bu örnekte, büyük bir çerez başlığı, içerik olarak aşağı itildiği gibi düzen kaymasına neden olur.

Web Vitals Chrome Uzantıları

Temel SERP Hayati Değerleri

SERP Vitals uzantısı, doğrudan arama sonuçlarında LCP, FID ve CLS ölçümleri için kullanışlı bir gösterge görüntüler. Rakip analizi için harikadır ve siz ziyaret etmeden önce bir web sayfasının ne kadar hızlı olabileceğinin hızlı bir göstergesi olabilir.

Veriler, Chrome Kullanıcı Deneyimi Raporu (CrUX) tarafından gerçek kullanıcılardan anonim olarak derlenir. Ancak, yeni siteler veya az trafiğe sahip siteler yeterli veri noktası toplamayacağından, her site için mevcut değildir.

Web Verileri

Kullanışlı Web Vitals uzantısı, Chrome'daki masaüstü kullanıcıları için 3 temel CWV metriğini gerçek zamanlı olarak ölçer ve trafik ışığı renklendirmesi, bir web sitesinde gezinirken hızlı bir gösterge sağlar. Harici olarak toplanan kullanıcı verilerine dayanmadığı için, yerel bir ortamda çalışan geliştiriciler için sorunları erkenden yakalamak harika olabilir.

deniz feneri

Lighthouse Uzantıları, Chrome DevTools'da bulunan aynı raporlama özelliğine hızlı bir yol sağlar ve CrUX aracılığıyla gerçek dünya kullanıcılarından Saha Verileri yerine Lighthouse API'sini kullanarak Lab Verilerini alır.

Performans raporu, PageSpeed ​​Insights mobil analizine çok benzer ve benzer teşhis ve öneriler sunar. SEO, Erişilebilirlik ve En İyi Uygulama için ek raporlar da oluşturulur.

Treo Site Hızı Görselleştiricisi

https://treo.sh/sitespeed adresindeki görselleştirici, zaman içinde cihaz, bağlantı ve coğrafi bölgeye göre filtrelenebilir CWV ölçümlerini gösterir. Haftalık olarak güncellenir ve CrUX raporundaki verileri kullanır.

Aşağıdaki bbc.co.uk örneğinde, CLS metriğinin son 3 ayda nasıl önemli ölçüde düştüğünü ve tüm temel metrikler için yeşil 'geçer' sonuçlar verdiğini görebiliriz. Bu, CWV metriklerinin zaman içindeki performansını analiz etmenin veya rakip analizi yapmanın harika bir yoludur.

Üçüncü Taraf isteklerini görselleştirme

FID, TTI ve TBT için etkileşim metriklerinde sorun giderme genellikle zor olabilir. PageSpeed ​​Insights, en ağır üçüncü taraf komut dosyalarından bazılarını tanımlama açısından faydalı olabilir, ancak bazen düzgün bir görselleştirme, bu komut dosyalarının etkisini çok daha kolay iletebilir.

İstek eşleme aracı https://requestmap.herokuapp.com/ bunun için harika. Oluşturulan haritalar, her üçüncü taraf isteği için düğümler içerir ve daha büyük düğümler daha yüksek etkili komut dosyalarını temsil eder. Etkileşim metrikleriniz zayıfsa, bu haritada çok sayıda düğüm görme ihtimaliniz vardır.

İşte Etkileşimli Olma Süresi TTI metriğinin 26 saniyesi olan bir siteden bir örnek. Haritaya hızlı bir bakış, en üstteki çok sayıda koyu mavi düğümle temsil edilen ve toplam isteklerin yarısından fazlasını oluşturan bir canlı sohbet widget'ını gösterir.

İstek eşleme aracı, komut dosyalarının veya diğer varlıkların nereden yüklendiğini belirlemenin de harika bir yoludur. Bu örnekte, doğrudan sarı Google Etiket Yöneticisi düğümünden gelen birkaç düğümü aşağıda görebiliriz.

WebPageTest'te Şelaleler

WebPageTest raporları, PageSpeed ​​Insights'tan çok daha fazla ayrıntı sağlar ve çeşitli cihaz ve konumlardan oluşturulabilir.

Bu aracı, bir sayfadaki tüm varlıkların yükleme sırasını görselleştiren şelale analizi için sıklıkla kullanırım. Bu, kritik 'ekranın üst kısmındaki' içeriğinizi düzene sokmaya çalışırken özellikle yararlı olabilir. Örneğin, LCP için optimizasyon yapıyorsanız ve ekranın üst kısmındaki en büyük öğe bir resim veya tipografi ise, en büyük resim ve yazı tipi dosyalarına önceden yükleme uygulamak ve bu önceden yüklenmiş varlıkların şelalenin en üstünde görünüp görünmediğini kontrol etmek isteyebilirsiniz. .

CWV'nin sitenizi nasıl etkileyeceğinden emin değilseniz, bugün bize yazın.