Web

LCP Nedir? Largest Contentful Paint Nasıl Optimize Edilir?

Talha Aslan 14 dakikalık okuma 3 görüntülenme

LCP nedir?

LCP (Largest Contentful Paint), kullanıcı bir sayfayı açtığında görünür alandaki en büyük görsel veya metin bloğunun ekranda tamamen çizilme süresini ölçen Core Web Vitals metriğidir. Google bunu, sayfanın ana içeriğinin ne zaman yüklendiğini anlamak için kullanır. Başka bir deyişle LCP, algılanan yükleme hızıdır.

Bu metrik, sayfanın teknik olarak ne zaman bittiğini değil, ziyaretçinin ne zaman "tamam, içerik geldi" dediğini temsil eder. Bu yüzden eski metriklerden daha gerçekçidir. Tarayıcı arka planda onlarca dosya indirse bile, ziyaretçi büyük kapak görselini görene kadar sayfayı yüklenmiş saymaz.

Ekibimiz performans çalışmalarında önce LCP'ye bakar. Çünkü bu metrik hem kullanıcı deneyimini hem de arama görünürlüğünü doğrudan etkiler. Genel çerçeve için Core Web Vitals rehberimize göz atabilirsiniz; bu yazıda yalnızca LCP'ye odaklanıyoruz.

LCP neden önemli ve SEO'yu nasıl etkiler?

LCP, Google'ın sayfa deneyimi sinyalleri içinde yer alır. Bu nedenle yavaş bir LCP, tek başına sıralamanızı yerle bir etmez; ancak içerik kalitesi eşit iki sayfa arasında fark yaratabilir. Asıl etki, kullanıcı davranışında görünür.

Sayfa geç açıldığında ziyaretçi beklemez, geri tuşuna basar. Dolayısıyla hemen çıkma oranı artar, dönüşüm düşer. Özellikle mobilde ve yavaş bağlantılarda bu kayıp büyür.

Reklam tarafında da etki vardır. Google Ads'te tıklama için ödeme yaparsınız; sayfa yavaşsa o tıklamanın bir kısmı boşa gider. Bu ilişkiyi site hızının SEO etkisi yazımızda daha geniş anlattık.

  • Organik görünürlük: sayfa deneyimi sinyali olarak sıralamaya küçük ama gerçek bir katkı yapar.
  • Dönüşüm: ürün görseli geç geliyorsa kullanıcı satın alma adımına ulaşmadan ayrılır.
  • Reklam verimliliği: açılış sayfası hızlandığında aynı bütçeyle daha fazla gerçek ziyaret alırsınız.

Kısacası LCP, yalnızca teknik bir skor değil, gelirle bağlantılı bir göstergedir.

LCP eşikleri kaç saniye? İyi LCP değeri nedir?

Google'ın belirlediği eşikler nettir. web.dev LCP rehberi, iyi bir deneyim için LCP'nin 2,5 saniye veya altında olmasını önerir. 4 saniyenin üzeri zayıf kabul edilir. Arada kalan değerler ise iyileştirme gerektirir.

DurumLCP süresiNe yapmalısınız?
İyi2,5 saniye veya altıMevcut düzeni koruyun, düzenli izleyin
İyileştirme gerekli2,5 ile 4 saniye arasıEn büyük gecikme kaynağını bulup giderin
Zayıf4 saniyenin üzeriAcil öncelik verin, tüm alt aşamaları inceleyin

Burada kritik nokta yüzdelik dilimdir. Google, sayfa yüklemelerinin 75. yüzdelik dilimine bakar. Yani ziyaretçilerin en az %75'i 2,5 saniye altında LCP almalıdır. Tek bir hızlı test sonucu yetmez.

Ayrıca mobil ve masaüstü verileri ayrı değerlendirilir. Genellikle mobil sonuçlar daha zayıf çıkar, bu yüzden önce mobil skora odaklanmanızı öneririz.

Örneğin masaüstünde 2 saniye alan bir sayfa, mobilde 3,5 saniyeye çıkabilir. Bu bir örnek değerdir, gerçek sonuç sitenize göre değişir. Yani iki raporu ayrı okumak zorundasınız.

Hangi öğeler LCP öğesi sayılır?

LCP öğesi, görünür alanda ölçüm sırasında en büyük boyuta ulaşan içerik parçasıdır. Bu öğe sayfadan sayfaya değişir. Kimi zaman kahraman (hero) görseli, kimi zaman dev bir başlık paragrafıdır.

