Core Web Vitals Nasıl İyileştirilir: LCP, INP ve CLS Rehberi

Core Web Vitals, Google'ın bir sayfanın ne kadar hızlı yüklendiğini, etkileşime ne kadar çabuk yanıt verdiğini ve yüklenirken ne kadar kaydığını ölçtüğü üç metriktir: LCP, INP ve CLS. Üçü de iyi aralıktaysa ziyaretçi sayfayı akıcı bulur. Bu rehberde her metriğin ne anlama geldiğini, en sık bozulma nedenlerini ve küçük işletme sitelerinde uygulanabilecek çözümleri anlatıyoruz.

Üç metrik ve eşik değerleri

Her metrik, gerçek kullanıcıların deneyimine göre üç gruba ayrılır: iyi, iyileştirme gerekli ve zayıf. Değerlendirme, ziyaretlerin yüzde 75'lik dilimine göre yapılır. Yani ziyaretçilerin dörtte üçü iyi deneyim yaşıyorsa sayfa iyi kabul edilir.

Metrik	Neyi ölçer	İyi	Zayıf
LCP	En büyük içeriğin görünme süresi	2,5 saniye veya altı	4 saniyenin üstü
INP	Tıklama ve dokunmalara yanıt süresi	200 ms veya altı	500 ms'nin üstü
CLS	Sayfa düzeninin beklenmedik kayması	0,1 veya altı	0,25'in üstü

Bu eşikler ve ölçüm yöntemi web.dev'deki Web Vitals sayfasında ayrıntılı olarak anlatılıyor. INP, Mart 2024'te FID metriğinin yerini aldı. Eski raporlarda FID görüyorsanız artık INP'ye bakmanız gerekir.

Verinizi nereden okursunuz

İki tür veri vardır ve karıştırılmaları sık yapılan bir hatadır. Saha verisi, sitenizi Chrome ile ziyaret eden gerçek kullanıcılardan toplanır. Laboratuvar verisi ise tek bir test cihazında yapılan simülasyondur.

• Search Console: Sitenizdeki sayfa gruplarını saha verisine göre iyi, orta ve zayıf olarak gösterir.
• PageSpeed Insights: Üst bölümde saha verisini, alt bölümde laboratuvar testini ve önerileri sunar.
• Chrome geliştirici araçları: Performans sekmesi, sorunun hangi dosyadan kaynaklandığını gösterir.

Google, sayfa deneyiminin arama sonuçlarıyla ilişkisini Search Central dokümantasyonunda açıklıyor. Kısaca: iyi metrikler sıralamaya katkı sağlar, ama alakalı ve faydalı içeriğin yerini tutmaz.

Az trafikli sitelerde saha verisi hiç görünmeyebilir. Bu durumda laboratuvar testine dayanarak ilerleyin ve aynı sayfayı farklı zamanlarda birkaç kez test edin. Tek bir ölçüm, sunucunun o anki yüküne göre yanıltıcı olabilir.

LCP: ana içeriği daha hızlı gösterin

LCP genellikle sayfanın üst kısmındaki büyük görsel ya da başlık bloğudur. Bu öğe ne kadar geç görünürse ziyaretçi sayfanın açılmadığını düşünür. En sık nedenler ve çözümleri şunlardır:

1. Büyük görseller: Kapak görselini WebP veya AVIF formatına çevirin ve ekran boyutuna uygun ölçüde sunun.
2. Geç keşfedilen görsel: Ana görseli CSS arka planı yerine img etiketiyle verin ve yüksek öncelikle yükleyin.
3. Yavaş sunucu yanıtı: Önbellek kullanın, gerekirse daha hızlı bir barındırmaya ya da CDN'e geçin.
4. Engelleyen kaynaklar: Sayfanın üst kısmı için gerekmeyen CSS ve betikleri erteleyin.

Ana görsele tembel yükleme uygulamak sık yapılan bir hatadır. Tembel yükleme, sayfanın aşağısındaki görseller içindir; ilk ekrandaki görseli geciktirir.

INP: tıklamalara anında yanıt verin

INP, ziyaretçi bir düğmeye bastığında ya da menüyü açtığında sayfanın ne kadar sürede tepki verdiğini ölçer. INP açıklamasında belirtildiği gibi metrik, ziyaret boyunca yaşanan en yavaş etkileşimlerden birini temel alır.

Kötü INP'nin ana nedeni, tarayıcının ana iş parçacığını uzun süre meşgul eden JavaScript'tir. Çözüm yolları:

