Core/Dash Boyutu: Öğe Türü (LCP)
Mimari öğe türüne göre trafiği filtreleyerek Largest Contentful Paint'i düzeltin.
Trusted by market leaders · Client results
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 birine ayırır: text, image, background-image veya video.
İlişkilendirme Öğesi boyutu tam DOM düğümünü belirlerken, Öğe Türü boyutu üst düzey mühendislik stratejinizi belirler. LCP dört zamanlama aralığının toplamıdır: TTFB, Yükleme Gecikmesi, Yükleme Süresi ve Oluşturma Gecikmesi. Öğe Türü, bu aralıklardan hangisinin puanınıza zarar verdiğini size bildirerek tahmine gerek kalmadan doğru optimizasyon protokolünü seçmenize olanak tanır.
Core Web Vitals değerlerini LCP öğe türüne göre optimize etme
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 metni bildirdiğinde, statik ağ kaynağı bant genişliği nadiren darboğaz oluşturur. Metin doğrudan HTML belgesinde bulunur, bu da içeriğin ilk sunucu yanıtından (TTFB) hemen sonra kullanılabileceği anlamına gelir. LCP değeriniz burada yavaşsa, sorun neredeyse tamamen Oluşturma Gecikmesidir.
Bunu düzeltmek için tamamen Kritik Oluşturma Yoluna odaklanın. <head> içindeki ağır CSS hesaplamaları veya senkron JavaScript, tarayıcının metni boyamasını büyük ihtimalle engelliyordur. Ek olarak, yazı tipi yükleme stratejinizi kontrol edin; font-display: swap veya optional kullanmıyorsanız, tarayıcı yazı tipi dosyasının indirilmesini beklerken metni yapay olarak gizler (FOIT).
2. Görsel (<img>)
Bu tür, tüm kaynak boru hattını tetikler: keşif, indirme ve kod çözme. Metnin aksine, bir görsel LCP değeri büyük ölçüde Yükleme Gecikmesi ve Yükleme Süresine bağlıdır. Burada fizik ve ağ gecikmesiyle savaşıyorsunuz, bu nedenle hedefiniz varlığı daha hafif hale getirmek ve daha erken keşfedilebilir olmasını sağlamaktır.
Buradaki optimizasyon katı bir varlık yönetimi gerektirir. Yükleme Gecikmesini en aza indirmek için <img> etiketinin ilk HTML kaynağında (Sunucu Tarafı Oluşturma) bulunduğundan emin olun. Tarayıcının isteğini geciktirdiği için fetchpriority="high" ekleyin ve varsa loading="lazy" niteliklerini kesinlikle kaldırın. Son olarak, yeni nesil formatlar (AVIF/WebP) sunarak ve mobil cihazların masaüstü boyutunda dosyaları indirmesini önlemek için srcset kullanarak Yükleme Süresi sorununun üstesinden gelin.
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 şablonlarınızı tamamen indirip ayrıştırana kadar URL'yi keşfedemez. Önceden Yükleme Tarayıcısı varlığa karşı etkili bir şekilde kör olduğundan bu durum devasa bir Yükleme Gecikmesi yaratır.
Tek sağlam mühendislik çözümü yeniden düzenlemedir. URL'yi tarayıcıya anında sunmak için görsel varlığı CSS'den standart bir HTML <img> etiketine taşıyın. İşaretlemeyi yeniden düzenleyemiyorsanız, erken keşfi zorlamak için belge başlığında <link rel="preload"> kullanmalısınız; ancak bu genellikle yerel bir görsel öğesi kullanmaya kıyasla bir bakım yüküdür.
4. Video
LCP öğesi bir video olduğunda, tarayıcı poster görselinin veya (otomatik oynatılıyorsa) ilk karenin boyama 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.
Buna kesinlikle bir görsel optimizasyon görevi olarak yaklaşın. Tarayıcının ilk pikseli oluşturmak için video bölümlerini indirmek zorunda kalmaması adına HTML'de hafif bir poster niteliğinin bulunduğundan emin olun. Poster görselini standart bir LCP görselinde yapacağı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ıklıkla değişir ve bu da duyarlı tasarımdaki 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ü filtresini kullanın. Çoğu zaman Masaüstü kullanıcılarının bir görsel LCP'si (örn. bir Hero Afişi) elde ederken, Mobil kullanıcıların bir metin LCP'si elde ettiğini göreceksiniz. Bu, mobil CSS düzeninizin Hero Afişini ekranın alt kısmına ittiğini veya o kadar fazla 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, çabanızı boşa harcıyorsunuz demektir. Tarayıcı görseli saymıyor bile. Görseli tekrar birincil görünüme getirmek için ya düzeni ayarlamalı ya da odak noktanızı mobil kullanıcılar için metin oluşturmayı (yazı tipleri/CSS) optimize etmeye kaydırmalısınız.
