Web Performansında Medya Optimizasyonunun Önemi

Medya dosyaları, ortalama bir web sayfasının toplam ağırlığının yüzde 60 ila 80'ini oluşturur. Ağır görseller sunucu bant genişliğini tüketir, sayfa yükleme sürelerini uzatır ve SEO sıralamalarını düşürür. Başarılı bir dijital strateji, kullanıcı deneyimini bozmadan veri transferini minimize eden modern teknikleri içermelidir. Bu rehber, bant genişliği tüketimini azaltmak için uygulanması gereken pratik optimizasyon adımlarını kapsar.

Adım 1: Yeni Nesil Görsel Formatlarına (WebP ve AVIF) Geçiş

Eski nesil JPEG ve PNG formatları, sıkıştırma verimliliği açısından yetersizdir. Güncel trendler, daha yüksek sıkıştırma oranları sunan modern formatları standart haline getirmiştir.

WebP: JPEG'e kıyasla yüzde 25-35 daha küçük dosya boyutu sağlar. Şeffaflık ve animasyon destekler.
AVIF: WebP'den yüzde 20-30 daha yüksek sıkıştırma sunar. Yüksek dinamik aralık (HDR) desteği içerir.

HTML <picture> etiketiyle tarayıcı uyumluluğuna göre format sunumu yapılmalıdır.

<picture>
  <source srcset="gorsel.avif" type="image/avif">
  <source srcset="gorsel.webp" type="image/webp">
  <img src="gorsel.jpg" alt="Optimize edilmiş görsel" width="800" height="600" loading="lazy" decoding="async">
</picture>

Adım 2: Responsive Görsel Sunumu ve Boyutlandırma

Masaüstü için üretilmiş 4K görseli mobil cihazda yüklemek gereksiz bant genişliği harcar. Tarayıcının ekran genişliğine ve piksel yoğunluğuna uygun boyuttaki görseli seçmesi sağlanmalıdır.

srcset özniteliği ile farklı çözünürlüklerde alternatif dosyalar tanımlayın.
sizes özniteliği ile görselin ekranda kaplayacağı CSS genişliğini tarayıcıya bildirin.
Görsellerin width ve height değerlerini HTML üzerinde belirterek Cumulative Layout Shift (CLS) hatasını engelleyin.

Adım 3: Yerel Tembel Yükleme (Native Lazy Loading) Kullanımı

Ekran dışındaki (below-the-fold) medya içeriklerini kullanıcı o alana kaydırma yapana kadar yüklememek bant genişliğinde ciddi tasarruf sağlar. Harici JavaScript kütüphaneleri yerine tarayıcıların yerel özelliklerini kullanın:

Görsellere loading="lazy" özniteliği ekleyin.
Arka plan görselleri yerine <img> etiketlerini CSS object-fit: cover ile yapılandırın.
İlk ekranda görünen (LCP adayı) ana görsellere loading="lazy" eklemeyin; bu görseller için fetchpriority="high" kullanın.

Adım 4: Video ve Animasyonların Optimizasyonu

GIF dosyaları son derece verimsizdir ve büyük miktarda bant genişliği tüketir. Hareketli grafikler ve video içerikleri için aşağıdaki teknikleri uygulayın:

GIF yerine MP4/WebM: Animasyonlu GIF'leri H.264 veya VP9/AV1 codec bileşenine sahip HTML5 videolarına dönüştürün. Yüzde 80-90 dosya boyutu düşüşü sağlar.
Video Etiketi Optimizasyonu: Otomatik oynatılan döngüsel videolar için doğru öznitelikleri kullanın:

<video autoplay loop muted playsinline preload="none" poster="onizleme.webp">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Adım 5: Vektörel Grafikler (SVG) ve Kayıpsız Sıkıştırma

İkonlar, logolar ve basit illüstrasyonlar için raster formatlar yerine SVG kullanın. SVG dosyaları XML tabanlıdır ve metin sıkıştırmasına uygundur.

Gereksiz meta verileri, düzenleyici etiketlerini ve kullanılmayan XML düğümlerini kaldırmak için SVGO veya benzeri araçlar kullanın.
Sunucuda SVG dosyaları için Gzip veya Brotli sıkıştırmasını aktif edin.

Adım 6: CDN ve Önbellekleme (Caching) Mimarisi

Statik medya dosyalarını optimize ettikten sonra son adım doğru dağıtım ağı ve HTTP başlıklarını yapılandırmaktır.

Uzun Süreli Önbellek: Değişmeyen medya dosyalarına Cache-Control: public, max-age=31536000, immutable başlığı atayın.
Edge Optimization (CDN): Cloudflare, Fastly veya Cloudinary gibi CDN servisleri üzerinden görselleri kullanıcı konumuna göre otomatik dönüştürün ve dağıtın.