• Kullanmadığınız eklentileri ve üçüncü taraf betikleri kaldırın: sohbet balonları, eski takip kodları, ağır kaydırıcılar.
• Uzun görevleri küçük parçalara bölün; geliştiriciniz bunun için kodu yeniden düzenleyebilir.
• Etkileşimden sonra yapılacak ağır işleri, ekran güncellendikten sonraya erteleyin.
• Hazır tema kullanıyorsanız gereksiz özellikleri kapatın.

CLS: sayfa düzenini sabitleyin

CLS, içerik okunurken sayfanın aşağı ya da yana kaymasını ölçer. Ziyaretçi bir bağlantıya dokunmak üzereyken düzen kayarsa yanlış yere tıklar. Bu hem sinir bozucu hem de güven kaybettiren bir deneyimdir.

En sık nedenler ve çözümleri:

• Boyutsuz görseller: Her görsele genişlik ve yükseklik verin ya da en-boy oranını CSS ile sabitleyin.
• Sonradan yüklenen reklam ve gömülü içerik: Bunlar için önceden sabit yükseklikte alan ayırın.
• Web yazı tipleri: Yazı tipi yüklenirken metnin boyutu değişiyorsa yedek yazı tipini benzer ölçülerle ayarlayın.
• Üstten açılan bildirim çubukları: İçeriği itmek yerine sayfanın üzerinde görünmelerini sağlayın.

Küçük işletme siteleri için öncelik sırası

Çoğu küçük işletme sitesinde sorunların büyük kısmı birkaç kaynaktan gelir. Aşağıdaki sırayla ilerlemek, en az emekle en çok kazancı sağlar:

1. Görselleri sıkıştırın, doğru boyuta getirin ve boyutlarını belirtin.
2. Kullanılmayan eklenti ve betikleri kaldırın.
3. Sunucu önbelleğini ve tarayıcı önbelleğini açın.
4. Ana görseli öncelikli yükleyin, diğerlerine tembel yükleme uygulayın.
5. Yazı tiplerini kendi sunucunuzdan ve yalnızca kullanılan kalınlıklarla sunun.

Bu adımlar çoğu zaman kod yazmadan, ayarlar üzerinden yapılabilir. Hangi sayfalarda sorun olduğunu görmek için ücretsiz SEO analiz aracımızı kullanabilirsiniz. Hız, kapsamlı bir teknik SEO denetiminin yalnızca bir parçasıdır; diğer kontrolleri de aynı rehberde bulabilirsiniz.

WordPress ve hazır site kurucuları için notlar

WordPress sitelerde yavaşlığın en yaygın kaynağı, zamanla birikmiş eklentilerdir. Her eklenti kendi CSS ve JavaScript dosyalarını tüm sayfalara yükleyebilir. Eklenti listesini gözden geçirin ve son altı ayda işinize yaramayanları silin. Sayfa oluşturucu kullanıyorsanız kullanılmayan bileşenlerin yüklenmesini kapatan ayarları arayın.

Önbellek eklentisi seçerken birden fazlasını aynı anda kurmayın. İki önbellek katmanı birbiriyle çakışabilir ve sorunu çözmek yerine yeni hatalar üretir. Görsel sıkıştırma için de tek bir araç seçin.

Wix, Squarespace ve Shopify gibi kapalı platformlarda sunucu ayarlarına erişiminiz sınırlıdır. Bu sitelerde yapabileceğiniz en etkili işler; görsel boyutlarını küçültmek, ağır uygulamaları kaldırmak ve ana sayfadaki animasyonlu bölümleri sadeleştirmektir. Temanın kendisi çok ağırsa daha hafif bir temaya geçmek, küçük ayarlarla uğraşmaktan daha fazla kazanç getirir.

Değişiklikleri önce tek bir sayfada deneyin. Sonucu ölçtükten sonra aynı ayarı sitenin geri kalanına uygulayın. Her büyük değişiklikten önce sitenin yedeğini almayı da unutmayın; bir eklentiyi kaldırmak bazen beklenmedik bir bölümü bozabilir.

Düzeltmelerden sonra neyi izlemelisiniz

Saha verisi son dört haftalık ziyaretlerden hesaplandığı için düzeltmelerin etkisi Search Console'da hemen görünmez. Değişikliği yayına aldığınız tarihi not edin ve raporu dört hafta sonra yeniden kontrol edin.

Bu sürede laboratuvar testleriyle düzeltmenin çalıştığını doğrulayabilirsiniz. Mobil ve masaüstü sonuçlarına ayrı ayrı bakın, çünkü sorunlar genellikle önce mobilde ortaya çıkar. Ayda bir; iyi URL oranını, en yavaş sayfa grubunu ve iletişim formu dönüşümlerini birlikte kaydedin. Core Web Vitals raporunu nasıl okuyacağınızı Search Console rehberimizde anlattık.