Sayfanızın Core Web Vitals raporunda LCP değeri kötü çıkıyor ve ne yapacağınızı bilmiyorsunuz. Görselleri sıkıştırdınız, önbellek kurdunuz, sunucu paketini yükselttiniz ama sayı yerinde duruyor. Bunun nedeni genellikle şudur: LCP tek bir iş değil, arka arkaya dizilmiş dört ayrı evrenin toplamıdır, ve siz yanlış evreyi düzeltiyorsunuzdur.
Bu yazıda LCP'yi dört parçaya ayırıyoruz, "oluşturma gecikmesi" dediğimiz evrenin tam olarak neyi ölçtüğünü açıklıyoruz ve hangi evrenin sizi yavaşlattığını nasıl bulacağınızı gösteriyoruz.
Önce kısaca: LCP neyi ölçer?
LCP (Largest Contentful Paint, en büyük içerik boyaması), ziyaretçinin ekranında görünen alandaki en büyük içerik ögesinin çizilme anını ölçer. Bu öge çoğu sayfada bir kapak görseli, bir video posteri ya da büyük puntolu bir başlık bloğudur.
Ölçünün amacı basit bir soruya cevap vermektir: ziyaretçi bu sayfanın yüklendiğini ne zaman hissetti? Sayfa tam olarak ne zaman bitti değil, insanın "tamam, geldi" dediği an.
Google'ın eşikleri şöyle:
- 2,5 saniye ve altı: iyi
- 2,5 ile 4 saniye arası: geliştirilmeli
- 4 saniyenin üzeri: kötü
Burada kritik bir ayrıntı var: bu eşikler sizin bilgisayarınızdaki ölçüme değil, gerçek ziyaretçilerinizin cihazlarından toplanan alan verisine bakar. Kendi makinenizde 1,8 saniye görmeniz, mobil bağlantıdaki ziyaretçinizin 5 saniye beklemediği anlamına gelmez.
LCP'nin dört evresi
İşin özü burada. Bir sayfanın LCP süresi şu dört evrenin toplamıdır:
1. İlk bayta kadar geçen süre (TTFB)
Tarayıcı adresi istedi, sunucu ilk baytı gönderene kadar geçen süre. DNS çözümlemesi, bağlantı kurulumu, TLS el sıkışması ve sunucunun HTML'i üretmesi bu sürenin içindedir.
2. Kaynak yükleme gecikmesi (resource load delay)
HTML gelmeye başladı, ama LCP ögesinin kaynağı (çoğunlukla bir görsel) henüz indirilmeye başlanmadı. Aradaki bu ölü zaman kaynak yükleme gecikmesidir. Tarayıcının o görselden haberi olmaması, ya da haberi olduğu hâlde sırayı başka bir şeye vermesi bu boşluğu üretir.
3. Kaynak yükleme süresi (resource load duration)
Görselin indirilmesi ne kadar sürdü. Dosya boyutu, biçim ve bağlantı hızı burada belirleyicidir.
4. Oluşturma gecikmesi (element render delay)
Aradığınız cevap büyük olasılıkla burada. Kaynak indi, tarayıcının elinde, ama ekrana hâlâ çizilmedi. İndirme bitişiyle çizim arasındaki bu süre oluşturma gecikmesidir.
Yani "oluşturma gecikmesi" şu demektir: içerik hazır, ama sayfa onu gösteremiyor.
İdeal dağılım nasıl olmalı?
Bir sayfanın LCP süresi bu dört evre arasında sağlıklı biçimde şöyle dağılır:
- TTFB: toplamın yaklaşık %40'ı
- Kaynak yükleme gecikmesi: %10'un altında
- Kaynak yükleme süresi: yaklaşık %40'ı
- Oluşturma gecikmesi: %10'un altında
Bunlar kesin kural değil, yön gösteren oranlardır. Ardındaki mantık şu: sürenin büyük kısmı gerçek iş yapmakla geçmeli, yani HTML'i almakla ve LCP kaynağını indirmekle. Bekleme evreleri (yükleme gecikmesi ve oluşturma gecikmesi) küçük kalmalıdır, çünkü o evrelerde tarayıcı fiilen hiçbir şey indirmiyor, sadece bekliyor.
Ölçtüğünüzde oluşturma gecikmeniz toplamın %30'unu yiyorsa, orada bir şey sayfayı kilitliyor demektir.
Oluşturma gecikmesini ne büyütür?
Render engelleyen kaynaklar
Tarayıcı, head içindeki CSS dosyalarını ve defer ya da async taşımayan script'leri indirip işlemeden sayfayı çizmeye başlamaz. Görseliniz saniyeler önce inmiş olabilir; stil dosyası hâlâ yoldaysa ekranda hiçbir şey görünmez.
Bu, oluşturma gecikmesinin en yaygın nedenidir ve genellikle en kolay düzeltilenidir: kritik olmayan CSS'i ayırmak, script'lere defer eklemek çoğu sayfada ölçülebilir kazanç verir.
Açılıştaki animasyonlar
Sayfanın en üstündeki bölüme JavaScript ile giriş animasyonu koyduysanız (soluklanarak belirme, yukarıdan kayma), LCP ögesi animasyon bitene kadar "görünmüş" sayılmaz. Kod ertelenmişse bekleme daha da uzar.
Buradaki en pratik çözüm, ilk ekranda görünen bölümdeki animasyonları tamamen kapatmaktır. Animasyon sayfanın alt kısımlarında kalsın; ziyaretçinin ilk gördüğü yer anında çizilsin.
İstemcide çizilen içerik
LCP ögeniz JavaScript çalıştıktan sonra oluşuyorsa, tarayıcı önce paketi indirmek, çalıştırmak, veriyi çekmek ve sonra çizmek zorundadır. Bu zincirin tamamı oluşturma gecikmesine yazılır. Ana içeriğin sunucudan hazır HTML olarak gelmesi, bu yüzden sadece SEO değil hız kararıdır.
Yazı tipi bekleme davranışı
LCP ögeniz bir metin bloğuysa ve yazı tipi font-display ayarı olmadan yükleniyorsa, tarayıcı yazıyı göstermeden yazı tipini bekler. Ekranda boşluk durur ve LCP saati işlemeye devam eder.
Peki hangi evrede takılıyorsunuz?
Tahmin etmeyin, ölçün. Bir sayfayı hızlandırmaya çalışırken en çok kaybettiren şey, sorunun olmadığı yerde çalışmaktır.
Türk SEM panelindeki PageSpeed portalı ve site panelindeki Core Web Vitals bölümü, LCP'yi gerçek ziyaretçi verisiyle (CrUX) haftalık olarak izler. Böylece kendi makinenizin ölçümüne değil, sitenize gerçekten giren insanların cihazlarına bakarsınız.
Okurken şu sırayı izleyin:
- TTFB yüksekse sorun sunucudadır: önbelleksiz sayfa üretimi, yavaş sorgular, uzak sunucu konumu.
- Yükleme gecikmesi yüksekse tarayıcı LCP kaynağını geç keşfediyordur.
- Yükleme süresi yüksekse dosya çok büyüktür ya da biçim yanlıştır.
- Oluşturma gecikmesi yüksekse sayfayı bir şey kilitliyordur: stil dosyası, script ya da animasyon.
Her evre için ne işe yarar?
TTFB için
En çok kazandıran şey tam sayfa önbelleğidir. Dinamik altyapılarda her istekte veritabanına gidip HTML üretmek, tek başına saniyeler ekleyebilir. Sunucunun ziyaretçiye coğrafi yakınlığı da doğrudan etkiler: her ağ turu mesafeyle birlikte uzar.
Sık karşılaştığımız bir başka neden PHP sürümüdür. Eklentilerinizden biriyle ya da temanızla uyumsuz bir sürüm, sayfa üretimini gözle görülür biçimde yavaşlatır. LCP'de bir türlü ilerleme sağlayamıyorsanız sürümü yükseltmeyi deneyin.
Kaynak yükleme gecikmesi için
LCP görselinizi tarayıcıya erken haber verin. <img> etiketini HTML'in içine koymak, arka plan görseli olarak CSS'e gömmekten daha iyidir; tarayıcı CSS'i işlemeden arka plan görselini keşfedemez.
Kritik görsele fetchpriority="high" vermek ve ilk ekranda görünen görsele tembel yükleme uygulamamak da buradaki iki temel hamledir. Kapak görseline loading="lazy" koymak, tam da öncelik verilmesi gereken dosyayı sıranın sonuna atar.
Kaynak yükleme süresi için
Modern biçim (WebP ya da AVIF), gerçek görüntüleme boyutuna uygun ölçek ve makul sıkıştırma. 2000 piksel genişliğindeki bir görseli 800 piksellik alanda göstermek, boşuna indirilen her bayt için LCP'ye ceza yazar.
Oluşturma gecikmesi için
Kritik CSS'i belgeye gömün, gerisini ertelemeli yükleyin. Script'lere defer ekleyin. İlk ekrandaki animasyonları kapatın. Yazı tiplerine font-display: swap verin, böylece metin yazı tipi gelmeden görünür.
Bir de sayfadaki farklı yazı tipi sayısını kontrol edin. Aynı sayfada üst üste binmiş çok sayıda yazı tipi ailesi hem indirme süresini hem çizim süresini uzatır.
Sık yapılan üç hata
Kendi bilgisayarında ölçmek. Hızlı bağlantı ve güçlü işlemci, gerçek ziyaretçinin deneyimini gizler. Karar alan veriye bakılarak verilir.
Ortalamaya bakmak. Core Web Vitals 75. yüzdelik dilimi kullanır, yani ziyaretçilerin dörtte üçünün gördüğü değeri. Ortalama, kötü deneyimleri iyi deneyimlerin arkasına saklar.
Tek bir şeyi düzeltip beklemek. LCP dört evrenin toplamı olduğu için, tek evreyi iyileştirmek toplam süreyi hissedilir ölçüde düşürmeyebilir. Hangi evrenin baskın olduğunu bulmak, dört evreyi birden kurcalamaktan hem hızlı hem ucuzdur.
Özetle
"Oluşturma gecikmesi" LCP'nin son evresidir ve şunu söyler: içerik hazırdı, sayfa onu gösteremedi. Bu evre kabarmışsa suçlu neredeyse her zaman aynı üç şeyden biridir: render engelleyen bir stil dosyası, ertelenmiş bir script ya da ilk ekrandaki bir animasyon.
Ama işe oradan başlamayın. Önce LCP'yi dörde ayırın, hangi evrenin baskın olduğunu görün, sonra o evrenin çözümüne gidin. Hız çalışmasında en pahalı şey, doğru işi yanlış yerde yapmaktır.
Sayfanızın dört evresini gerçek ziyaretçi verisiyle görmek isterseniz PageSpeed portalımızdan ölçebilir, sitenizin tamamındaki hız sorunlarını ücretsiz SEO analizimizle tarayabilirsiniz.
