Core Web Vitals Nedir? LCP, INP ve CLS'i Sade Anlatımla Öğrenin

Site hızı konuşulurken sık sık Core Web Vitals ifadesi geçer. Teknik göründüğü için çoğu işletme sahibi bu terimi atlar. Oysa üç basit sorunun cevabıdır: sayfa ne kadar çabuk görünüyor, dokunuşlara ne kadar çabuk yanıt veriyor ve görünürken kayıyor mu? Bu yazıda bunları sade biçimde açıklıyoruz.

Core Web Vitals nedir?

Core Web Vitals, Google'ın bir sayfanın kullanıcı deneyimini ölçmek için belirlediği üç temel metriktir: LCP, INP ve CLS. Her biri farklı bir yönü ölçer: yüklenme hızı, etkileşim hızı ve görsel kararlılık. Değerler laboratuvar ortamında değil, mümkünse gerçek ziyaretçilerin cihazlarından toplanan veriyle değerlendirilir.

Genel site hızının neden önemli olduğunu site hızı yazımızda anlattık. Bu yazı, o konuyu ölçen göstergelere odaklanır.

LCP nedir?

LCP (Largest Contentful Paint), sayfadaki en büyük içeriğin ekranda görünme süresidir. Genellikle bu öğe ana görsel ya da büyük bir başlık bloğudur. Google'ın yayımladığı eşiğe göre LCP'nin 2,5 saniye ya da altında olması iyi kabul edilir.

LCP'yi yavaşlatan yaygın nedenler şunlardır:

• Gereğinden büyük, sıkıştırılmamış görseller.
• Sayfa açılırken yüklenen ve görüntüyü bekleten script ve stil dosyaları.
• Yavaş yanıt veren sunucu.
• Ana görselin geç yüklenmeye ayarlanması.

INP nedir?

INP (Interaction to Next Paint), kullanıcı bir şeye dokunduğunda ya da tıkladığında sayfanın ne kadar çabuk görsel yanıt verdiğini ölçer. Google'ın eşiğine göre INP'nin 200 milisaniye ya da altında olması iyi kabul edilir. INP, 2024'te FID'in yerini alan ölçüdür.

Bir menü düğmesine dokundunuz ve yarım saniye boyunca bir şey olmadıysa INP'si yüksek bir sayfadasınız demektir. Nedeni genellikle ağır JavaScript'tir: çok fazla eklenti, çok sayıda üçüncü taraf script ya da gereksiz kütüphane.

CLS nedir?

CLS (Cumulative Layout Shift), sayfa yüklenirken içeriğin yerinden kayma miktarıdır. Google'ın eşiğine göre CLS'nin 0,1 ya da altında olması iyi kabul edilir. Okurken bir görselin yüklenip metni aşağı ittiğini ya da yanlış düğmeye tıkladığınızı hiç yaşadıysanız CLS'in kötü olduğu bir sayfada bulundunuz demektir.

Kaymayı önlemenin yolları basittir:

• Görsellere ve reklam alanlarına genişlik ve yükseklik vermek.
• Geç yüklenen yazı tiplerinin yerleşimi bozmamasını sağlamak.
• Sayfanın üstüne sonradan eklenen bantlardan kaçınmak.

Core Web Vitals nasıl ölçülür?

Core Web Vitals, sayfa başına PageSpeed Insights ile, tüm site için ise Google Search Console'daki Core Web Vitals raporuyla ölçülür. İki farklı veri türü vardır:

1. Saha verisi: Gerçek ziyaretçilerin deneyimini yansıtır. Trafiği yetersiz sayfalarda görünmeyebilir.
2. Laboratuvar verisi: Kontrollü bir test sonucudur; sorunun nedenini bulmak için faydalıdır ama gerçek deneyimin birebir karşılığı değildir.

Bir değerin "iyi" sayılması için sayfa yüklemelerinin büyük çoğunluğunda eşiği tutturması gerekir. Tek bir ölçümde iyi görünmek yeterli değildir.

Core Web Vitals sıralamayı etkiler mi?

Core Web Vitals, Google'ın sayfa deneyimi sinyalleri arasında yer alır, ama tek başına sıralamayı belirleyen bir faktör değildir. İçeriğin soruya uygunluğu çok daha belirleyicidir. Buna rağmen düşük değerler pratikte ziyaretçi kaybettirir: sayfa geç açılıyorsa kullanıcı reklamdan geldiği halde geri döner.

Reklam veriyorsanız etkisi daha doğrudan görülür; çünkü tıklama için ödeme yapıp sayfayı açtıramıyorsanız bütçe boşa gider. Bu yüzden Google Ads yönetimi ile site performansını birlikte ele almak mantıklıdır.

