Core Web Vitals ve LCP Nasıl Düşürülür

Core Web Vitals nedir?

Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için tanımladığı üç temel performans metriğidir: LCP (Largest Contentful Paint — en büyük içerik öğesinin ekranda görünme süresi), INP (Interaction to Next Paint — kullanıcı etkileşimine tepki hızı) ve CLS (Cumulative Layout Shift — sayfa yüklenirken oluşan görsel kayma miktarı). Bu üç metrik, gerçek kullanıcı verilerine (field data) dayanarak ölçülür; yani laboratuvar testinden (ör. tek seferlik bir denetim) değil, gerçek ziyaretçilerin cihaz ve ağ koşullarında toplanan verilerden hesaplanır.

Bu üç metrik farklı kullanıcı deneyimi boyutlarını temsil eder: LCP "sayfa ne kadar hızlı yüklendi hissi" verir, INP "sayfa etkileşime ne kadar hızlı tepki veriyor" sorusuna cevap verir, CLS ise "sayfa gözümün önünde sıçrıyor mu" sorusunu ölçer. Üçü birden iyi olmadan genel kullanıcı deneyimi tam olarak "iyi" sayılmaz.

Bu rehberde özellikle LCP'ye odaklanılır çünkü genellikle en çok müdahale edilebilir ve en somut iyileştirme alanı olan metriktir; büyük bir hero görseli veya video, tek başına LCP'yi saniyelerce geciktirebilir.

Neden önemli?

Bu metrikler doğrudan kullanıcı deneyimini yansıtır: yavaş yüklenen, etkileşime geç tepki veren veya sürekli kayan bir sayfa kullanıcıyı siteden uzaklaştırır. Google, Core Web Vitals'ı sıralama sinyallerinden biri olarak kullanır; özellikle mobil aramalarda bu metriklerin etkisi daha belirgin olabilir çünkü mobil cihazlar ve ağlar genelde masaüstünden daha kısıtlıdır.

Güncel eşiklere göre LCP'nin "iyi" sayılması için 2,5 saniyenin altında olması, bu ölçümün gerçek kullanıcıların en az %75'inde sağlanması gerekir. Bu eşiğin üzerinde kalan bir site, teknik olarak çalışsa bile kullanıcı deneyimi açısından "yavaş" kategorisine girer ve bu durum hem dönüşüm oranını hem de arama sıralamasını olumsuz etkileyebilir.

LCP yavaşlığının kaynağı her sitede farklı olabilir: bazı sitelerde büyük, sıkıştırılmamış bir görsel sorumluyken, bazılarında yavaş sunucu yanıtı (TTFB) veya render'ı bloklayan üçüncü taraf script'ler (ör. reklam ağları, analiz araçları) asıl nedendir. Bu yüzden iyileştirmeye başlamadan önce hangi öğenin LCP olarak işaretlendiğini tespit etmek önemlidir.

Nasıl düzeltilir?

• LCP öğesini oluşturan görseli (genellikle kahraman/hero görseli) optimize edin: uygun boyut, modern format (WebP/AVIF), sıkıştırma.
• LCP görseline <link rel="preload"> ekleyerek tarayıcının onu erken keşfetmesini sağlayın; bu, görselin diğer kaynaklarla aynı anda değil, öncelikli olarak indirilmesini sağlar.
• Sunucu yanıt süresini (TTFB) azaltın: önbellekleme, hızlı hosting, CDN kullanımı.
• Render'ı bloklayan CSS/JS dosyalarını azaltın veya erteleyin (defer/async); tarayıcı bu dosyaları indirip çalıştırana kadar sayfa çizimini bekletebilir.
• Statik varlıkları bir CDN üzerinden dağıtarak coğrafi gecikmeyi azaltın; kullanıcıya en yakın sunucudan yanıt vermek gecikmeyi kısaltır.

Örnek

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Kötü örnek: LCP görselini <img src="hero.jpg" loading="lazy"> şeklinde tembel yüklemeye (lazy load) ayarlamak — bu, tarayıcının görseli sayfa yüklenirken hemen indirmesini engeller ve LCP süresini ciddi biçimde uzatır.

Sık yapılan hatalar

• LCP görselini gereğinden büyük boyutta, sıkıştırmadan sunmak.
• Tüm CSS veya JS'i tek büyük dosyada birleştirip render'ı bloklamak.
• loading="lazy" özelliğini yanlışlıkla LCP görseline (ilk ekranda görünen görsele) uygulamak — bu LCP'yi geciktirir çünkü tarayıcı görseli görene kadar indirmeyi erteler.
• Sunucu yanıt süresini göz ardı edip yalnızca ön yüzü optimize etmek.
• Seoraporu.co raporundaki LCP ölçümü 2,5 saniyeyi aştığında, önce hangi öğenin LCP olarak işaretlendiğini tespit edip önceliği ona vermek gerekir; genel bir "her şeyi optimize et" yaklaşımı yerine hedefli müdahale daha etkilidir.
• Üçüncü taraf script'lerin (reklam, analiz, chat widget'ı) sayfa yükleme sırasını nasıl etkilediğini düzenli olarak gözden geçirin; bunlar zamanla birikip performansı yavaşça düşürebilir.
• CLS'i göz ardı ederek yalnızca LCP'ye odaklanmak; boyutu tanımlanmamış görsel/reklam alanları sayfa yüklenirken içeriğin aniden kaymasına neden olabilir.