Core Web Vitals
- Okunuşu
- kor veb vaytılz
Kısaca
Core Web Vitals, bir sayfanın gerçek kullanıcı deneyimini ölçen üç metriktir: yükleme hızı (LCP), yanıt verme (INP) ve görsel kararlılık (CLS).
Core Web Vitals nedir?
Core Web Vitals, Google'ın Web Vitals girişiminin bir parçası olarak tanımladığı ve bir sayfanın gerçek kullanıcılara nasıl hissettirdiğini ölçen üç metrikten oluşur. Largest Contentful Paint (LCP) yüklemeyi, yani görünür alandaki en büyük görselin ya da metin bloğunun ne kadar sürede göründüğünü ölçer. Interaction to Next Paint (INP) yanıt vermeyi, yani bir tıklama, dokunma ya da tuş basışından sonra sayfanın ne kadar hızlı görünür şekilde tepki verdiğini; Cumulative Layout Shift (CLS) ise görsel kararlılığı, yani içeriğin beklenmedik biçimde ne kadar zıpladığını ölçer.
Bir sayfa, ziyaretlerin en az yüzde 75'i iyi eşiklere ulaştığında geçer: 2,5 saniye veya altında bir LCP, 200 milisaniye veya altında bir INP ve 0,1 veya altında bir CLS. Puanlar saha verisinden, yani gerçek ziyaretçilerin tarayıcılarından toplanan ölçümlerden gelir ve Google Arama bunları sayfa deneyimi sıralama sinyallerinden biri olarak kullanır. INP, Mart 2024'te eski First Input Delay (FID) metriğinin yerini aldı.
Bir restoran ziyaretini düşünün: LCP yemeğinizin ne kadar çabuk geldiği, INP el salladığınızda garsonun ne kadar hızlı ilgilendiği, CLS ise siz yemek yerken birinin tabağınızı kaydırıp kaydırmadığıdır. Ekipler LCP'yi görselleri ve sunucu yanıt sürelerini optimize ederek, INP'yi ana iş parçacığını bloke eden uzun JavaScript görevlerini bölerek, CLS'i ise görseller, reklamlar ve gömülü içerikler için açık boyutlarla yer ayırarak iyileştirir.
Core Web Vitals çoğunlukla Lighthouse gibi araçlardan gelen laboratuvar puanlarıyla karıştırılır. Laboratuvar testleri bir sayfayı simüle edilmiş bir cihazda yalnızca bir kez yükler ve hata ayıklama için harikadır; Core Web Vitals ise önceki 28 günde gerçek ziyaretçilerden alınan saha verisine dayanır, bu yüzden ikisi çelişebilir. Laboratuvar araçları INP'yi doğrudan ölçemez de; çünkü gerçek kullanıcı etkileşimleri gerektirir, bunun yerine Total Blocking Time gibi ilgili metrikleri raporlarlar.
Önemli noktalar
- Üç Core Web Vitals: LCP (yükleme), INP (yanıt verme) ve CLS (görsel kararlılık).
- İyi puanlar: LCP 2,5 sn veya altı, INP 200 ms veya altı, CLS 0,1 veya altı.
- Gerçek ziyaretlerin en az yüzde 75'i bu eşikleri karşıladığında sayfa geçer.
- Google Arama için bir sıralama sinyalidir ama içeriğin ilgililiği daha önemlidir.
- INP, Mart 2024'te First Input Delay'in (FID) yerini aldı.
Örnek
// Using the open-source web-vitals library
import { onLCP, onINP, onCLS } from "web-vitals";
function sendToAnalytics({ name, value, rating }) {
// e.g. name: "LCP", value: 1830 (milliseconds), rating: "good"
navigator.sendBeacon("/analytics", JSON.stringify({ name, value, rating }));
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);Sık sorulan sorular
Üç Core Web Vitals nedir?
Yükleme hızı için Largest Contentful Paint (LCP), yanıt verme için Interaction to Next Paint (INP) ve görsel kararlılık için Cumulative Layout Shift (CLS).
Core Web Vitals SEO'yu etkiler mi?
Evet, Google'ın arama sıralamasında kullandığı sayfa deneyimi sinyallerinin parçasıdırlar. Etkileri genellikle içeriğin ilgililiği ve kalitesinden daha küçüktür; bu yüzden rakip sayfalar başka açılardan benzer olduğunda en çok önem taşırlar.
First Input Delay'in yerini ne aldı?
Interaction to Next Paint (INP), Mart 2024'te First Input Delay'in (FID) yerini bir Core Web Vital olarak aldı. FID yalnızca ilk etkileşimin işlenmesinden önceki gecikmeyi ölçerdi; INP ise ziyaret boyunca etkileşimlerin ekranı güncellemesinin ne kadar sürdüğüne bakar.
İlgili sayfalar
- SEOWeb Geliştirme, s. 40SEO, arama motorlarının bir sitenin sayfalarını bulup anlaması ve ilgili aramalarda sıralaması için içeriği ve teknik altyapıyı iyileştirme pratiğidir.
- Web TarayıcısıWeb Geliştirme, s. 57Web tarayıcısı, sunuculardan web sayfalarını alıp HTML, CSS ve JavaScript'i ekranda gördüğünüz etkileşimli sayfalara dönüştüren uygulamadır.
- JavaScriptWeb Geliştirme, s. 25JavaScript, web tarayıcılarında sayfaları etkileşimli hale getiren ve Node.js gibi çalışma ortamlarıyla sunucularda da çalışan programlama dilidir.
- CDNDevOps ve Bulut, s. 7CDN, dünyanın dört bir yanına yayılmış ve web sitesi içeriğinin kopyalarını saklayıp her kullanıcıya en yakın konumdan sunan bir sunucu ağıdır.
- Duyarlı TasarımWeb Geliştirme, s. 15Duyarlı tasarım, web sayfalarının yerleşimini, görsellerini ve metnini telefondan büyük monitöre her ekran boyutuna otomatik uyduran yaklaşımdır.
- BundlerWeb Geliştirme, s. 4Bundler, JavaScript modüllerini ve bağımlılıklarını tarayıcıların hızlıca indirip çalıştırabileceği birkaç optimize dosyada birleştiren bir derleme aracıdır.
Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin