Web Programlama Eğitimi: fetchpriority ile LCP Kaynak Sıralama

Web programlama eğitimi: LCP isteğinin neden geç başladığını bulun

LCP görseli HTML'de görünse bile CSS arka planı, JavaScript ile sonradan eklenen bir <img> veya yanlış bir lazy-loading kuralı nedeniyle ağ kuyruğuna geç girebilir. Chrome DevTools Network panelinde sayfayı cache devre dışı ve 4G throttling ile yenileyin; sonra LCP adayının Start Time, Priority ve Initiator sütunlarını kontrol edin. Hedef, LCP kaynağının HTML ayrıştırılır ayrıştırılmaz başlaması ve gereksiz font, analitik veya alttaki görsellerle aynı bant genişliği için yarışmamasıdır.

Ölçümü laboratuvar dışında da tekrarlayın: Lighthouse CI ile en az 5 çalıştırma alın ve medyan LCP'yi karşılaştırın. Tek bir Lighthouse sonucu TCP bağlantı kurulumu, CPU komşuluğu veya CDN POP farkı yüzünden yanıltıcı olabilir. Aşağıdaki yapı, ana dalda LCP bütçesi aşılırsa CI'ı kırar; numberOfRuns değişkenliğini azaltmak için özellikle önemlidir.

module.exports = {
  ci: {
    collect: {
      numberOfRuns: 5,
      url: ['https://staging.example.com/urun/kamera']
    },
    assert: {
      assertions: {
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }]
      }
    }
  }
};

fetchpriority, preload ve responsive görselin doğru bileşimi

fetchpriority="high", tarayıcıya bir kaynak bulunduğunda göreli indirme önceliğini yükseltme sinyali verir; kaynağı keşfetmez. Bu nedenle JavaScript ile oluşturulan veya CSS içinde gizlenen LCP kaynağında tek başına yeterli değildir. Kaynak HTML'de mevcutsa img üzerinde kullanın; kaynak geç keşfediliyorsa, aynı URL ve aynı responsive seçimiyle link rel="preload" ekleyin.

Aşağıdaki örnekte preload içindeki imagesrcset ile görsel etiketi birebir eşleşir. Eşleşme yoksa tarayıcı 768w dosyasını preload edip daha sonra 1440w dosyasını seçebilir; bu hem çift indirme hem de LCP gecikmesi demektir. width ve height yerleşim oranını başlangıçtan bildirdiği için CLS ölçümünü de korur.

<link rel="preload" as="image"
  href="/media/hero-1440.avif"
  imagesrcset="/media/hero-768.avif 768w,
               /media/hero-1440.avif 1440w"
  imagesizes="(max-width: 768px) 100vw, 1200px"
  fetchpriority="high">

<img
  src="/media/hero-1440.avif"
  srcset="/media/hero-768.avif 768w,
          /media/hero-1440.avif 1440w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1440" height="810"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  alt="Kamera ürününün ön görünümü">

Her görsele high vermek yaygın ve maliyetli bir hatadır. HTTP/2 ve HTTP/3 çoklu akış kullansa da istemci öncelikleri, bağlantı başlangıcı ve sunucu planlaması sınırlı kaynakları paylaşır. İlk viewport'ta LCP olabilecek tek görseli high yapın; carousel içindeki görünmeyen slaytları loading="lazy" ile erteleyin. DevTools'ta değişiklikten önce ve sonra LCP görselinin request priority'sini, request start zamanını ve Lighthouse medyanını aynı URL üzerinde kaydedin.

JavaScript eğitimi: Resource Timing ile gerçek kullanıcı verisi toplayın

Sentetik test, test cihazının ağını ölçer; kullanıcıların hangi CDN bölgesinden, hangi viewport ile geldiğini göstermez. PerformanceObserver ile LCP adayını, ardından aynı URL için Resource Timing kaydını toplayıp RUM uç noktanıza gönderin. Kaynak farklı origin'deyse CDN yanıtına Timing-Allow-Origin: https://uygulama.example.com eklenmelidir; aksi durumda responseStart ve ayrıntılı transfer alanları sıfırlanır.

const lcpObserver = new PerformanceObserver((list) => {
  const entry = list.getEntries().at(-1);
  const resource = performance.getEntriesByType('resource')
    .find((r) => r.name === entry.url);

  navigator.sendBeacon('/rum/lcp', JSON.stringify({
    url: entry.url,
    lcpMs: Math.round(entry.startTime),
    requestStartMs: resource && Math.round(resource.requestStart),
    responseStartMs: resource && Math.round(resource.responseStart),
    transferSize: resource && resource.transferSize
  }));
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

Bu veride yalnızca LCP değerini grafiklemek yerine iki ayrımı yapın: requestStartMs yüksekse keşif zinciri sorunudur ve preload veya SSR HTML'i incelenmelidir; responseStartMs - requestStartMs yüksekse CDN cache hit oranı, origin TTFB veya görsel dönüşümü incelenmelidir. Bu ayrım, bir frontend değişikliğiyle çözülmeyecek origin gecikmesine yanlışlıkla fetchpriority eklemeyi engeller.

Frontend framework karşılaştırması: React, Angular ve Vue'da SSR farkı

Bir frontend framework karşılaştırması yaparken kritik fark, LCP etiketinin ilk HTML yanıtında bulunup bulunmadığıdır. Reactjs eğitimi projelerinde istemci tarafında veri geldikten sonra hero görselini render etmek, tarayıcının isteği JavaScript parse ve fetch tamamlanana kadar keşfedememesi anlamına gelir. React sunucu render akışında görsel URL'si sunucuda biliniyorsa etiketi doğrudan HTML'e koyun; hydration'ın bitmesini bekletmeyin.

export function ProductHero({ product }) {
  return (
    <img
      src={product.heroUrl}
      width={1440}
      height={810}
      fetchPriority="high"
      loading="eager"
      alt={product.name}
    />
  );
}

Angular eğitimi kapsamında Angular Universal veya başka bir SSR katmanı kullanılıyorsa hero verisini route resolver ya da sunucu veri erişimiyle HTML üretiminden önce çözün. Yalnızca tarayıcıda çalışan ngOnInit içinde URL atamak, React'teki istemci fetch gecikmesinin aynısını üretir. Vuejs eğitimi örneklerinde de SSR'da <img :src="heroUrl"> üretmek gerekir; istemciye özel onMounted çağrısında URL belirlemek preload fırsatını kaçırır.

Angularjs eğitimi ile karşılaşılan eski uygulamalarda ng-src kullanımı XSS ve boş URL isteklerini önlese de ilk HTML'de gerçek src üretmez; AngularJS bootstrap sonrasına kadar görsel keşfedilemeyebilir. Bu tür sayfalarda sunucunun hero etiketini render etmesi veya eşleşen bir preload göndermesi daha güvenlidir. React Native eğitimi için ise bu teknik doğrudan taşınmaz: native Image bileşeni tarayıcı Resource Timing ve HTML preload mekanizmasını kullanmaz; platforma özgü image cache ve ağ izleme araçlarıyla ayrı ölçüm yapılmalıdır.

Uygulama sırası: değişikliği kontrollü ve geri alınabilir yapın

Önce yalnızca bir şablonda deney yapın: LCP görseline loading="eager" ve fetchpriority="high" ekleyin, gerekiyorsa preload ekleyin. Sonra WebPageTest'te aynı konum, bağlantı profili ve tarayıcıyla en az 9 test çalıştırıp medyan waterfall'ları karşılaştırın. Kabul kriteri, LCP isteğinin daha erken başlamasıdır; yalnızca toplam skorun değişmesi yeterli kanıt değildir.

CDN veya reverse proxy'nin Link başlığını bozup bozmadığını da doğrulayın. HTML'den erken gönderilen aşağıdaki başlık, istemcinin HTML gövdesini beklemeden preload'u görmesini sağlayabilir. Ancak uygulama zaten aynı kaynağı farklı crossorigin, imagesrcset veya URL parametresiyle istiyorsa ikinci bir transfer doğurur; Network panelinde tek istek kaldığını denetleyin.

Link: </media/hero-1440.avif>; rel=preload; as=image; fetchpriority=high

Son olarak RUM verisini cihaz sınıfına göre ayırın. Yavaş mobil ağlarda LCP iyileşirken masaüstünde CSS veya web fontu gecikmesi artıyorsa, high önceliği yanlış kaynağa verilmiş olabilir. Bu nedenle dağıtımı feature flag ile başlatın, LCP'nin p75 değerini ve LCP kaynağının transfer boyutunu birlikte izleyin; regresyonda preload'u değil önce öncelik işaretini geri alın.

Sık Sorulan Sorular

web programlama eğitimi projelerinde fetchpriority ne zaman high olmalı?

Sadece ilk viewport'taki gerçek LCP adayı için high kullanın. DevTools Network'te bu kaynağın LCP raporundaki URL ile eşleştiğini doğrulayın; carousel'in gizli slaytları veya aşağıdaki kart görselleri high olmamalıdır.

reactjs eğitimi uygulamasında preload çift görsel indirmesi neden olur?

Preload href'i ile React'in ürettiği src, srcset seçimi, URL parametresi veya crossorigin niteliği farklıysa tarayıcı bunları ayrı kaynak sayabilir. Preload ve img üzerinde aynı imagesrcset, imagesizes ve nihai CDN URL'sini kullanın; Network panelinde transfer sayısını kontrol edin.

angular eğitimi ile geliştirilen SSR sayfasında LCP hala geçse ne ölçülmeli?

PerformanceObserver ile LCP URL'si için requestStart ve responseStart değerlerini toplayın. requestStart geçse HTML keşfi, resolver veya preload zinciri; responseStart gecikse CDN cache, origin TTFB ya da görsel dönüşüm servisi incelenmelidir.

javascript eğitimi kapsamında Resource Timing neden boş zaman alanları döndürür?

Görsel başka origin'den geliyorsa sunucu Timing-Allow-Origin göndermediğinde ayrıntılı zamanlama alanları tarayıcı tarafından gizlenir. CDN yanıtına uygulama origin'ini veya kontrollü şekilde '*' ekleyin ve bunu gerçek kullanıcı tarayıcısında doğrulayın.