Core Web Vitals Sorunları: LCP, CLS ve INP Nasıl Düzeltilir?

Core Web Vitals nedir?

Core Web Vitals, gerçek kullanıcı deneyiminin üç temel bölümünü ölçen metrik grubudur: yükleme performansı için Largest Contentful Paint (LCP), etkileşim yanıtı için Interaction to Next Paint (INP) ve görsel kararlılık için Cumulative Layout Shift (CLS). Google, bu metriklerin kullanıcı deneyimini geliştirmek için izlenmesini önerir; ancak iyi Core Web Vitals sonucu tek başına yüksek sıralama garantisi değildir.

Google’ın resmî Core Web Vitals açıklamasına göre değerlendirme gerçek kullanıcı deneyimine dayanır. Bu nedenle masaüstünüzde hızlı açılan bir sayfa, mobil ağ kullanan gerçek ziyaretçilerde yine de başarısız olabilir.

LCP, INP ve CLS için iyi kabul edilen eşikler

Değerlendirme yalnızca tek bir hızlı ziyaret üzerinden yapılmaz. Gerçek kullanıcı verisi, sayfa yüklemelerinin büyük bölümünü temsil eden yüzdelik yaklaşımıyla incelenir. Bu yüzden birkaç güçlü cihazdan alınan iyi sonuç, bütün kullanıcı kitlesini temsil etmeyebilir.

Alan verisi ile laboratuvar verisi arasındaki fark

Search Console’daki Core Web Vitals raporu, yeterli veri bulunan URL grupları için gerçek kullanıcı verisini gösterir. PageSpeed Insights ise mümkün olduğunda alan verisini ve aynı anda Lighthouse laboratuvar testini sunar. İki sonuç aynı olmak zorunda değildir.

Doğru yöntem, Search Console’dan sorunlu sayfa grubunu belirlemek; PageSpeed Insights ile örnek URL’yi ölçmek; Chrome geliştirici araçlarıyla asıl kaynağı bulmak ve değişiklikten sonra gerçek kullanıcı verisinin yenilenmesini beklemektir.

LCP sorunu nasıl düzeltilir?

LCP çoğu e-ticaret ve kurumsal sayfada hero görseli, büyük ürün görseli, ana başlık alanı veya sayfanın üst kısmındaki büyük içerik bloğudur. Önce PageSpeed raporunda hangi öğenin LCP olarak seçildiğini bulun. Yanlış öğeyi küçültmek puanı değiştirmeyebilir.

1. Sunucu yanıt süresini azaltın

• HTML yanıtında gereksiz uygulama ve veritabanı gecikmesini kaldırın.
• Sayfa ve veri önbelleğini doğru kullanın.
• CDN ve sıkıştırmayı etkinleştirin.
• Yavaş üçüncü taraf çağrıları ilk HTML yanıtından ayırın.
• Sunucu hataları ve yönlendirme zincirlerini düzeltin.

2. Ana görseli doğru yükleyin

LCP görseline uygun genişlik ve yükseklik verin, gereğinden büyük dosya göndermeyin ve modern dosya biçimi kullanın. Sayfanın ilk ekranındaki ana görseli tembel yüklemeye bırakmak LCP’yi kötüleştirebilir. Hero görseli HTML içinde erken bulunmalı; yalnızca geç çalışan JavaScript ile eklenmemelidir.

<img
  src="/assets/img/urun.webp"
  width="1280"
  height="720"
  loading="eager"
  fetchpriority="high"
  alt="Ürünün açıklayıcı görseli">

3. Render engelleyen kaynakları azaltın

Kritik olmayan CSS ve JavaScript dosyalarının ilk ekranı geciktirmesini önleyin. Kullanılmayan büyük CSS paketlerini kaldırın, temel stilleri küçültün ve sayfanın çalışması için gerekmeyen JavaScript’i gecikmeli yükleyin. Ancak dosyaları rastgele async veya defer yapmak yerine bağımlılıkları test edin.

INP sorunu nasıl düzeltilir?

INP, ziyaretçinin tıklama, dokunma veya klavye etkileşimi sonrasında sayfanın görsel cevap üretme süresini ölçer. Menüye tıklayınca bekleme, filtre seçince ekranın donması veya sepete ekle butonunun geç cevap vermesi INP sorununa dönüşebilir.

Uzun JavaScript görevlerini bölün

Ana iş parçacığını uzun süre meşgul eden hesaplamalar tarayıcının tıklamaya cevap vermesini engeller. Büyük ürün listesi filtreleme, DOM üzerinde çok sayıda değişiklik, ağır JSON işleme ve gereksiz yeniden çizimler küçük görevlere ayrılmalıdır.

• Kullanılmayan JavaScript paketlerini sayfadan kaldırın.
• Filtre ve arama girişlerinde debounce/throttle uygulayın.
• Tek tıklamada yüzlerce DOM düğümünü yeniden üretmeyin.
• Ağır işlemleri uygun olduğunda Web Worker’a taşıyın.
• Olay dinleyicilerinde gereksiz senkron hesaplamaları azaltın.
• Üçüncü taraf sohbet, analiz ve reklam kodlarını ihtiyaç anında yükleyin.

