Web Vitals

Philip Walton
Philip Walton

Kullanıcı deneyiminin kalitesi için optimizasyon yapmak, web'deki herhangi bir sitenin uzun vadeli başarısının anahtarıdır. İster işletme sahibi, ister pazarlamacı veya geliştirici olun, Web Verileri, sitenizin sunduğu deneyimi ölçmenize ve iyileştirme fırsatlarını belirlemenize yardımcı olabilir.

Genel Bakış

Web Vitals, Google'ın web'de mükemmel bir kullanıcı deneyimi sunmak için gerekli olan kalite sinyalleriyle ilgili birleştirilmiş yönergeler sağlamayı amaçlayan bir girişimidir.

Google, yıllar içinde performansı ölçmek ve raporlamak için bir dizi araç sunmaktadır. Bazı geliştiriciler bu araçları kullanmada uzmanken bazıları hem çok sayıda araç hem de metrikle ilgili ihtiyaçları karşılayamayabilir.

Site sahiplerinin, kullanıcılarına sundukları deneyimin kalitesini anlamak için performans uzmanı olmaları gerekmemelidir. Web Verileri girişimi, ortamı 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 Web Vitals alt kümesidir. Tüm site sahipleri tarafından ölçülmesi gerekir ve tüm Google araçlarında gösterilir. Core Web Vitals'ın her biri kullanıcı deneyiminin farklı bir yönünü temsil eder, sahada ölçülebilirdir ve kullanıcı odaklı kritik bir sonucun gerçek dünyadaki deneyimini yansıtır.

Core Web Vitals'ı oluşturan metrikler zamanla değişir. Mevcut 2020 raporu, kullanıcı deneyiminin üç yönüne (yükleme, etkileşim ve görsel kararlılık) odaklanıyor ve aşağıdaki metrikleri (ve ilgili eşiklerini) içeriyor:

Largest Contentful Paint eşiği önerileri Sonraki Boyama eşiği önerileriyle etkileşim 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şir.
  • Sonraki Boyamayla Etkileşim (INP): Etkileşimi ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların INP değeri 200 milisaniye veya daha kısa olmalıdır.
  • Cumulative Layout Shift (CLS): görsel kararlılığı ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların CLS'si 0, 1. veya daha düşük olmalıdır.

Kullanıcılarınızın çoğunda bu metrikler için önerilen hedefe ulaştığınızdan emin olmak amacıyla iyi bir ölçüm eşiği, mobil ve masaüstü cihazlara göre segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimidir.

Core Web Vitals uygunluğunu değerlendiren araçlar, Core Web Vitals metriklerinin üçü de için 75. yüzdelik dilimde önerilen hedefleri karşılıyorsa bir sayfanın iletilmesini dikkate almalıdır.

Yaşam döngüsü

Core Web Vitals kanalındaki metrikler üç aşamadan oluşan bir yaşam döngüsünden geçer: deneysel, beklemede ve kararlı.

Core Web Vitals metriklerinin, üç kareden oluşan bir seri olarak görselleştirilmiş üç yaşam döngüsü aşaması. Soldan sağa aşamalar Deneysel, Beklemede ve Kararlı'dır.
Core Web Vitals yaşam döngüsünün aşamaları.

Her aşama, geliştiricilere her metrikle ilgili nasıl düşünmeleri gerektiğini göstermek için tasarlanmıştır:

  • Deneysel metrikler, testlere ve topluluk geri bildirimlerine bağlı olarak hâlâ önemli değişikliklerden geçiyor olabilecek potansiyel Core Web Vitals verileridir.
  • Beklemedeki metrikler, test ve geri bildirim aşamasını geçmiş olan ve kararlı hale gelmesi için iyi tanımlanmış bir zaman çizelgesine sahip, gelecekteki Core Web Vitals değerleridir.
  • Kararlı metrikler, Chrome'un mükemmel kullanıcı deneyimleri için gerekli olarak değerlendirdiği mevcut Core Web Vitals grubudur.

Core Web Vitals, aşağıdaki yaşam döngüsü aşamalarında bulunur:

Experimental

Bir metrik ilk geliştirilip ekosisteme girdiğinde deneysel bir metrik olarak kabul edilir.