Hızlı iyileştirme listesi

Çoğu sitede şu adımlar belirgin fark yaratır:

1. Görselleri WebP biçimine çevirin ve ekran boyutuna uygun yükleyin.
2. Kullanılmayan eklentileri ve scriptleri kaldırın.
3. Sayfanın üst kısmındaki görsel için geç yükleme kullanmayın.
4. Yazı tiplerini kendi sunucunuzdan, az sayıda ağırlıkla yükleyin.
5. Sunucu yanıt süresini kontrol edin; önbellek kullanın.

Bunları kendi başınıza uygulayamıyorsanız, hazır bir temanın ağırlığından kaynaklanan sorunlar için web tasarım sayfamızda anlattığımız şekilde, işe özel hafif bir site tercih edilebilir.

Örnek bir iyileştirme sırası nasıl izlenir?

Bir sayfayı iyileştirirken önce ölçüp sonra tek bir şeyi değiştirmek en güvenli yoldur. Tanıtım sayfası geç açılan bir işletme sitesini düşünelim. Sırayla şunlar yapılır:

1. Ölçün. PageSpeed Insights'ta sayfanın mobil sonucunu açın ve LCP, INP ve CLS değerlerini not edin.
2. En zayıf metriği seçin. Üçü birden iyileştirilmeye çalışılırsa hangi değişikliğin işe yaradığı anlaşılmaz.
3. Nedeni bulun. LCP kötüyse raporun gösterdiği en büyük öğeye bakın. Bu çoğu zaman ana görseldir. Görselin boyutu ekrandan büyükse küçültmek ilk adımdır.
4. Tek değişiklik yapın. Görseli WebP'ye çevirin ve ekran genişliğine uygun boyutta sunun.
5. Yeniden ölçün. Laboratuvar verisi hemen değişir; saha verisinin değişmesi için gerçek ziyaretçilerin sayfayı yeniden kullanması gerekir.

Bu sırayı CLS için de uygulayabilirsiniz. Yazı tipi geç yüklendiği için metin kayıyorsa yazı tipini kendi sunucunuzdan yükleyin ve yedek bir yazı tipi tanımlayın. Sayfanın üstüne sonradan eklenen bir çerez bandı kayma yaratıyorsa bandın yerini sayfa yüklenmeden ayırın.

Sık yapılan hatalar da şunlardır:

• Yalnızca puana bakıp metriklerin asıl nedenini araştırmamak.
• Ölçümü yalnızca masaüstünde yapmak.
• Her sorunu bir eklenti kurarak çözmeye çalışmak; eklentiler çoğu zaman INP'yi kötüleştirir.
• Tek bir iyi ölçüme güvenip gerçek kullanıcı verisini beklememek.

Bu yaklaşım sabır ister, ama sonuçta neyin işe yaradığını bilirsiniz. Bir sonraki sayfada aynı yöntemi uygulamak da çok daha hızlı olur.

İyileştirme sonrası neye bakılır?

İyileştirmeden sonra ilk bakılacak yer, değişikliğin sayfanın görünümünü bozup bozmadığıdır. Görseli küçülttüğünüzde bulanıklaşma var mı, yazı tipi değişince başlıklar taşıyor mu, menü hâlâ tek dokunuşla açılıyor mu? Bunları telefonunuzda kontrol edin. Ardından Search Console'daki Core Web Vitals raporunu izleyin; rapor gerçek ziyaretçi verisiyle güncellendikçe sayfanın "iyi" grubuna geçip geçmediği görünür. Hızlı bir sonuç beklemeyin: saha verisi bir süre içinde birikir ve tek bir ölçümle sonuç çıkarılmaz.

Sık Sorulan Sorular

Core Web Vitals'ta üç değerin hepsi iyi olmak zorunda mı?

Google, sayfanın "iyi" sayılması için üç metriğin de eşiği tutturmasını bekler. Biri zayıfsa önce onu iyileştirmek mantıklıdır.

Mobil mi masaüstü mü önemlidir?

İkisi ayrı ölçülür. Çoğu işletmede ziyaretçilerin büyük kısmı telefondan geldiği için önce mobil değerlere bakmak yerindedir.

PageSpeed puanı ile Core Web Vitals aynı şey mi?

Hayır. PageSpeed puanı laboratuvar ölçümünden hesaplanan bir özettir. Core Web Vitals ise üç ayrı metriktir ve mümkünse gerçek kullanıcı verisiyle değerlendirilir.

Siteyi hızlandırmak için sıfırdan yeniden yapmak gerekir mi?

Her zaman değil. Önce hangi metrikte sorun olduğu bulunur; görsel, script ve sunucu iyileştirmeleri çoğu zaman yeterli olur.