- Katılım
- 21 May 2023
- Mesajlar
- 470
- Tepki
- 17
- Puan
- 18
LCP, ziyaretçinin ekranında en büyük içerik parçasının ne zaman göründüğünü ölçer ve sayfanın "açıldı" hissini veren an budur. Bu rehber; LCP öğesini doğru tespit etmeyi, görsel ve CSS kaynaklı gecikmeleri gidermeyi ve 2,5 saniye eşiğinin altına inmeyi adım adım anlatır.
Önemli bir ayrım var: LCP toplam yükleme süresi değildir. Sayfadaki tüm kaynaklar inmemiş olsa bile, ekranın görünür alanındaki en büyük öğe çizildiğinde LCP tamamlanır. Bu yüzden sayfanın tamamını hızlandırmaya çalışmak yerine, tek bir öğeye odaklanmak çok daha verimlidir.
Uygulamada en büyük kayıp genellikle ikinci aşamada oluşur: görsel aslında küçüktür ve hızlı iner, ancak tarayıcı onu geç keşfeder çünkü JavaScript ile sonradan eklenmektedir.
Bu tuzakların ortak çözümü aynıdır: görünür alanda ne varsa öncelik ona verilir, geri kalan her şey ertelenir. Tema ayarlarında "tümünü optimize et" seçeneklerini açmadan önce, seçeneğin LCP öğenizi de kapsayıp kapsamadığını kontrol edin.
Neden 2,5 Saniye?
LCP için iyi kabul edilen eşik 2,5 saniyedir; 2,5–4 saniye arası iyileştirme gerektirir, 4 saniye üzeri kötü sayılır. Bu değer keyfi değildir: kullanıcı davranışı araştırmaları, bu bandın üzerindeki bekleyişlerde terk oranının belirgin şekilde arttığını gösterir.Önemli bir ayrım var: LCP toplam yükleme süresi değildir. Sayfadaki tüm kaynaklar inmemiş olsa bile, ekranın görünür alanındaki en büyük öğe çizildiğinde LCP tamamlanır. Bu yüzden sayfanın tamamını hızlandırmaya çalışmak yerine, tek bir öğeye odaklanmak çok daha verimlidir.
- İyi: 2,5 saniye ve altı
- İyileştirme gerekli: 2,5–4 saniye arası
- Kötü: 4 saniye üzeri
Önce LCP Öğenizi Bulun
İyileştirmeye başlamadan önce hangi öğenin LCP olarak işaretlendiğini kesin olarak bilmelisiniz. Çoğu sitede bu öğe kapak görseli, ürün fotoğrafı veya büyük puntolu başlık metnidir.- Tarayıcının performans panelinde sayfa yüklemesini kaydedin
- Zaman çizelgesinde LCP işaretini bulun ve hangi öğeye ait olduğunu görün
- Aynı ölçümü mobil kısıtlı profille tekrarlayın; mobilde LCP öğesi değişebilir
- Sayfa tipine göre ayrı ayrı tespit edin: ana sayfa, kategori, detay
İpucu' Alıntı:
LCP Dört Aşamaya Ayrılır
Gecikmenin nerede biriktiğini görmek, doğru müdahaleyi seçmenin tek yoludur.- İlk yanıt süresi (TTFB): Sunucunun ilk baytı göndermesi
- Kaynak yükleme gecikmesi: Tarayıcının LCP kaynağını keşfedip istemeye başlaması arasındaki boşluk
- Kaynak yükleme süresi: Görselin veya yazı tipinin indirilme süresi
- Öğe çizim gecikmesi: Kaynak indikten sonra ekrana çizilmesi
Uygulamada en büyük kayıp genellikle ikinci aşamada oluşur: görsel aslında küçüktür ve hızlı iner, ancak tarayıcı onu geç keşfeder çünkü JavaScript ile sonradan eklenmektedir.
Görsel Tarafı: En Hızlı Kazanımlar
- Doğru format: Modern formatlar (WebP, AVIF) ile aynı görsel kalitesinde çok daha küçük dosya elde edin
- Doğru boyut: 2000 piksel genişliğindeki bir görseli 800 piksellik alanda göstermeyin
- Duyarlı görsel: `srcset` ve `sizes` ile cihaza uygun dosyayı sunun
- Öncelik verin: LCP görseline `fetchpriority="high"` ekleyin
- Tembel yüklemeden muaf tutun: Görünür alandaki LCP görseline `loading="lazy"` vermeyin; bu, en sık yapılan hatalardan biridir
- Önceden bağlanın: Görsel farklı bir alan adından geliyorsa `preconnect` kullanın
- Boyut belirtin: `width` ve `height` değerlerini yazarak düzen kaymasını da önleyin
Uyarı' Alıntı:
CSS Tarafı: Görünmeyen Engel
CSS varsayılan olarak çizimi engeller. Tarayıcı stil dosyalarını indirip işlemeden hiçbir şeyi ekrana çizmez; bu yüzden şişkin CSS doğrudan LCP'yi geciktirir.- Kritik CSS: İlk ekran için gereken stilleri satır içine alın, kalanını erteleyin
- Kullanılmayan stilleri temizleyin: Tema ve eklentilerden gelen ölü kuralları kaldırın
- Dosya sayısını azaltın: Çok sayıda küçük stil dosyası ek istek maliyeti yaratır
- @import kullanmayın: Zincirleme istek oluşturur ve çizimi geciktirir
- Yazı tipi stratejisi: `font-display: swap` ile metnin yazı tipi inmeden görünmesini sağlayın
- Yazı tipi ön yükleme: Kritik yazı tipini `preload` ile erkenden isteyin
- Değişken yazı tipi: Birden fazla kalınlık kullanıyorsanız değişken sürüm toplam boyutu düşürür
Sunucu ve Ağ Katmanı
- TTFB hedefi: 600 ms altını hedefleyin; üstündeyse önce barındırma ve önbelleği inceleyin
- Sayfa önbelleği: Statik sayfaları önbellekten sunun
- CDN: Görselleri ve statik dosyaları kullanıcıya yakın sunuculardan dağıtın
- Sıkıştırma: Metin tabanlı kaynaklarda Brotli veya Gzip etkin olsun
- Yönlendirme zinciri: Gereksiz yönlendirmeleri kaldırın; her adım ek gecikmedir
Mikro Vaka
Bir kategori sayfasında mobil LCP 4,1 saniye ölçüldü. LCP öğesi, sayfanın üst kısmındaki 1600 piksel genişliğinde bir kapak görseliydi ve tema tarafından tüm görsellere uygulanan tembel yükleme kuralı bu görseli de kapsıyordu. Görsel WebP formatına çevrildi, gösterildiği alana uygun genişlikte yeniden üretildi, tembel yükleme kuralından çıkarıldı ve yüksek öncelik verildi. Ek olarak başlıkta kullanılan yazı tipi ön yüklendi. Yeni ölçümde LCP 2,3 saniyeye indi. Sunucu tarafında hiçbir değişiklik yapılmamıştı.Şablon ve Eklenti Kaynaklı Tuzaklar
Çoğu sitede LCP sorunu özel yazılmış koddan değil, hazır tema ve eklentilerin varsayılan davranışlarından doğar. Bu davranışlar tek tek küçük görünür ancak üst üste bindiğinde eşik aşılır.- Kaydırmalı manşet alanları: Açılışta birden fazla büyük görsel yükler; yalnızca ilk kare gereklidir
- Simge setleri: Tek bir simge için tüm yazı tipi ailesini indiren çözümlerden kaçının
- Toptan optimizasyon eklentileri: Tüm görsellere ayrım gözetmeden tembel yükleme uygular
- Yerleşik video gömme: Otomatik oynatılan arka plan videoları ilk çizimi geciktirir
- Çerez ve onay katmanları: Ekranı kaplayan katmanlar LCP öğesinin çizimini erteleyebilir
Bu tuzakların ortak çözümü aynıdır: görünür alanda ne varsa öncelik ona verilir, geri kalan her şey ertelenir. Tema ayarlarında "tümünü optimize et" seçeneklerini açmadan önce, seçeneğin LCP öğenizi de kapsayıp kapsamadığını kontrol edin.
Hızlı Kontrol Listesi
- LCP öğesi mobil ve masaüstü için ayrı ayrı tespit edildi mi?
- LCP görseli tembel yüklemeden muaf tutuldu mu?
- Görsel modern formatta ve doğru boyutta mı?
- Kritik CSS ayrıldı, kalanı ertelendi mi?
- Kritik yazı tipi ön yükleniyor mu?
- TTFB 600 ms altında mı?
- Değişiklik sonrası saha verisiyle doğrulama yapıldı mı?
Basit Formül
Kod:
LCP ≈ TTFB + Kaynak keşif gecikmesi + İndirme süresi + Çizim süresi
Öncelik sırası: önce en büyük bileşeni ölç, sonra onu düşürSık Sorulan Sorular
- LCP ile sayfa yüklenme süresi aynı şey mi? Hayır. LCP yalnızca görünür alandaki en büyük öğenin çizildiği anı ölçer.
- LCP öğem metin, yine de görsel optimizasyonu gerekir mi? Öncelik yazı tipi stratejisindedir; görsel çalışması ikincil kalır.
- Tüm görsellere tembel yükleme uygulasam olur mu? Hayır. Görünür alandaki LCP görseli mutlaka hariç tutulmalıdır.
- CDN tek başına yeterli mi? Genellikle değil. CDN indirme süresini kısaltır ancak keşif gecikmesini ve CSS engelini çözmez.
- AVIF mi WebP mi? AVIF daha küçük dosya verir, WebP daha geniş uyumluluk sunar. İkisini birlikte sunmak en güvenli yoldur.
- Ölçümü hangi araçla yapmalıyım? Laboratuvar için tarayıcı performans paneli, karar için saha verisi kullanın.
- İyileştirme sonrası sonuçlar ne zaman görünür? Saha verisi kayan pencereyle hesaplandığından genellikle birkaç hafta sürer.
İç Bağlantılar
- 2025'te Web Performans Optimizasyonu
- SEO 2025: Core Web Vitals ve İçerik Rehberi
- 2025 SEO Checklist: Teknik, İçerik ve Otorite
Dış Kaynak
web.dev — LCP nasıl optimize edilir – LCP aşamaları ve öneri listesiÖzetle
Öğeyi bul, erken iste, küçük gönder. LCP iyileştirmesi sayfanın tamamını hızlandırmakla değil, tek bir öğenin yolundaki engelleri kaldırmakla olur. Tembel yükleme hatasını düzeltmek ve kritik CSS'i ayırmak çoğu sitede tek başına eşiğin altına inmeye yeter.Arama trafiğinize yön verin — pratik SEO içgörüleri
Ekli dosyalar
Son düzenleme:
