LCP'yi İyileştirme: Suçlu Öğeyi Bulma ve Yavaş Yüklemeyi Giderme

LCP'niz Neden Hâlâ Kırmızı?

PageSpeed Insights'ı açtınız, yeşil puan aldınız ancak LCP hâlâ 4 saniyenin üzerinde. Ya da daha kötüsü: mobil cihazda LCP 2.5 saniyeyi aştı ve Google size sıralamanızın risk altında olduğu konusunda uyarı verdi. Sayfanın hangi öğesinin suçlu olduğunu, hangi ağ isteğinin onu geciktirdiğini ve nereden başlamanız gerektiğini bilmiyorsunuz.

Bu makale tam da bu an için yazıldı. LCP'yi tanımlamak için değil, Core Web Vitals'ın tarihçesi için de değil. Önümüzdeki on dakika içinde suçlu öğeyi bulmanız ve doğru düzeltme sırasını öğrenmeniz için.

DevTools'ta LCP Öğesini Bulma

İlk adım, Google'ın LCP olarak kaydettiği öğeyi tam olarak tanımlamaktır. Bu tanımlama olmadan, her optimizasyon körlemesine yapılır. Chrome bunu iki aşamada yapar:

1. Önbelleğin ve eklentilerin sonucu bozmaması için sayfayı gizli modda (Incognito) açın.
2. F12 tuşuna basın ve Performance sekmesine gidin. Kayıt düğmesine (daire simgesi) basın, sayfayı yenileyin ve tam yüklemeden sonra kaydı durdurun.

Çıktıda Timings bölümüne bakın. Largest Contentful Paint olayını bulun. Ayrıntıların altta görünmesi için üzerine tıklayın. Genellikle bir görsel, bir <h1> etiketi veya bir videodur. Asıl suçlu olan öğe budur.

İkinci yol, Google'ın Web Vitals eklentisini kullanmaktır. Bu eklenti araç çubuğunda LCP boyutunu canlı olarak gösterir ve üzerine tıkladığınızda tam öğeyi vurgular. Bu yöntem, birkaç sayfayı hızlıca kontrol etmek için DevTools'tan daha pratiktir.

Önemli bir not: LCP farklı sayfalarda farklılık gösterir. Ana sayfada bir görsel banner, ürün sayfasında büyük bir fotoğraf ve makale sayfasında metin başlığı olabilir. Her sayfa türü için LCP öğesini ayrı ayrı bulun. Ana sayfa için işe yarayan optimizasyon, ürün sayfası için mutlaka işe yaramaz.

İşte Burada Hata Yapıyorlar

Çoğu kişi LCP'yi sayfadaki en büyük görselle karıştırır. Bu doğru değildir. LCP, sayfadaki en büyük öğe değil, viewport'taki en büyük görünür öğe olarak tanımlanır. Sayfanın altında 2000 piksellik bir görsel ve üstte küçük bir metin başlığı varsa, LCP öğesi o başlıktır. Bu hatanın sonucu? Puan üzerinde hiçbir etkisi olmayan görsel optimizasyonu ve raporlarda kafa karışıklığı.

LCP Yavaşlığının Dört Yaygın Nedeni

Öğeyi tanımladıktan sonra sıra kök neden analizine gelir. LCP'yi 2.5 saniyelik sınırın üzerine çıkaran dört ana neden vardır. Bu dört maddeyi inceleme sırası, maddelerin kendisi kadar önemlidir.

1. Sunucu Yanıt Gecikmesi (Yüksek TTFB)

Time to First Byte 600 milisaniyenin üzerindeyse, tüm yükleme süreci en baştan geride kalır. Bu sayıyı Network sekmesinde iki kez kontrol edin: Time sütunundaki TTFB değeri, ilk sayıdır. Yüksekse, sorun görsel veya fonttan değil, sunucudan kaynaklanıyor demektir.

Öncelik sırasına göre çözümler: sunucu tarafı önbelleği etkinleştirme (Redis veya Varnish gibi), statik içerik sunmak için CDN kullanma ve ağır veritabanı sorgularını kontrol etme. Siteniz paylaşımlı hosting'deyse ve TTFB'niz 1 saniyenin üzerindeyse, muhtemelen özel kaynaklı bir barındırma hizmetine geçiş zamanı gelmiştir.

2. Yanlış Format ve Boyutlarda LCP Görseli

LCP öğesi olan görsel PNG veya BMP formatında sunulmamalıdır. Uygun sıkıştırmayla WebP formatı genellikle %30-40 daha az yer kaplar. Dönüştürme için cwebp gibi araçları kullanın:

cwebp -q 80 input.png -o output.webp

Formata ek olarak boyutları da kontrol edin. Sayfada 800 piksel genişlikte görüntülenen 4000 piksellik bir görseliniz varsa, hacminin %80'i boşa gidiyor demektir. Görseli tam olarak görüntüleme boyutlarında kaydedin. Duyarlı görseller için srcset kullanın, böylece tarayıcı yalnızca ekrana uygun sürümü indirir.

3. Oluşturmayı Engelleyen JavaScript

LCP öğeniz metin başlığıysa ancak JavaScript ile oluşturuluyorsa, tarayıcının önce betiği indirmesi, çalıştırması ve ardından metni göstermesi gerekir. Bu, en az bir ekstra gidiş-dönüş anlamına gelir. Ana metnin HTML'de statik olarak bulunup bulunamayacağını kontrol edin.

