Bir internet sayfasının hızlı açılması, yalnızca bütün dosyaların ne zaman indirildiğiyle ölçülemez. Kullanıcı açısından asıl önemli olan, sayfadaki ana içeriğin ne kadar sürede görünür hâle geldiğidir.

Sayfaya giren kullanıcı uzun süre boş ekran, yüklenme animasyonu veya tamamlanmamış bir tasarım görüyorsa teknik olarak bazı dosyalar yüklenmiş olsa bile sayfayı yavaş algılayabilir.

Bu nedenle web performansında kullanıcıların gördüğü gerçek deneyimi ölçen metriklerden yararlanılır. Bu metriklerin en önemlilerinden biri Largest Contentful Paint, yani LCP değeridir.

Largest Contentful Paint, kullanıcının sayfayı açmaya başlamasından, ilk görüntü alanındaki en büyük içerik öğesinin ekranda oluşturulmasına kadar geçen süreyi ölçer.

LCP öğesi çoğu zaman:

Büyük kapak görseli
Hero görseli
Ürün fotoğrafı
Banner
Video poster görseli
Büyük başlık
Geniş metin bloğu

olabilir.

Örneğin bir e-ticaret ürün sayfasında büyük ürün fotoğrafı, kurumsal bir sitede ana banner görseli, blog içeriğinde ise öne çıkarılan görsel veya büyük başlık LCP öğesi olarak belirlenebilir.

İyi bir LCP deneyimi için sayfa yüklemelerinin yüzde 75’inde değer şu aralıkta olmalıdır:

LCP değeri	Değerlendirme
2,5 saniye ve altı	İyi
2,5-4 saniye	İyileştirme gerekiyor
4 saniyenin üzeri	Yetersiz

Bu eşikler hem mobil hem de masaüstü kullanıcılar için ayrı ayrı değerlendirilir. Tek bir hızlı masaüstü testi, mobil kullanıcıların da iyi deneyim yaşadığını göstermez.

LCP optimizasyonunda yalnızca görsel dosyasını küçültmek yeterli olmayabilir. Sunucu yanıt süresi, HTML yapısı, önbellekleme, CSS, JavaScript, web fontları, görselin keşfedilme zamanı ve tarayıcı öncelikleri birlikte incelenmelidir.

İnternet sitesindeki diğer performans ve taranabilirlik sorunlarının belirlenmesi için kapsamlı bir teknik SEO çalışması yapılmalıdır.

LCP Ne Demektir?

LCP, “Largest Contentful Paint” ifadesinin kısaltmasıdır.

Türkçede farklı şekillerde ifade edilebilir:

En Büyük İçerikli Boyama
En Büyük Zengin İçerikli Boyama
En Büyük İçerik Oluşturma Süresi
En Büyük Görünür İçerik Süresi

Teknik dokümanlarda genellikle İngilizce adı ve LCP kısaltması kullanılır.

Kavramı daha kolay anlamak için kelimeler ayrı ayrı incelenebilir:

Largest: En büyük
Contentful: İçerik barındıran
Paint: Tarayıcının öğeyi ekranda oluşturması

LCP, ilk görüntü alanında bulunan en büyük anlamlı içerik öğesinin kullanıcı tarafından görülebilir hâle gelme süresini ifade eder.

Largest Contentful Paint Neyi Ölçer?

LCP, sayfanın tamamının yüklenme süresini ölçmez.

Temel olarak şu soruya cevap verir:

Kullanıcı sayfayı açtıktan sonra ana içeriği ne kadar sürede görebiliyor?

Örneğin bir ürün sayfasında:

Üst menü 0,8 saniyede
Logo 1 saniyede
Ürün başlığı 1,4 saniyede
Büyük ürün görseli 3,2 saniyede
Alt açıklamalar 4 saniyede

yüklenebilir.

İlk görüntü alanındaki en büyük öğe ürün görseliyse LCP değeri yaklaşık 3,2 saniye olarak ölçülebilir.

Sayfanın altındaki yorumlar veya benzer ürünler daha geç yüklense bile başlangıçta görüntü alanının dışında kaldıkları için LCP öğesi olmayabilir.

LCP Öğesi Nedir?

LCP öğesi, sayfanın ilk görüntü alanında yer alan ve tarayıcı tarafından en büyük görünür içerik öğesi olarak belirlenen elementtir.

LCP hesabına dâhil edilebilecek başlıca öğeler şunlardır:

<img> ile eklenen görseller
SVG içerisindeki uygun <image> öğeleri
Video poster görseli veya videonun ilk karesi
CSS url() ile yüklenen arka plan görselleri
Büyük metin blokları
Başlık ve paragraf grupları

Tarayıcı, sayfa yüklenirken farklı LCP adayları belirleyebilir. Başlangıçta büyük bir başlık LCP adayı olurken daha sonra yüklenen geniş bir görsel onun yerine geçebilir.

Son geçerli ve en büyük aday, sayfanın LCP öğesi olarak raporlanır.

LCP Öğesi Nasıl Değişir?

Sayfa yüklenirken en büyük görünür içerik öğesi değişebilir.

Örnek süreç:

İlk olarak büyük başlık görünür.
Ardından banner görseli yüklenir.
Banner başlıktan daha büyük olduğu için yeni LCP adayı olur.
Daha sonra açılan reklam alanı veya slider görseli daha büyükse LCP öğesi tekrar değişebilir.

Bu nedenle LCP analizi yapılırken yalnızca HTML içerisindeki en büyük görsele bakmak yeterli değildir. Tarayıcının gerçek yükleme sırasında hangi öğeyi LCP olarak seçtiği kontrol edilmelidir.

Hero Alanı Nedir?

Hero alanı, internet sayfasının üst kısmında yer alan geniş tanıtım bölümüdür.

Bu alanda genellikle:

Büyük görsel
Ana başlık
Alt açıklama
CTA butonu
Ürün veya hizmet mesajı

bulunur.

Hero alanındaki görsel veya metin çoğu zaman sayfanın LCP öğesi olur. Bu nedenle hero bölümünün yanlış yapılandırılması site genelinde yüksek LCP sorununa neden olabilir.

Özellikle şu kullanımlar dikkatle incelenmelidir:

Tam ekran slider
Büyük video arka planı
CSS arka plan görseli
Geç yüklenen başlık
JavaScript ile eklenen banner
Çok yüksek çözünürlüklü görsel
Mobilde masaüstü görselinin kullanılması

LCP Kaç Olmalıdır?

İyi kullanıcı deneyimi için hedef LCP değeri 2,5 saniye veya daha kısa olmalıdır.

Aralık	Durum	Genel yorum
0-2,5 saniye	İyi	Ana içerik hızlı görüntüleniyor
2,5-4 saniye	İyileştirme gerekiyor	Kullanıcı belirgin gecikme yaşayabilir
4 saniye üzeri	Yetersiz	Ana içerik geç görüntüleniyor

Değerlendirme tek bir test sonucuna göre değil, gerçek kullanıcı ziyaretlerinin yüzde 75’lik dilimine göre yapılır.

Örneğin ziyaretlerin:

Yüzde 60’ında LCP 2 saniye
Yüzde 15’inde LCP 2,4 saniye
Yüzde 25’inde LCP 5 saniye

ise kullanıcıların yüzde 75’i 2,5 saniye sınırı içerisinde kalabilir.

Ancak yavaş kullanıcı oranı arttığında 75. yüzdelik dilim değeri de yükselir ve sayfa Core Web Vitals değerlendirmesinde başarısız olabilir.

Neden Yüzde 75’lik Dilim Kullanılır?

Ortalama değerler, yavaş deneyim yaşayan kullanıcıları gizleyebilir.

Örneğin:

Hızlı internet kullanan 70 ziyaretçi: 1,5 saniye
Yavaş mobil bağlantı kullanan 30 ziyaretçi: 6 saniye

Ortalama değer yaklaşık 2,85 saniye olabilir. Ancak kullanıcıların önemli bir bölümü çok kötü deneyim yaşamaktadır.

Yüzde 75’lik dilim kullanılarak sayfanın kullanıcıların büyük çoğunluğunda iyi çalışıp çalışmadığı değerlendirilir.

Bu yaklaşım:

Farklı cihazları
Farklı internet hızlarını
Farklı coğrafi konumları
Düşük performanslı telefonları
Gerçek sunucu yoğunluğunu

daha gerçekçi biçimde yansıtır.

LCP Core Web Vitals Metriklerinden Biri midir?

Evet. LCP, üç temel Core Web Vitals metriğinden biridir.

Güncel temel metrikler şunlardır:

Metrik	Ölçtüğü alan
LCP	Yükleme performansı
INP	Kullanıcı etkileşimlerine yanıt verme hızı
CLS	Beklenmedik görsel kaymalar

LCP

Ana içeriğin ne kadar hızlı görüntülendiğini ölçer.

INP

Sayfanın tıklama, dokunma ve klavye etkileşimlerine ne kadar hızlı cevap verdiğini ölçer.

CLS

Sayfa yüklenirken oluşan beklenmedik düzen kaymalarını ölçer.

Bir sayfanın genel Core Web Vitals değerlendirmesini geçmesi için yeterli kullanıcı verisinin bulunduğu durumlarda üç metriğin de iyi aralıkta olması gerekir.

LCP SEO İçin Önemli midir?