Spesifikasyon yalnızca belirli öğeleri aday olarak kabul eder. web.dev LCP rehberi şu listeyi verir:

  • img etiketi ile eklenen görseller.
  • SVG içindeki image öğeleri.
  • Video öğesinin poster görseli veya ilk karesi.
  • CSS ile url() üzerinden yüklenen arka plan görselleri.
  • Metin içeren blok seviyesindeki öğeler.

Bu listenin pratik sonucu şudur: mobilde çoğu zaman görsel, bazı blog şablonlarında ise başlık bloğu LCP olur. Hangisi olduğunu tahmin etmeyin, ölçerek öğrenin.

Ayrıca sayfa yüklenirken LCP adayı değişebilir. Önce bir metin blok aday olurken, sonra gelen büyük görsel adayı devralabilir. Tarayıcı, kullanıcı etkileşimi başlayana kadar en büyük adayı izlemeye devam eder.

Bu davranış, test sonuçlarının neden bazen tutarsız göründüğünü de açıklar. Örneğin bir çerez bandı sonradan en büyük blok olabilir. Dolayısıyla ölçümde bant ve pop-up gibi katmanları da hesaba katın.

LCP öğesini nasıl bulursunuz?

LCP'yi düzeltmeden önce hangi öğenin LCP olduğunu bilmeniz gerekir. Yanlış öğeyi optimize etmek, en sık gördüğümüz zaman kaybıdır. Neyse ki bulmak kolaydır.

  1. Chrome'da sayfayı açın ve F12 ile Geliştirici Araçları'nı başlatın.
  2. Performans (Performance) sekmesinde kaydı başlatıp sayfayı yenileyin.
  3. Zaman çizelgesindeki LCP işaretine tıklayın; ilgili DOM öğesi görünür.
  4. Alternatif olarak PageSpeed Insights sonucunda "LCP öğesi" başlığına bakın.
  5. Lighthouse raporunda aynı bilgi tanılar bölümünde yer alır.

Testi hem mobil hem masaüstü için ayrı ayrı yapın. Çünkü responsive tasarımlarda iki cihazda farklı öğeler LCP olabilir. Örneğin masaüstünde büyük görsel, mobilde ise başlık metni öne çıkabilir.

Lighthouse kullanımı için Lighthouse ile performans testi rehberimize bakabilirsiniz.

Laboratuvar verisi ile saha verisi arasındaki fark nedir?

LCP'yi iki farklı veri türüyle görürsünüz. Laboratuvar verisi (Lighthouse gibi), kontrollü ortamda tek bir yüklemenin sonucudur. Saha verisi (CrUX ve gerçek kullanıcı ölçümü) ise gerçek ziyaretçilerin yaşadığı değerlerdir.

İkisi sık sık çelişir. Lab testinde 1,8 saniye alan bir sayfa, sahada 3,2 saniye çıkabilir. Çünkü gerçek kullanıcılar farklı cihaz, ağ ve konum kullanır.

Bu nedenle kararları saha verisine göre verin; laboratuvar verisini ise hata ayıklama için kullanın.

Pratikte şöyle ilerleyin: önce saha verisinde sorunlu sayfa grubunu bulun, sonra o gruptan bir sayfayı laboratuvarda yeniden üretin. Böylece sorunun nedenini görür, çözümü güvenle test edersiniz.

ÖzellikLaboratuvar verisiSaha verisi
KaynakLighthouse, PageSpeed lab bölümüChrome kullanıcı deneyimi raporu (CrUX)
Kullanım amacıSorunu yeniden üretmek ve düzeltmekGerçek durumu ve Google değerlendirmesini görmek
DeğişkenlikDüşük, kontrollü ortamYüksek, gerçek kullanıcı çeşitliliği
GüncellemeAnındaGenellikle birkaç haftalık birikimle

Düzeltme yaptıktan sonra saha verisi hemen değişmez. Birikimli veri olduğu için iyileşmenin yansıması zaman alır, sabırlı olun.

LCP dört alt parçaya nasıl ayrılır?

LCP süresi tek bir blok değildir. web.dev LCP optimizasyon rehberi onu dört alt parçaya böler. Bu ayrım, optimizasyonu tahminden çıkarıp teşhise dönüştürür.

