Yayınlanma tarihi: 4 Mayıs 2020
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 Vitals, sitenizin sunduğu deneyimi ölçmenize yardımcı olabilir ve siteyi geliştirme fırsatlarını saptayabilir.
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 çeşitli araçlar sunmuştur. Bazı geliştiriciler bu araçları kullanma konusunda uzmanken diğerleri hem çok sayıda araç hem de metrikle ilgili ihtiyaçları karşılayabildiklerinin farkındadır.
Site sahiplerinin, kullanıcılarına sundukları deneyimin kalitesini anlamak için performans uzmanı olmaları gerekmemelidir. Web Vitals girişimi, durumu basitleştirmeyi ve sitelerin en önemli metriklere (Core Web Vitals) odaklanmasına yardımcı olmayı amaçlar.
Önemli Web Verileri
Önemli Web Verileri, Web Verileri'nin tüm web sayfaları için geçerli olan alt kümesidir. Tüm site sahipleri tarafından ölçülmesi gereken bu metrikler, tüm Google araçlarında gösterilir. Core Web Vitals'in her biri kullanıcı deneyiminin farklı bir yönünü temsil eder, sahada ölçülebilirdir ve kritik bir kullanıcı odaklı sonucun gerçek dünyadaki deneyimini yansıtır.
Core Web Vitals'ı oluşturan metrikler zamanla değişir. Mevcut grup, kullanıcı deneyiminin üç yönüne (yükleme, etkileşim ve görsel kararlılık) odaklanır ve aşağıdaki metrikleri (ve ilgili eşiklerini) içerir:
- Largest Contentful Paint (LCP): Yükleme performansını ölçer. İyi bir kullanıcı deneyimi sağlamak için LCP, sayfanın ilk kez yüklenmeye başlamasından sonraki 2,5 saniye içinde gerçekleşmelidir.
- Interaction to Next Paint (INP): Etkileşimi ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların INP'si 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ğu için bu metrikler için önerilen hedefe ulaştığınızdan emin olmak amacıyla, mobil ve masaüstü cihazlar arasında segmentlere ayrılmış sayfa yüklemelerinin yüzde 75'lik dilimi iyi bir eşiktir.
Core Web Vitals'a uygunluğu değerlendiren araçlar, Core Web Vitals metriklerinin üçünün de 75. yüzdelik diliminde önerilen hedefleri karşılayan sayfaları geçer notuyla değerlendirmelidir.
Yaşam döngüsü
Core Web Vitals kanalındaki metrikler, deneysel, beklemede ve kararlı olmak üzere üç aşamadan oluşan bir yaşam döngüsü geçirir.
Her aşama, geliştiricilere her metrik hakkında nasıl düşünmeleri gerektiğini belirtmek için tasarlanmıştır:
- Deneysel metrikler, testlere ve topluluk geri bildirimlerine bağlı olarak hâlâ önemli değişiklikler geçiriyor olabilecek potansiyel Core Web Vitals'tir.
- 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 bulduğu mevcut Core Web Vitals grubudur.
Core Web Vitals, aşağıdaki yaşam döngüsü aşamalarındadır:
Experimental
İlk kez geliştirilen ve ekosisteme giren metrikler deneme metriği olarak kabul edilir.
Deneme aşamasının amacı, önce çözülecek sorunu keşfederek ve muhtemelen önceki metriklerin ele alamamış olabileceği noktaları tekrarlayarak bir metriğin uygunluğunu değerlendirmektir. Örneğin, Interaction to Next Paint (INP) başlangıçta web'de bulunan ç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ı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 aşamada topluluk geri bildirimi de en önemli unsurdur.
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.
Beklemedeki metrikler, ekosistemin uyum sağlaması için 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 için aday metrik kesinleştiğinde sabit bir metrik haline gelir. Bu durumda metrik Core Web Vitals olabilir.
Kararlı metrikler etkin bir şekilde desteklenir ve hata düzeltmelerine ve tanım değişikliklerine tabi olabilir. Sabit Core Web Vitals metrikleri yılda bir kereden 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 da tüm değerlendirmelere dahil edilir.
Core Web Vitals'ı ölçmek ve bildirmek için kullanılan araçlar
Google, Core Web Vitals'ın tüm web deneyimleri için kritik 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'ı hangi araçların desteklediği ayrıntılı olarak açıklanmaktadır.
Core Web Vitals'ı ölçmek için alan araçları
Chrome Kullanıcı Deneyimi Raporu, her Core Web Vital için anonimleştirilmiş, gerçek kullanıcı ölçüm verilerini toplar. Bu veriler, site sahiplerinin sayfalarında analizleri manuel olarak enstrümante etmelerine gerek kalmadan performanslarını hızlı bir şekilde değerlendirmelerini sağlar ve Chrome DevTools, PageSpeed Insights ve Search Console'un Core Web Vitals raporu gibi araçları destekler.
| LCP | INP | CLS | |
| Chrome Kullanıcı Deneyimi Raporu | |||
| 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ğerlendirmenin hızlı bir yolunu sunar ancak genellikle gerilemelerin doğru şekilde teşhis edilmesi, izlenmesi ve hızlı bir şekilde tepki verilmesi için 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, temel web API'lerini çevreleyen küçük, üretime hazır bir sarmalayıcı olan web-vitals JavaScript kitaplığını kullanmaktır. Bu 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çen ve üretime hazır hale getirilmiştir.
web-vitals kitaplığıyla her bir metrik tek bir işlev çağrılarak ölçülebilir. Tüm kullanım ve API ayrıntıları için dokümanları inceleyin.
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 sonra, bir sonraki adımda 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 toplayıp raporlamanız gerekir.
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 aşağıdaki metrik kılavuzlarını kullanabilir:
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 laboratuvar araçları
Core Web Vitals'ın tümü öncelikle saha metrikleri olsa da çoğu laboratuvarda da ölçülebilir.
Laboratuvar ölçümü, özelliklerin performansını geliştirme aşamasındayken (kullanıcılara sunulmadan önce) test etmenin en iyi yoludur. Ayrıca, performans regresyonlarını gerçekleşmeden önce yakalamanın en iyi yoludur.
Core Web Vitals'ı laboratuvar ortamında ölçmek için aşağıdaki araçlardan yararlanabilirsiniz:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome Geliştirici Araçları | |||
| Lighthouse | (bunun yerine TBT kullanın) |
Laboratuvar öl��ümü, mükemmel deneyimler sunmanın önemli bir parçası olsa da saha ölçümünün yerini almaz.
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 büyük ölçüde değişebilir. Aslında, 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ı iyileştirmeye yönelik öneriler
Aşağıdaki kılavuzlarda, Core Web Vitals'ın her biri için sayfalarınızı nasıl optimize edeceğinize dair özel öneriler sunulur:
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 ekibinin başlıca önerilerinin kısa bir listesi için Core Web Vitals'ı iyileştirmenin en etkili yolları başlıklı makaleyi inceleyin.
Diğer Web Vitals metrikleri
Core Web Vitals, mükemmel bir kullanıcı deneyimini anlamak ve sunmak için önemli metrikler olsa da destekleyici başka metrikler de vardır.
Bu diğer metrikler, deneyimin daha büyük bir bölümünü yakalamanıza veya belirli bir sorunu teşhis etmenize yardımcı olmak için proxy olarak ya da üç Core Web Vitals için ek metrik olarak kullanılabilir.
Örneğin, ilk bayta geçiş süresi (TTFB) ve ilk zengin içerikli boyama (FCP) metrikleri, yükleme deneyiminin önemli yönleridir ve LCP ile ilgili sorunları (sırasıyla yavaş sunucu yanıt süreleri veya oluşturma işlemini engelleyen kaynaklar) teşhis etmek için yararlıdır.
Benzer şekilde, Total Blocking Time (TBT) gibi bir laboratuvar metriği, INP'yi etkileyebilecek olası etkileşimli sorunları tespit edip teşhis etmede çok önemlidir. Ancak bu metrikler, saha ölçümüne uygun olmadığı ve kullanıcı odaklı bir sonuç yansıtmadığı için Core Web Vitals grubunun bir parçası değildir.
Web Verileri'nde yapılan değişiklikler
Web Vitals ve Core Web Vitals, geliştiricilerin web'de deneyim kalitesini ölçmek için kullanabileceği en iyi sinyalleri temsil eder. Ancak bu sinyaller mükemmel değildir ve gelecekte iyileştirmeler veya eklemeler yapılması beklenir.
Önemli Web Verileri tüm web sayfalarıyla alakalı olup alakalı Google araçlarında yer alır. Bu metriklerde yapılacak değişikliklerin geniş kapsamlı bir etkisi olacaktır. Bu nedenle, geliştiricilerin Core Web Vitals'ın tanımlarının ve eşiklerinin sabit olmasını, güncellemelerin önceden bildirilmesini ve tahmin edilebilir, yıllık bir ritimde olmasını beklemesi gerekir.
Diğer Web Vitals genellikle bağlama veya araca özeldir ve Core Web Vitals'tan daha deneysel olabilir. Bu nedenle, bunların tanımları ve eşikleri daha sık değişebilir.
Tüm Web Vitals değişiklikleri, herkese açık bu DEĞİŞİKLİK GÜNLÜĞÜ'nde açıkça belirtilir.