LCP, kullanıcı deneyimini etkileyen önemli bir performans metriğidir.

Yüksek LCP değerine sahip sayfalarda kullanıcılar:

Ana içeriği geç görebilir.
Sayfanın çalışmadığını düşünebilir.
Geri butonuna basabilir.
Rakip siteye geçebilir.
Form veya satın alma sürecini başlatmayabilir.
Markaya duyduğu güveni kaybedebilir.

Google, sayfa deneyimi sistemlerinde Core Web Vitals verilerinden yararlanabilir. Ancak yalnızca iyi LCP puanına sahip olmak, sayfanın otomatik olarak üst sıralara çıkacağı anlamına gelmez.

SEO performansı ayrıca:

İçerik kalitesi
Arama niyeti
Teknik yapı
Site otoritesi
İç bağlantılar
Mobil uyumluluk
Güvenilirlik
Backlink profili

gibi çok sayıda faktörden etkilenir.

LCP optimizasyonu bir sıralama hilesi olarak değil, kullanıcıların sayfaya daha hızlı erişmesini sağlayan teknik iyileştirme olarak değerlendirilmelidir.

LCP Dönüşüm Oranını Etkiler mi?

LCP tek başına satış veya form sayısını belirlemez. Ancak ana içeriğin geç görüntülenmesi kullanıcıların sayfayı terk etmesine neden olabilir.

Özellikle şu sayfalarda LCP ticari sonuçlar açısından önemlidir:

Ürün sayfaları
Kategori sayfaları
Landing page’ler
Kampanya sayfaları
Teklif formları
Rezervasyon sayfaları
Mobil satış sayfaları

Örneğin kullanıcı bir reklamdan ürün sayfasına gelir ancak ürün görseli birkaç saniye görünmezse:

Reklamla sayfa arasında uyumsuzluk olduğunu düşünebilir.
Sayfayı boş sanabilir.
Geri dönerek reklam bütçesinin boşa gitmesine neden olabilir.

Bu nedenle LCP performansı yalnızca teknik puan değil, reklam ve dönüşüm verimliliği açısından da değerlendirilmelidir.

LCP ile FCP Arasındaki Fark

FCP, “First Contentful Paint” ifadesinin kısaltmasıdır. Sayfada ilk metin, görsel veya içerik öğesinin ne zaman görüntülendiğini ölçer.

LCP ise ilk görüntü alanındaki en büyük içerik öğesinin görüntülenme süresini ölçer.

Kriter	FCP	LCP
Açılım	First Contentful Paint	Largest Contentful Paint
Ölçüm	İlk içerik öğesi	En büyük içerik öğesi
Kullanıcı algısı	Sayfa çalışmaya başladı	Ana içerik göründü
Örnek	Logo veya küçük başlık	Hero veya ürün görseli
Core Web Vital	Hayır	Evet

Bir sayfanın FCP değeri iyi, LCP değeri kötü olabilir.

Örnek:

Logo: 1 saniyede görüntüleniyor
Ana banner: 5 saniyede görüntüleniyor

Bu durumda FCP yaklaşık 1 saniye, LCP ise 5 saniye olabilir.

LCP ile TTFB Arasındaki Fark

TTFB, “Time to First Byte” ifadesinin kısaltmasıdır. Kullanıcının sayfayı açmaya başlamasından tarayıcının sunucudan ilk HTML baytını almasına kadar geçen süreyi ölçer.

Kriter	TTFB	LCP
Ölçüm başlangıcı	Kullanıcı isteği	Kullanıcı isteği
Ölçüm sonu	İlk HTML baytı	En büyük içerik görüntülendiğinde
Odak	Sunucu ve ağ	Bütün yükleme zinciri
Etki alanı	Hosting, CDN, önbellek	Sunucu, görsel, CSS, JS ve render

TTFB yüksek olduğunda tarayıcı HTML belgesini geç almaya başlar. HTML geç geldiği için LCP görseli veya metni de geç keşfedilir.

PageSpeed Insights, TTFB için 800 milisaniye ve altını iyi olarak sınıflandırır. Ancak bu değer doğrudan Core Web Vitals metriği değildir; LCP sorunlarını teşhis etmeye yardımcı olan önemli bir ölçümdür.

LCP ile Speed Index Arasındaki Fark

Speed Index, sayfanın görünür bölümünün ne kadar hızlı tamamlandığını ölçmeye çalışan laboratuvar metriğidir.

Kriter	LCP	Speed Index
Ölçüm	En büyük görünür öğe	Genel görsel tamamlanma
Veri türü	Alan ve laboratuvar	Laboratuvar
Core Web Vital	Evet	Hayır
Kullanım	Ana içerik yükleme	Görsel yükleme ilerlemesi

Speed Index iyi olduğu hâlde büyük hero görseli geç yükleniyorsa LCP yetersiz olabilir.

LCP ile Load Time Aynı mı?

Hayır.

Load time, sayfanın load olayına kadar geçen toplam süreyi ifade edebilir. Ancak sayfada kullanıcı için önemli içerik bu olaydan önce veya sonra görüntülenebilir.

Örneğin:

Ana içerik 2 saniyede görüntülenebilir.
Alt kısımdaki analiz kodları 6 saniyede tamamlanabilir.

Bu durumda toplam yükleme süresi uzun görünse bile LCP iyi olabilir.

Tersi durumda:

Küçük dosyalar 1 saniyede yüklenebilir.
Ana banner JavaScript nedeniyle 5 saniyede gösterilebilir.

Sayfa teknik olarak bazı yükleme aşamalarını tamamlamış olsa da LCP kötü olabilir.

LCP Nasıl Ölçülür?

LCP iki temel veri türüyle ölçülebilir:

Alan verisi
Laboratuvar verisi

Alan Verisi Nedir?

Alan verisi, gerçek kullanıcıların gerçek cihaz, ağ ve coğrafi koşullarda yaşadığı performansı gösterir.

Alan verisi:

Gerçek telefonları
Yavaş internet bağlantılarını
Farklı ülkeleri
Sunucu yoğunluğunu
Kullanıcı önbelleklerini
Farklı tarayıcı koşullarını

kapsar.

Alan verisi kaynakları:

Chrome User Experience Report
PageSpeed Insights
Google Search Console
Web Vitals JavaScript kütüphanesi
Gerçek kullanıcı izleme sistemleri

SEO ve kullanıcı deneyimi değerlendirmesinde öncelik gerçek kullanıcı verilerine verilmelidir.

Laboratuvar Verisi Nedir?

Laboratuvar verisi, sayfanın belirli cihaz ve ağ koşulları taklit edilerek test edilmesidir.

Kullanılabilecek araçlar:

Lighthouse
PageSpeed Insights laboratuvar bölümü
Chrome DevTools
WebPageTest
Yerel performans testleri

Laboratuvar verisi:

Sorunun tekrar edilmesini
LCP öğesinin bulunmasını
Ağ isteklerinin incelenmesini
Kod değişikliklerinin karşılaştırılmasını
Performans darboğazlarının belirlenmesini

kolaylaştırır.

Alan ve Laboratuvar Verisi Arasındaki Fark

Kriter	Alan verisi	Laboratuvar verisi
Kullanıcı	Gerçek kullanıcı	Simüle edilmiş kullanıcı
Zaman	Geçmiş 28 günlük dönem	Test anı
Cihaz	Farklı gerçek cihazlar	Belirli cihaz profili
Ağ	Gerçek bağlantılar	Simüle edilen bağlantı
Kullanım	Gerçek deneyimi ölçmek	Sorunu teşhis etmek
Güncellenme	Zaman gerektirir	Anında
Değişkenlik	Kullanıcı koşullarına bağlı	Daha kontrollü

Laboratuvar testinde LCP 1,8 saniye, alan verisinde 4 saniye görülebilir.

Olası nedenler:

Test sunucuya yakın konumdan yapılıyordur.
Gerçek kullanıcılar yavaş mobil cihaz kullanıyordur.
Gerçek trafik farklı ülkelerden geliyordur.
Sunucu yoğun saatlerde yavaşlıyordur.
Test sırasında önbellek aktiftir.
Gerçek kullanıcılarda üçüncü taraf kodlar farklı çalışıyordur.

PageSpeed Insights hem laboratuvar hem de gerçek kullanıcı verisi sunar. Gerçek kullanıcı bölümü önceki 28 günlük deneyimi yansıtırken laboratuvar bölümü belirli koşullarda Lighthouse testi gerçekleştirir.

PageSpeed Insights ile LCP Nasıl Ölçülür?

PageSpeed Insights üzerinde:

Test edilecek URL girilir.
Mobil sonuçlar incelenir.
Masaüstü sonuçlar ayrıca açılır.
Core Web Vitals değerlendirmesi kontrol edilir.
Alan verisindeki LCP değeri incelenir.
Laboratuvar LCP sonucu karşılaştırılır.
LCP öğesi belirlenir.
Fırsatlar ve teşhisler değerlendirilir.

PageSpeed raporunun doğru yorumlanması için Google PageSpeed Insights rehberinden yararlanılabilir.

Search Console’da LCP Nasıl Kontrol Edilir?

Google Search Console içerisinde:

Deneyim bölümü açılır.
Core Web Vitals raporuna geçilir.
Mobil ve masaüstü raporları ayrı incelenir.
Yetersiz veya iyileştirme gereken URL grupları açılır.
Sorun türü kontrol edilir.
Örnek URL’ler incelenir.
Temsilî URL PageSpeed Insights ile test edilir.
Düzeltme sonrasında doğrulama başlatılır.

Search Console benzer sayfaları URL grupları hâlinde gösterebilir. Örneğin aynı şablonu kullanan yüzlerce ürün sayfasından yalnızca bazı örnekler listelenebilir.

Bir örnek URL’deki sorun, aynı şablonu kullanan bütün sayfalarda bulunabilir.

Search Console Core Web Vitals raporu gerçek kullanıcı verisini kullanır, mobil ve masaüstü performansını ayrı raporlar ve yeterli verisi olmayan URL’leri göstermeyebilir.

Arama performansı ve Core Web Vitals sorunlarını birlikte değerlendirmek için Google Search Console kullanılmalıdır.

Chrome DevTools ile LCP Öğesi Nasıl Bulunur?

Chrome geliştirici araçları kullanılarak LCP öğesi teknik olarak incelenebilir.

Genel süreç:

Sayfa Chrome’da açılır.
Geliştirici Araçları başlatılır.
Performance paneline geçilir.
Sayfa yenilenerek kayıt alınır.
Timings veya Web Vitals alanı incelenir.
LCP işareti seçilir.
İlgili element ve ağ isteği bulunur.
Kaynağın ne zaman keşfedildiği kontrol edilir.
Dosya indirme ve oluşturma gecikmeleri incelenir.

Ayrıca Network panelinde:

HTML yanıtı
CSS dosyaları
JavaScript dosyaları
LCP görseli
Web fontları

yüklenme sırasına göre analiz edilebilir.

LCP’nin Dört Ana Bölümü

LCP değeri dört temel zaman bölümüne ayrılabilir:

Time to First Byte
Kaynak yükleme gecikmesi
Kaynak yükleme süresi
Öğe oluşturma gecikmesi

LCP bölümü	Açıklama
TTFB	İlk HTML baytının alınmasına kadar geçen süre
Kaynak yükleme gecikmesi	HTML geldikten sonra LCP kaynağının indirilmeye başlanmasına kadar geçen süre
Kaynak yükleme süresi	LCP kaynağının indirilme süresi
Oluşturma gecikmesi	Kaynak indikten sonra öğenin ekranda gösterilmesine kadar geçen süre

Bu dört bölümün toplamı LCP süresini oluşturur. Google’ın optimizasyon rehberinde iyi yapılandırılmış sayfalarda gecikme bölümlerinin mümkün olduğunca sıfıra yaklaştırılması gerektiği belirtilir.

TTFB Süresi

TTFB, sunucunun ilk HTML yanıtını ne kadar hızlı verdiğini gösterir.

Yüksek TTFB nedenleri:

Yetersiz hosting
Yavaş veritabanı
Yoğun sunucu
Dinamik sayfa oluşturma
Çok sayıda eklenti
Önbellek eksikliği
Uzak sunucu konumu
Çok sayıda yönlendirme
Haricî API beklemeleri
Yanlış CDN yapılandırması

TTFB yüksekse görsel optimizasyonu tek başına yeterli olmaz. Tarayıcı HTML’yi geç aldığı için LCP kaynağını da geç keşfeder.

Kaynak Yükleme Gecikmesi

HTML alındıktan sonra LCP kaynağının ne kadar geç keşfedildiğini gösterir.

Kaynak yükleme gecikmesine neden olabilecek durumlar:

LCP görselinin JavaScript ile eklenmesi
Görselin CSS dosyası içerisinden çağrılması
LCP görselinde lazy load kullanılması
Slider’ın JavaScript sonrasında oluşturulması
Görselin düşük öncelikle yüklenmesi
Çok sayıda kritik kaynağın öncelik kazanması
Web fontunun geç keşfedilmesi

Amaç, LCP kaynağının HTML içerisinde mümkün olduğunca erken bulunmasını sağlamaktır.

Kaynak Yükleme Süresi

LCP kaynağının indirilmesi için gereken süredir.

Bu süreyi etkileyen faktörler:

Dosya boyutu
Görsel formatı
Görsel çözünürlüğü
Sunucu bant genişliği
CDN kullanımı
Kullanıcı bağlantısı
Önbellek politikası
Kaynağın başka alan adında bulunması

Büyük bir hero görseli 2 MB boyutundaysa yavaş mobil bağlantıda indirilmesi uzun sürebilir.

Öğe Oluşturma Gecikmesi

Kaynak tamamen indirildikten sonra öğenin ekranda görüntülenmesine kadar geçen süredir.

Nedenleri:

Ana iş parçacığını engelleyen JavaScript
Görselin animasyonla gizlenmesi
CSS’in geç uygulanması
İstemci tarafı render
Ağır DOM yapısı
Sayfa oluşturucu animasyonları
Yükleme ekranı
Görünürlük sınıfları
Web fontu beklemesi

Örneğin hero görseli 1,5 saniyede indirilmiş olabilir ancak JavaScript sınıfı eklenene kadar opacity: 0 olarak tutuluyorsa LCP 4 saniyeye çıkabilir.

LCP Neden Yüksek Çıkar?

Yüksek LCP’nin yaygın nedenleri şunlardır:

Yavaş sunucu yanıtı
Büyük hero görseli
LCP görselinde lazy load
CSS arka plan görselinin geç keşfedilmesi
Render engelleyen CSS
Ana iş parçacığını engelleyen JavaScript
Geç yüklenen web fontları
Çok sayıda yönlendirme
CDN eksikliği
Yanlış önbellek ayarları
JavaScript ile oluşturulan içerik
Ağır slider
Video arka planı
Üçüncü taraf reklam ve analiz kodları
Mobilde gereksiz büyük görsel
Sayfa oluşturucu eklentileri
Kullanılmayan CSS ve JavaScript
Ana içeriği gizleyen yükleme animasyonları

LCP Nasıl Optimize Edilir?

LCP optimizasyonu şu temel sırayla yapılmalıdır:

LCP öğesi belirlenir.
Gerçek kullanıcı verileri incelenir.
TTFB ölçülür.
LCP kaynağının ne zaman keşfedildiği kontrol edilir.
Kaynağın indirme süresi ölçülür.
Render gecikmesi araştırılır.
En yüksek etkiye sahip sorun düzeltilir.
Laboratuvar testi tekrarlanır.
Canlı kullanıcı verileri takip edilir.

Sunucu Yanıt Süresini Düşürün

Hızlı LCP için sunucunun HTML belgesini mümkün olduğunca erken göndermesi gerekir.

Uygulanabilecek yöntemler:

Daha güçlü hosting paketi kullanmak
Sunucu kaynaklarını artırmak
PHP sürümünü güncellemek
Veritabanını optimize etmek
Tam sayfa önbelleği kullanmak
Object cache kurmak
Gereksiz eklentileri kaldırmak
Sunucu konumunu hedef kitleye yaklaştırmak
Haricî API isteklerini azaltmak
Sunucu günlüklerini incelemek
Yönlendirme zincirlerini kaldırmak
CDN veya edge cache kullanmak

Tam Sayfa Önbelleği

Dinamik olarak oluşturulan HTML çıktısı önbelleğe alınarak sonraki kullanıcılara hazır biçimde sunulabilir.

Önbellek olmadan:

PHP çalışır.
Veritabanı sorguları yapılır.
Tema ve eklentiler yüklenir.
HTML oluşturulur.
Kullanıcıya gönderilir.

Tam sayfa önbelleğiyle birçok adım atlanabilir ve TTFB düşürülebilir.

Object Cache

Veritabanından sık kullanılan sonuçların bellekte tutulmasına yardımcı olur.

Özellikle:

WordPress
WooCommerce
Üyelik siteleri
Yoğun sorgulu sayfalar

için faydalı olabilir.

Redis veya Memcached gibi sistemler uygun sunucu yapılandırmasında kullanılabilir.

CDN Kullanın

CDN, statik dosyaları kullanıcıya coğrafi olarak daha yakın sunuculardan iletebilir.

CDN üzerinden:

Görseller
CSS
JavaScript
Fontlar
Video posterleri

sunulabilir.

CDN’nin LCP’ye olası katkıları:

Ağ gecikmesini azaltmak
Kaynak sunucu yükünü düşürmek
Görselleri edge sunuculardan iletmek
Önbellek kullanımını geliştirmek
Trafik yoğunluğunu dağıtmak

Ancak yanlış CDN yapılandırması ek DNS ve bağlantı gecikmesi oluşturabilir. Kritik LCP kaynağının mümkünse HTML belgesiyle aynı alan adı veya bağlantıyı yeniden kullanabilen CDN alanı üzerinden sunulması faydalıdır.

Yönlendirmeleri Azaltın

Kullanıcı sayfaya ulaşmadan önce birden fazla yönlendirmeden geçiyorsa TTFB ve LCP artar.

Zayıf yönlendirme zinciri:

http://site.com → https://site.com → https://www.site.com → https://www.site.com/tr/

Daha uygun yapı:

http://site.com → https://www.site.com/tr/

Reklam ve sosyal medya bağlantılarında gereksiz kısaltma veya takip yönlendirmeleri de yükleme başlangıcını geciktirebilir.

