LCP Nedir? SEO İçin Nasıl Optimize Edilir

LCP, kritik bir kullanıcı deneyimi metriğidir ve aynı zamanda bir Google sıralama faktörüdür. Bir kullanıcı sayfanıza girdiğinde toplam sayfa yüklenme süresini umursamaz. Asıl önemsediği, ana içeriği ne zaman görüp okumaya veya etkileşime başlayabileceğidir. LCP tam olarak bu anı ölçer: en büyük içerik öğesinin görünür olduğu an. LCP'yi doğru yönetirseniz sayfanız hızlı hissettirir. Yanlış yönetirseniz, diğer metrikler iyi olsa bile sayfanız yavaş hissettirir.

LCP'yi optimize etmek üç yönlü bir yaklaşım gerektirir: sunucu yanıt süresini (TTFB) iyileştirmek, oluşturmayı engelleyen kaynakları ortadan kaldırmak ve görselleri optimize etmek. Her yaklaşım LCP'nin farklı bir darboğazını giderir. Üçünün birlikte uygulanması çok belirgin iyileşmeler sağlar.

LCP Nedir ve Nasıl Ölçülür

Largest Contentful Paint (LCP), sayfanızdaki görünür en büyük içerik öğesinin oluşturulma süresidir. Bu öğe büyük bir görsel, video, başlık veya metin bloğu olabilir. LCP, kullanıcının sayfanıza girdiği andan o öğenin görünür olduğu ana kadar geçen süreyi ölçer. Google'ın LCP dokümantasyonu ayrıntılı teknik bilgiler ve optimizasyon stratejileri sunar.

LCP, geçti/kaldı şeklinde ikili bir metrik değildir; sürekli bir skordur. Google, 2,5 saniyenin altındaki LCP'yi "iyi", 2,5 ile 4 saniye arasındakini "iyileştirme gerekli", 4 saniyenin üzerindekini ise "zayıf" olarak tanımlamıştır. Kullanıcılar LCP'si 2 saniyenin altındaki sayfaları çok hızlı bulur. LCP'si 3 ile 4 saniye arasındaki sayfalar belirgin biçimde daha yavaş hissettirir. LCP'si 5 saniyeyi aşan sayfalar çoğu zaman terk edilir.

LCP, sayfa yüklenirken daha büyük içerik öğeleri göründükçe değişir. Çok büyük bir görsel 3. saniyede yüklenirse LCP 1 saniyeden 3 saniyeye çıkar. Bu önemlidir: yalnızca ilk görüntüleme süresini optimize etmek yetmez. Tüm büyük içerik öğelerinin hızlı yüklendiğinden emin olmanız gerekir.

Time to First Byte (TTFB) Nedir

Time to First Byte (TTFB), gezinmenin başlangıcından sunucunun HTML belgesinin ilk baytını döndürmesine kadar geçen süredir. TTFB, LCP için alt sınırı belirler. TTFB 2 saniye ise LCP 2 saniyeden daha iyi olamaz, çünkü tarayıcı henüz HTML'i bile almamıştır. TTFB'yi düşürmek, LCP'yi düşürmenin ön koşuludur.

İyi bir TTFB 600 milisaniyenin altındadır. 600 ile 1800 ms arasındaki TTFB iyileştirme gerektirir. 1800 ms üzerindeki TTFB zayıftır. TTFB'niz yavaşsa önce sunucu optimizasyonuna odaklanın. Hiçbir ön yüz optimizasyonu yavaş bir sunucunun açığını kapatamaz.

Yavaş TTFB'nin yaygın nedenleri: verimsiz arka uç kodu, veritabanı sorguları veya sunucu aşırı yükü. Yavaş hosting de yüksek TTFB'ye yol açar. Paylaşımlı hosting çoğu zaman son derece yavaştır. Daha iyi performans için VPS veya bulut hosting'e geçin. İçeriği kullanıcılarınıza yakın sunuculardan sunarak TTFB'yi düşürmek için bir CDN kullanın.

PageSpeed Insights, TTFB değerinizi "Sunucu yanıt süresi" bölümünde gösterir. TTFB bir darboğazsa öncelikli sorun olarak vurgulanır.

En Büyük İçerik Öğesini Belirleme

