Sitenizin Web Vitals'ı hakkında veri toplamak, bunları iyileştirmeye yönelik ilk adımdır. Çok yuvarlak 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.
RUM verilerini kullanarak Web Verileri'ni ölçme
Alan verileri olarak da bilinen Gerçek Kullanıcı İzleme (RUM) verileri, bir sitenin gerçek kullanıcılarının yaşadığı performansı yakalar. Google, bir sitenin önerilen Core Web Vitals eşiklerini karşılayıp karşılamadığını belirlemek için RUM verilerini kullanır.
Başlarken
RUM kurulumunuz yoksa, aşağıdaki araçlar size hızlı bir şekilde sitenizin gerçek dünyadaki performansıyla ilgili veriler 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ızı nereye odaklayacağı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 toplu sayfa düzeyindeki ve kaynak düzeyindeki performansı raporlar. Ayrıca, performansı nasıl iyileştireceğinizle 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 Dashboard, seçtiğiniz bir kaynağa ait 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. Kendi 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, alan ölçülebilir Web Verileri metriklerinin her birinin toplanması ve raporlanması için kullanışlı bir API sağlayan küçük ve modüler bir kitaplıktır (yaklaşık 2 KB).
Web Verileri'ni oluşturan metriklerin tamamı, tarayıcının yerleşik performans API'leri tarafından doğrudan gösterilmez, bunun üzerine bunların ü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. Ölçülen ancak raporlanmayan bu verileri 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 kime erişmesi 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 büyük ölçüde değiştiğini 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.
Web Verileri ile ilgili olarak Google, bir sitenin veya sayfanın önerilen eşikleri karşılayıp karşılamadığını belirlemek için medyanlar veya ortalamalar 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 edilmek 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üklenmesindeki gecikmeler (yönlendirmeler, sunucuya bağlanma gecikmesi veya önbelleğe alınmamış veriler aracılığıyla), ekrana bağlı olarak farklı kullanıcılara gösterilen farklı içerikler veya başka nedenlerden dolayı (çerez banner'ları, kişiselleştirme dahil) RUM verileriyle ölçülenden 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ıların sayfayla etkileşimi gerektirdiğinden 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 hesaplanmasına rağmen 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.
Alet
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ı altında Web Verileri hakkında bilgi toplamak için kullanışlıdır.