LCP Görselini Belirleyin

Optimizasyon öncesinde hangi görselin LCP öğesi olduğu doğrulanmalıdır.

Aşağıdakiler kontrol edilmelidir:

Masaüstündeki LCP öğesi
Mobildeki LCP öğesi
Farklı sayfa şablonları
Ürün sayfaları
Kategori sayfaları
Blog yazıları
Ana sayfa
Kampanya sayfaları

Masaüstünde banner, mobilde ise büyük başlık LCP öğesi olabilir.

Her şablon ayrı değerlendirilmelidir.

LCP Görselinde Lazy Load Kullanmayın

Lazy load, ekran dışında bulunan görsellerin kullanıcı o bölgeye yaklaştığında yüklenmesini sağlar.

Bu yöntem sayfanın altındaki görseller için faydalıdır. Ancak ilk görüntü alanındaki LCP görselinde kullanılması indirme başlangıcını geciktirir.

LCP görselinde şu kullanım bulunmamalıdır:

<img src="hero.webp" loading="lazy" alt="Örnek">

Daha uygun kullanım:

<img
  src="hero.webp"
  fetchpriority="high"
  loading="eager"
  alt="Örnek">

LCP görselinin lazy load ile yüklenmesi Google’ın resmî optimizasyon önerilerinde açık biçimde kaçınılması gereken uygulamalardan biridir.

WordPress optimizasyon eklentilerinde:

Hero görseli
Öne çıkarılan görsel
İlk ürün görseli
İlk slider resmi

lazy load işleminden hariç tutulmalıdır.

Fetch Priority Kullanın

fetchpriority="high" özelliği tarayıcıya belirli görselin yüksek öneme sahip olduğunu bildirir.

Örnek:

<img
  src="/images/hero.webp"
  fetchpriority="high"
  width="1600"
  height="900"
  alt="Kurumsal web tasarım hizmeti">

Bu özellik özellikle LCP olması beklenen tek bir görselde kullanılabilir.

Bütün görsellere yüksek öncelik verilmemelidir. Çok sayıda kaynağa fetchpriority="high" eklendiğinde kaynaklar birbirleriyle rekabet eder ve önceliklendirmenin faydası azalır.

LCP Kaynağını Önceden Yükleyin

LCP görseli CSS arka planı olarak kullanılıyorsa tarayıcı görseli ancak CSS dosyasını indirip analiz ettikten sonra keşfedebilir.

Bu durumda görsel önceden yüklenebilir:

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

Preload şu durumlarda değerlendirilebilir:

CSS arka plan görseli
Geç keşfedilen hero resmi
Kritik web fontu
JavaScript tarafından oluşturulan fakat kaçınılamayan LCP kaynağı

Her görsel önceden yüklenmemelidir. Gereksiz preload:

Bant genişliğini tüketebilir.
CSS ve JavaScript yüklemesini geciktirebilir.
Mobil performansı düşürebilir.
Tarayıcı öncelik sistemini bozabilir.

Görseli İlk HTML İçerisine Ekleyin

LCP görseli mümkünse ilk HTML yanıtında <img> etiketi olarak bulunmalıdır.

Zayıf yapı:

JavaScript çalışır.
API’den veri gelir.
Görsel URL’si oluşturulur.
DOM’a <img> eklenir.
Tarayıcı görseli indirmeye başlar.

Daha iyi yapı:

Görsel URL’si ilk HTML içinde bulunur.
Tarayıcının preload scanner sistemi kaynağı erken keşfeder.
Görsel hemen indirilmeye başlanır.

Google’ın LCP rehberi, LCP kaynağının ilk HTML belgesinden keşfedilebilir olmasını en etkili optimizasyonlardan biri olarak belirtir.

CSS Arka Planı Yerine IMG Kullanmayı Değerlendirin

Hero görselleri sıklıkla CSS background-image ile eklenir.

Örnek:

.hero {
  background-image: url('/images/hero.webp');
}

Bu yapı tasarım açısından kolay olabilir ancak tarayıcı görseli CSS dosyasını indirdikten sonra keşfedebilir.

Uygun projelerde görseli HTML içerisinde kullanmak daha erken keşif sağlayabilir:

<section class="hero">
  <img
    src="/images/hero.webp"
    fetchpriority="high"
    alt="Dijital pazarlama hizmetleri">
  <div class="hero-content">
    <h1>Dijital Pazarlama Hizmetleri</h1>
  </div>
</section>

Görsel CSS ile konumlandırılarak arka plan görünümü korunabilir.

Görselleri Sıkıştırın

LCP görselinin dosya boyutu mümkün olduğunca düşürülmelidir.

Optimizasyon yöntemleri:

Gereksiz kaliteyi azaltmak
Meta verileri kaldırmak
Doğru format kullanmak
Görseli gerçek görüntüleme boyutuna göre hazırlamak
Mobil ve masaüstü sürümler oluşturmak
Görsel CDN’si kullanmak
Otomatik sıkıştırma uygulamak

Ancak yalnızca görsel sıkıştırmak her zaman LCP’yi iyileştirmez. Görsel hızlı indirilmesine rağmen JavaScript tarafından gizleniyorsa kazanç render gecikmesine kayabilir.

Bu nedenle indirme ve oluşturma zinciri birlikte analiz edilmelidir.

WebP ve AVIF Kullanın

Modern görsel formatları benzer görüntü kalitesini daha küçük dosya boyutuyla sunabilir.

Format	Genel kullanım
JPEG	Fotoğraflar
PNG	Şeffaflık ve grafik
WebP	Modern ve geniş destekli sıkıştırma
AVIF	Yüksek sıkıştırma verimliliği
SVG	Logo ve vektörel grafik

WebP ve AVIF kullanılırken:

Görsel kalitesi
Tarayıcı desteği
Dönüştürme süresi
Sunucu kapasitesi
Fallback ihtiyacı

değerlendirilmelidir.

<picture> yapısıyla farklı formatlar sunulabilir:

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    fetchpriority="high"
    width="1600"
    height="900"
    alt="Örnek hero görseli">
</picture>

Doğru Görsel Boyutunu Sunun

Mobil cihazda 400 piksel genişliğinde gösterilen bir görselin 3000 piksel sürümünü indirmek gereksiz veri kullanımına neden olur.

Responsive görsel yapısı kullanılabilir:

<img
  src="/images/hero-1280.webp"
  srcset="
    /images/hero-480.webp 480w,
    /images/hero-768.webp 768w,
    /images/hero-1280.webp 1280w,
    /images/hero-1920.webp 1920w"
  sizes="100vw"
  fetchpriority="high"
  width="1920"
  height="1080"
  alt="Örnek görsel">

Tarayıcı cihaz genişliğine ve piksel yoğunluğuna göre uygun dosyayı seçebilir.

Mobil İçin Ayrı Hero Görseli Hazırlayın

Masaüstü için hazırlanan yatay ve geniş bir hero görseli mobilde verimsiz olabilir.

Mobil sürümde:

Daha dar kadraj
Daha düşük çözünürlük
Daha küçük dosya
Dikey veya kare oran
Daha az dekoratif detay

kullanılabilir.

<picture> ve media sorguları kullanılabilir:

<picture>
  <source
    media="(max-width: 767px)"
    srcset="/images/hero-mobile.webp">
  <img
    src="/images/hero-desktop.webp"
    fetchpriority="high"
    alt="Örnek">
</picture>

Mobil sayfa deneyiminin bütün teknik yönleriyle geliştirilmesi için mobil SEO çalışmaları uygulanabilir.

Görsel Boyutlarını HTML’de Belirtin

Görsellerde width ve height değerlerinin belirtilmesi tarayıcının görsel alanını önceden ayırmasına yardımcı olur.

Örnek:

<img
  src="/images/product.webp"
  width="800"
  height="800"
  alt="Ürün görseli">

Bu uygulama özellikle CLS değerinin iyileştirilmesine katkı sağlar. LCP açısından da tarayıcının düzeni daha erken hesaplamasına yardımcı olabilir.

Slider Kullanımını Azaltın

Ana sayfa slider’ları LCP sorunlarının yaygın nedenlerindendir.

Olası problemler:

Birden fazla büyük görsel indirilir.
İlk slayt JavaScript sonrasında görünür.
Görseller lazy load ile geciktirilir.
Slider kütüphanesi ana iş parçacığını kullanır.
İlk görsel düşük öncelikle yüklenir.
Görseller animasyon tamamlanana kadar gizlenir.
Mobilde gereksiz büyük dosyalar kullanılır.

Slider yerine:

Tek statik hero görseli
Hafif CSS geçişi
Basit metin ve CTA
Mobilde sabit görsel

kullanmak daha iyi performans sağlayabilir.

Slider gerekli ise:

Yalnızca ilk görsel yüksek öncelikle yüklenmeli.
Diğer slaytlar lazy load edilmelidir.
İlk slayt HTML’de bulunmalıdır.
İlk slayt opacity: 0 ile bekletilmemelidir.
Gereksiz JavaScript azaltılmalıdır.
Mobilde farklı tasarım kullanılmalıdır.

Video Arka Planlarını Dikkatli Kullanın

Hero bölümünde otomatik oynatılan video:

Büyük dosya indirebilir.
Mobil veri tüketimini artırabilir.
Ana iş parçacığını meşgul edebilir.
Video posterini geç gösterebilir.
LCP ve enerji kullanımını olumsuz etkileyebilir.

Alternatifler:

Hafif poster görseli
Kullanıcı tıklayınca açılan video
Kısa ve düşük boyutlu video
Mobilde statik görsel
Video dosyasını görüntü alanı sonrasında yükleme

Video poster görseli LCP öğesi olabileceği için ayrıca optimize edilmelidir.

Render Engelleyen CSS’i Azaltın

Tarayıcı sayfayı görüntülemeden önce bazı CSS dosyalarını indirmek ve analiz etmek zorunda kalabilir.

Sorun oluşturabilecek durumlar:

Büyük tema CSS dosyaları
Kullanılmayan sayfa oluşturucu stilleri
Birden fazla eklenti CSS’i
Haricî font stilleri
Sayfada kullanılmayan framework kodları
CSS dosyalarının uzun zincirlerle çağrılması

Uygulanabilecek yöntemler:

Kritik CSS’i satır içine almak
Kritik olmayan CSS’i geciktirmek
Kullanılmayan CSS’i kaldırmak
CSS dosyalarını sayfa bazında yüklemek
Minify uygulamak
Gereksiz tema özelliklerini kapatmak
Eklenti varlıklarını yalnızca gerekli sayfalarda çalıştırmak

Critical CSS Nedir?

Critical CSS, sayfanın ilk görüntü alanını oluşturmak için gereken temel CSS kodudur.

Kritik CSS doğrudan HTML içerisinde sunularak:

Tarayıcının dış CSS dosyasını beklemeden üst alanı oluşturması
FCP ve LCP sürelerinin kısalması
Render engelleme süresinin azalması

sağlanabilir.

Ancak hatalı kritik CSS:

Tasarım kaymasına
İçeriğin biçimsiz görünmesine
Tekrarlanan CSS’e
HTML boyutunun büyümesine
Önbellek verimliliğinin düşmesine

neden olabilir.

Kullanılmayan CSS’i Azaltın

Bir sayfa yalnızca birkaç bileşen kullanırken tema veya page builder bütün stil dosyalarını yükleyebilir.

Örnekler:

Kullanılmayan slider stilleri
WooCommerce CSS’i
İletişim formu stilleri
İkon kütüphaneleri
Animasyon sınıfları
Pop-up stilleri

Kullanılmayan CSS’in azaltılması:

İndirme miktarını
CSS analiz süresini
Render gecikmesini

düşürebilir.

JavaScript’i Optimize Edin

JavaScript, LCP kaynağının keşfedilmesini veya ekranda oluşturulmasını geciktirebilir.

Sorun oluşturabilecek JavaScript türleri:

Büyük page builder dosyaları
Slider kütüphaneleri
Pop-up sistemleri
Sohbet araçları
Reklam kodları
Isı haritası yazılımları
Sosyal medya embed kodları
A/B test araçları
Ağır animasyonlar
İstemci tarafı render sistemleri

Uygulanabilecek yöntemler:

Gereksiz JavaScript’i kaldırmak
Dosyaları defer ile yüklemek
Kritik olmayan kodları geciktirmek
Kod bölme uygulamak
Kullanılmayan kütüphaneleri kaldırmak
Üçüncü taraf etiketleri kullanıcı etkileşimine kadar ertelemek
Uzun görevleri azaltmak
Sunucu tarafı render kullanmak

Defer ve Async Arasındaki Fark

Özellik	Defer	Async
HTML analizi	Devam eder	Devam eder
Çalıştırma sırası	Belge sırasını korur	İndirme tamamlanınca çalışır
Uygun kullanım	Birbirine bağlı scriptler	Bağımsız scriptler
DOM bekleme	HTML analizi sonrasında	Beklemeyebilir

Kritik olmayan, DOM’a bağlı scriptlerde defer daha güvenli olabilir.

Her JavaScript dosyasına otomatik olarak defer veya delay uygulamak sitenin işlevlerini bozabilir. Sepet, menü, form ve ödeme işlevleri mutlaka test edilmelidir.

İstemci Tarafı Render’ı Azaltın

Bazı JavaScript uygulamalarında ilk HTML neredeyse boş gelir. Ana içerik JavaScript çalıştıktan sonra oluşturulur.

Bu süreç:

HTML’nin gelmesi
JavaScript’in indirilmesi
JavaScript’in analiz edilmesi
API verilerinin alınması
DOM’un oluşturulması
LCP öğesinin görüntülenmesi

aşamalarını gerektirir.

Alternatif yaklaşımlar:

Server-side rendering
Static site generation
Streaming SSR
Prerender
Kritik içeriği ilk HTML’e eklemek

olabilir.

Sunucu tarafı render TTFB’yi artırabilecek ek işlem gerektirebilir. Bu nedenle sunucu ve render dengesi proje bazında test edilmelidir.

LCP Öğesini Animasyonla Gizlemeyin

Bazı tasarımlarda içerik başlangıçta:

opacity: 0;
visibility: hidden;

olarak tutulur ve JavaScript sonrasında gösterilir.

Bu durumda görsel indirilmiş olsa bile kullanıcı tarafından görünmediği için LCP gerçekleşmez.

Sorunlu örnekler:

Fade-in hero
Sayfa açılış animasyonu
Loading overlay
İçeriği gizleyen preloader
Scroll kütüphanesi
Slider başlangıç animasyonu

LCP öğesi mümkün olduğunca indirme tamamlandığında hemen görünür olmalıdır.

Preloader Kullanımını Yeniden Değerlendirin

Sayfa yüklenene kadar bütün ekranı kaplayan preloader kullanıcıya hareketli bir animasyon gösterebilir ancak gerçek ana içeriği gizler.

Bu yaklaşım:

LCP’yi geciktirebilir.
Sayfayı olduğundan yavaş hissettirebilir.
Kullanıcının içeriğe erişimini engelleyebilir.
JavaScript hatasında ekranı tamamen kapatabilir.

Preloader yerine içerik aşamalı olarak gösterilebilir.

Web Fontlarını Optimize Edin

LCP öğesi büyük bir metin bloğuysa web fontları LCP süresini etkileyebilir.

Sorunlar:

Fontun haricî alan adından gelmesi
Çok fazla font ailesi
Çok sayıda kalınlık
Büyük font dosyaları
Fontun CSS içinden geç keşfedilmesi
Metnin font gelene kadar gizlenmesi

Uygulanabilecek yöntemler:

Fontları yerel sunmak
WOFF2 formatı kullanmak
Gereksiz font ağırlıklarını kaldırmak
Kritik fontu preload etmek
Font alt kümesi oluşturmak
Sistem fontu kullanmak
font-display ayarını düzenlemek
Haricî font alanına preconnect uygulamak

Font Display Kullanın

font-display özelliği font yüklenirken metnin nasıl gösterileceğini belirler.

Örnek:

@font-face {
  font-family: 'KurumsalFont';
  src: url('/fonts/kurumsal.woff2') format('woff2');
  font-display: swap;
}

swap kullanıldığında özel font yüklenene kadar alternatif font gösterilebilir. Bu yaklaşım görünmez metin süresini azaltabilir.

Ancak alternatif ve özel font ölçüleri çok farklıysa CLS oluşabilir. Benzer metriklere sahip fallback font seçilmelidir.

Font Dosyalarını Azaltın

Bir sitede şu fontların tamamını yüklemek gereksiz olabilir:

Regular
Medium
SemiBold
Bold
ExtraBold
Light
Italic
Bold Italic

Yalnızca gerçekten kullanılan ağırlıklar yüklenmelidir.

Değişken fontlar uygun projelerde birden fazla ağırlığı tek dosyada sunabilir ancak dosya boyutu ve tarayıcı kullanımı test edilmelidir.

Üçüncü Taraf Kodları Azaltın

Üçüncü taraf kodlar:

Ana iş parçacığını meşgul edebilir.
Ağ bağlantıları oluşturabilir.
JavaScript çalıştırabilir.
LCP öğesinin render edilmesini geciktirebilir.

Yaygın üçüncü taraflar:

Reklam kodları
Chat araçları
Sosyal medya widget’ları
Isı haritaları
Video embed kodları
A/B test yazılımları
Haricî form sistemleri
Çok sayıda analiz etiketi

Her etiket için şu sorular sorulmalıdır:

Gerçekten kullanılıyor mu?
Bütün sayfalarda çalışması gerekiyor mu?
Kullanıcı etkileşiminden sonra yüklenebilir mi?
Daha hafif alternatif var mı?
Ticari değeri performans maliyetinden yüksek mi?

Google Tag Manager Etiketlerini Kontrol Edin

Google Tag Manager üzerinden çok sayıda üçüncü taraf etiketi bütün sayfalarda çalıştırılıyorsa performans etkilenebilir.

GTM denetiminde:

Kullanılmayan etiketler kaldırılmalı.
Reklam etiketleri doğru sayfalarda çalıştırılmalı.
Chat veya ısı haritası kodları geciktirilmeli.
Çift kurulumlar bulunmalı.
Özel HTML etiketleri incelenmeli.
İzin yönetimiyle gereksiz erken yükleme önlenmelidir.

Kaynaklara Preconnect Uygulayın

LCP görseli veya font farklı bir alan adından geliyorsa tarayıcının önceden bağlantı kurması sağlanabilir.

<link rel="preconnect" href="https://cdn.ornek.com" crossorigin>

Preconnect:

DNS çözümleme
TCP bağlantısı
TLS görüşmesi

gibi işlemleri erken başlatabilir.

Yalnızca kritik ve gerçekten kullanılacak birkaç kaynak için uygulanmalıdır.

Tarayıcı Önbelleğini Kullanın

Statik dosyalarda uygun Cache-Control ayarları kullanıldığında tekrar ziyaret eden kullanıcılar kaynakları önbellekten alabilir.

Önbelleğe alınabilecek kaynaklar:

Görseller
CSS
JavaScript
Fontlar
Logolar
İkonlar

Dosya isimlerinde sürüm veya hash kullanılarak uzun süreli önbellek güvenli biçimde uygulanabilir.

Örnek:

hero.a8c9f2.webp

Dosya değiştiğinde isim de değişir ve tarayıcı yeni sürümü indirir.

Brotli veya Gzip Sıkıştırması Kullanın

HTML, CSS, JavaScript ve SVG gibi metin tabanlı dosyalar sunucu üzerinden sıkıştırılabilir.

Brotli veya Gzip:

Aktarılan veri miktarını azaltabilir.
CSS ve JavaScript indirme süresini düşürebilir.
İlk HTML yanıtının daha hızlı gelmesine katkı sağlayabilir.

JPEG, WebP ve AVIF gibi zaten sıkıştırılmış görsellerde ek Gzip faydası sınırlı olabilir.

HTTP/2 veya HTTP/3 Kullanın

Modern bağlantı protokolleri çok sayıda kaynağın daha verimli aktarılmasını destekleyebilir.

Ancak yalnızca HTTP/2 veya HTTP/3 kullanmak yüksek LCP sorununu otomatik çözmez.

Büyük görsel, geç kaynak keşfi veya ağır JavaScript devam ediyorsa protokol değişimi sınırlı fayda sağlar.

DOM Boyutunu Azaltın

Çok büyük DOM yapısı:

Stil hesaplamasını
Düzen oluşturmayı
JavaScript işlemlerini
Render süresini

artırabilir.

DOM büyüklüğünü artıran unsurlar:

İç içe çok sayıda page builder bölümü
Gereksiz wrapper öğeleri
Büyük mega menüler
Gizli mobil ve masaüstü kopyaları
Çok sayıda ürün kartı
Sayfa üzerinde görünmeyen modal içerikler
Aşırı widget kullanımı

İlk görüntü alanındaki yapı mümkün olduğunca sade tutulmalıdır.

LCP Görselini Başka Bir Alan Adından Sunarken Dikkat Edin

Kritik görsel farklı alan adından geliyorsa tarayıcı yeni bağlantı kurmak zorundadır.

Örnek:

HTML: www.site.com
Görsel: images.thirdpartycdn.com

Ek işlemler:

DNS sorgusu
TCP bağlantısı
TLS bağlantısı
Kaynak isteği

LCP gecikmesine eklenebilir.

Çözümler:

Preconnect kullanmak
CDN’yi alt alan adıyla yapılandırmak
Görselleri ana alanla aynı bağlantı altyapısından sunmak
Gereksiz yönlendirmeleri kaldırmak
CDN cache durumunu kontrol etmek

LCP Optimizasyonunda Öncelik Sırası

Öncelik	Kontrol
Yüksek	LCP öğesini doğru belirlemek
Yüksek	Sunucu yanıt süresini düşürmek
Yüksek	LCP görselinden lazy load kaldırmak
Yüksek	Kaynağı ilk HTML’de görünür yapmak
Yüksek	Görsele fetchpriority vermek
Yüksek	Büyük dosyayı küçültmek
Orta	Kritik CSS düzenlemek
Orta	JavaScript render gecikmesini azaltmak
Orta	Web fontlarını optimize etmek
Orta	CDN ve önbellek kullanmak
Düşük	Küçük dekoratif dosyaları düzenlemek

Her projede öncelik sırası değişebilir. İlk olarak en uzun gecikmeyi oluşturan bölüm düzeltilmelidir.

WordPress’te LCP Neden Yüksek Olur?

WordPress sitelerde yüksek LCP’nin yaygın nedenleri:

Ağır tema
Çok sayıda eklenti
Elementor veya benzeri page builder
Büyük öne çıkarılan görsel
Hero slider
Otomatik lazy load
Optimize edilmemiş Google Fonts
Önbellek eksikliği
Yetersiz hosting
WooCommerce sorguları
Pop-up ve canlı destek kodları
Kullanılmayan CSS
Çok sayıda JavaScript dosyası
Görsel optimizasyon eksikliği

WordPress LCP Optimizasyonu Nasıl Yapılır?

Hosting Performansını Kontrol Edin

WordPress sayfasının oluşturulması uzun sürüyorsa:

PHP sürümü
İşlemci
RAM
Disk performansı
Veritabanı
Eş zamanlı kullanıcı kapasitesi
Sunucu konumu

incelenmelidir.

Ucuz ve yoğun paylaşımlı hosting paketlerinde TTFB yüksek olabilir.

Önbellek Eklentisi Kullanın

Uygun bir önbellek çözümüyle:

Sayfa cache
Tarayıcı cache
CSS küçültme
JavaScript erteleme
Kritik CSS
Lazy load
Preload
Veritabanı temizleme

işlemleri yapılabilir.

Ancak bütün özellikler aynı anda açılmamalıdır. Her düzenleme sonrasında site işlevleri ve LCP tekrar test edilmelidir.

LCP Görselini Lazy Load’dan Hariç Tutun

Optimizasyon eklentileri bütün görsellere otomatik lazy load uygulayabilir.

Hariç tutulabilecek bilgiler:

Görsel URL’si
CSS sınıfı
HTML ID değeri
İlk görsel sayısı
Hero element seçicisi

LCP öğesi farklı sayfalarda değişiyorsa şablon bazlı kurallar oluşturulmalıdır.

Öne Çıkarılan Görseli Optimize Edin

Blog yazılarında öne çıkarılan görsel LCP olabilir.

Yapılabilecekler:

Uygun boyuta küçültmek
WebP veya AVIF oluşturmak
Kaliteyi optimize etmek
Lazy load’dan çıkarmak
Fetch priority eklemek
Mobil boyut üretmek
Görseli CDN’den sunmak
Gereksiz animasyonu kaldırmak

Elementor Hero Alanını Kontrol Edin

Elementor veya benzeri page builder sistemlerinde hero görseli:

CSS arka planı
Slider
Motion effect
Entrance animation
Görsel widget’ı
Container arka planı

olarak eklenebilir.

LCP için:

Entrance animation kapatılabilir.
Slider yerine tek görsel kullanılabilir.
Arka plan yerine Image widget değerlendirilebilir.
Hero görseli preload edilebilir.
İlk bölümde gereksiz widget sayısı azaltılabilir.
Kullanılmayan Elementor CSS ve JS dosyaları azaltılabilir.

WordPress Tema ve Eklentilerini Temizleyin

Kullanılmayan eklentiler devre dışı bırakılmakla kalmayıp uygun durumlarda kaldırılmalıdır.

Kontrol edilebilecek eklentiler:

Slider
Pop-up
İstatistik
Güvenlik
Sosyal paylaşım
İkon
Form
Chat
Yedekleme
Görsel optimizasyon

Aynı işlevi yapan birden fazla eklenti gereksiz dosya yükleyebilir.

WordPress Cron ve Arka Plan İşlemlerini İnceleyin

Yoğun arka plan görevleri sunucu performansını etkileyebilir.

Örnekler:

Yedekleme
Görsel dönüştürme
Ürün senkronizasyonu
İçe aktarma
Güvenlik taraması
E-posta gönderimi
Veritabanı temizleme

Bu görevler yoğun trafik saatleri dışında çalıştırılabilir.

WooCommerce LCP Optimizasyonu

WooCommerce sitelerde LCP öğesi çoğu zaman:

Ana ürün görseli
Kategori banner’ı
Kampanya slider’ı
Ürün başlığı

olur.

Yapılabilecekler:

İlk ürün görselini lazy load’dan çıkarmak
Galeri görsellerini sonradan yüklemek
Ürün görsellerini uygun boyutta sunmak
Kategori banner’larını sıkıştırmak
Sepet parçacıklarını optimize etmek
Gereksiz varyasyon scriptlerini azaltmak
Ürün sorgularını önbelleğe almak
CDN kullanmak
Mobil kategori tasarımını sadeleştirmek

Ürün Galerisi

İlk ürün görseli yüksek öncelikle yüklenebilir. Diğer galeri görselleri lazy load ile indirilebilir.

Kategori Sayfaları

İlk görüntü alanında çok sayıda ürün resmi bulunuyorsa tarayıcı bant genişliği farklı görseller arasında bölünebilir.

Çözümler:

Yalnızca ilk görünür ürünleri eager yüklemek
Diğer ürünleri lazy load yapmak
Ürün görsel boyutlarını küçültmek
Kategori banner’ını sadeleştirmek
Sonsuz kaydırmayı dikkatli kullanmak

Blog Sitelerinde LCP Optimizasyonu

Blog sayfalarında LCP genellikle:

Öne çıkarılan görsel
H1 başlığı
Üst reklam alanı
Büyük yazar kutusu

