Web Vitals'ı ölçmeye başlama

Katie Hempenius
Katie Hempenius

Sitenizin Web Vitals'ı hakkında veri toplamak, bunları iyileştirmeye yönelik ilk adımdır. Kapsamlı bir analiz, hem gerçek dünyadan hem de laboratuvar ortamlarından performans verileri toplar. Web Vitals'ı ölçmek için çok az kod değişikliği gerekir ve ücretsiz araçlar kullanılarak yapılabilir.

Alan verileri olarak da bilinen Gerçek Kullanıcı İzleme (RUM) verileri, bir sitenin gerçek kullanıcılarının deneyimlediği performansı yakalar. Google, bir sitenin önerilen Core Web Vitals eşiklerini karşılayıp karşılamadığını belirlemek için RUM verilerini kullanır.

RUM kurulumunuz yoksa aşağıdaki araçlar, sitenizin gerçek dünyadaki performansıyla ilgili verileri hızlı bir şekilde sağlar. Bu araçların tümü aynı temel veri kümesine (Chrome Kullanıcı Deneyimi Raporu) dayanır ancak kullanım alanları biraz farklıdır:

  • Chrome Geliştirici Araçları, Performans panelinin canlı metrikler görünümünde CrUX veri kümesiyle entegre edilir. Yerel deneyiminizi aynı sayfadaki gerçek kullanıcı deneyimleriyle karşılaştırarak hata ayıklama çalışmalarınıza nereye odaklanacağınız konusunda daha bilinçli bir karar verebilirsiniz. Sitenizin Web Vitals'ını ölçmeye ve iyileştirmeye başlamak için tek bir işlem yapmak istiyorsanız Chrome Geliştirici Araçları Performans panelini kullanmanızı öneririz.
  • PageSpeed Insights (PSI), son 28 gündeki sayfa düzeyinde ve kaynak düzeyinde toplam performansı raporlar. Ayrıca, performansı nasıl artıracağınızla ilgili öneriler de sunar. PSI, web'de ve API olarak kullanılabilir.
  • Search Console, performans verilerini sayfa başına raporlar. Bu sayede, iyileştirme yapılması gereken belirli sayfaları belirlemek için idealdir. PageSpeed Insights'ın aksine Search Console raporları geçmiş performans verilerini içerir. Search Console yalnızca sahibi olduğunuz ve sahipliğini doğruladığınız sitelerle kullanılabilir.
  • CrUX Kontrol Paneli, seçtiğiniz bir kaynak için CrUX verilerini gösteren önceden oluşturulmuş bir kontrol panelidir. Data Studio'nun üzerine inşa edilmiştir ve kurulum işlemi yaklaşık bir dakika sürer. PageSpeed Insights ve Search Console'a kıyasla CrUX kontrol paneli raporları daha fazla boyut içerir. Örneğin, veriler cihaza ve bağlantı türüne göre ayrılabilir.

Daha önce listelenen araçların, Core Web Vitals'ı ölçmeye "başlamak" için uygun olmasına rağmen diğer bağlamlarda da yararlı olabileceğini belirtmek isteriz. Özellikle CrUX ve PSI, API olarak kullanılabilir ve kontrol panelleri oluşturmak ve diğer raporları oluşturmak için kullanılabilir.

RUM verilerini toplama

CrUX tabanlı araçlar, Web Vitals performansını incelemek için iyi bir başlangıç noktası olsa da bunu kendi RUM'unuzla desteklemenizi önemle tavsiye ederiz. Kendiniz topladığınız RUM verileri, sitenizin performansıyla ilgili daha ayrıntılı ve anında geri bildirim sağlayabilir. Bu sayede sorunları tespit etmek ve olası çözümleri test etmek daha kolay olur.

Özel bir RUM sağlayıcı kullanarak veya kendi araçlarınızı ayarlayarak kendi RUM verilerinizi toplayabilirsiniz.