Alt parçaNe anlatır?İdeal pay
İlk bayta kadar süre (TTFB)Sunucunun ilk yanıtı verme süresiYaklaşık %40
Kaynak yükleme gecikmesiLCP kaynağının indirilmeye başlamasına kadar geçen süre%10'dan az
Kaynak yükleme süresiLCP kaynağının indirilme süresiYaklaşık %40
Öğe işleme gecikmesiİndirme bitince öğenin ekrana çizilmesine kadar geçen süre%10'dan az

Bu oranlar ideal dağılımı gösterir. Sizin sayfanızda bir parça bu payın çok üstündeyse, sorunun kaynağı odur.

Örneğin kaynak yükleme gecikmesi %35 çıkıyorsa, görsel geç keşfediliyor demektir. Bu durumda görsel boyutunu küçültmek değil, görselin erken keşfedilmesini sağlamak gerekir.

Bu yaklaşım ekibimizin performans denetimlerindeki ilk adımıdır: önce parçaları ölçer, sonra en büyük sapmayı hedefleriz.

Yavaş LCP'nin en yaygın nedenleri nelerdir?

Yavaş LCP'nin arkasında genellikle birkaç tanıdık neden vardır. web.dev LCP rehberi şu başlıkları öne çıkarır: optimize edilmemiş görseller, geç yüklenen kaynaklar, yazı tipi gecikmeleri, yüksek TTFB ve işlemeyi engelleyen kaynaklar.

Sahada en çok şu tabloyla karşılaşırız:

  • Kahraman görseli çok büyük ve eski formatta (ör. sıkıştırılmamış JPEG veya PNG).
  • LCP görseli yanlışlıkla tembel yüklemeye (lazy loading) alınmış.
  • Görsel, JavaScript çalıştıktan sonra ekleniyor; yani tarayıcı onu geç keşfediyor.
  • Sunucu yavaş yanıt veriyor, sayfa önbelleğe alınmıyor.
  • Üst kısımda büyük CSS veya JS dosyaları işlemeyi engelliyor.
  • Web yazı tipi yüklenene kadar başlık metni görünmüyor.

Her sitede hepsi birden görülmez. Bu nedenle tek bir "hız eklentisi" kurmak yerine, önce alt parçalara bakarak hangisinin sizin sitenizde baskın olduğunu bulmalısınız.

kahraman görselini nasıl hızlandırırsınız?

Çoğu sitede LCP öğesi bir görseldir. Bu yüzden görsel optimizasyonu en yüksek getirili adımdır. Ancak burada iki ayrı iş vardır: görseli küçültmek ve görseli erken keşfettirmek.

Küçültme için şunları uygulayın:

  • Modern format kullanın: WebP veya AVIF, genellikle JPEG ve PNG'ye göre daha küçük dosya üretir.
  • Görseli gösterildiği boyuta göre yeniden boyutlandırın; 3000 piksellik görseli 800 piksellik alanda göstermeyin.
  • srcset ve sizes ile cihaza uygun boyutu sunun.
  • Kaliteyi gözle kontrol ederek sıkıştırın; fark edilmeyen kayıp sorun değildir.

Hızlı bir boyutlandırma için ücretsiz resim küçültme aracımızı kullanabilirsiniz. Ayrıntılı yöntemler için görsel optimizasyonu rehberimiz var.

Sıkıştırma tek başına yetmez. Görsel geç keşfediliyorsa, küçük dosya bile geç gelir.

Mobilde LCP neden masaüstünden daha kötüdür?

Mobil cihazlarda LCP genellikle daha yüksek çıkar. Bunun birkaç açık nedeni vardır. Öncelikle işlemci gücü daha düşüktür, dolayısıyla JavaScript ve render işleri uzar. Ayrıca mobil ağ gecikmesi yüksektir.

Üstelik responsive görsellerde sık bir hata görürüz: mobil cihaza masaüstü boyutunda görsel gönderilir. Böylece gereksiz megabaytlar indirilir.

  • srcset ile küçük ekranlara küçük görsel sunun.
  • Mobilde gizlenen büyük bileşenleri hiç yüklemeyin.
  • Mobil ana sayfada LCP olan öğeyi ayrıca test edin.
  • Yavaş ağ simülasyonuyla (ör. Lighthouse mobil profili) deneyin.

Google mobil ve masaüstü verilerini ayrı değerlendirdiği için, bu iki raporu birbirine karıştırmamalısınız. Kısacası önce mobil sonucu iyileştirin; masaüstü genellikle onunla birlikte düzelir.