Deneysel aşamanın amacı, öncelikle çözülecek sorunu araştırarak bir metriğin uygunluğunu değerlendirmek ve önceki metriklerin ele alamadığı noktaları tekrarlamaktır. Örneğin, Sonraki Boyamayla Etkileşim (INP) başlangıçta web'deki çalışma zamanı performans sorunlarını İlk Giriş Gecikmesi (FID) değerinden daha kapsamlı bir şekilde ele almak için deneysel bir metrik olarak geliştirilmiştir.

Core Web Vitals yaşam döngüsünün deneysel aşamasının, hataları tespit ederek ve hatta ilk tanımındaki değişiklikleri keşfederek bir metriğin geliştirilmesinde esneklik sağlaması da amaçlanır. Bu aynı zamanda topluluğun geri bildiriminin en önemli olduğu aşamadır.

Beklemede

Chrome ekibi deneysel bir metriğin yeterli geri bildirim aldığını ve etkinliğini kanıtladığını belirlediğinde beklemede olan bir metrik haline gelir. Örneğin, INP 2023'te deneme aşamasından beklemede durumuna geçirildi.

Ekosisteme uyum sağlaması için zaman tanımak amacıyla, beklemede olan metrikler en az altı ay boyunca bu aşamada tutulur. Daha fazla geliştirici bu metriği kullanmaya başladığından topluluk geri bildirimleri bu aşamada önemli bir unsur olmaya devam edecektir.

Kararlı

Core Web Vitals aday metriği kesinleştiğinde kararlı bir metrik haline gelir. Bu noktada metriğin Core Web Vitals'a dönüşmesi gerekir.

Kararlı metrikler aktif olarak desteklenir ve hata düzeltmeleri ile tanım değişikliklerine tabi olabilir. Kararlı Core Web Vitals metrikleri yılda bir defadan fazla değişmez. Core Web Vitals'da yapılan herhangi bir değişiklik, metriğin resmi belgelerinde ve metriğin değişiklik günlüğünde açıkça bildirilecektir. Core Web Vitals tüm değerlendirmelere de 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 inanıyor. Bu nedenle, bu metrikleri tüm popüler araçlarında göstermeye kararlıdır. Aşağıdaki bölümlerde, Core Web Vitals'ı destekleyen araçlar ayrıntılı olarak açıklanmaktadır.

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

Chrome Kullanıcı Deneyimi Raporu, her bir Core Web Vitals için anonimleştirilmiş, gerçek kullanıcı ölçüm verilerini toplar. Bu veriler, site sahiplerinin sayfalarında manuel olarak analiz araçları kullanmasına gerek kalmadan performanslarını hızlı bir şekilde değerlendirmelerini sağlar. Ayrıca, PageSpeed Insights ile Search Console'un Önemli Web Verileri raporu gibi araçları destekler.

  LCP INP CLS
Chrome Kullanıcı Deneyimi Raporu
PageSpeed Insights
Search Console (Core Web Vitals raporu)

Chrome Kullanıcı Deneyimi Raporu tarafından sağlanan veriler, sitelerin performansını değerlendirmek için hızlı bir yol sunar, ancak regresyonları doğru bir şekilde teşhis etmek, izlemek ve hızlı bir şekilde tepki vermek için genellikle gerekli olan ayrıntılı, sayfa görüntüleme başına telemetriyi sağlamaz. Sonuç olarak, 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, temel web API'lerini çevreleyen küçük, üretime hazır bir sarmalayıcıdır. Sarmalayıcı, her metriği daha önce listelenen tüm Google araçları tarafından raporlanma şekilleriyle doğru şekilde eşleşecek şekilde ölçebilir.