olabilir.

Öneriler:

Öne çıkarılan görseli doğru boyutta sunmak
İlk görselde lazy load kullanmamak
Reklam alanını ana içeriğin üstünde geciktirmemek
Web fontlarını optimize etmek
Başlık animasyonlarını kaldırmak
Üst bölümdeki sosyal medya scriptlerini geciktirmek
Mobil menü kodlarını hafifletmek

Haber Sitelerinde LCP Optimizasyonu

Haber sitelerinde:

Büyük haber görseli
Reklam alanı
Video embed
Başlık alanı

LCP olabilir.

Yüksek LCP nedenleri:

Reklam açık artırmalarının beklenmesi
Çok sayıda analiz etiketi
Haricî video oynatıcı
Büyük görseller
Dinamik öneri alanları
JavaScript ile oluşturulan içerik

Haber içeriği ve ana görsel reklam kodlarından bağımsız biçimde mümkün olduğunca erken gösterilmelidir.

LCP Öğesine Göre Optimizasyon

LCP öğesi	Temel optimizasyon
Hero görseli	Lazy load kaldırma, fetchpriority, sıkıştırma
CSS arka planı	Preload veya img kullanımına geçiş
Ürün görseli	Responsive boyut, eager load, CDN
Başlık metni	Font optimizasyonu ve render engelleme azaltma
Video posteri	Poster sıkıştırma ve erken keşif
Slider	İlk slaytı HTML’de sunma, diğerlerini lazy load
JavaScript içerik	SSR veya ilk HTML’e ekleme

Görsel LCP Sorunu Örneği

Başlangıç durumu:

TTFB: 900 ms
Görsel keşfi: 2 saniye
Görsel indirme: 1,5 saniye
Render gecikmesi: 500 ms
Toplam LCP: 4 saniye

Yapılanlar:

Tam sayfa cache ile TTFB 500 ms’ye düşürüldü.
LCP görselinden lazy load kaldırıldı.
fetchpriority="high" eklendi.
Görsel WebP’ye çevrildi.
Mobil görsel ayrı oluşturuldu.
Fade-in animasyonu kaldırıldı.

Yeni durum:

TTFB: 500 ms
Görsel keşfi: 650 ms
Görsel indirme: 700 ms
Render gecikmesi: 150 ms
Toplam LCP: 1,5 saniye

Metin LCP Sorunu Örneği

Ana başlık LCP öğesi olsun.

Sorunlar:

Font haricî sunucudan yükleniyor.
Üç farklı font ağırlığı çağrılıyor.
font-display ayarı yok.
Metin özel font gelene kadar görünmüyor.
CSS dosyası 300 KB.

Çözümler:

Font WOFF2 olarak yerel sunulur.
Yalnızca kullanılan ağırlıklar bırakılır.
Kritik font preload edilir.
font-display: swap kullanılır.
Kullanılmayan CSS kaldırılır.
Sistem fontuna yakın fallback belirlenir.

LCP Optimizasyonu Sonrası Ne Zaman Sonuç Görülür?

Laboratuvar sonucu değişiklik sonrasında hemen test edilebilir.

Ancak gerçek kullanıcı verileri:

Son 28 günlük dönemi kapsar.
Yeni veriler geldikçe kademeli değişir.
Trafik miktarına bağlıdır.
Search Console’da gecikmeli güncellenebilir.

Bu nedenle düzeltme sonrasında:

PageSpeed laboratuvar testi hemen yapılır.
GA4 veya RUM sistemiyle canlı LCP takip edilir.
Search Console raporu sonraki haftalarda izlenir.
Mobil ve masaüstü ayrı değerlendirilir.
URL gruplarındaki değişim kontrol edilir.

Tek günlük iyi sonuçla optimizasyon tamamlanmış kabul edilmemelidir.

LCP Testleri Neden Farklı Sonuç Verir?

Aynı sayfa farklı testlerde farklı LCP değeri gösterebilir.

Nedenler:

Test konumu
Sunucu yoğunluğu
Ağ hızı
Cihaz gücü
Önbellek
CDN cache durumu
Haricî API yanıtları
Reklam kodları
A/B test varyasyonları
Dinamik içerikler
Kullanıcı izinleri

Sağlıklı değerlendirme için:

Birden fazla test yapılmalı
Ortalama ve medyan değerler incelenmeli
Mobil öncelikli analiz yapılmalı
Alan verisi esas alınmalı
Aynı test koşulları kullanılmalıdır

LCP Optimizasyonunda Yapılan Hatalar

Yalnızca Görseli Sıkıştırmak

Sorun kaynak keşfi veya render gecikmesiyse görsel küçültme yeterli olmaz.

Bütün Görsellere Preload Uygulamak

Kaynak rekabeti artar ve kritik görsel yavaşlayabilir.

Bütün Görsellere Fetch Priority Vermek

Yüksek öncelik anlamını kaybeder.

LCP Görselini Lazy Load Etmek

Görselin yüklenme başlangıcı gecikir.

Sadece Masaüstünü Test Etmek

Mobil kullanıcı sorunları gözden kaçar.

Tek PageSpeed Puanına Odaklanmak

Gerçek kullanıcı verileri ve LCP öğesi incelenmez.

Alan Verisini Beklemeden Başarısız Olduğunu Düşünmek

CrUX verisinin güncellenmesi zaman alır.

Bütün JavaScript’i Geciktirmek

Menü, sepet, form ve ödeme işlevleri bozulabilir.

Slider’ı Optimize Etmek Yerine Daha Fazla Eklenti Kurmak

Eklenti sayısı ve JavaScript yükü artabilir.

Font Preload’u Aşırı Kullanmak

Kullanılmayan fontlar kritik kaynaklarla rekabet eder.

LCP Öğesini Animasyonla Gizlemek

Kaynak inmiş olsa bile ekranda geç görüntülenir.

Doğru ve Yanlış LCP Optimizasyonu

Yanlış yaklaşım	Doğru yaklaşım
Bütün görselleri lazy load etmek	LCP görselini eager yüklemek
Her görseli preload etmek	Yalnızca kritik kaynağı preload etmek
Sadece dosya boyutuna bakmak	Dört LCP bölümünü incelemek
Masaüstü sonucunu yeterli görmek	Mobil ve masaüstünü ayrı analiz etmek
Tek laboratuvar testine güvenmek	Alan verisiyle karşılaştırmak
Slider’ın bütün görsellerini yüklemek	İlk görseli önceliklendirmek
Görseli JavaScript ile eklemek	İlk HTML’de sunmak
Ağır fontların tamamını yüklemek	Kullanılan fontları optimize etmek
LCP öğesine fade-in uygulamak	Kaynak gelince hemen göstermek
Puan için site işlevini bozmak	Performans ve işlevi birlikte test etmek

LCP Optimizasyon Kontrol Listesi

Kontrol alanı	Yapılması gereken
Alan verisi	Gerçek kullanıcı LCP’si incelenmeli
Mobil	Mobil ve masaüstü ayrı kontrol edilmeli
LCP öğesi	Her şablonda doğru element belirlenmeli
TTFB	Sunucu yanıt süresi düşürülmeli
Yönlendirme	Gereksiz zincirler kaldırılmalı
HTML	LCP kaynağı ilk HTML’de bulunmalı
Lazy load	LCP görselinden kaldırılmalı
Fetch priority	Kritik görsele yüksek öncelik verilmeli
Preload	Geç keşfedilen kritik kaynakta kullanılmalı
Görsel boyutu	Görüntüleme ölçüsüne uygun olmalı
Format	WebP veya AVIF değerlendirilmelidir
Responsive	Mobil ve masaüstü sürümleri hazırlanmalı
CDN	Kritik kaynaklar yakın sunucudan iletilmeli
Cache	HTML ve statik dosyalar önbelleğe alınmalı
CSS	Render engelleyen dosyalar azaltılmalı
Critical CSS	İlk görüntü alanı önceliklendirilmeli
JavaScript	Gereksiz kodlar kaldırılmalı
Render	LCP öğesi animasyonla gizlenmemeli
Font	WOFF2, preload ve font-display incelenmeli
Üçüncü taraf	Reklam ve analiz kodları azaltılmalı
WordPress	Tema ve eklenti yükleri denetlenmeli
Test	Değişiklik sonrası laboratuvar testi yapılmalı
Doğrulama	Canlı kullanıcı verileri takip edilmeli

Largest Contentful Paint Hakkında Sıkça Sorulan Sorular

Largest Contentful Paint nedir?

Largest Contentful Paint, kullanıcının sayfayı açmasından ilk görüntü alanındaki en büyük içerik öğesinin görüntülenmesine kadar geçen süreyi ölçen Core Web Vitals metriğidir.

LCP neyin kısaltmasıdır?

LCP, Largest Contentful Paint ifadesinin kısaltmasıdır.

LCP Türkçede ne demektir?

En Büyük İçerikli Boyama veya En Büyük İçerik Oluşturma Süresi olarak ifade edilebilir.

İyi LCP değeri kaçtır?

İyi LCP değeri 2,5 saniye veya daha kısadır.

LCP 3 saniye iyi mi?

2,5-4 saniye aralığı iyileştirme gerekiyor olarak değerlendirilir. Bu nedenle 3 saniyelik LCP geliştirilebilir.

LCP 4 saniye kötü mü?