Etkileşim sırasında görsel geri bildirim verin

Sistem işlemi gerçekten birkaç yüz milisaniye sürecekse butonu devre dışı bırakmak, yükleniyor durumu göstermek ve sonucu aşamalı güncellemek kullanıcıya cevap verildiğini hissettirir. Bununla birlikte yalnızca animasyon eklemek temel JavaScript gecikmesini çözmez.

CLS sorunu nasıl düzeltilir?

CLS, kullanıcı okumaya veya tıklamaya başladıktan sonra içeriğin beklenmedik biçimde yer değiştirmesini ölçer. Banner yüklendiğinde menünün aşağı kayması, font değişince başlığın satır atlaması veya ürün görseli gelince butonun yer değiştirmesi yaygın örneklerdir.

• Görsel ve videolara HTML üzerinde width ve height verin.
• Reklam, kampanya ve carousel alanları için sabit/aspect-ratio alan ayırın.
• Çerez bildirimi ve kampanya çubuğunu mevcut içeriğin üzerine kontrollü yerleştirin.
• Web fontlarını önceden yüklerken gereksiz font ağırlıklarını azaltın.
• Yükleme sonrasında sayfanın üstüne yeni içerik eklemeyin.
• Animasyonlarda yerleşimi değiştiren top/left yerine uygun olduğunda transform kullanın.

Dinamik içerik için iskelet alanı kullanmak yalnızca görsel amaçlı değildir; yüklenmeden önce gerekli yüksekliği ayırarak kaymayı azaltır.

Mobil sayfalarda ayrıca kontrol edilmesi gerekenler

Mobil kullanıcılar daha yavaş işlemci, değişken ağ ve küçük ekran nedeniyle masaüstünden farklı sonuç üretir. Ana görselin mobil boyutu, hamburger menünün JavaScript’i, sabit WhatsApp düğmesi, açılır filtreler ve çok büyük DOM yapısı özellikle kontrol edilmelidir.

1. PageSpeed testini yalnızca ana sayfada değil ürün ve kategori sayfalarında da çalıştırın.
2. Düşük güçlü cihaz simülasyonunda menü, arama, filtre, sepet ve form alanlarını deneyin.
3. Mobilde gizlenen masaüstü öğelerinin yine de indirilmeye devam edip etmediğini kontrol edin.
4. Hero için masaüstü görselini küçültmek yerine uygun srcset veya picture kullanın.
5. Sabit alt butonların içerik ve form alanlarını kapatmadığını doğrulayın.

Üçüncü taraf kodları performansı nasıl etkiler?

Canlı destek, harita, video, reklam etiketi, analiz araçları, yeniden pazarlama kodları ve sosyal medya eklentileri ağ isteği ve JavaScript çalışması ekler. Her bir araç tek başına küçük görünse de toplam etki LCP ve INP’yi bozabilir.

Düzeltme sonrası nasıl doğrulama yapılır?

1. Önce sorunlu metrik ve örnek URL kaydedilir.
2. Değişiklik geliştirme ortamında Lighthouse ve tarayıcı profiliyle test edilir.
3. Canlıya alındıktan sonra önemli kullanıcı akışları tekrar denenir.
4. PageSpeed Insights alan verisi ve laboratuvar sonucu izlenir.
5. Search Console Core Web Vitals raporunda doğrulama başlatılır.
6. Gerçek kullanıcı verisinin güncellenmesi için yeterli süre beklenir.

Core Web Vitals neden–çözüm tablosu

Ne zaman teknik destek gerekir?

Search Console’da yüzlerce URL aynı sorun grubunda görünüyorsa, LCP öğesi dinamik olarak değişiyorsa, JavaScript profili ana iş parçacığında uzun görevler gösteriyorsa, sunucu yanıtı düzensizse veya yapılan optimizasyonlar işlevleri bozuyorsa performans incelemesi gerekir. Tema, sunucu, görsel, JavaScript ve üçüncü taraf kodları birlikte değerlendirilmelidir.

Sık sorulan sorular

Core Web Vitals iyi olursa Google’da birinci olunur mu?

Hayır. İyi metrikler kullanıcı deneyimi ve arama başarısı için değerlidir, ancak içerik, alaka, bağlantılar ve diğer arama sinyalleriyle birlikte değerlendirilir.

Search Console ile PageSpeed neden farklı sonuç gösterir?

Search Console gerçek kullanıcıların uzun dönemli alan verisini; Lighthouse ise kontrollü bir laboratuvar testini gösterir. Farklı veri kaynakları aynı sonucu vermeyebilir.

Değişiklik yaptıktan sonra rapor hemen düzelir mi?

Laboratuvar testi hemen değişebilir. Gerçek kullanıcı verisinin ve Search Console gruplarının yenilenmesi daha uzun sürer.