Core/Dash Boyutu: LCP Önceliği

Boyut: Kaynak: LCP Önceliği

LCP Önceliği boyutu, performans verilerini tarayıcının LCP kaynağını nasıl keşfettiğine ve önceliklendirdiğine göre bölümlere ayırır. "Öğe Türü" (Element Type) boyutu size öğenin ne olduğunu (Metin veya Görsel) söylerken, bu boyut size tarayıcının onu yüklemeyi neden geciktirdiğini söyler.

Bu, Yükleme Gecikmesi (Load Delay) için birincil denetim aracınızdır. LCP varlığınızın bant genişliği için mücadele edip etmediğini veya yanlış HTML nitelikleri 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 (Tembel Yüklenen - Lazy Loaded) en optimal olana (Metin/Yüksek Öncelikli) doğru sıralanmış beş belirli yükleme durumundan birine eşler.

Arka Plan: Bir kullanıcı "Geri" veya "Yenile" düğmesi aracılığıyla 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ünüm alanındaki (viewport) en büyük öğeyi ölçer. Bu, veri kümenizde kaçınılmaz bir "Önceden Yüklenmemiş (Not Preloaded)" olaylar dizisi oluşturur. Ve bu tamamen normaldir!

1. Tembel Yüklenen (Lazy Loaded)

LCP öğelerinizin %10'undan fazlası bu grupta görünüyorsa, bir sorun tespit ettiniz demektir. Tembel yüklenen (lazy loading) görseller çok daha sonra (hızlı ön yükleme tarayıcısı tarafından değil, yavaş DOM ayrıştırıcısı tarafından) sıraya alınır. loading="lazy" niteliği, tarayıcıya düzen (layout) hesaplanana ve öğe görünüm alanına yaklaşana kadar indirme işlemi için beklemesini söyler.

Çözüm: Bu yükleme niteliğini kaldırmalısınız. LCP öğesi asla tembel yüklenmemelidir.

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

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

2. Önceden Yüklenmemiş (Not Preloaded)

Bu, varsayılan tarayıcı davranışını temsil eder. Tarayıcı, ilk ayrıştırma (parse) sırasında HTML içindeki görseli keşfetti ancak ona diğer görsellere göre öncelik vermesi için herhangi bir sinyal verilmedi.

Sayfa hızına (pagespeed) etkisi, web sayfanızın karmaşıklığına bağlıdır. LCP görseli bir kaynak çekişmesi kuyruğuna girer. Sayfanızda indirilecek birçok komut dosyası (script), yazı tipi (font), tembel olmayan (non-lazy) diğer görseller veya stiller varsa, tarayıcı bu görseli indirmeyi geciktirebilir ve Yükleme Gecikmesini (Load Delay) artırabilir.

3. Önceden Yüklenmiş (Preloaded)

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

Önceden yükleme, erken indirmeyi zorlamanın en etkili yoludur; önceden yükleme, görsel URL'si ile tam olarak eşleşmesi gereken ayrı bir bağlantı (link) etiketinin korunmasını gerektirir. Eğer birbirlerinden uzaklaşırlarsa (eşleşmezlerse), bir varlığı iki kez indirmiş olursunuz.

4. Yüksek Getirme Önceliği (High fetchpriority)

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

Strateji: Bu, görsel tabanlı LCP için hedef durumdur. Doğrudan öğe üzerinde önemi işaret eder ve manuel ön yükleme etiketlerinin (preload tags) bakım yükü olmadan onu indirme kuyruğundaki diğer varlıkların üzerine yükseltir.

5. Görsel Değil (Not an Image)

Durum: Metin Düğümü (Text Node) / SVG

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

Optimizasyon: LCP'niz bu kategoride ancak hala yavaşsa, darboğaz tamamen Oluşturma Gecikmesidir (Render Delay). İndirilecek bir görsel dosyası olmadığı için Kritik Oluşturma Yolunuzu (Critical Rendering Path) (CSS/JS engellemesi) veya yazı tipi yükleme stratejinizi (font-display: swap) optimize etmelisiniz.

İş Akışı: Yükleme Gecikmesini (Load Delay) Optimize Etme

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

1. Tembel Yüklemeyi (Lazy Loading) Ortadan Kaldırın: Tembel Yüklenen (Lazy Loaded) seçeneğine göre filtreleyin. Bu değer %0'dan büyükse, hero görseline loading="lazy" ekleyen bileşeni bulun ve bunu kaldırın. Bu, tembel yüklemeyi (lazy loading) tüm medyaya genel olarak uygulayan CMS şablonlarında yaygındır.
2. Fetchpriority'ye Geçin: Trafiği Önceden Yüklenmemiş (Not Preloaded) ve Önceden Yüklenmiş (Preloaded) durumlarından Yüksek Getirme Önceliği (High fetchpriority) durumuna taşıyın. <link rel="preload"> etiketini fetchpriority="high" ile değiştirmek, <head> kısmınızı temizler ve öncelik mantığını doğrudan bileşene bağlar.
3. Arka Plan Görsellerini Denetleyin: Önceden Yüklenmemiş (Not Preloaded) kategorisinde yüksek hacminiz varsa ve LCP'niz bir arka plan görseliyse, tarayıcı bunu çok geç (sadece CSS ayrıştırıldıktan sonra) keşfediyordur. Bunu fetchpriority="high" içeren bir HTML <img> etiketiyle yeniden düzenlemeli (refactor) veya bir Preload başlığını zorlamalısınız.

Mühendislik Temel Kuralı

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

• <%10 Tembel Yüklenen (Lazy Loaded)
• > %90 Yüksek Getirme Önceliği (High fetchpriority) (Görsel LCP'leri için)
• %100 Görsel Değil (Metin LCP'leri için)

"Önceden Yüklenmemiş (Not Preloaded)" kategorisine düşen herhangi bir trafik, kaynak önceliği kontrolünü tarayıcının varsayılan buluşsallarına (heuristics) teslim ettiğiniz optimize edilmemiş bir durumu temsil eder.