kahraman görseline fetchpriority ve preload nasıl uygulanır?

Tarayıcı, sayfadaki tüm görsellere aynı önemi vermez. kahraman görselinin öncelikli olduğunu ona söylemeniz gerekir. İki araç burada işe yarar.

Birincisi fetchpriority="high" özniteliğidir. web.dev LCP optimizasyon rehberi, bu özniteliği kahraman görseline eklemenizi ve birden fazla öğeye "high" vermemenizi önerir. Çünkü her şey öncelikliyse, hiçbir şey öncelikli olmaz.

İkincisi preload ipucudur. Görsel CSS arka planı olarak veya JavaScript ile ekleniyorsa, tarayıcı onu geç bulur. Preload ile erken haber verirsiniz.

  • Görsel HTML içinde img etiketiyle ekliyse, yalnızca fetchpriority yeterlidir.
  • Görsel CSS background ile geliyorsa, preload ve mümkünse img etiketine geçiş düşünün.
  • Duyarlı görsellerde imagesrcset ile preload yapın ki doğru boyut indirilsin.

Bu iki küçük değişiklik, kaynak yükleme gecikmesini genellikle belirgin biçimde kısaltır. Ancak mutlaka önce ölçün, sonra uygulayın ve tekrar ölçün.

Ayrıca bu öznitelikleri gözle kontrol edin. Ağ sekmesinde görselin öncelik sütununa bakın; yüksek öncelikle indiğini görmelisiniz. Görmüyorsanız, eklenti veya tema öznitelikleri ezmiş olabilir.

Kahraman görselini hangi boyut ve formatta hazırlamalısınız?

Kahraman görseli, ilk ekranda en çok yer kaplayan görseldir. Bu yüzden hazırlık aşamasında üç karar vermelisiniz: boyut, format ve sıkıştırma düzeyi.

Boyut için kural basittir. Görseli, sayfada göründüğü en büyük genişliğe göre üretin. Retina ekranlar için iki katı yeterlidir; daha fazlası yalnızca dosya şişirir.

  • Format: fotoğraflarda WebP veya AVIF, basit grafiklerde SVG tercih edin.
  • Sıkıştırma: kaliteyi ekranda karşılaştırarak düşürün, rakama körü körüne güvenmeyin.
  • Yedek: eski tarayıcılar için picture etiketiyle JPEG alternatifi sunun.
  • Boyut özniteliği: width ve height değerlerini yazın ki yerleşim kaymasın.

Ayrıca görselin ilk ekranda gerçekten gerekli olup olmadığını sorgulayın. Örneğin dekoratif bir arka plan fotoğrafı, çoğu zaman dönüşüm getirmeden sayfayı yavaşlatır.

Yani bazen en iyi optimizasyon, görseli küçültmek değil sadeleştirmektir. Tasarım kararı ile hız kararı bu noktada birleşir.

Örneğin tam ekran video arka planı yerine tek bir güçlü fotoğraf kullanmak, hem yüklemeyi hızlandırır hem mesajı netleştirir. Üstelik mobilde de daha temiz görünür.

kahraman görselini neden tembel yüklememelisiniz?

Lazy loading, ekran dışındaki görseller için çok faydalıdır. Fakat kahraman görseline uygulandığında ters tepki verir. web.dev LCP optimizasyon rehberi bunu açıkça belirtir: kahraman görselini asla tembel yüklemeyin, çünkü bu her zaman gereksiz bir yükleme gecikmesi yaratır.

Sorun şudur: tarayıcı tembel yüklenen görseli, yerleşim hesaplanana kadar indirmeye başlamaz. Böylece en önemli görsel en geç gelen görsel olur.

Bunun sık görülen bir nedeni, eklentilerin veya temaların tüm görsellere otomatik lazy loading eklemesidir. Yani siz fark etmeden kahraman görseli de kapsama girer.

  • Sayfadaki ilk görünür görselden lazy özniteliğini kaldırın.
  • Sadece ekran dışındaki görsellere loading="lazy" verin.
  • Tema veya eklenti ayarlarında ilk görsel istisnası var mı, kontrol edin.

Konuyu genişletmek isterseniz lazy load rehberimizi okuyun.

CDN kullanmak LCP'ye yardım eder mi?

