Core/Dash Boyutu: LCP Priority

Boyut: Kaynak: LCP Priority

LCP Priority boyutu, performans verilerini tarayıcının LCP kaynağını nasıl keşfettiğine ve önceliklendirdiğine göre bölümler. "Element Type" boyutu sana ögenin ne olduğunu (Metin vs. Görsel) söylerken, bu boyut tarayıcının yüklemeyi neden geciktirdiğini açıklar.

Bu, Yükleme Gecikmesi için birincil denetim aracındır. LCP kaynağının bant genişliği için mi savaştığını, yoksa hatalı HTML öznitelikleri nedeniyle yapay olarak mı geciktirildiğini ortaya koyar.

Öncelik Hiyerarşisi

Tarayıcı, her kaynağa bir indirme önceliği atar. Bu boyut, LCP ögesini en yıkıcı olandan (Lazy Loaded) en ideal olana (Metin/Yüksek Öncelik) doğru sıralanmış beş yükleme durumundan birine eşler.

Arka Plan: Bir kullanıcı "Geri" veya "Yeniden Yükle" butonuyla sayfana döndüğünde, çoğu tarayıcı onu önceki dikey konumuna döndürür. Bu konum ekran katlanma çizgisinin altındaysa, optimize ettiğin Hero Görseli artık LCP olmaz. Bunun yerine tarayıcı, mevcut viewport içindeki en büyük ögeyi ölçer. Bu durum, veri kümünde kaçınılmaz olarak bir dizi "Not Preloaded" olayına yol açar. Ve bu tamamen normaldir!

1. Lazy Loaded

LCP ögelerinin %10'undan fazlası bu sepete düşüyorsa, bir sorun tespit etmişsin demektir. Lazy loading uygulanan görseller çok daha geç (hızlı preload tarayıcısı yerine yavaş çalışan DOM ayrıştırıcısı tarafından) sıraya alınır. loading="lazy" özniteliği tarayıcıya, düzen hesaplanana ve öge viewport yakınına gelene kadar indirmeyi bekletmesini söyler.

Çözüm: Bu loading özniteliğini kaldırmalısın. LCP ögesi asla lazy loading ile yüklenmemelidir.

<!-- YANLIŞ -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- DOĞRU -->
<img src="hero.jpg" fetchpriority="high" alt="Hero Image" />

2. Not Preloaded

Bu durum tarayıcının varsayılan davranışını temsil eder. Tarayıcı, ilk ayrıştırma (parse) sırasında görseli HTML içinde keşfetmiştir ancak diğer görsellere göre önceliklendirmesi için herhangi bir sinyal almamıştır.

Bunun sayfa hızına etkisi, web sayfanın karmaşıklığına bağlıdır. LCP görseli bir kaynak çekişmesi kuyruğuna girer. Sayfanda indirilecek çok sayıda script, font, lazy loading uygulanmamış diğer görsel veya stil varsa, tarayıcı bu görselin indirilmesini geciktirebilir ve bu da Yükleme Gecikmesini artırır.

3. Preloaded

Bu, kaynağın belgenin head bölümündeki bir <link rel="preload"> etiketi aracılığıyla keşfedildiğini gösterir. Bu preload bağlantısı, görsel referansı DOM'un derinliklerine gömülmüş veya bir CSS dosyasında (arka plan görseli) gizlenmiş olsa bile temelde erken keşif anlamına gelir.

Preload, erken indirmeyi zorlamanın en etkili yoludur. Ancak preload, görsel URL'si ile birebir eşleşmesi gereken ayrı bir link etiketinin yönetilmesini gerektirir. Eğer aralarında fark oluşursa, kaynağı iki kez indirirsin.

4. High fetchpriority

Modern mühendislik standardı budur. Tarayıcıya, bu özel görseli kritik bir kaynak olarak ele alması için fetchpriority="high" özniteliğiyle talimat verilmiştir.

Strateji: Görsel tabanlı LCP için hedeflenen durum budur. Önemi doğrudan öge üzerinde belirterek, manuel preload etiketlerinin yönetim zahmeti olmadan, indirme kuyruğundaki diğer varlıkların önüne geçmesini sağlar.

5. Not an Image

Durum: Metin Düğümü / SVG

LCP ögesi bir metin bloğu (h1, p) veya doğrudan bir SVG'dir. Bu, ideal mimari durumdur çünkü metin sıfır Yükleme Gecikmesi oluşturur (zaten HTML belgesinde mevcuttur).

Optimizasyon: LCP'n bu kategoride olmasına rağmen hâlâ yavaşsa, darboğaz tamamen Render Gecikmesi kaynaklıdır. İndirilecek bir görsel dosyası olmadığı için Kritik İşleme Yolunu (CSS/JS engellemesi) veya font yükleme stratejini (font-display: swap) optimize etmelisin.

İş Akışı: Yükleme Gecikmesini Optimize Etme

Frontend kaynak stratejini doğrulamak için bu boyutu kullan.

1. Lazy Loading'i Ortadan Kaldır: Lazy Loaded durumuna göre filtrele. Eğer bu değer %0'dan büyükse, hero görseline loading="lazy" ekleyen bileşeni bul ve bu özniteliği kaldır. Bu, tüm medyalara global olarak lazy loading uygulayan CMS şablonlarında sıkça görülür.
2. Fetchpriority'ye Geçiş Yap: Trafiği Not Preloaded ve Preloaded alanlarından High fetchpriority alanına kaydır. <link rel="preload"> etiketini fetchpriority="high" ile değiştirmek, <head> bölümünü temizler ve öncelik mantığını doğrudan bileşene bağlar.
3. Arka Plan Görsellerini Denetle: Eğer Not Preloaded durumunda yüksek hacmin varsa ve LCP'n bir arka plan görseliyse, tarayıcı bunu çok geç (yalnızca CSS ayrıştırıldıktan sonra) keşfediyordur. Bunu fetchpriority="high" özniteliğine sahip bir HTML <img> etiketi olacak şekilde yeniden yapılandırmalı veya bir Preload header'ı zorlamalısın.

Temel Mühendislik Kuralı

Bu boyut için dağılım hedefin katıdır:

• <%10 Lazy Loaded
• >%90 High fetchpriority (görsel LCP'leri için)
• %100 Not an image (metin LCP'leri için)

"Not Preloaded" kategorisine düşen tüm trafik, kaynak önceliğinin kontrolünü tarayıcının varsayılan kurallarına (heuristics) bıraktığın, optimize edilmemiş bir durumu temsil eder.