Görseller genellikle bir sayfadaki en ağır byte'lardır, bu yüzden onları optimize etmek en büyük LCP kazancıdır. Üç kaldıraç: modern formatlar, responsive boyutlandırma ve yükleme önceliği.
AVIF ve WebP, aynı kalitede JPEG/PNG'den çok daha küçük sıkışır (AVIF genellikle JPEG'den %50 daha küçük). Eski tarayıcıların hâlâ çalışması için bir yedekle (fallback) sunun:
2000px'lik bir görseli 400px'lik bir telefona göndermeyin. srcset, tarayıcının cihaz için doğru boyutu seçmesini sağlar:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes, tarayıcıya görselin ne kadar geniş render edildiğini söyler, böylece yeterli en küçük kaynağı seçebilir.
fetchpriority="high", loading="eager" ve bir preload düşünün.loading="lazy", böylece gerekene kadar getirilmez.CLS'yi önlemek için width/height'ı her zaman koruyun.
Yavaş bir LCP çoğunlukla sadece aşırı büyük bir hero görselidir. Formatları (AVIF/WebP), doğru çözünürlük için srcset'i ve doğru önceliği bilmek — artı LCP görselini lazy-load etmemek — görüşmecilerin beklediği pratik araç setidir ve gerçek bir sitede genellikle tek başına en yüksek etkili değişikliktir.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap