Core Web Vitals Nedir? LCP, INP ve CLS (ve Nasıl İyileştirilir)

Core Web Vitals, Google'ın bir sayfadaki gerçek deneyimi ölçmek için kullandığı üç metriktir: ne kadar hızlı yüklendiği, ne kadar hızlı yanıt verdiği ve yüklenirken ne kadar kararlı olduğu. Google'ın sıralamada dikkate aldığı sayfa deneyimi sinyallerinin bir parçasıdırlar ve – daha da önemlisi – ziyaretçilerin sitenizi gerçekte nasıl hissettiğini yansıtırlar.

Üç Core Web Vitals metriği

Gerçek ziyaretlerin en az %75'i (75. yüzdelik dilim) üç metriğin tamamında “iyi” eşiğini karşıladığında bir sayfa geçer.

INP, Mart 2024'te Core Web Vital olarak First Input Delay'in (FID) yerini aldı. INP daha katıdır: yalnızca ilk etkileşimin değil, ziyaret boyunca tüm etkileşimlerin yanıt verme hızını dikkate alır.

Saha verileri ve laboratuvar verileri

Saha verileri gerçek Chrome kullanıcılarından gelir ve 28 günlük kayan bir pencerede Chrome UX Report (CrUX) içinde toplanır. Google'ın sayfa deneyimi için kullandığı budur. Bu verileri Search Console'un Core Web Vitals raporunda ve PageSpeed Insights'ta görebilirsiniz.

Laboratuvar verileri, Lighthouse gibi sabit bir cihaz ve ağ üzerinde yapılan simüle bir testten gelir. Hata ayıklamak ve değişiklikleri test etmek için harikadır, ancak Google'ın sıralamada kullandığı veri bu değildir – ve INP'yi doğrudan ölçemez (en yakın laboratuvar karşılığı Total Blocking Time'dır).

Düşük trafikli sayfaların yeterli saha verisi olmayabilir; bu durumda Google benzer sayfaların veya tüm sitenin (“kaynak”) verilerini kullanabilir.

Largest Contentful Paint (LCP)

LCP, görüntü alanındaki en büyük görselin veya metin bloğunun işlenmesinin bittiği anı işaretler – genellikle hero görseli, büyük bir başlık veya öne çıkan bir videonun kapak görseli.

LCP, çözüme işaret eden dört parçaya ayrılabilir:

1. Time to First Byte – sunucunun yanıt vermesinin ne kadar sürdüğü
2. Kaynak yükleme gecikmesi – tarayıcı LCP kaynağını indirmeye başlamadan önce geçen süre
3. Kaynak yükleme süresi – indirmenin ne kadar sürdüğü
4. Öğe işleme gecikmesi – indirme ile işleme arasındaki süre

LCP nasıl iyileştirilir?

• Sunucuyu hızlandırın: sayfa önbelleği, bir CDN, daha hızlı barındırma ve daha az veritabanı sorgusu
• LCP görselini erken keşfedilebilir yapın: HTML'de normal bir <img> kullanın (CSS arka planı veya JavaScript ile eklenen bir görsel değil) ve fetchpriority="high" ekleyin
• LCP görseline asla lazy loading uygulamayın
• Görseli optimize edin: doğru boyutlar, WebP veya AVIF, iyi sıkıştırma
• İşlemeyi engelleyen kaynakları azaltın: kritik CSS'i satır içine alın, kritik olmayan JavaScript'i erteleyin
• Bir görsel CDN'i gibi gerekli üçüncü taraf kaynaklara preconnect kullanın

Interaction to Next Paint (INP)

INP, bir kullanıcı etkileşimi – tıklama, dokunma veya tuşa basma – ile ekrandaki bir sonraki görsel güncelleme arasındaki gecikmeyi ölçer. Ziyaret sırasındaki en yavaş etkileşimlerden birini raporlar.

Kötü INP genellikle ana iş parçacığında çalışan çok fazla JavaScript'ten kaynaklanır; bu yüzden tarayıcı hızlı yanıt veremez.

INP nasıl iyileştirilir?

• JavaScript'i azaltın ve bölün: kullanılmayan kitaplıkları kaldırın, kodu bölün ve özellikleri yalnızca gerektiğinde yükleyin
• Uzun görevleri parçalayın: 50 ms'den uzun görevler ana iş parçacığını engeller; iş parçaları arasında kontrolü tarayıcıya geri verin
• Üçüncü taraf betikleri denetleyin: etiket yöneticileri, sohbet bileşenleri, A/B test araçları ve reklam betikleri sık rastlanan suçlulardır
• DOM'u yalın tutun: çok büyük sayfalar her güncellemeyi yavaşlatır
• Etkileşime anında görsel geri bildirim verin, ağır işi daha sonra yapın

Cumulative Layout Shift (CLS)

CLS beklenmedik düzen hareketlerini ölçer – tam dokunacağınız anda bir düğmenin kaçıp gitmesi gibi sinir bozucu bir deneyim. Ne kadar içeriğin ne kadar uzağa kaydığını puanlar.

CLS nasıl iyileştirilir?

• Alan ayrılması için görsellere ve videolara genişlik ve yükseklik verin veya CSS aspect-ratio özelliğini kullanın
• Sabit boyutlu kapsayıcılarla reklamlar, gömülü içerikler ve iframe'ler için alan ayırın
• Yüklemeden sonra sayfayı aşağı iten banner'lar gibi mevcut içeriğin üstüne içerik eklemekten kaçının
• font-display: swap özelliğini dikkatli kullanın ve önemli web yazı tiplerini önceden yükleyin ya da metnin yeniden akmaması için yedek yazı tipi metrikleri kullanın
• Düzeni tetikleyen top veya height gibi özellikler yerine transform ile animasyon yapın

Pratik bir iş akışı

1. Hangi URL gruplarının hangi metrikte başarısız olduğunu görmek için Search Console'un Core Web Vitals raporunu kontrol edin
2. Başarısız her gruptan temsili bir URL seçin
3. Neyin yavaş olduğunu teşhis etmek için bir laboratuvar testi çalıştırın
4. Şablon düzeyinde düzeltin – sorunların çoğu aynı düzeni kullanan tüm sayfaları etkiler
5. Doğrulayın: Search Console'da yayına aldıktan sonra doğrulamayı başlatın; saha verilerinin iyileştirmeleri yansıtması 28 güne kadar sürer

Core Web Vitals sıralamaları ne kadar etkiler?

Google, sayfa deneyiminin pek çok sinyalden yalnızca biri olduğunu ve alaka düzeyi ile faydalı içeriğin daha önemli olduğunu açıkça belirtmiştir. Zayıf içerikli hızlı bir sayfa harika bir sayfanın önüne geçemez. Ancak sayfalar benzer derecede alakalı olduğunda daha iyi bir deneyim yardımcı olabilir – ve daha hızlı sayfalar sürekli olarak daha iyi dönüşüm sağlar; bu da sıralamalardan bağımsız olarak önemlidir.

Platforma özel ipuçları

WordPress

• Sunucu yanıt süresini kısaltmak için bir önbellek eklentisi veya barındırma düzeyinde önbellek kullanın
• Hafif bir tema seçin; ağır sayfa oluşturucular çoğu zaman büyük miktarda CSS ve JavaScript ekler
• Eklentileri denetleyin: her biri her sayfaya betik ekleyerek INP'yi kötüleştirebilir
• WebP veya AVIF sunan ve genişlik ile yükseklik özniteliklerini ekleyen bir görsel optimizasyon eklentisi kullanın
• Her sayfada ihtiyaç duymadığınız üçüncü taraf betikleri erteleyin veya kaldırın

Shopify

• Yüklü uygulamaları gözden geçirin – pek çoğu kullanılmasalar bile her sayfaya betik ekler
• Temanın yerleşik duyarlı görsel özelliklerini kullanın
• Ana sayfadaki bölüm ve kaydırıcı sayısını sınırlayın
• Görselleri yüklemeden önce sıkıştırın ve yeniden boyutlandırın

Özel ve JavaScript ağırlıklı siteler

• İçeriğin JavaScript'i beklemeden görünmesi için sunucu tarafı işleme veya statik oluşturma kullanın
• Kodu rotaya göre bölün ve bileşenleri isteğe bağlı yükleyin
• Hangi etkileşimlerin yavaş olduğunu görmek için gerçek kullanıcı INP'sini web-vitals JavaScript kitaplığıyla ölçün ve analitiğe gönderin

Gerçek kullanıcı verilerini kendiniz ölçmek

Search Console ve PageSpeed Insights toplu Chrome verilerini gösterir, ancak yalnızca yeterli trafiğe sahip sayfalar için ve gecikmeli olarak. Her sayfa ve her ziyaretçi için Core Web Vitals değerlerini görmek için gerçek kullanıcı izleme (RUM) ekleyin. Açık kaynaklı web-vitals kitaplığı ziyaretçilerin tarayıcılarından LCP, INP ve CLS değerlerini raporlar; değerleri Google Analytics 4'e veya başka bir analitik aracına gönderebilirsiniz. RUM ayrıca hangi öğenin LCP olduğunu ve hangi etkileşimin en yavaş olduğunu da kaydeder – sorunu düzeltmek için tam ihtiyacınız olan şey.

Total Blocking Time ve Speed Index hakkında bir not

Lighthouse, Core Web Vitals dışında başka metrikler de raporlar. Total Blocking Time (TBT), yükleme sırasında ana iş parçacığının ne kadar süre engellendiğini ölçer ve INP ile ilişkilidir. First Contentful Paint (FCP), herhangi bir şeyin ilk kez göründüğü anı işaretler. Speed Index, görünür alanın ne kadar hızlı dolduğunu ölçer. Bunlar faydalı teşhislerdir, ancak kendileri Core Web Vitals değildir.

Yaygın efsaneler

• “Sıralanmak için 100 PageSpeed puanı gerekir.” Hayır. Sayfa deneyimi için önemli olan saha verilerinde Core Web Vitals eşiklerini geçmektir ve alaka düzeyi çok daha önemlidir.
• “Core Web Vitals yalnızca Google için önemlidir.” Daha hızlı ve kararlı sayfalar, sitenize nereden gelirse gelsin her ziyaretçi için dönüşümleri ve memnuniyeti artırır.
• “Daha fazla önbellek eklentisi eklemek yardımcı olur.” Birkaç önbellek veya optimizasyon eklentisini üst üste kullanmak çoğu zaman çakışmalara yol açar. İyi yapılandırılmış tek bir çözüm kullanın.

Önemli çıkarımlar

• Core Web Vitals yüklemeyi (LCP), yanıt vermeyi (INP) ve görsel kararlılığı (CLS) ölçer.
• İyi eşikler, gerçek ziyaretlerin 75. yüzdelik diliminde LCP ≤ 2,5 sn, INP ≤ 200 ms ve CLS ≤ 0,1'dir.
• Önemli olan gerçek Chrome kullanıcılarından gelen saha verileridir; laboratuvar testleri sorunları teşhis etmek içindir.
• LCP genellikle daha hızlı sunucular ve daha iyi optimize edilmiş hero görselleriyle iyileşir.
• INP, JavaScript'i – özellikle üçüncü taraf betikleri – azaltıp parçaladığınızda iyileşir.
• CLS, görseller, reklamlar ve gömülü içerikler için alan ayırdığınızda iyileşir.

Sık sorulan sorular

Laboratuvar ve saha puanlarım neden farklı?

Laboratuvar testleri tek bir cihaz ve ağı simüle eder. Saha verileri, laboratuvar testlerinin yapmadığı etkileşimler dahil, gerçek ziyaretçilerinizin cihazlarını, ağlarını ve davranışlarını yansıtır.

İyileştirmelerin Search Console'da görünmesi ne kadar sürer?

Saha verileri önceki 28 günü kapsar, bu yüzden bir düzeltmenin tamamen yansıması dört haftaya kadar sürer.

Core Web Vitals masaüstünde önemli mi?

Evet. Google mobili ve masaüstünü ayrı değerlendirir. Cihazlar ve ağlar daha yavaş olduğu için mobilde geçmek genellikle daha zordur.

İyi bir PageSpeed puanı nedir?

90 veya üzeri iyidir. Ancak puan bir laboratuvar özetidir; sayfa deneyimi için önemli olan saha verilerinde Core Web Vitals'ı geçmektir.