Web Vitals Nedir?
Web Vitals, web’de harika bir kullanıcı deneyimi sunmak için gerekli olan kalite sinyalleri için birleşik rehberlik sağlamak üzere Google’ın bir girişimidir.
Google, performansı ölçmek ve raporlamak için yıllar boyunca bir dizi araç sağlamıştır. Bazı geliştiriciler bu araçları kullanma konusunda uzmandır, diğerleri ise hem araçların hem de metriklerin bolluğuna ayak uydurmanın zor olduğunu görmüştür.
Site sahiplerinin, kullanıcılarına sundukları deneyimin kalitesini anlamak için performans gurusu olmaları gerekmemelidir. Web Vitals girişimi, ortamı basitleştirmeyi ve sitelerin en önemli ölçütlere, Temel Web Vitals’a odaklanmalarına yardımcı olmayı amaçlamaktadır .
Temel Web Vitals
Temel Web Vitals, tüm web sayfaları için geçerli olan Web Vitals alt kümesidir, tüm site sahipleri tarafından ölçülmelidir ve tüm Google araçlarında gösterilecektir. Temel Web Vitalslerinden her biri, kullanıcı deneyiminin farklı bir yönünü temsil eder , sahada ölçülebilir ve kritik bir kullanıcı merkezli sonucun gerçek dünya deneyimini yansıtır .
Core Web Vitals’ı oluşturan metrikler zaman içinde gelişecektir . 2020 için mevcut set, kullanıcı deneyiminin üç yönüne ( yükleme , etkileşim ve görsel kararlılık) odaklanır ve aşağıdaki ölçümleri (ve ilgili eşikleri) içerir:
- En Büyük Zengin İçerikli Boya (LCP) : yükleme performansınıölçer. İyi bir kullanıcı deneyimi sağlamak için, LCP, sayfanın ilk yüklenmeye başladığı andanitibaren 2,5 saniye içinde gerçekleşmelidir.
- İlk Giriş Gecikmesi (FID) : etkileşimi ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların FID’si 100 milisaniyeden az olmalıdır.
- Kümülatif Düzen Kayması (CLS) : görsel kararlılığı ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların CLS değeri 0.1’den az olmalıdır .
Yukarıdaki metriklerin her biri için, çoğu kullanıcınız için önerilen hedefe ulaşmanızı sağlamak için , mobil ve masaüstü cihazlarda bölümlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimini ölçmek için iyi bir eşik değeridir .
https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fyemlihatoker.com
Temel Web Vitals uyumluluğunu değerlendiren araçlar, yukarıdaki üç metriğin tümü için 75. yüzdelik dilimde önerilen hedefleri karşılıyorsa bir sayfanın geçmesini dikkate almalıdır.
Bu önerilerin arkasındaki araştırma ve metodoloji hakkında daha fazla bilgi edinmek için bkz: Temel Web Vitals ölçüm eşiklerini tanımlama
Temel Web Vitals ölçmek ve raporlamak için araçlar
Google, Temel Web Vitals’in tüm web deneyimleri için kritik olduğuna inanmaktadır. Sonuç olarak, tüm popüler araçlarında bu ölçümleri ortaya çıkarmaya kararlıdır . Aşağıdaki bölümler, hangi araçların Temel Web Vitals’ı desteklediğini ayrıntılarıyla anlatmaktadır.
Temel Web Vitalsını ölçmek için alan araçları
Krom Kullanıcı Deneyimi Raporu Her Çekirdek Web için gerçek kullanıcı ölçüm verileri Vital, anonim toplar. Bu veriler, site sahiplerinin sayfalarında analizleri manuel olarak kullanmalarına gerek kalmadan performanslarını hızlı bir şekilde değerlendirmelerine olanak tanır ve PageSpeed Insights ve Search Console’un Temel Web Vitals raporu gibi araçları güçlendirir .
| LCP | FID | CLS | |
| Chrome Kullanıcı Deneyimi Raporu | ✔ | ✔ | ✔ |
| PageSpeed Insights | ✔ | ✔ | ✔ |
| Search Console (Temel Web Vitals raporu) | ✔ | ✔ | ✔ |
Bu araçların nasıl kullanılacağı ve kullanım alanınız için hangi aracın doğru olduğu konusunda rehberlik için bkz: Web Vitals’ı ölçmeye başlama
Chrome Kullanıcı Deneyimi Raporu tarafından sağlanan veriler, sitelerin performansını değerlendirmenin hızlı bir yolunu sunar, ancak gerilemeleri doğru şekilde teşhis etmek, izlemek ve bunlara hızlı tepki vermek için genellikle gerekli olan ayrıntılı, sayfa başına görüntüleme telemetrisini sağlamaz. Sonuç olarak, sitelerin kendi gerçek kullanıcı izlemelerini kurmalarını şiddetle tavsiye ederiz.
JavaScript’te Temel Web Hayati Değerlerini Ölçün
Temel Web Vitallerinin her biri, standart web API’leri kullanılarak JavaScript’te ölçülebilir.
Tüm Temel Web Vitalslerini ölçmenin en kolay yolu, web-vitals JavaScript kitaplığını kullanmaktır . Yukarıda listelenen Google araçları.
İle web Hayati kütüphane, her metrik ölçüm tek bir işlevi (tam belgelerine bakın çağırarak olarak basit gibidir kullanım ve API ayrıntılar):
import {getCLS, getFID, getLCP} 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});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);Web Vitals Chrome Uzantısını kullanarak herhangi bir kod yazmadan da Temel Web Vitals’ın her biri hakkında rapor oluşturabilirsiniz . Bu uzantı , bu ölçümlerin her birini ölçmek ve web’de gezinirken kullanıcılara göstermek için web-vitals kitaplığını kullanır .
Bu uzantı, kendi sitelerinizin, rakibinizin sitelerinin ve genel olarak web’in performansını anlamanıza yardımcı olabilir.
| LCP | FID | CLS | |
|---|---|---|---|
| web-vitals | ✔ | ✔ | ✔ |
| Web Vitals Uzantısı | ✔ | ✔ | ✔ |
Alternatif olarak, bu ölçümleri doğrudan temeldeki web API’leri aracılığıyla ölçmeyi tercih eden geliştiriciler, uygulama ayrıntıları için şu ölçüm kılavuzlarına başvurabilir:
Popüler analitik hizmetlerini (veya kendi şirket içi analiz araçlarınızı) kullanarak bu ölçümleri nasıl ölçeceğiniz konusunda ek rehberlik için bkz .: Alandaki Web Vitals’ı ölçmek için en iyi uygulamalar
Temel Web Vitalsını ölçmek için laboratuvar araçları
Tüm Temel Web Vitalsları her şeyden önce alan ölçümleri olsa da, birçoğu laboratuvarda da ölçülebilir.
Laboratuvar ölçümü, geliştirme sırasında özelliklerin performansını kullanıcılara sunulmadan önce test etmenin en iyi yoludur. Ayrıca, performans gerilemelerini gerçekleşmeden önce yakalamanın en iyi yoludur.
Aşağıdaki araçlar, bir laboratuvar ortamında Temel Web Hayati değerlerini ölçmek için kullanılabilir:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome Geliştirme Araçları | ✔ | ✘ ( bunun yerine TBT kullanın) | ✔ |
| Deniz feneri | ✔ | ✘ ( bunun yerine TBT kullanın) | ✔ |
Kullanıcı olmadan simüle edilmiş bir ortama sayfa yükleyen Lighthouse gibi araçlar FID’yi ölçemez (kullanıcı girişi yoktur). Bununla birlikte, Toplam Engelleme Süresi (TBT) ölçüsü laboratuvarda ölçülebilir ve FID için mükemmel bir proxy’dir. Laboratuvarda TBT’yi iyileştiren performans optimizasyonları, sahadaki FID’yi iyileştirmelidir (aşağıdaki performans önerilerine bakın).
Laboratuvar ölçümü harika deneyimler sunmanın önemli bir parçası olsa da, alan ölçümünün yerini tutmaz.
Bir sitenin performansı, kullanıcının cihaz yeteneklerine, ağ koşullarına, cihazda başka hangi işlemlerin çalıştığına ve sayfayla nasıl etkileşim kurduğuna bağlı olarak önemli ölçüde değişebilir. Aslında, Temel Web Vitals ölçümlerinin 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ştirmek için öneriler
Temel Web Yaşamsal Değerlerini ölçtükten ve iyileştirilmesi gereken alanları belirledikten sonra, sonraki adım optimize etmektir. Aşağıdaki kılavuzlar, her bir Temel Web Vitalsi için sayfalarınızı nasıl optimize edeceğinize dair belirli öneriler sunar:
Diğer Web Vitals
Temel Web Vitals, harika bir kullanıcı deneyimini anlamak ve sunmak için kritik ölçütler olsa da, başka önemli ölçütler de vardır.
Bu diğer Web Vitals, deneyimin daha büyük bir bölümünü yakalamaya yardımcı olmak veya belirli bir sorunu teşhis etmeye yardımcı olmak için genellikle Temel Web Vitals için proxy veya tamamlayıcı ölçümler olarak hizmet eder.
Örneğin, İlk Bayta Kalan Süre (TTFB) ve İlk Zengin İçerikli Boyama (FCP) ölçümlerinin her ikisi de yükleme deneyiminin hayati yönleridir ve her ikisi de LCP ile ilgili sorunları teşhis etmede yararlıdır ( sırasıyla yavaş sunucu yanıt süreleri veya oluşturma engelleme kaynakları ) .
Benzer şekilde, Toplam Engelleme Süresi (TBT) ve Etkileşim Süresi (TTI) gibi ölçümler, FID’yi etkileyecek olası etkileşim sorunlarını yakalamak ve teşhis etmek için hayati öneme sahip laboratuvar ölçümleridir . Ancak, alan ölçülebilir olmadıklarından ve kullanıcı merkezli bir sonucu yansıtmadıklarından, Temel Web Hayati kümesinin bir parçası değildirler .
Gelişen Web Vitals
Web Vitals ve Core Web Vitals, geliştiricilerin günümüzde web’deki deneyim kalitesini ölçmek için sahip oldukları en iyi sinyalleri temsil eder, ancak bu sinyaller mükemmel değildir ve gelecekte iyileştirmeler veya eklemeler beklenmelidir.
Çekirdek Web Hayati tüm web sayfalarına ilgili ve alakalı Google araçlarındaki özellikli vardır. Bu ölçütlerdeki değişikliklerin geniş kapsamlı etkisi olacaktır; bu nedenle, geliştiriciler, Temel Web Vitals tanımlarının ve eşiklerinin sabit olmasını ve güncellemelerin önceden bildirimde bulunmasını ve tahmin edilebilir, yıllık bir kadans olmasını beklemelidir.
Diğer Web Vitals genellikle bağlama veya araca özeldir ve Temel Web Vitals’tan daha deneysel olabilir. Bu nedenle, tanımları ve eşikleri daha büyük sıklıkta değişebilir.
Tüm Web Vitals için, değişiklikler bu herkese açık açıkça belgelenecektir .