Evet, çoğu durumda yardım eder. CDN (içerik dağıtım ağı), dosyalarınızı ziyaretçiye yakın sunuculardan verir. Böylece hem TTFB hem kaynak yükleme süresi kısalır.

Ancak CDN her sorunu çözmez. Örneğin görsel geç keşfediliyorsa, CDN yalnızca geç keşfedilen görseli daha hızlı indirir. Yani önce keşif sorununu düzeltmek gerekir.

  • Statik dosyalar için (görsel, CSS, JS, yazı tipi) CDN idealdir.
  • Önbellek başlıklarını doğru ayarlayın; aksi halde CDN'in faydası azalır.
  • Görsel dönüştürme sunan CDN'lerde WebP veya AVIF otomatik üretimini kullanın.
  • Ziyaretçileriniz tek bir ülkedeyse, etki daha sınırlı olabilir.

Dolayısıyla CDN'i bir tamamlayıcı olarak düşünün. Ana sırayı koruyun: önce keşif ve işleme gecikmesi, sonra dosya boyutu, en sonda altyapı.

Sunucu yanıt süresi (TTFB) LCP'yi nasıl etkiler?

TTFB, LCP süresinin yaklaşık %40'lık kısmını oluşturabilir. Sunucu ilk baytı geç verirse, diğer her şey o gecikmenin üzerine biner. Dolayısıyla görselleri mükemmel yapsanız bile LCP kötü kalabilir.

TTFB'yi etkileyen faktörler şunlardır:

  • Yavaş veya paylaşımlı, kalabalık hosting altyapısı.
  • Önbelleğe alınmayan, her istekte veritabanı sorgusu çalıştıran dinamik sayfalar.
  • Gereksiz yönlendirme zincirleri.
  • Kullanıcıdan uzak sunucu konumu ve CDN eksikliği.

Çözüm için sayfa önbelleği ve sunucu tarafı önbellek kullanın. Teknik arka plan için önbellekleme yazımıza bakabilirsiniz. Hosting kalitesi de belirleyicidir; seçim kriterlerini hosting seçimi rehberimizde topladık.

Web.dev, sunucu tarafı işlemenin (SSR) kaynakları ilk HTML'de görünür kıldığını, bunun TTFB'yi artırabileceğini ama çoğu site için değdiğini belirtir.

Render'ı engelleyen CSS ve JavaScript LCP'yi nasıl geciktirir?

Görsel hızlı inse bile tarayıcı onu hemen çizemeyebilir. Bunun nedeni işlemeyi engelleyen kaynaklardır. Bu, dört alt parçadan "öğe işleme gecikmesi" kısmını şişirir.

CSS dosyaları varsayılan olarak render'ı engeller. Büyük bir stil dosyası inene kadar tarayıcı ekrana bir şey çizmez. JavaScript ise ayrıştırmayı durdurabilir.

  • Kritik CSS'i satır içine alın, kalanını ertelemeyin ama küçültün.
  • Kullanılmayan CSS'i temizleyin.
  • Gerekmeyen scriptleri defer veya async ile yükleyin.
  • Üçüncü taraf widget'ları (sohbet, yorum, takip kodları) ilk yüklemeden sonraya bırakın.

Bir başka tuzak, içeriği JavaScript ile sonradan çizen sayfalardır. Bu durumda LCP öğesi ancak script çalışınca oluşur. Bu yüzden sunucuda HTML üretmek avantaj sağlar.

Ayrıntılı yönergeler için JavaScript ve site hızı yazımıza göz atın.

Web yazı tipleri LCP'yi ne zaman bozar?

LCP öğesi bir metin bloğuysa, yazı tipi doğrudan sürece girer. Tarayıcı özel yazı tipi inene kadar metni gizleyebilir. Bu "font engelleme süresi" LCP'yi geciktirir.

Çözümler basittir ama sık atlanır:

  • font-display: swap kullanın; böylece metin önce yedek yazı tipiyle görünür.
  • Sadece gerçekten kullandığınız ağırlıkları yükleyin; 6 ağırlık yerine 2 yeterli olabilir.
  • Ana yazı tipini kendi sunucunuzdan sunun; üçüncü taraf bağlantı maliyetinden kurtulursunuz.
  • Kritik yazı tipini preload ile önceden çağırın.
  • Gerekmeyen dil alt kümelerini (subset) çıkarın.

Burada bir denge vardır. Yedek yazı tipi ile asıl yazı tipi arasındaki boyut farkı, yerleşim kaymasına (CLS) yol açabilir. CLS bu yazının konusu değil; onu Core Web Vitals yazımızda bulabilirsiniz.

Yine de yazı tipini seçerken iki metriği birlikte düşünmenizi öneririz.

Hangi sayfalar için LCP önceliklidir?

Bütün sayfaları aynı anda optimize etmek zorunda değilsiniz. Öncelik sırası belirlemek, sınırlı kaynağı doğru yere yatırmanızı sağlar.

Şu sorulara bakın: Hangi sayfalar en çok organik trafik alıyor? Hangileri reklam trafiği çekiyor? Hangileri dönüşüme en yakın?

  1. Reklamların gittiği açılış sayfaları.
  2. Ana sayfa ve en çok trafik alan kategori sayfaları.
  3. Ürün veya hizmet detay sayfaları.
  4. Yüksek trafikli blog yazıları.

Bu sıralama, ekibimizin denetimlerinde kullandığı bir başlangıç yaklaşımıdır. Sektöre göre değişebilir, garanti değildir.

Ayrıca aynı şablonu kullanan sayfalar toplu iyileşir. Bu yüzden tek bir şablon düzeltmesi, yüzlerce sayfanın LCP'sini birden düşürebilir. Örneğin blog şablonundaki kapak görselini düzeltmek tüm yazıları etkiler.

LCP, INP ve CLS arasındaki fark nedir?

Core Web Vitals üç metrikten oluşur ve her biri farklı bir deneyimi ölçer. LCP yükleme hızını, INP etkileşime yanıt süresini, CLS ise görsel kararlılığı temsil eder. Yani üçü birbirinin yerine geçmez.

MetrikNeyi ölçer?Örnek sorun
LCPAna içeriğin görünme hızıKapak görseli geç geliyor
INPTıklama ve dokunmaya yanıt süresiMenü açılırken donma
CLSYerleşim kararlılığıSayfa yüklenirken butonun kayması

Bu yazıda yalnızca LCP'yi işliyoruz. Ancak pratikte metrikler birbirini etkiler. Örneğin ağır bir JavaScript paketi hem LCP'yi hem INP'yi kötüleştirebilir.

Bu nedenle tek bir metriği düzeltirken diğerlerini bozmadığınızdan emin olun. Üçünün birlikte nasıl yönetileceğini Core Web Vitals rehberinde ayrıntılı anlattık.

LCP optimizasyonu hangi sırayla yapılır?

Rastgele optimizasyon zaman kaybettirir. web.dev LCP optimizasyon rehberi bir öncelik sırası önerir. Bu sıra, en ucuz ve en etkili adımları öne alır.

  1. Kaynak yükleme gecikmesini sıfıra yaklaştırın: LCP kaynağı hemen keşfedilsin.
  2. Öğe işleme gecikmesini azaltın: render'ı engelleyen her şeyi temizleyin.
  3. Kaynak yükleme süresini düşürün: dosyayı sıkıştırın, doğru boyut ve format kullanın.
  4. TTFB'yi iyileştirin: önbellek, hosting ve CDN.
  5. Ölçün: saha verisiyle sonucu doğrulayın.

Web.dev ayrıca şunu hatırlatır: yükleme süresi çoğu sitede büyük bir darboğaz değildir. Yani ilk refleksiniz görseli daha da küçültmek olmamalı.

Bunun pratik anlamı şudur: dosya boyutu tek başına sorun olmayabilir. Kimi sitede görsel küçük olsa da geç keşfedilir, kimi sitede sunucu geç yanıt verir. Bu nedenle sıralamaya uymak, zaman kazandırır.

Bu nedenle biz önce gecikmelere bakarız. Sonra dosya boyutuna geçeriz. Son olarak sunucuyu ele alırız.

Uygulamada her adımdan sonra tek değişiklik yapıp tekrar ölçün. Aksi halde hangi değişikliğin işe yaradığını bilemezsiniz.

WordPress ve e-ticaret sitelerinde LCP nasıl iyileşir?

Hazır sistemlerde LCP sorunları belirli kalıplarla gelir. WordPress, Shopify veya özel e-ticaret altyapısı fark etmeksizin benzer hatalar görürüz.