Web-vitals kitaplığıyla her bir metriğin ölçümü, tek bir işlevin çağırılmasıyla yapılabilir (kullanım ve API ile ilgili tüm ayrıntılar için belgelere 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 amacıyla bu verileri toplamak ve raporlamaktır.

Bazı analiz sağlayıcıları, Core Web Vitals metriklerini yerleşik olarak destekler, ancak bulunmasa bile araçlarında Core Web Vitals'ı ölçmenize olanak tanıyan temel özel metrik özelliklerini içermesi gerekir.

Buna örnek olarak site sahiplerinin Google Analytics'i kullanarak Core Web Vitals metriklerini ölçmelerine olanak tanıyan Web Verileri Raporu verilebilir. Diğer analiz araçlarını kullanarak Core Web Vitals'ı ölçme hakkında yardım için Web Verileri'ni sahada ölçmekle ilgili en iyi uygulamalar başlıklı makaleyi inceleyin.

Ayrıca Web Vitals Chrome Uzantısı'nı kullanarak herhangi bir kod yazmadan Core Web Vitals'ın her biri hakkında rapor oluşturabilirsiniz. Bu uzantı, bu metriklerin her birini ölçmek ve bunları web'de gezinen kullanıcılara göstermek için web-önemli kitaplığını kullanır.

Bu uzantı kendi sitelerinizin, rakibinizin sitelerinin ve genel olarak web'in performansını anlamanıza yardımcı olabilir.

  LCP INP CLS
web-hayati
Web Verileri Uzantısı

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

Bu metrikleri popüler analiz hizmetlerini veya kendi şirket içi analiz araçlarınızı kullanarak ölçme hakkında daha fazla bilgi için Web Verileri'ni sahada ölçmek için en iyi uygulamalar başlıklı makaleyi inceleyin.

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

Core Web Vitals'ın tümü, en öncelikli ve en önemlisi alan metrikleri olsa da birçoğu da laboratuvarda ölçülebilirdir.

Laboratuvar ölçümü, özelliklerin kullanıcılara yayınlanmadan önce geliştirme sırasında performansını test etmenin en iyi yoludur. Ayrıca, performans regresyonlarını gerçekleşmeden önce yakalamanın en iyi yoludur.

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

  LCP INP CLS
Chrome Geliştirici Araçları (bunun yerine TBT kullanın)
Deniz Feneri (bunun yerine TBT kullanın)

Laboratuvar ölçümü, muhteşem deneyimler sunmanın önemli bir parçası olsa da saha ölçümünün yerine geçmez.

Bir sitenin performansı, kullanıcının cihaz özelliklerine, ağ koşullarına, cihazda çalışan diğer işlemlere ve sayfayla nasıl etkileşime girdiğine bağlı olarak önemli ölçüde değişebilir. Hatta Core Web Vitals metriklerinin her birinin puanı kullanıcı etkileşiminden etkilenebilir. Yalnızca alan ölçümü resmin tamamını doğru bir şekilde yakalayabilir.

Puanlarınızı yükseltmeyle ilgili öneriler

Aşağıdaki kılavuzlarda, Core Web Vitals'ın her biri için sayfalarınızı nasıl optimize edeceğinizle ilgili özel öneriler sunulur:

Diğer Web Verileri

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

Bu diğer metrikler, deneyimin daha büyük bir bölümünü yakalamak veya belirli bir sorunun teşhis edilmesine yardımcı olmak için proxy olarak veya üç Core Web Vitals için ek metrik işlevi görebilir.

Örneğin, İlk Bayt'a Kadar Geçen Süre (TTFB) ve İlk Zengin İçerikli Boyama (FCP) metrikleri, yükleme deneyiminin hayati unsurlarıdır ve LCP ile ilgili sorunların (sırasıyla yavaş sunucu yanıt süreleri veya oluşturma engelleyen kaynaklar) teşhis edilmesinde yararlıdır.

Benzer şekilde, Toplam Engelleme Süresi (TBT) gibi bir metrik, INP'yi etkileyebilecek olası etkileşimlilik sorunlarının yakalanması ve teşhis edilmesi açısından hayati önem taşıyan bir laboratuvar metriğidir. Ancak, alan ölçülebilir olmadıkları veya kullanıcı odaklı bir sonucu yansıtmadıkları için Core Web Vitals grubunun bir parçası değildir.

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

Web Verileri ve Core Web Vitals, geliştiricilerin web genelindeki deneyimin kalitesini ölçmek için günümüzde sahip olduğu en iyi sinyalleri temsil etse de bu sinyaller mükemmel değildir ve gelecekte iyileştirmeler ya da eklemeler yapılması beklenmektedir.

Core Web Vitals, tüm web sayfalarıyla alakalıdır ve ilgili Google araçlarında öne çıkarılır. Bu metriklerde yapılacak değişikliklerin geniş kapsamlı bir etkisi olacaktır; Bu nedenle geliştiriciler, Core Web Vitals tanımlarının ve eşiklerinin istikrarlı olmasını, güncellemelerin ise önceden bildirimde bulunulmasını ve öngörülebilir, yıllık bir sıklıkta olmasını beklemelidir.

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

Tüm Web Verileri için değişiklikler, bu herkese açık CHANGELOG dosyasında açıkça belgelenecektir.