SVG ve resim formatı seçimleri performansı nasıl etkiler?

Kısa cevap: Format, içeriğin türüne göre seçilir: logo ve ikonlarda SVG, fotoğraflarda AVIF veya WebP. Yanlış format aynı görsel için gereksiz bayt taşır ve LCP'yi geciktirir; ölçüsüz yerleştirilen görsel ise üstüne CLS üretir.

Pratik kurallar

• SVG vektöreldir, her çözünürlükte keskin kalır; SVGO ile küçültün, kritik ikonları inline verin. Çok karmaşık çizimlerde SVG raster dosyadan büyüyebilir; ölçüp karar verin.
• Fotoğrafları picture etiketiyle AVIF ve WebP olarak sunun; eski tarayıcılara JPEG yedeği bırakın.
• Şeffaflık gereken görsellerde PNG'den önce WebP'yi deneyin.
• Her img etiketinde width ve height tanımlayın; CLS'in en yaygın kaynağı ölçüsüz görseldir.
• LCP görseline fetchpriority ile öncelik verin, ekran altını lazy load ile erteleyin, srcset ile cihaza uygun boyut gönderin.

Etkiyi tahminle değil ölçümle yönetin: Lighthouse görsel denetimleriyle başlayın, sonucu CrUX alan verisindeki LCP ve CLS dağılımıyla doğrulayın. Google'ın eşikleri kamuya açıktır: LCP 2,5 saniyenin, CLS 0,1'in altında iyidir.