SorunTipik sistemÇözüm yönü
Kahraman slider'ı ağır görsellerle geliyorWordPress temalarıSlider yerine tek, optimize görsel
Ürün görseli lazy load ile geliyorE-ticaret şablonlarıİlk ürün görselini istisna yapın
Eklenti kaynaklı çok sayıda CSS/JSWordPressEklentileri azaltın, gereksizleri kaldırın
Sayfa önbelleği yokTüm sistemlerSayfa ve nesne önbelleği ekleyin

E-ticarette ürün detay sayfalarında LCP genellikle ana ürün görselidir. Kategori sayfalarında ise ilk satırdaki ürün görseli aday olur. Bu sayfalar gelirle doğrudan ilişkilidir; dolayısıyla öncelik onlara verilmelidir.

Altyapı seçimi de sonuca etki eder. Hız hedefiyle planlanan bir site, sonradan yamalanan bir siteden daha az uğraştırır. Ekibimizin web tasarım hizmeti bu yüzden performansı tasarım aşamasında hesaba katar.

LCP'yi nasıl izler ve raporlarsınız?

Bir kez düzeltip bırakmak yetmez. Yeni görseller, yeni eklentiler ve yeni reklam scriptleri LCP'yi tekrar bozabilir. Bu yüzden düzenli izleme kurun.

Kullanabileceğiniz kaynaklar şunlardır:

  • Google Search Console: Core Web Vitals raporu, URL gruplarına göre saha verisini gösterir.
  • PageSpeed Insights: aynı sayfa için hem saha hem laboratuvar verisi verir.
  • Lighthouse: hata ayıklama ve tanı için idealdir.
  • Chrome Geliştirici Araçları: LCP öğesini ve alt parçaları inceleyin.

Raporlarken tek bir sayı yerine sayfa grubu bazında bakın. Örneğin blog yazıları, ürün sayfaları ve ana sayfa ayrı ayrı izlenmelidir.

SEO stratejinizin parçası olarak performans takibini kurmak isterseniz, SEO danışmanlığı hizmetimizde teknik denetim de yer alır.

LCP optimizasyonunda sık yapılan hatalar nelerdir?

Yıllardır gördüğümüz hatalar değişmiyor. Bunları bilmek, zaman ve bütçe kazandırır.

  • Yanlış öğeyi optimize etmek: LCP öğesini bulmadan görsel sıkıştırmak.
  • Sadece lab skoruna bakmak: sahada sonuç farklı çıkabilir.
  • Tüm görsellere lazy loading eklemek ve kahraman görselini de kapsamak.
  • Her öğeye fetchpriority high vermek; böylece öncelik anlamsız kalır.
  • Masaüstünü düzeltip mobili unutmak.
  • Hız eklentisi kurup ölçmeden "oldu" saymak.
  • Yalnızca bir kez ölçmek ve dalgalanmayı dikkate almamak.

Bu hataların ortak noktası, teşhis yapmadan tedaviye geçmektir. Oysa dört alt parçayı ölçmek yirmi dakikanızı alır.

Bu hataları önlemenin en kolay yolu bir kontrol listesi tutmaktır. Her yeni sayfa veya kampanya öncesinde ilk görselin boyutunu, önceliğini ve yükleme biçimini kontrol edin. Böylece sorunlar canlıya çıkmadan yakalanır.

Ayrıca sayısal hedefi yanlış okumayın. 2,5 saniye altı iyi bir eşiktir; ancak yüzdelik dilim mantığını atlarsanız, ortalamaya bakıp yanılırsınız. Kullanıcıların çoğunun o eşiğin altında olması gerekir.

Kendi sitenizde LCP iyileştirmesi için örnek bir plan nasıl olur?

Aşağıdaki plan, bir örnek hesap değil, uygulayabileceğiniz bir kontrol sırasıdır. Saha tecrübemize dayalı bir başlangıç yaklaşımıdır, garanti değildir.

  1. Search Console'da zayıf LCP gruplarını belirleyin.
  2. Her grupta temsilci bir sayfayı PageSpeed Insights ile açın.
  3. LCP öğesini ve dört alt parçayı not edin.
  4. En büyük payı alan parçaya göre aksiyon seçin.
  5. Değişikliği tek başına uygulayın, tekrar ölçün.
  6. Saha verisi güncellendiğinde sonucu doğrulayın.

Örnek olarak kaynak yükleme gecikmesi yüksek çıkarsa, önce görselin HTML'de keşfedilmesini ve fetchpriority eklemeyi deneyin. TTFB yüksekse, hosting ve önbellek önceliklidir.

