Web Vitals

Yayınlanma tarihi: 4 Mayıs 2020

Kullanıcı deneyiminin daha kaliteli olması için optimizasyon yapmak, internetteki her sitenin uzun vadede başarılı olmasının anahtarıdır. İster işletme sahibi ister pazarlamacı veya geliştirici olun, Web Verileri, sitenizin sunduğu deneyimi ölçmenize yardımcı olabilir ve siteyi geliştirme fırsatlarını saptayabilir.

Genel Bakış

Web Verileri, Google tarafından başlatılan bir girişimdir. Bu girişimin amacı, internette mükemmel bir kullanıcı deneyimi sunmak için gerekli olan kalite göstergeleri hakkında tek bir kılavuz sağlamaktır.

Google, yıllar içinde performansı ölçmek ve raporlamak için çeşitli araçlar sunmuştur. Bazı geliştiriciler bu araçları kullanma konusunda uzmanlaşırken bazıları da hem araçların hem de metriklerin çokluğu nedeniyle zorlanıyor.

Site sahipleri, kullanıcılarına sundukları deneyimin kalitesini anlamak için performans uzmanı olmak zorunda değildir. Web Vitals girişimi, bu alanı basitleştirmeyi ve sitelerin en önemli metrikler olan Core Web Vitals'a odaklanmasına yardımcı olmayı amaçlar.

Önemli Web Verileri

Core Web Vitals, tüm web sayfaları için geçerli olan, tüm site sahipleri tarafından ölçülmesi gereken ve tüm Google araçlarında gösterilecek olan Web Vitals'ın alt grubudur. Core Web Vitals'ın her biri, kullanıcı deneyiminin farklı bir yönünü temsil eder, sahada ölçülebilir ve kritik bir kullanıcı odaklı sonucun gerçek dünya deneyimini yansıtır.

Core Web Vitals'ı oluşturan metrikler zamanla gelişecektir. Mevcut grup; yükleme, etkileşim ve görsel kararlılık olmak üzere kullanıcı deneyiminin üç yönüne odaklanmakta olup aşağıdaki metrikleri (ve ilgili eşiklerini) içerir:

Largest Contentful Paint eşiği önerileri Interaction to Next Paint eşiği önerileri Cumulative Layout Shift eşiği önerileri
  • Largest Contentful Paint (LCP): Yükleme performansını ölçer. İyi bir kullanıcı deneyimi sağlamak için LCP, sayfa yüklenmeye başladıktan sonraki 2,5 saniye içinde gerçekleşmelidir.
  • Interaction to Next Paint (INP): Etkileşimliliği ölçer. İyi bir kullanıcı deneyimi sunmak için sayfaların INP değeri 200 milisaniye veya daha az olmalıdır.
  • Cumulative Layout Shift (CLS): Görsel kararlılığı ölçer. İyi bir kullanıcı deneyimi sunmak için sayfaların CLS değeri 0, 1 veya daha az olmalıdır.

Kullanıcılarınızın büyük çoğunluğu açısından bu metriklerde önerilen hedefe ulaştığınızdan emin olmak için mobil ve masaüstü cihazlarda bölümlendirilmiş sayfa yüklemelerinin 75. yüzdelik dilim eşiğini ölçebilirsiniz.

Core Web Vitals uygunluğunu değerlendiren araçlar, üç Core Web Vitals metriğinin tümünde önerilen hedefleri 75. yüzdelik dilimde karşılayan sayfaları başarılı olarak değerlendirmelidir.

Yaşam döngüsü

Core Web Vitals izleme parkurundaki metrikler, deneysel, bekliyor ve kararlı olmak üzere üç aşamadan oluşan bir yaşam döngüsünden geçer.

Core Web Vitals metriklerinin üç yaşam döngüsü aşaması, üç tane V şekliyle görselleştirilmiştir. Soldan sağa aşamalar deneysel, beklemede ve kararlı olarak sıralanır.
Core Web Vitals yaşam döngüsünün aşamaları.

Her aşama, geliştiricilere her metrik hakkında nasıl düşünmeleri gerektiğini bildirmek için tasarlanmıştır:

  • Deneysel metrikler, testlere ve topluluk geri bildirimlerine bağlı olarak önemli değişiklikler geçirmeye devam edebilecek, gelecekteki Core Web Vitals metrikleridir.
  • Beklemedeki metrikler, test ve geri bildirim aşamasını geçen ve kararlı hale gelmek için iyi tanımlanmış bir zaman çizelgesine sahip olan gelecekteki Core Web Vitals'lardır.
  • Kararlı metrikler, Chrome'un mükemmel kullanıcı deneyimleri için gerekli gördüğü mevcut Core Web Vitals kümesidir.

Core Web Vitals aşağıdaki yaşam döngüsü aşamalarındadır:

Deneysel

Bir metrik ilk geliştirildiğinde ve ekosisteme girdiğinde deneysel metrik olarak kabul edilir.

