WordPress’te Core Web Vitals: LCP, INP ve CLS neyi ölçer, nasıl iyileşir?

Core Web Vitals, Google’ın bir sayfanın gerçek ziyaretçiye nasıl hissettirdiğini anlatmak için kullandığı üç ölçümdür: ana içerik ne kadar çabuk görünüyor, sayfa bir dokunuşa ne kadar hızlı tepki veriyor, düzen ne kadar kayıyor. Google’ın sayfa deneyimi sinyallerinin parçasıdırlar; daha da önemlisi, ziyaretçinin vazgeçtiği anları yakalarlar. Bu yazıda her birinin bir WordPress sitesinde neyi ölçtüğünü ve kırmızı yandığında ilk nereye bakmanız gerektiğini anlatıyoruz.

Üç ölçüm ve hedefleri

• LCP (Largest Contentful Paint): Ekrandaki en büyük görselin ya da metin bloğunun çizilme süresi. 2,5 saniye ve altı iyidir.
• INP (Interaction to Next Paint): Ziyaret boyunca bir tıklama, dokunma ya da tuşa basmadan sonra sayfanın görsel olarak tepki verme süresi. 200 milisaniye ve altı iyidir. INP, Mart 2024’te First Input Delay’in yerini aldı.
• CLS (Cumulative Layout Shift): Görünen içeriğin beklenmedik şekilde ne kadar yer değiştirdiği. 0,1 ve altı iyidir.

Google bir sayfayı gerçek ziyaretlerin 75. yüzdelik dilimine göre, mobil ve masaüstü ayrı ayrı değerlendirir. Ofis Wi-Fi’ındaki hızlı bir dizüstü bilgisayar size pek bir şey söylemez; asıl önemli olan sıradan telefonlarda, sıradan bağlantılarla alınan değerdir. Tanımlar ve eşikler web.dev’in Web Vitals sayfasından.

Bir şeyi değiştirmeden önce ölçün

Önemli sayfalarınızı PageSpeed Insights‘ta açın. Siteniz yeterince trafik alıyorsa üst bölümde Chrome kullanıcılarından gelen gerçek veriler görünür; alttaki laboratuvar bölümü tek bir simülasyon yüklemesidir. Düzeltmeyi gerçek veriye göre seçin, nedeni bulmak için laboratuvar raporunu kullanın. Search Console’daki Core Web Vitals raporu benzer adresleri grupladığı için tek bir şablon düzeltmesi yüzlerce sayfayı birden yeşile çevirebilir.

LCP’yi iyileştirmek

Çoğu WordPress sitesinde LCP öğesi, ana sayfadaki büyük görsel ya da yazının öne çıkan görselidir. Yavaş LCP’nin olağan nedenleri yavaş sunucu yanıtı, büyük görsel ve tarayıcının geç fark ettiği görseldir.

• Üstteki görseli WebP ya da AVIF olarak, ekranda gösterildiği boyutta sunun; yüklediğiniz orijinal dosyayı değil.
• Ekranın üst kısmındaki görseli asla geç yüklemeye (lazy load) bırakmayın. WordPress ilk büyük görsele fetchpriority="high" ekler; temanızın ya da bir eklentinin bunu geri almadığından emin olun.
• Sayfa önbelleği kullanın ki HTML hızlı gelsin. İyi bir sunucuda önbellekteki bir sayfa bir saniyenin epey altında gelmeye başlamalı.
• Web fontlarını font-display: swap ile yükleyin ve yalnızca ilk ekranın ihtiyaç duyduğu bir iki dosyayı önceden yükleyin.

LCP’yi iyileştirme rehberi ölçümü dört parçaya ayırıyor; çözüm hemen belli olmadığında işe yarıyor.

INP’yi iyileştirmek

INP’nin konusu JavaScript’tir. Ana iş parçacığı betik çalıştırmakla meşgulken bir dokunuş sırada bekler. Kaydırıcılar, sohbet balonları, takip etiketleri ve büyük dosyalar yükleyen sayfa oluşturucular en sık karşılaşılan nedenlerdir.

• Artık kullanmadığınız eklentileri kaldırın, kalanların ön yüzde neler yüklediğine bakın.
• İlk etkileşim için gerekmeyen üçüncü taraf betikleri (sohbet balonları, ısı haritaları gibi) geciktirin.
• Olay işleyicilerini kısa tutun. Bir tıklamadan sonra yapılacak ağır işi parçalara bölün ya da ana iş parçacığının dışına taşıyın.

CLS’yi iyileştirmek

Düzen kayması, bir şey sonradan belirip içeriği aşağı ittiğinde olur. Boyutu belirtilmemiş görseller, geç yüklenip yazı boyutunu değiştiren fontlar, içeriğin üstüne eklenen çerez bildirimleri ve yeri ayrılmamış reklamlar kaymanın büyük kısmını oluşturur.

• Her görsele ve videoya genişlik ve yükseklik verin ya da CSS’te aspect-ratio tanımlayın.
• Bildirimleri sayfayı aşağı itmek yerine ekranın altında, içeriğin üzerinde gösterin.
• Animasyonlarda düzeni oynatmayan transform ve opacity kullanın.

Hız da SEO bakımının parçası

Hızlı sayfa zayıf içeriği kurtarmaz; iyi içerik de yavaş bir sayfada okunmadan kaybolur. Core Web Vitals’ı başlıklar, site haritası ve iç bağlantılarla aynı rutinin parçası olarak görün. Rutinin geri kalanı WordPress SEO kontrol listemizde.

FluxWP nerede yardımcı oluyor?

Flux Speed, yavaş istekleri ve ağır sorguları yönetim panelinin içinden gösterir; hangi eklentinin ya da sayfanın zaman kaybettirdiğini görürsünüz. FluxWP eklentileri aynı paneli ve aynı tasarım sistemini paylaştığı için formlar, ekip gelen kutusu ve analitik kullanan bir site üç ayrı dosya seti yerine tek bir set yükler. Darboğaz sunucudaysa yönetilen hosting paketlerimiz önbellekle birlikte, WooCommerce’e göre ayarlanmış olarak gelir.