Birçok iyileştirmeyi kendiniz yapabilirsiniz. Görsel küçültmek, lazy loading istisnası eklemek ve eklenti temizlemek teknik bilgi gerektirmez. Sayfa istemci tarafında çiziliyorsa, hosting değişikliği sonuç vermiyorsa veya reklam scriptleri sayfayı ağırlaştırıyorsa, derin inceleme gerekir. Bu işi kendi ekibinizle yapamıyorsanız, teknik destek alabilirsiniz. Ekibimiz bu tür performans denetimlerini, SEO ve tasarım çalışmasıyla birlikte yürütür. Tüm süreç için bizimle iletişime geçin.

Sıkça Sorulan Sorular

LCP nedir ve hangi birimle ölçülür?
LCP, sayfadaki en büyük görsel veya metin öğesinin ekranda çizilme süresidir. Saniye cinsinden ölçülür. Google iyi bir deneyim için 2,5 saniye veya altını hedefler; 4 saniyeyi aşan değerler zayıf sayılır. Google bu ölçümü sayfa yüklemelerinin 75. yüzdelik dilimine göre değerlendirir; yani tek bir hızlı test sonucu yeterli sayılmaz.
İyi bir LCP değeri kaç saniyedir?
İyi LCP değeri 2,5 saniye veya altıdır. 2,5 ile 4 saniye arası iyileştirme gerektirir, 4 saniyenin üstü zayıftır. Google bu değerlendirmeyi mobil ve masaüstü için ayrı yapar; ziyaretçilerinizin en az %75'i bu eşiği tutturmalıdır. Bu yüzden tek bir test yerine saha verisini izlemenizi öneririz.
LCP öğesi nasıl bulunur?
LCP öğesini PageSpeed Insights raporundaki "LCP öğesi" bölümünden veya Chrome Geliştirici Araçları'nın Performans sekmesinden bulursunuz. Kaydı başlatıp sayfayı yenileyin, sonra zaman çizelgesindeki LCP işaretine tıklayın. Mobil ve masaüstünde ayrı öğe çıkabileceği için iki cihazı da kontrol edin. Yanlış öğeyi optimize etmek sık yapılan bir zaman kaybıdır.
kahraman görseline lazy loading eklenir mi?
Hayır, eklememelisiniz. Web.dev, kahraman görselini tembel yüklemenin her zaman gereksiz bir yükleme gecikmesi yarattığını belirtir. Lazy loading yalnızca ekran dışındaki görsellerde kullanışlıdır. Kahraman görselini istisna tutun ve ona fetchpriority="high" vermeyi değerlendirin. Böylece tarayıcı o görseli en önce indirir.
LCP kötüyse önce neye bakmalıyım?
Önce LCP öğesini ve dört alt parçayı (TTFB, kaynak yükleme gecikmesi, yükleme süresi, işleme gecikmesi) ölçün. En büyük sapmayı gösteren parçayı düzeltin. Çoğu sitede geç keşfedilen görsel, yavaş sunucu veya işlemeyi engelleyen kaynaklar ilk şüphelilerdir. Düzeltmeleri tek tek uygulayıp her adımdan sonra tekrar ölçün.
LCP düzelttikten sonra sonuç ne zaman değişir?
Laboratuvar testi anında yeni değeri gösterir. Saha verisi ise gerçek kullanıcı ölçümlerinden biriktiği için birkaç hafta sonra tam yansır. Bu yüzden değişikliği yaptıktan sonra sabırla izleyin ve Search Console raporunu düzenli kontrol edin. Düzelttiğiniz şablon çok sayıda sayfayı etkiliyorsa, iyileşme daha hızlı görünür.
  • lcp
  • largest contentful paint
  • core web vitals
  • site hızı
  • sayfa performansı
  • teknik seo
  • görsel optimizasyonu
Paylaş:
Talha Aslan

Google Partner dijital pazarlama uzmanı. 2012’den beri SEO, Google Ads, web tasarım ve e-ticaret projelerinde sahada; bu blogda gördüğünüz her yazı o deneyimden çıkar.

Sıradaki proje

Projenizi konuşalım.

Talebiniz doğrudan Talha Aslan ve ekibine ulaşır: stratejiyi Talha kurar, uygulamayı deneyimli ekip yürütür. İlk istişare ücretsizdir; hedefinizi dinler, net bir yol haritasıyla döneriz.