Sitenizin Web Vitals'ı ile ilgili veri toplamak, bu metrikleri iyileştirmeye yönelik ilk adımdır. Kapsamlı bir analiz, hem gerçek dünya 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 deneyimlediği performansı yakalar. Google, bir sitenin önerilen Önemli Web Verileri 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, sitenizin gerçek dünyadaki performansı hakkında hızlı bir şekilde veri 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 olur. Yerel deneyiminizi aynı sayfadaki gerçek kullanıcı deneyimleriyle karşılaştırarak hata ayıklama çalışmalarınızda nereye odaklanmanız gerektiği konusunda daha bilinçli bir karar verebilirsiniz. Sitenizin Web Vitals metriklerini ö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ün içindeki toplu sayfa düzeyinde ve kaynak düzeyinde performans hakkında rapor verir. 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 bazında raporlar. Bu nedenle, iyileştirilmesi gereken belirli sayfaları belirlemek için uygundur. 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 Vis, seçtiğiniz bir URL veya kaynak için CrUX geçmiş verilerini (CrUX veri kümesinde mevcutsa) gösteren önceden oluşturulmuş bir kontrol panelidir. CrUX History API'nin üzerine kurulmuştur ve kurulum işlemi yaklaşık bir dakika sürer. CrUX Vis, PageSpeed Insights ve Search Console'a kıyasla daha fazla veri örneği, LCP alt bölümleri ve gezinme türleri gibi bilgiler içerir.
- CrUX Vis, seçtiğiniz bir kaynak veya URL için CrUX verilerini gösteren geçmişe dönük bir kontrol panelidir. CrUX History API'nin üzerine kurulmuştur. CrUX Vis raporları, PageSpeed Insights ve Search Console'a kıyasla daha fazla ayrıntı içerir. Örneğin, CrUX Vis'te gezinme türleri ve LCP ile RTT verileri bulunur.
Daha önce listelenen araçlar, Web Vitals'ı ölçmeye "başlamak" için uygun olsa da başka bağlamlarda da yararlı olabileceğini belirtmek isteriz. Özellikle CrUX ve PSI, API olarak kullanılabilir ve kontrol panelleri ile diğer raporları oluşturmak için kullanılabilir.
RUM verilerini toplama
CrUX tabanlı araçlar, Web Vitals performansını araştırmak için iyi bir başlangıç noktası olsa da kendi RUM'unuzla desteklemenizi önemle tavsiye ederiz. Kendiniz topladığınız RUM verileri, sitenizin performansı hakkında daha ayrıntılı ve anlık geri bildirimler sağlayabilir. Bu sayede sorunları belirlemek 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 uzmanlaşmıştır. Core Web Vitals'ı bu hizmetlerle kullanmak için RUM sağlayıcınıza sitenizde Core Web Vitals izlemeyi etkinleştirme hakkında bilgi sorun.
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 daha ayrıntılı olarak sonraki bölümde açıklanmıştır.
web-vitals JavaScript kitaplığı
Önemli Web Verileri için kendi RUM kurulumunuzu uyguluyorsanız Önemli Web Verileri ölçümlerini toplamanın en kolay yolu web-vitals JavaScript kitaplığını kullanmaktır. web-vitals, alan ölçümlü Web Vitals metriklerinin her birini toplamak ve raporlamak için uygun bir API sağlayan küçük ve modüler bir kitaplıktır (~2 KB).
Web Verileri'ni 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 kurulur. Örneğin, Cumulative Layout Shift (CLS), Layout Instability API kullanılarak uygulanır. web-vitals kullanarak bu metrikleri kendiniz uygulamanız gerekmez. Ayrıca, topladığınız verilerin her bir metriğin metodolojisine ve en iyi uygulamalarına uygun olmasını sağlar.
web-vitals özelliğini uygulama hakkında daha fazla bilgi için dokümanlara ve Web Vitals'ı sahada ölçmeyle ilgili en iyi uygulamalar kılavuzuna bakın.
Veri toplama
web-vitals tarafından toplanan ölçümleri bildirmeniz gerekir. Bu veriler ölçülür ancak raporlanmazsa bunları hiçbir zaman göremezsiniz. web-vitals dokümanı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 almaktadır.
Zaten kullandığınız bir favori raporlama aracı varsa onu kullanabilirsiniz. Aksi takdirde, Google Analytics ücretsizdir ve bu amaçla kullanılabilir.
Hangi aracı kullanacağınıza karar verirken verilere kimlerin erişmesi gerektiğini düşünmek faydalı olur. İşletmeler, performansı iyileştirmekle ilgilenen tek bir departman yerine tüm şirket olduğunda genellikle en büyük performans artışlarını elde eder. Farklı departmanların desteğini nasıl alacağınızı öğrenmek için Web sitesi hızını işlevler arası düzeltme başlıklı makaleyi inceleyin.
Veri yorumlama
Performans verilerini analiz ederken dağılımın uç noktaları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ışı gizleyebilir.
Google, bir sitenin veya sayfanın önerilen eşikleri karşılayıp karşılamadığını belirlemek için Web Vitals ile ilgili olarak ortalamalar veya ortancalar gibi istatistikler yerine "iyi" deneyimlerin yüzdesini kullanır. Daha net bir ifadeyle, 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
Laboratuvar verileri (sentetik veriler olarak da bilinir) gerçek kullanıcılardan değil, kontrollü bir ortamdan toplanır. RUM verilerinin aksine, laboratuvar verileri üretim öncesi ortamlardan toplanabilir ve bu nedenle geliştirici iş akışlarına ve sürekli entegrasyon süreçlerine dahil edilebilir. Lighthouse ve WebPageTest, sentetik veri toplayan araçlara örnek olarak 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:
- Largest Contentful Paint (LCP) değerleri, laboratuvar ortamlarında ölçülen değerlerle RUM verileriyle alanda ölçülen değerler arasında farklılık gösterebilir. Bunun nedeni, sayfanın yüklenmesindeki gecikmeler (yönlendirmeler, sunucuya bağlanırken yaşanan gecikme veya önbelleğe alınmamış veriler), ekrana bağlı olarak farklı kullanıcılara farklı içeriklerin gösterilmesi ya da diğer nedenler (ör. çerez banner'ları, kişiselleştirme) 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, sayfayla etkileşimde bulunmaz. Bu nedenle, yalnızca ilk sayfa yükleme sırasında meydana gelen düzen kaymalarını yakalarlar. Buna karşılık, RUM araçlarıyla ölçülen CLS, sayfanın açık olduğu süre boyunca gerçekleşen beklenmedik düzen kaymalarını yakalar.
- Sonraki Boyamayla Etkileşim (INP), sayfa ile kullanıcı etkileşimleri gerektirdiğinden laboratuvar ortamlarında ölçülemez. Bu nedenle, INP için önerilen laboratuvar proxy'si Total Blocking Time (TBT) olur. TBT, "sayfanın kullanıcı girişine yanıt vermesinin engellendiği, İlk Zengin İçerikli Boyama ile Etkileşime Hazır Olma Süresi arasındaki toplam süreyi" ölçer. INP ve TBT farklı şekilde hesaplansa da her ikisi de başlatma işlemi sırasında engellenen ana iş parçacığını yansıtır. Ana iş parçacığı engellendiğinde tarayıcının kullanıcı etkileşimlerine yanıt vermesi gecikir.
Takım
Bu araçlar, Web Vitals'ın laboratuvar ölçümlerini toplamak için kullanılabilir:
- Chrome Geliştirici Araçları, Performans panelinin canlı metrikler görünümünde belirli bir sayfanın Önemli Web Verileri'ni ö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 sunar ve olası performans iyileştirmelerini de 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 ile ilgili bilgi toplamak için kullanışlıdır.