Özel RUM sağlayıcılar, RUM verilerini toplama ve raporlama konusunda uzmandır. Core Web Vitals'ı bu hizmetlerle kullanmak için RUM sağlayıcınızdan siteniz için Core Web Vitals izlemeyi etkinleştirmesini isteyin.

RUM sağlayıcınız yoksa web-vitals JavaScript kitaplığını kullanarak mevcut analiz ayarlarınızı bu metrikleri toplayıp raporlayacak şekilde genişletebilirsiniz. Bu yöntem aşağıda daha ayrıntılı olarak açıklanmıştır.

web-vitals JavaScript kitaplığı

Web Vitals için kendi RUM ayarlarınızı uyguluyorsanız Web Vitals ölçümlerini toplamanın en kolay yolu web-vitals JavaScript kitaplığını kullanmaktır. web-vitals, sahada ölçülebilir Web Vitals metriklerinin her birini toplamak ve raporlamak için kullanışlı bir API sağlayan küçük, modüler bir kitaplıktır (~2 KB).

Web Vitals'ı oluşturan metriklerin tümü, tarayıcının yerleşik performans API'leri tarafından doğrudan sunulmaz. Bunun yerine, bu API'lerin üzerine inşa edilir. Örneğin, Cumulative Layout Shift (CLS), Layout Instability API kullanılarak uygulanır. web-vitals'ü kullanarak bu metrikleri kendiniz uygulama konusunda endişelenmenize gerek kalmaz. Ayrıca, topladığınız verilerin her metrik için metodoloji ve en iyi uygulamalarla eşleşmesini sağlar.

web-vitals özelliğini uygulama hakkında daha fazla bilgi için dokümanlara ve sahada Core Web Vitals'ı ölçmeyle ilgili en iyi uygulamalar kılavuzuna bakın.

Veri toplama

web-vitals tarafından toplanan ölçümleri bildirmeniz önemlidir. Bu veriler ölçülür ancak raporlanmazsa hiçbir zaman görmezsiniz. web-vitals dokümanlarında, verilerin genel bir API uç noktasına, Google Analytics'e veya Google Etiket Yöneticisi'ne nasıl gönderileceğini gösteren örnekler yer alır.

Favori bir raporlama aracınız varsa bunu kullanabilirsiniz. Aksi takdirde, Google Analytics ücretsizdir ve bu amaç için kullanılabilir.

Hangi aracı kullanacağınızı düşünürken verilerin kimlerin erişimine açık olması gerektiğini göz önünde bulundurmanız faydalı olacaktır. İşletmelerin performansı artırma konusunda en büyük kazanımları elde etmesi için genellikle tek bir departman değil, şirketin tamamının performansı artırmaya odaklanması gerekir. Farklı departmanlardan nasıl destek alacağınızı öğrenmek için Web sitesi hızını işlevler arası olarak düzeltme başlıklı makaleyi inceleyin.

Veri yorumlama

Performans verilerini analiz ederken dağılımın uçlarına dikkat etmek önemlidir. RUM verileri genellikle performansın çok farklı olduğunu gösterir. Bazı kullanıcılar hızlı bir deneyim yaşarken diğerleri yavaş bir deneyim yaşar. Ancak verileri özetlemek için medyanı kullanmak bu davranışı maskeleyebilir.

Google, Web Vitals ile ilgili olarak bir sitenin veya sayfanın önerilen eşikleri karşılayıp karşılamadığını belirlemek için medyan veya ortalama gibi istatistikler yerine "iyi" deneyimlerin yüzdesini kullanır. Daha açık belirtmek gerekirse, bir sitenin veya sayfanın Core Web Vitals eşiklerini karşıladığı kabul edilmesi için sayfa ziyaretlerinin% 75'inin her metrik için "iyi" eşiğini karşılaması gerekir.

Laboratuvar verilerini kullanarak Web Verileri'ni ölçme