LCP, sayfanızdaki en büyük içerik öğesinin ne olduğuna bağlıdır. Bir blog yazısında en büyük öğe büyük bir kapak görseli olabilir. Bir ürün sayfasında ürün fotoğrafı olabilir. Bir haber sitesinde makale başlığı olabilir. LCP öğesini belirlemek, onu optimize etmenin ilk adımıdır.

LCP öğesini belirlemek için Chrome DevTools'u kullanın. DevTools'u açın, Performance sekmesine gidin, kaydı başlatın ve sayfayı yeniden yükleyin. Performans kaydında "Largest Contentful Paint" işaretini bulun. Üzerine gelerek LCP'yi hangi öğenin tetiklediğini görebilirsiniz. Öğeyi öğrendikten sonra onu optimize edin.

LCP öğesi çoğu zaman bir görseldir. Görseller büyüktür ve HTML ayrıştırıldıktan sonra yüklenir. Çoğu sitede LCP üzerindeki en büyük etkiyi görsel yükleme optimizasyonu yaratır. Sayfanın ilk ekranının altında kalan görseller geç yüklenebilir (lazy loading), bu da ilk ekrandaki içeriğin LCP süresini hızlandırır.

Kritik Kaynakları Önceden Yükleme

Önceden yükleme (preload), tarayıcıya bir kaynağı, oluşturma için gerekli olmadan önce indirmeye başlamasını söyler. LCP görselinizi veya diğer kritik kaynakları HTML head bölümünde `` etiketleriyle önceden yükleyin. Bu, tarayıcıya "bu kaynağı hemen indirmeye başla" der.

Örnek: `` etiketi, tarayıcıya CSS'in ayrıştırılmasını beklemeden kapak görselini hemen indirmeye başlamasını söyler. Bu, kaynak boyutuna bağlı olarak LCP'yi 100 ile 500 ms arasında düşürebilir.

Önceden yüklemede dikkatli olun. Çok fazla kaynağı önceden yüklemek bant genişliğini boşa harcar. Yalnızca en kritik kaynakları (kapak görseli, kritik yazı tipleri, temel CSS) önceden yükleyin. Google'ın Core Web Vitals optimizasyon rehberi, önceden yüklemeye ilişkin en iyi uygulamaları açıklar.

LCP İçin Görsel Optimizasyonu

LCP öğeniz bir görselse, görselin dosya boyutunu ve yükleme stratejisini optimize edin. Üç taktik:

Görseli sıkıştırın. Kaliteden ödün vermeden sıkıştırmak için TinyPNG, ImageOptim veya Squoosh gibi araçları kullanın. JPEG sıkıştırması dosya boyutunu 10 ila 40 kat azaltabilir. 4G ağlarda her 100KB'lık görsel boyutu LCP'ye 100 ile 200 ms ekler. Sıkıştırma, yatırım getirisi yüksek bir çalışmadır.

Modern formatları kullanın. WebP, JPEG'den %25 ile 35 daha küçüktür. AVIF ise daha da küçüktür. Geriye dönük uyumluluk için modern tarayıcılara WebP, eski tarayıcılara JPEG sunmak üzere HTML `` öğesini kullanın. Yalnızca format seçimi bile LCP'yi 200 ile 400 ms iyileştirebilir.

Görsel boyutlarını belirtin. Genişlik ve yükseklik niteliklerini eklemek, düzen kaymasını önler ve tarayıcının görsel yüklenmeden önce yer ayırmasını sağlar. Bu, LCP'yi doğrudan iyileştirmez, ancak başka bir Core Web Vitals metriği olan Cumulative Layout Shift'i (CLS) iyileştirir.

Oluşturmayı Engelleyen CSS ve JavaScript

Oluşturmayı engelleyen CSS, CSS indirilip ayrıştırılana kadar tarayıcının sayfayı oluşturmasını engeller. Büyük CSS dosyaları oluşturmayı geciktirir. Kritik CSS'i satır içine alıp geri kalanını erteleyerek oluşturmayı engelleyen CSS'i en aza indirin.

Kritik CSS, sayfanın ilk ekranındaki içerik için gereken CSS'tir. Bu CSS'i şuraya satır içi ekleyin: `