Boyut: Kaynak: Öğe Türü LCP (lcpet)
Öğe Türü (LCP) boyutu (lcpet), Largest Contentful Paint düğümünü dört mimari sınıftan birinde kategorize eder: text, image, background-image, veya video.Attribution Element boyutu tam DOM düğümünü belirlerken, Öğe Türü boyutu üst düzey mühendislik stratejinizi belirler. LCP dört zaman aralığının toplamıdır: TTFB, Load Delay, Load Time, ve Render Delay. Öğe Türü, bu aralıklardan hangisinin puanınıza zarar verdiğini size söyler ve tahmin yürütmeden doğru optimizasyon protokolünü seçmenize olanak tanır.
LCP öğe türüne göre Core Web Vitals optimizasyonu
LCP öğe türünden bağımsız olan TTFB'yi iyileştirdikten sonra, LCP öğe türünüze bakarak LCP'yi optimize etmek için farklı bir yaklaşım benimsemelisiniz.
1. Metin
CoreDash Öğe Türü olarak metin bildirdiğinde, statik ağ kaynağı bant genişliği nadiren darboğazdır. Metin doğrudan HTML belgesinde bulunur, yani içerik ilk sunucu yanıtından (TTFB) hemen sonra kullanılabilir. LCP'niz burada yavaşsa, sorun neredeyse tamamen Render Delay'dir.
Bunu düzeltmek için tamamen Kritik İşleme Yoluna (Critical Rendering Path) odaklanın. Tarayıcının metni işlemesi muhtemelen <head> içindeki ağır CSS hesaplamaları veya eşzamanlı JavaScript tarafından engelleniyordur. Ek olarak, yazı tipi yükleme stratejinizi kontrol edin; font-display: swap veya optional kullanmıyorsanız, tarayıcı yazı tipi dosyasının inmesini beklerken metni yapay olarak gizler (FOIT).2. Görsel (<img>)
Bu tür, tam kaynak ardışık düzenini (pipeline) tetikler: Keşif, indirme ve kod çözme. Metnin aksine, bir görsel LCP'si büyük ölçüde Load Delay ve Load Time'a bağlıdır. Burada fizik kuralları ve ağ gecikmesiyle savaşıyorsunuz, bu nedenle hedefiniz varlığı (asset) daha hafif hale getirmek ve daha erken keşfedilmesini sağlamaktır.
Buradaki optimizasyon sıkı varlık yönetimi gerektirir. Load Delay'i en aza indirmek için <img> etiketinin ilk HTML kaynağında (Server-Side Rendering) mevcut olduğundan emin olun. fetchpriority="high" ekleyin ve tarayıcının isteğini geciktirdiği için loading="lazy" özniteliklerini kesinlikle kaldırın. Son olarak, yeni nesil formatlar (AVIF\/WebP) sunarak ve mobil cihazların masaüstü boyutundaki dosyaları indirmesini önlemek için srcset kullanarak Load Time'ı ele alın.3. Arka Plan Görseli
Bu sınıflandırma mimari bir verimsizliğe işaret eder. Görsel CSS'de tanımlandığı için (örneğin, background-image: url(...)), tarayıcı stil sayfalarınızı tam olarak indirip ayrıştırana kadar URL'yi keşfedemez. Bu durum, Preload Scanner varlığı etkili bir şekilde göremediği için büyük bir Load Delay oluşturur.
Tek sağlam mühendislik çözümü refaktördür. URL'yi tarayıcıya hemen göstermek için görsel varlığı CSS'den standart bir HTML <img> etiketine taşıyın. İşaretlemeyi refaktör edemiyorsanız, yerel bir görsel öğesi kullanmaya kıyasla genellikle bir bakım yükü olsa da, erken keşfi zorlamak için belge kafasında <link rel="preload"> kullanmalısınız.
4. Video
LCP öğesi bir video olduğunda, tarayıcı poster görselinin veya ilk karenin (otomatik oynatılıyorsa) işlenme süresini ölçer. Bu, Görsel türüne benzer şekilde davranır ancak video varlıklarının dosya boyutu nedeniyle genellikle daha ağırdır.
Bunu kesinlikle bir görsel optimizasyon görevi olarak ele alın. Tarayıcının ilk pikseli işlemek için video segmentlerini indirmek zorunda kalmaması için HTML'de hafif bir poster özniteliğinin bulunduğundan emin olun. Poster görselini standart bir LCP görselinde yaptığınız kadar agresif bir şekilde sıkıştırın.İş akışı: LCP öğe türüne göre LCP sorunlarını bulma
LCP Öğe Türü statik değildir ve her ziyaretçi için aynı değildir. Kullanıcının cihazına göre sık sık değişerek duyarlı tasarımdaki (responsive design) temel kusurları ortaya çıkarır.
Mobil ve Masaüstü arasındaki Öğe Türlerini karşılaştırmak için CoreDash Cihaz Form Faktörü (Device Form Factor) filtresini kullanın. Genellikle Masaüstü kullanıcılarının görsel LCP'si (örneğin bir Hero Banner) aldığını, Mobil kullanıcıların ise metin LCP'si aldığını görürsünüz. Bu, mobil CSS düzeninizin Hero Banner'ı falzın (fold) altına ittiğini veya o kadar önemli ölçüde küçülttüğünü doğrular ki bir metin paragrafı "En Büyük" öğe haline gelir.Bu senaryoda mobil LCP'yi iyileştirmek için hero görselini optimize ediyorsanız, boşa çaba harcıyorsunuz demektir. Tarayıcı görseli saymıyor bile. Görseli birincil görünüme geri getirmek için düzeni ayarlamalı veya odağınızı mobil kullanıcılar için metin işlemeyi (yazı tipleri\/CSS) optimize etmeye kaydırmalısınız.[include]sidebarcoredash.html[\/include]