Gereksiz betikler için defer veya async kullanın. İlk oluşturma için gerekli olmayan betikler defer ile yüklenmeli, böylece HTML ayrıştırıldıktan sonra çalıştırılırlar. Kritik olmayan üçüncü taraf bir betiğiniz (canlı sohbet veya analiz aracı gibi) varsa, onu 3-5 saniyelik bir gecikmeyle yükleyin.

4. Gizli Görünümlü Web Fontları

display: swap ile yüklenmeyen özel fontlar, metni font indirilene kadar gizli tutar. Bu, LCP'nizin font indirme süresine bağlanması anlamına gelir. CSS'inize font-display: swap kuralını ekleyin, böylece tarayıcı önce varsayılan fontla metni gösterir ve ardından özel font devreye girer.

Ayrıca ana font için preload kullanın:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Bu, tarayıcıya font indirmeye CSS ayrıştırmasından sonra değil, en baştan başlamasını söyler.

LCP Sorunlarını Gidermede Doğru Sıra

Düzeltme sırası, düzeltmenin kendisi kadar önemlidir. Yaygın hata, TTFB 2 saniyeyken insanların önce görsel sıkıştırmaya gitmesidir. Sonuç? Sorunun %20'sini çözen bir şeyi optimize etmek için saatler harcamak.

Önerdiğim sıra:

1. TTFB'yi 600 milisaniyenin altına getirin. Bu sayı yüksekse, diğer işler etkisizdir. Sunucu tarafı önbelleği, CDN ve sunucu kaynaklarını kontrol edin.
2. LCP öğesini HTML'de statik olarak yerleştirin. JavaScript ile oluşturuluyorsa, onu ilk HTML'e taşıyın.
3. LCP görselini optimize edin. WebP formatı, tam boyutlar ve fetchpriority="high" ekleyin.
4. Fontları swap ve preload ile ayarlayın.

Her adımdan sonra PageSpeed Insights veya SEO ve webmaster araçlarıyla ölçüm yapın. İlk adımdan sonra LCP 2.5 saniyenin altına indiyse, kalan adımları daha düşük öncelikle gerçekleştirin.

Doğru Ölçüm, Tedavinin Yarısıdır

Bir diğer yaygın hata: LCP'yi yalnızca masaüstünde ölçmek. Google sıralama için, gerçek kullanıcıların tarayıcılarından toplanan saha verilerini (Field Data) kullanır. Bu veriler, kendi ölçtüğünüz laboratuvar verilerinden (Lab Data) farklıdır. Daha zayıf internet, daha zayıf donanım ve 3G ağları olan mobil kullanıcılar farklı bir deneyim yaşar.

Daha doğru ölçüm için Chrome DevTools'u Slow 4G ağ simülasyonu ve 4 kat CPU kısıtlamasıyla kullanın. Bu ayarları Performance sekmesi ve Network conditions bölümünde uygulayın. Bu katı koşullarda LCP 2.5 saniyenin altındaysa, gerçek kullanıcılarınız neredeyse kesinlikle iyi bir deneyim yaşayacaktır.

Ayrıca alan adı ve DNS teknik kontrol raporlarını kontrol edin. Bazen sorun site kodlarından değil, DNS veya ağ altyapısından kaynaklanır. Yavaş yanıt veren bir DNS, TTFB'yi doğrudan artırır.

Sık Sorulan Sorular

Sitemin LCP öğesinin hangisi olduğunu nasıl anlarım?

Chrome DevTools'ta Performance sekmesine gidin, kaydı başlatın ve sayfayı yenileyin. Kaydı durdurduktan sonra Timings bölümünde Largest Contentful Paint olayını bulun. Tam öğenin altta görünmesi için üzerine tıklayın. Ayrıca LCP öğesini canlı olarak vurgulayan Google'ın Web Vitals eklentisini de kullanabilirsiniz.

LCP 2.5 saniyenin altında mı olmalı?

Evet, Core Web Vitals'ta yeşil puan almak için LCP'nin gerçek kullanıcı ziyaretlerinin %75'inde 2.5 saniyenin altında olması gerekir. 2.5 ile 4 saniye arası değerler sarı (iyileştirme gerekli) ve 4 saniyenin üzeri kırmızı (zayıf) olarak kabul edilir. Google bu değerlendirme için yalnızca laboratuvar verilerini değil, gerçek kullanıcıların saha verilerini kullanır.

LCP ile FCP arasındaki fark nedir?

FCP (First Contentful Paint), sayfadaki herhangi bir içeriğin (küçük bir metin veya arka plan bile olsa) ilk görüntülenme süresidir. Ancak LCP, en büyük görünür öğenin görüntülenme süresini ölçer. FCP genellikle LCP'den daha erken gerçekleşir ve LCP'yi iyileştirmek mutlaka FCP'nin iyileşmesine yol açmaz. Her iki metrik de önemlidir ancak LCP'nin kullanıcı deneyimi üzerinde daha büyük etkisi vardır.

LCP görselini kaldırmak iyi bir çözüm müdür?

Hayır. Ana görseli kaldırmak, tarayıcının bir sonraki büyük öğeyi LCP olarak seçmesine neden olur; bu, aynı görselin daha küçük boyutu veya bir metin öğesi olabilir. Görsel sayfa için gerçekten gerekli değilse, kaldırmak mantıklıdır. Ancak gerekliyse, format, boyut ve yükleme optimizasyonu daha iyi sonuç verir. Unutmayın ki LCP her zaman vardır; siz yalnızca onu hızlandırabilirsiniz, kaldıramazsınız.