Sentetik veri olarak da bilinen laboratuvar verileri, gerçek kullanıcılardan değil, kontrollü bir ortamdan toplanır. RUM verilerinin aksine, laboratuvar verileri üretim öncesi ortamlardan toplanıp geliştirici iş akışlarına ve sürekli entegrasyon süreçlerine dahil edilebilir. Sentetik veri toplayan araçlara örnek olarak Lighthouse ve WebPageTest verilebilir.

Dikkat edilmesi gereken noktalar

RUM verileri ile laboratuvar verileri arasında her zaman tutarsızlıklar olacaktır. Özellikle laboratuvar ortamının ağ koşulları, cihaz türü veya konumu kullanıcılarınkinden önemli ölçüde farklıysa bu tutarsızlıklar daha belirgin olur. Ancak özellikle Web Vitals metrikleriyle ilgili laboratuvar verileri toplarken dikkat edilmesi gereken birkaç nokta vardır:

  • Laboratuvar ortamlarında ölçülen Largest Contentful Paint (LCP), sayfanın yüklenmesinde yaşanan gecikmeler (yönlendirmeler, sunucuya bağlanma gecikmesi veya önbelleğe alınmamış veriler nedeniyle), ekrana bağlı olarak farklı kullanıcılara gösterilen farklı içerikler veya diğer nedenler (çerez banner'ları, kişiselleştirme dahil) nedeniyle RUM verileriyle sahada ölçülenlerden farklı olabilir.
  • Laboratuvar ortamlarında ölçülen Cumulative Layout Shift (CLS), RUM verilerinde gözlemlenen CLS'den yapay olarak daha düşük olabilir. Birçok laboratuvar aracı yalnızca sayfayı yükler ve sayfayla etkileşime geçmez. Sonuç olarak, yalnızca sayfanın ilk yüklenmesinde gerçekleşen düzen kaymalarını yakalarlar. Buna karşılık, RUM araçları tarafından ölçülen CLS, sayfanın yayın hayatı boyunca gerçekleşen beklenmedik düzen değişikliklerini yakalar.
  • Sonraki Boyamayla Etkileşim (INP), kullanıcının sayfayla etkileşim kurmasını gerektirdiği için laboratuvar ortamlarında ölçülemez. Sonuç olarak, INP için önerilen laboratuvar proxy'si Total Blocking Time'dır (TBT). TBT, "ilk zengin içerikli boyama ile etkileşime hazır olma süresi arasındaki, sayfanın kullanıcı girişine yanıt vermesinin engellendiği toplam süreyi" ölçer. INP ve TBT farklı şekilde hesaplansa da her ikisi de önyükleme işlemi sırasında engellenen ana iş parçacığının yansımasıdır. Ana iş parçacığı engellendiğinde tarayıcı, kullanıcı etkileşimlerine yanıt vermede gecikir.

Araç

Web Verileri'nin laboratuvar ölçümlerini toplamak için aşağıdaki araçlardan yararlanabilirsiniz:

  • Chrome Geliştirici Araçları, Performans panelinin canlı metrikler görünümünde belirli bir sayfanın Core Web Vitals'ini ölçüp raporlar. Bu görünüm, geliştiricilere kod değişiklikleri yaparken anlık performans geri bildirimi sağlar.
  • Lighthouse Lighthouse, LCP, CLS ve TBT hakkında raporlar oluşturur ve olası performans iyileştirmelerini vurgular. Lighthouse, Chrome Geliştirici Araçları'nda npm paketi olarak kullanılabilir ve Lighthouse CI kullanılarak sürekli entegrasyon iş akışlarına da dahil edilebilir.
  • WebPageTest, standart raporlamasının bir parçası olarak Web Vitals'ı içerir. WebPageTest, belirli cihaz ve ağ koşullarında Web Vitals hakkında bilgi toplamak için kullanışlıdır.