Deneysel aşamanın amacı, önce çözülecek sorunu inceleyerek ve muhtemelen önceki metriklerin ele alamadığı noktaları yineleyerek bir metriğin uygunluğunu değerlendirmektir. Örneğin, Interaction to Next Paint (INP), başlangıçta web'deki çalışma zamanı performans sorunlarını First Input Delay (FID)'den daha kapsamlı bir şekilde ele almak için deneysel bir metrik olarak geliştirildi.

Core Web Vitals yaşam döngüsünün deneysel aşaması, hataları belirleyerek ve hatta ilk tanımında değişiklikler yaparak bir metriğin geliştirilmesinde esneklik sağlamayı da amaçlar. Ayrıca bu aşamada topluluk geri bildirimi en önemli unsurdur.

Beklemede

Chrome Ekibi, deneysel bir metriğin yeterli geri bildirim aldığını ve etkinliğini kanıtladığını belirlediğinde bu metrik beklemede olan bir metrik haline gelir. Örneğin, INP, 2023'te deneysel durumdan beklemede durumuna yükseltildi. Amaç, sonunda FID'yi kullanımdan kaldırmaktı.

Beklemedeki metrikler, ekosisteme uyum sağlaması için bu aşamada en az altı ay boyunca tutulur. Daha fazla geliştirici metriği kullanmaya başladıkça topluluk geri bildirimi bu aşamanın önemli bir parçası olmaya devam edecek.

Kararlı

Core Web Vitals adayı bir metrik kesinleştiğinde sabit metrik olur. Bu, metriğin Core Web Vital olabileceği zamandır.

Kararlı metrikler aktif olarak desteklenir ve hata düzeltmelerine ve tanım değişikliklerine tabi olabilir. Kararlı Core Web Vitals metrikleri yılda birden fazla kez değişmez. Core Web Vital'da yapılan tüm değişiklikler, metriğin resmi belgelerinde ve değişiklik günlüğünde açıkça belirtilir. Core Web Vitals da değerlendirmelere dahil edilir.

Core Web Vitals'ı ölçme ve raporlama araçları

Google, Core Web Vitals'ın tüm web deneyimleri için kritik öneme sahip olduğuna inanmaktadır. Bu nedenle, bu metrikleri tüm popüler araçlarında göstermeyi taahhüt eder. Aşağıdaki bölümlerde, hangi araçların Core Web Vitals'ı desteklediği ayrıntılı olarak açıklanmaktadır.

Core Web Vitals'ı ölçmek için kullanılan alan araçları

Chrome Kullanıcı Deneyimi Raporu, her Core Web Vitals için anonimleştirilmiş gerçek kullanıcı ölçümü verilerini toplar. Bu veriler, site sahiplerinin sayfalarında analizleri manuel olarak uygulamalarına gerek kalmadan performanslarını hızlı bir şekilde değerlendirmelerini sağlar ve Chrome Geliştirici Araçları, PageSpeed Insights ve Search Console'un Core Web Vitals raporu gibi araçlara güç verir.

  LCP INP CLS
Chrome User Experience Report
Chrome Geliştirici Araçları
PageSpeed Insights
Search Console (Core Web Vitals raporu)

Chrome Kullanıcı Deneyimi Raporu'nun sağladığı veriler, sitelerin performansını değerlendirmek için hızlı bir yol sunar ancak regresyonları doğru bir şekilde teşhis etmek, izlemek ve bunlara hızlı bir şekilde tepki vermek için genellikle gerekli olan ayrıntılı, sayfa görüntüleme başına telemetriyi sağlamaz. Bu nedenle, sitelerin kendi gerçek kullanıcı izleme sistemlerini kurmalarını önemle tavsiye ederiz.

JavaScript'te Core Web Vitals'ı ölçme

Core Web Vitals'ın her biri, standart web API'leri kullanılarak JavaScript'te ölçülebilir.

Tüm Core Web Vitals'ı ölçmenin en kolay yolu, web-vitals JavaScript kitaplığını kullanmaktır. Bu kitaplık, temel web API'leri etrafında küçük ve üretime hazır bir sarmalayıcıdır. Her metriği, daha önce listelenen tüm Google araçları tarafından raporlanma şekliyle tam olarak eşleşecek şekilde ölçer.

web-vitals kitaplığıyla her metriği ölçmek için tek bir işlev çağrılabilir. Kullanım ve API ile ilgili tüm ayrıntılar için dokümanlara bakın.

import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

Sitenizi, Core Web Vitals verilerinizi ölçmek ve bir analiz uç noktasına göndermek için web-vitals kitaplığını kullanacak şekilde yapılandırdıktan sonraki adım, sayfalarınızın sayfa ziyaretlerinin en az% 75'i için önerilen eşikleri karşılayıp karşılamadığını görmek üzere bu verileri toplamak ve raporlamaktır.

