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 segmentlere ayırır. "Element Type" boyutu öğenin ne olduğunu (Metin veya Resim) söylerken, bu boyut tarayıcının yüklemeyi neden geciktirdiğini söyler.

Bu, Load Delay için birincil denetim aracınızdır. LCP varlığınızın bant genişliği için savaşıp savaşmadığını veya hatalı HTML öznitelikleri nedeniyle yapay olarak geciktirilip geciktirilmediğini ortaya çıkarır.

Öncelik Hiyerarşisi

Tarayıcı her kaynağa bir indirme önceliği atar. Bu boyut, LCP öğesini en yıkıcı olandan (Lazy Loaded) en ideal olana (Text/High Priority) doğru sıralanmış beş özel yükleme durumundan biriyle eşleştirir.

Arka Plan: Bir kullanıcı "Geri" veya "Yenile" düğmesiyle sayfanıza döndüğünde, çoğu tarayıcı onları önceki dikey konumlarına döndürür. Bu konum ekranın alt kısmındaysa (below the fold), optimize edilmiş Hero görseliniz artık LCP değildir. Bunun yerine tarayıcı, mevcut görüntüleme alanındaki en büyük öğeyi ölçer. Bu durum, veri setinizde kaçınılmaz bir "Not Preloaded" olayları kümesi oluşturur.  Ve bu tamamen normaldir!

1. Lazy Loaded 

LCP öğenizin %10'undan fazlası bu grupta görünüyorsa, bir sorun tespit etmişsiniz demektir. Lazy loading uygulanan görseller çok daha geç kuyruğa alınır (hızlı preload scanner tarafından değil, yavaş DOM parser tarafından). loading="lazy" özniteliği, tarayıcıya düzen hesaplanana ve öğe görüntüleme alanına yaklaşana kadar indirme işlemiyle beklemesini  söyler.

Çözüm: Bu yükleme özniteliğini kaldırmalısınız. LCP öğesine asla lazy-load uygulanmamalıdır.

<!-- 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, varsayılan tarayıcı davranışını temsil eder. Tarayıcı, görseli ilk ayrıştırma sırasında HTML içinde keşfetmiş, ancak diğer görsellere göre önceliklendirmesi için herhangi bir sinyal verilmemiştir.

Pagespeed üzerindeki etki, web sayfanızın karmaşıklığına bağlıdır. LCP görseli bir kaynak çekişmesi kuyruğuna girer. Sayfanızda indirilecek çok sayıda script, font, lazy olmayan diğer görseller veya stiller varsa, tarayıcı bu görseli indirmeyi geciktirebilir ve bu da Load Delay süresini artırır.

3. Preloaded

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

Preloading, erken indirmeyi zorlamanın en etkili yoludur; ancak preloading, görsel URL'siyle tam olarak eşleşmesi gereken ayrı bir link etiketinin korunmasını gerektirir. Eğer bunlar birbirinden farklılaşırsa, bir varlığı iki kez indirirsiniz.

4. High fetchpriority

Bu, modern mühendislik standardıdır. Tarayıcıya fetchpriority="high" özniteliği aracılığıyla bu özel görseli kritik bir kaynak olarak ele alması talimatı verilmiştir.

Strateji: Bu, görsel tabanlı LCP için hedef durumdur. Önemi doğrudan öğe üzerinde belirtir ve manuel preload etiketlerinin bakım yükü olmadan indirme kuyruğunda diğer varlıkların önüne geçirir.

5. Not an Image

Durum: Metin Düğümü / SVG

LCP öğesi bir metin bloğu (h1, p) veya ham bir SVG'dir. Bu ideal mimari durumdur çünkü metin sıfır Load Delay yaratır (zaten HTML belgesinde mevcuttur).

Optimizasyon: LCP'niz bu kategorideyse ancak hala yavaşsa, darboğaz tamamen Render Delay kaynaklıdır. İndirilecek bir görsel dosyası olmadığından, Kritik İşleme Yolunuzu (CSS/JS engelleme) veya yazı tipi yükleme stratejinizi (font-display: swap) optimize etmelisiniz.

İş Akışı: Load Delay Optimizasyonu

Frontend kaynak stratejinizi doğrulamak için bu boyutu kullanın.

1. Lazy Loading'i Ortadan Kaldırın: Lazy Loaded filtresini kullanın. Bu değer %0'dan büyükse, hero görseline loading="lazy" ekleyen bileşeni bulun ve bunu kaldırın. Bu durum, lazy loading'i tüm medyaya global olarak uygulayan CMS şablonlarında yaygındır.
2. Fetchpriority'ye Geçiş Yapın: Trafiği Not Preloaded ve Preloaded durumlarından High fetchpriority durumuna taşıyın. <link rel="preload"> etiketini fetchpriority="high" ile değiştirmek, <head> bölümünüzü temizler ve öncelik mantığını doğrudan bileşenle birleştirir.
3. Arka Plan Görsellerini Denetleyin: Not Preloaded hacminiz yüksekse ve LCP'niz bir arka plan görseliyse, tarayıcı bunu çok geç keşfediyordur (ancak CSS ayrıştırıldıktan sonra). Bunu fetchpriority="high" içeren bir HTML <img> etiketine dönüştürmeli veya bir Preload başlığını zorlamalısınız.

Mühendislik Temel Kuralı

Bu boyut için dağılım hedefiniz kesindir:

• <%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 herhangi bir trafik, kaynak önceliği kontrolünü tarayıcının varsayılan sezgisel yöntemlerine teslim ettiğiniz optimize edilmemiş bir durumu temsil eder.