4 saniyenin üzerindeki değerler yetersiz kabul edilir. Tam 4 saniye sınırda, iyileştirme gereken aralıktadır.

LCP neden önemlidir?

Kullanıcının sayfadaki ana içeriği ne kadar hızlı gördüğünü gösterir ve algılanan yükleme deneyimini yansıtır.

LCP bir sıralama faktörü müdür?

LCP, Core Web Vitals ve sayfa deneyimi sistemlerinin parçasıdır. Ancak tek başına yüksek sıralama garanti etmez.

LCP öğesi nedir?

Sayfanın ilk görüntü alanındaki en büyük görünür görsel, video poster veya metin bloğudur.

LCP öğesi nasıl bulunur?

PageSpeed Insights, Lighthouse veya Chrome DevTools Performance paneli kullanılabilir.

LCP öğesi her cihazda aynı mı?

Hayır. Mobil ve masaüstü tasarım farklı olduğunda LCP öğesi de değişebilir.

LCP görseli nedir?

Tarayıcının Largest Contentful Paint öğesi olarak belirlediği büyük ve görünür görseldir.

LCP görseli lazy load edilmeli mi?

Hayır. İlk görüntü alanındaki LCP görseli lazy load işleminden hariç tutulmalıdır.

Fetchpriority high ne işe yarar?

Tarayıcıya belirli kaynağın yüksek öneme sahip olduğu yönünde ipucu verir. LCP olması beklenen kritik görselde kullanılabilir.

Bütün görsellere fetchpriority high eklenir mi?

Hayır. Çok sayıda kaynağa yüksek öncelik vermek önceliklendirme sistemini etkisiz hâle getirebilir.

LCP görseli preload edilmeli mi?

Görsel geç keşfediliyorsa preload faydalı olabilir. İlk HTML’de erken bulunan her görsel için zorunlu değildir.

CSS arka plan görseli LCP olabilir mi?

Evet. CSS url() ile yüklenen görünür arka plan görselleri LCP adayı olabilir.

LCP görseli kaç KB olmalıdır?

Bütün siteler için tek bir dosya boyutu yoktur. Görsel kaliteyi koruyarak mümkün olan en düşük boyutta ve doğru çözünürlükte sunulmalıdır.

WebP LCP’yi düşürür mü?

Dosya boyutunu azaltarak yükleme süresine katkı sağlayabilir. Ancak kaynak geç keşfediliyorsa veya render engelleniyorsa tek başına yeterli olmayabilir.

AVIF mi WebP mi kullanılmalıdır?

AVIF daha yüksek sıkıştırma sağlayabilir; WebP ise güçlü uyumluluk ve hızlı dönüştürme sunabilir. Görsel türü ve altyapıya göre test yapılmalıdır.

CDN LCP’yi iyileştirir mi?

Kaynakları kullanıcıya yakın sunuculardan ileterek indirme süresini azaltabilir. Yanlış yapılandırılan CDN ek gecikme oluşturabilir.

Hosting LCP’yi etkiler mi?

Evet. Yavaş sunucu yanıtı TTFB’yi ve dolayısıyla bütün LCP zincirini geciktirebilir.

TTFB ile LCP aynı mı?

Hayır. TTFB ilk HTML baytının alınma süresidir. LCP ana içerik öğesinin görüntülenme süresidir.

FCP ile LCP aynı mı?

Hayır. FCP ilk içerik öğesini, LCP en büyük görünür içerik öğesini ölçer.

CLS ile LCP arasındaki fark nedir?

LCP yükleme hızını, CLS ise beklenmedik görsel kaymaları ölçer.

INP ile LCP arasındaki fark nedir?

LCP yükleme performansını, INP kullanıcı etkileşimlerine verilen yanıt hızını ölçer.

PageSpeed puanı ile LCP aynı mı?

Hayır. PageSpeed performans puanı farklı laboratuvar metriklerinin birleşimidir. LCP bu metriklerden biridir.

PageSpeed LCP neden sürekli değişiyor?

Ağ, sunucu, test konumu, CDN cache durumu ve üçüncü taraf kodları test sonuçlarını değiştirebilir.

Alan ve laboratuvar LCP neden farklıdır?

Alan verisi gerçek kullanıcıların son 28 günlük deneyimini, laboratuvar verisi ise sabit koşullarda yapılan anlık testi gösterir.

Search Console’da LCP verisi neden yok?

Site veya URL grubu için yeterli gerçek kullanıcı verisi oluşmamış olabilir.

Search Console LCP verisi ne zaman güncellenir?

Core Web Vitals raporu geçmiş gerçek kullanıcı verilerini kullandığı için değişiklikler kademeli olarak görünür.

WordPress’te LCP nasıl düşürülür?

Önbellek, güçlü hosting, görsel optimizasyonu, lazy load istisnası, kritik CSS, JavaScript azaltma ve font optimizasyonu uygulanabilir.

Elementor LCP’yi etkiler mi?

Ağır DOM, CSS arka planları, animasyonlar ve ek JavaScript nedeniyle etkileyebilir. Doğru optimizasyonla performans geliştirilebilir.

Slider LCP’yi artırır mı?

Birden fazla büyük görsel ve JavaScript gerektiren slider’lar LCP’yi yükseltebilir.

Google Fonts LCP’yi etkiler mi?

LCP öğesi metinse geç yüklenen fontlar görüntüleme süresini etkileyebilir. Yerel font, WOFF2, preload ve font-display kullanılabilir.

JavaScript LCP’yi etkiler mi?

Evet. Kaynağın keşfedilmesini, ana iş parçacığını veya öğenin görünür hâle gelmesini geciktirebilir.

Lazy load tamamen kaldırılmalı mı?

Hayır. Ekran dışındaki görsellerde kullanılmalıdır. Yalnızca ilk görüntü alanındaki kritik LCP görselinden kaldırılmalıdır.

LCP optimizasyonu dönüşümü artırır mı?

Daha hızlı ana içerik kullanıcı deneyimini ve sayfada kalma ihtimalini geliştirebilir. Ancak dönüşüm teklif, içerik ve kullanıcı niyeti gibi başka faktörlere de bağlıdır.

LCP düzeltildikten sonra ne yapılmalıdır?

Mobil ve masaüstü laboratuvar testleri tekrarlanmalı, canlı kullanıcı verileri ve Search Console Core Web Vitals raporu takip edilmelidir.

LCP Optimizasyonunu Bütün Yükleme Zinciri Üzerinden Yönetin

Largest Contentful Paint, internet sayfasındaki ana içeriğin kullanıcı tarafından ne kadar hızlı görülebildiğini ölçer.

İyi performans için LCP değerinin kullanıcı ziyaretlerinin yüzde 75’inde 2,5 saniye veya daha kısa olması hedeflenmelidir.

LCP sorunu çoğu zaman yalnızca büyük görsel dosyasından kaynaklanmaz. Değer şu dört temel bölümün toplamıdır:

TTFB + Kaynak yükleme gecikmesi + Kaynak yükleme süresi + Oluşturma gecikmesi

Sunucu geç cevap veriyorsa görsel optimizasyonu sınırlı sonuç sağlar. Görsel ilk HTML içerisinde bulunmuyorsa tarayıcı kaynağı geç keşfeder. Dosya hızlı indirilmesine rağmen JavaScript içeriği gizliyorsa LCP yine yüksek kalır.

Bu nedenle optimizasyon sırasında:

Sunucu yanıt süresi düşürülmeli.
LCP öğesi doğru belirlenmeli.
Kritik kaynak ilk HTML içerisinde bulunmalı.
LCP görselinde lazy load kullanılmamalı.
Uygun görsele yüksek fetch priority verilmelidir.
CSS arka planları gerektiğinde preload edilmelidir.
Görseller doğru çözünürlük ve formatta sunulmalıdır.
Render engelleyen CSS azaltılmalıdır.
Ana iş parçacığını kullanan JavaScript optimize edilmelidir.
Font dosyaları sadeleştirilmelidir.
İçeriği gizleyen animasyon ve preloader yapıları kaldırılmalıdır.
Mobil ve masaüstü deneyimleri ayrı test edilmelidir.

Optimizasyon sonrasında yalnızca PageSpeed performans puanına bakılmamalıdır. LCP öğesi, TTFB, ağ şelalesi, alan verisi ve gerçek dönüşüm sonuçları birlikte değerlendirilmelidir.

Site genelindeki hız, mobil deneyim, taranabilirlik ve sayfa yapısının ortak biçimde geliştirilmesi için kapsamlı bir site içi SEO optimizasyonu uygulanmalıdır.

Performans sorunlarının şablon, hosting, görsel, CSS ve JavaScript düzeyinde analiz edilerek önceliklendirilmesi için profesyonel bir SEO analizi gerçekleştirilebilir.

Başarılı LCP optimizasyonunun temel akışı şöyledir:

Gerçek veriyi ölç → LCP öğesini bul → Gecikme bölümünü belirle → En yüksek etkili sorunu düzelt → Laboratuvar testini tekrarla → Gerçek kullanıcı verisini takip et

LCP optimizasyonunda amaç yalnızca yeşil puan elde etmek değil, kullanıcıların ana içeriğe mümkün olduğunca hızlı ulaşmasını ve sayfayla güvenli biçimde etkileşime geçmesini sağlamaktır.