Bazı analiz sağlayıcılar, Core Web Vitals metrikleri için yerleşik destek sunsa da bu desteği sunmayanlar bile araçlarında Core Web Vitals'ı ölçmenize olanak tanıyan temel özel metrik özelliklerini içermelidir.

Bu metrikleri doğrudan temel web API'lerini kullanarak ölçmeyi tercih eden geliştiriciler, uygulama ayrıntıları için bunun yerine aşağıdaki metrik kılavuzlarını kullanabilir:

Popüler analiz hizmetlerini veya kendi şirket içi analiz araçlarınızı kullanarak bu metrikleri ölçmeyle ilgili ek rehberlik için Web Verileri'ni sahada ölçmeyle ilgili en iyi uygulamalar başlıklı makaleyi inceleyin.

Core Web Vitals'ı ölçmek için laboratuvar araçları

Core Web Vitals'ın tümü öncelikle alan metrikleri olsa da birçoğu laboratuvarda da ölçülebilir.

Lab ölçümü, geliştirme aşamasındaki özelliklerin performansını test etmenin en iyi yoludur. Bu özellikler, kullanıcılara sunulmadan önce test edilmelidir. Ayrıca, performans gerilemelerini gerçekleşmeden önce yakalamanın en iyi yoludur.

Laboratuvar ortamında Core Web Vitals'ı ölçmek için aşağıdaki araçlar kullanılabilir:

  LCP INP CLS
Chrome Geliştirici Araçları
Lighthouse (bunun yerine TBT'yi kullanın)

Laboratuvar ölçümü, mükemmel deneyimler sunmanın önemli bir parçası olsa da saha ölçümünün yerini tutmaz.

Bir sitenin performansı, kullanıcının cihazının özelliklerine, ağ koşullarına, cihazda çalışan diğer işlemlere ve sayfayla nasıl etkileşimde bulunduğuna bağlı olarak önemli ölçüde değişebilir. Aslında, Core Web Vitals metriklerinin her birinin puanı kullanıcı etkileşiminden etkilenebilir. Yalnızca saha ölçümü, eksiksiz bir resim oluşturabilir.

Puanlarınızı artırmaya yönelik öneriler

Aşağıdaki kılavuzlarda, sayfalarınızı her bir Core Web Vitals için nasıl optimize edeceğinize dair özel öneriler sunulmaktadır:

Core Web Vitals'ı iyileştirmenin birçok yolu vardır ve her yaklaşım, her durum için farklı düzeylerde etki, alaka düzeyi ve kullanım kolaylığı sunar. Chrome Ekibi'nin en önemli önerilerinin kısa bir listesi için Core Web Vitals'ı iyileştirmenin en etkili yolları başlıklı makaleye bakın.

Diğer Web Verileri

Core Web Vitals, mükemmel bir kullanıcı deneyimini anlamak ve sunmak için kritik metrikler olsa da destekleyici başka metrikler de vardır.

Bu diğer metrikler, deneyimin daha büyük bir bölümünü yakalamaya veya belirli bir sorunu teşhis etmeye yardımcı olmak için üç Core Web Vitals'ın yerine veya ek metrikler olarak kullanılabilir.

Örneğin, Time to First Byte (TTFB) ve First Contentful Paint (FCP) metrikleri, yükleme deneyiminin önemli yönleridir ve LCP ile ilgili sorunları (sırasıyla yavaş sunucu yanıt süreleri veya oluşturmayı engelleyen kaynaklar) teşhis etmek için yararlıdır.

Benzer şekilde, Total Blocking Time (TBT) gibi bir metrik, INP'yi etkileyebilecek olası etkileşim sorunlarını yakalamak ve teşhis etmek için hayati önem taşıyan bir laboratuvar metriğidir. Ancak bunlar, sahada ölçülebilir olmadıkları ve kullanıcı odaklı bir sonucu yansıtmadıkları için Core Web Vitals kümesinin bir parçası değildir.

Web Verileri'nde yapılan değişiklikler

Web Verileri ve Core Web Vitals, geliştiricilerin web'deki deneyimin kalitesini ölçmek için kullanabileceği en iyi sinyalleri temsil eder. Ancak bu sinyaller mükemmel değildir ve gelecekte iyileştirme veya eklemeler yapılması beklenir.

Core Web Vitals tüm web sayfaları için geçerlidir ve alakalı Google araçlarında yer alır. Bu metriklerdeki değişiklikler geniş kapsamlı bir etki yaratacaktır. Bu nedenle, geliştiriciler Core Web Vitals'ın tanımlarının ve eşiklerinin sabit olmasını, güncellemelerin ise ön bildirimle ve yıllık olarak düzenli bir şekilde yapılmasını beklemelidir.

Diğer Web Verileri genellikle bağlama veya araca özgüdür ve Core Web Vitals'a kıyasla daha deneysel olabilir. Bu nedenle, tanımları ve eşikleri daha sık değişebilir.

Tüm Web Vitals ile ilgili değişiklikler, bu herkese açık CHANGELOG açıkça belgelenir.