Görsel Optimizasyonunda Webp Ve Avif Formatlarının CLS Skoruna Etkisi Nedir?

Görsel optimizasyonu, Core Web Vitals (CWV) dünyasında genellikle LCP (En Büyük İçerik Boyaması) ile ilişkilendirilse de, WebP ve AVIF gibi modern formatların doğru kullanımı CLS (Cumulative Layout Shift – Kümülatif Düzen Kayması) skoru üzerinde de kritik, ancak dolaylı bir etkiye sahiptir.

İşte bu modern formatların, sayfa kararlılığı ve görsel hiyerarşisi üzerindeki teknik analizi:

1. Dosya Boyutu ve İndirme Önceliği İlişkisi

CLS, sayfa yüklenirken öğelerin beklenmedik şekilde yer değiştirmesini ölçer. Görseller bu kaymaların en büyük sorumlusudur.

• Hızlı Render (Görselleştirme): AVIF, WebP’ye göre %30, JPEG’e göre ise %50’ye varan oranlarda daha yüksek sıkıştırma verimliliği sunar. Dosya boyutu ne kadar küçük olursa, tarayıcı görseli o kadar hızlı indirir ve “boş alan”ı o kadar çabuk doldurur.
• İşlemci (CPU) Verimliliği: AVIF daha karmaşık bir kod çözme (decoding) süreci gerektirse de, dosya boyutunun küçüklüğü ağ gecikmesini (latency) azaltır. Bu durum, özellikle düşük donanımlı mobil cihazlarda görselin ekrana basılma anındaki takılmaları minimize eder.

2. Boyut Belirleme (Aspect Ratio) ve Yer Tutucular

Format ne olursa olsun, CLS’yi asıl etkileyen şey tarayıcının görsel gelmeden önce ne kadarlık bir alan ayıracağını bilmemesidir.

• Modern Yaklaşım: webp veya avif kullanırken HTML içinde width ve height niteliklerini mutlaka belirtmelisiniz. Bu, modern tarayıcıların Aspect Ratio (En-Boy Oranı) kutusunu görsel yüklenmeden önce oluşturmasını sağlar.
• Artış Gösteren CLS: Eğer boyut belirtilmezse, AVIF gibi çok küçük boyutlu bir görsel bile yüklendiği anda altındaki metni aşağı iterek CLS puanınızı artıracaktır. Formatın “hafifliği” bu hatayı telafi etmez.

3. <picture> Elementi ile Akıllı Dağıtım

WebP ve AVIF kullanımı genellikle <picture> etiketiyle gerçekleştirilir. Bu yapı, tarayıcının desteklediği en iyi formatı seçmesini sağlar:

HTML

<picture>
  <source srcset="gorsel.avif" type="image/avif">
  <source srcset="gorsel.webp" type="image/webp">
  <img src="gorsel.jpg" alt="Örnek Görsel" width="800" height="600" loading="lazy">
</picture>

• CLS Avantajı: Tarayıcı, henüz görseli indirmeye başlamadan hangi kaynağı kullanacağına karar verir. En alttaki <img> etiketinde tanımlanan width ve height değerleri, yukarıdaki tüm formatlar için “yer ayırıcı” (placeholder) görevi görür. Bu sayede görsel AVIF de olsa WebP de olsa, kaplayacağı alan önceden bloke edilir ve düzen kayması (Layout Shift) sıfıra indirilir.

4. Teknik Çıkarımlar ve Uygulama Planı (Actionable Insights)

• LCP ve CLS Dengesi: LCP’yi iyileştirmek için en agresif sıkıştırmayı sunan AVIF‘i tercih edin. Ancak CLS’yi korumak için bu görselin kapsayıcı (container) boyutlarını CSS veya HTML ile sabitleyin.
• Placeholder Teknikleri: Görsel yüklenene kadar boş bir alan bırakmak yerine, AVIF görselin çok düşük çözünürlüklü bir versiyonunu (Blurry Placeholder) arka plan olarak kullanmak, kullanıcı deneyimini iyileştirir ancak CLS’yi etkilemez.
• E-E-A-T ve Profesyonellik: Görselleri WebP/AVIF’e dönüştürürken “Artefakt” denilen bozulmaların oluşmadığından emin olun. Telfence veya Togg gibi görsel kalitesinin önemli olduğu markalarda, aşırı sıkıştırma “güvenilirlik” algısını zedeleyebilir.

Sıkça Sorulan Sorular (FAQ)

Soru: Sadece WebP kullansam CLS düzelir mi? Cevap: Hayır. WebP sadece dosyanın daha hızlı inmesini sağlar. Eğer görselin boyutlarını (width/height) kodda belirtmediyseniz, WebP kullanmanız düzen kaymasını engellemez.

Soru: AVIF her tarayıcıda çalışır mı? Cevap: Güncel tarayıcıların çoğu (Chrome, Firefox, Safari 16+) destekliyor. Ancak <picture> yapısını kullanarak desteklemeyen tarayıcılar için WebP veya JPEG yedeği sunmalısınız.

Sonuç: WebP ve AVIF, sayfa yükleme hızını artırarak tarayıcının düzeni (layout) oluşturma sürecini hızlandırır. Ancak CLS skorunu sıfırlamanın yolu format değil, tarayıcıya görselin boyutlarını önceden söylemektir.

Görsel optimizasyonunda hangi araçları (Squoosh, Cloudinary vb.) kullanmayı tercih ediyorsun? Belirli bir proje için toplu dönüşüm mü yapacaksın?