Bir sitenin “yavaş” olduğunu herkes hisseder ama neyin yavaş olduğunu söylemek için ölçmek gerekir. Core Web Vitals tam da bunu yapıyor: kullanıcının gerçekte ne deneyimlediğini üç rakama indiriyor. Bu yazıda, son bir yılda devraldığımız projelerde LCP değerini en çok düşüren yedi müdahaleyi sıralıyoruz.
LCP tam olarak neyi ölçüyor?
Largest Contentful Paint (LCP), görünen alandaki en büyük içerik öğesinin ekrana çizilme anını ölçer. Bu öğe genellikle hero görseli, bir video poster’ı ya da büyük bir başlık bloğudur. Kullanıcı açısından anlamı basit: “sayfa yüklendi” hissinin oluştuğu an.
Google’ın eşik değerleri şöyle: 2,5 saniyenin altı iyi, 4 saniyenin üstü zayıf, arası iyileştirme gerektiriyor. Önemli nokta, bu değerin 75. yüzdelik dilimde ölçülmesi — yani kullanıcılarınızın dörtte üçünün deneyimi.
Laboratuvar skoru sitenizin potansiyelini, saha verisi kullanıcılarınızın gerçeğini gösterir. İkisi ayrıştığında her zaman saha verisine güvenin.— Develcodex SEO ekibi, teknik denetim notları
Önce ölçümü kurun, sonra optimize edin
En sık gördüğümüz hata, optimizasyona ölçüm kurmadan başlamak. Lighthouse’u bir kez çalıştırıp “skor 92” demek yeterli değil; o skor sizin makinenizin hızını ve bağlantınızı yansıtır. Gerçek kullanıcı verisi için üç kaynağa birden bakın:
- Search Console → Core Web Vitals raporu. URL gruplarına göre saha verisi. Hangi şablonun sorunlu olduğunu burada görürsünüz.
- PageSpeed Insights. Aynı sayfa için hem saha (CrUX) hem laboratuvar verisini yan yana verir.
- Kendi RUM ölçümünüz.
web-vitalskütüphanesiyle değerleri GA4’e gönderip cihaz ve bağlantı kırılımında inceleyin.
Üçüncü maddeyi kurmak birkaç satır kod alıyor ve karşılığı yüksek — hangi sayfanın hangi cihazda kötü olduğunu tahmin etmeyi bırakırsınız:
import { onLCP, onCLS, onINP } from 'web-vitals';
function gonder({ name, value, id }) {
gtag('event', name, {
value: Math.round(name === 'CLS' ? value * 1000 : value),
metric_id: id,
non_interaction: true
});
}
onLCP(gonder);
onCLS(gonder);
onINP(gonder);Saha verisi 28 günlük pencereyle çalışır. Bugün yaptığınız düzeltmenin Search Console’a yansıması haftalar alır. Bu süre boyunca kendi RUM ölçümünüz tek gerçek geri bildirim kaynağınız olur.
Sunucu yanıt süresi (TTFB)
LCP’nin ilk parçası, tarayıcının ilk baytı almasıdır. TTFB 800 ms ise, geri kalan her şeyi mükemmel yapsanız bile 2,5 saniyeye sığmanız zorlaşır. Devraldığımız projelerde en büyük kazancı genellikle bu adım veriyor.
Nereden başlanır?
- Veritabanı sorgularını profilleyin; sayfa başına 200’den fazla sorgu çalışıyorsa N+1 problemi vardır.
- Tam sayfa önbelleği kurun. Dinamik olmayan sayfalarda bu tek başına TTFB’yi onda birine indirebilir.
- Sunucu konumunu kitleye yaklaştırın; Türkiye hedefli bir site için Frankfurt, Amerika’dan belirgin daha iyidir.
- CDN’i yalnızca statik dosyalar için değil, HTML için de değerlendirin.
Render engelleyen kaynaklar
Tarayıcı, <head> içindeki senkron CSS ve JS dosyalarını indirip işlemeden sayfayı çizmeye başlamaz.
Üçüncü taraf etiketleri (sohbet widget’ı, ısı haritası, reklam pikselleri) burada birikince LCP doğrudan cezalandırılır.
Pratik kural: görünen alanı çizmek için gerekmeyen her şey ertelenebilir. Analitik ve sohbet kodlarını
defer ile ya da ilk etkileşimden sonra yükleyin.
Görsel teslimi
LCP öğesi çoğu sitede hero görselidir. Bu görselin tembel yüklenmemesi gerekir — yaygın bir hata, tüm
görsellere toptan loading="lazy" eklemektir. Görünen alandaki görsel için bu, LCP’yi doğrudan geciktirir.
- Hero görseline
fetchpriority="high"verin,loading="lazy"vermeyin. - WebP veya AVIF kullanın; aynı kalitede JPEG’e göre %30–50 daha küçük olur.
srcsetile cihaza göre boyut sunun. Telefona 2400 piksel genişliğinde görsel göndermeyin.widthveheightniteliklerini her zaman yazın; CLS’yi de birlikte düzeltir.
Font yükleme stratejisi
Web fontları LCP’yi iki şekilde etkiler: indirme süresi ve metin görünürlüğü. font-display: swap metni
hemen gösterir ama font gelince kayma yaratır; optional ise kaymayı tamamen önler, karşılığında ilk
ziyarette yedek fontu kabul edersiniz.
Tek bir aileden en fazla üç ağırlık kullanın ve bunları preload edin. Sekiz ağırlık yüklenen bir sitede
tasarım zenginliği değil, gecikme birikir.
Yayın öncesi kontrol listesi
Her teslimden önce aşağıdaki maddeleri tek tek işaretliyoruz. Hepsi yeşil değilse yayına almıyoruz:
- Saha verisinde LCP 75. yüzdelikte 2,5 sn altında
- TTFB 400 ms altında (önbellekli sayfalarda 200 ms)
- Hero görseli
fetchpriority="high", lazy değil - Üçüncü taraf script’ler ertelenmiş
- Tüm görsellerde
width/heightmevcut - Font ağırlığı sayısı üçü geçmiyor
- Gerçek iOS ve Android cihazda 4G bağlantıda test edildi
Bu listeyi uyguladığımız projelerde LCP ortalaması 3,8 saniyeden 1,9 saniyeye indi. Asıl kazanç ise skorda değil: aynı dönemde organik oturumların hemen çıkma oranı belirgin şekilde düştü.