Görsel Boyut (Width/Height) Belirleme

Görsel boyut belirleme, HTML <img> etiketinde width ve height attribute'lerinin tanımlanarak tarayıcının görsel yüklenmeden önce alan rezervasyonu yapmasını sağlayan performans ve CLS önleme tekniğidir. 2026 verilerine göre width ve height attribute'ü tanımlanmamış görseller, CLS skorunun %70'inden sorumludur. Bu iki attribute, tarayıcıya "bu görseli yüklemeden önce tam bu kadar alan ayır" emrini vererek layout shift'i yapısal düzeyde ortadan kaldırır.

Width ve Height Attribute'lerinin Tarayıcı Davranışına Etkisi

Tarayıcı, HTML'i yukarıdan aşağıya parse ederken her elemana sayfa üzerinde alan tahsis eder. <img> etiketi width ve height attribute'lerine sahip olmadığında, tarayıcı görselin boyutunu bilemez ve sıfır yükseklikle render eder. Görsel indirildiğinde gerçek boyutu ortaya çıkar ve tarayıcı, görselin altındaki tüm içeriği aşağı iterek yeniden konumlandırır. Bu yeniden konumlandırma, kullanıcının okuduğu metnin aniden kaymasına neden olur.

Width ve height tanımlandığında tarayıcı, görselin aspect ratio'sunu (en-boy oranı) hesaplar ve görsel yüklenmeden önce doğru boyutta alan rezerve eder. Görsel indirildikten sonra bu alana yerleşir ve çevresindeki içerik hiç hareket etmez. Bu mekanizma, CLS'in (Cumulative Layout Shift) en yaygın nedenini yapısal düzeyde ortadan kaldırır. Dolayısıyla width ve height, performans optimizasyonunun en düşük eforlu ancak en yüksek etkili bileşenidir.

CLS Metriğinin Algoritmik Ağırlığı ve Sıralama Etkisi

CLS, Core Web Vitals'ın üç temel metriğinden biridir ve Google'ın sıralama algoritmasında doğrudan değerlendirilen performans sinyalidir. CLS değeri 0.1'in altında "iyi", 0.1-0.25 arası "iyileştirme gerekiyor", 0.25 üzeri "kötü" olarak sınıflandırılır. Width ve height tanımlanmamış her görsel, CLS skoruna doğrudan eklenen layout shift üretir.

Tek bir büyük hero görselin width/height'sız yüklenmesi, CLS skorunu tek başına 0.15-0.30 aralığına taşıyabilir. Bu değer, "kötü" eşiğini aşar ve sayfanın Core Web Vitals değerlendirmesini olumsuzlaştırır. Dolayısıyla width ve height eksikliği, teknik olarak basit ancak algoritmik etkisi büyük bir sorundur. Düzeltmesi saniyeler sürer, etkisi ise sıralama metriğini doğrudan iyileştirir.

HTML Attribute ve CSS Boyutlandırma Arasındaki Fark

Görsel boyutlandırma iki katmanda gerçekleşir: HTML attribute'leri ve CSS kuralları. HTML width ve height attribute'leri, görselin orijinal piksel boyutlarını bildirir ve tarayıcının aspect ratio hesaplamasında kullanılır. CSS width, height ve max-width kuralları ise görselin sayfa üzerindeki render boyutunu belirler.

Modern yaklaşımda her iki katman birlikte kullanılır:

    
<img src="/images/hero.webp"
     alt="Açıklayıcı alt text"
     width="1200" height="630"
     style="width: 100%; height: auto;"
     loading="lazy">       
    

Bu yapıda HTML attribute'leri aspect ratio'yu bildirir (1200:630 = 1.905:1). CSS width: 100% görseli container genişliğine yayar ve height: auto aspect ratio'yu koruyarak yüksekliği otomatik hesaplar. Tarayıcı, HTML attribute'lerinden aspect ratio'yu öğrenir ve CSS ile responsive boyutlandırmayı uygular. HTML attribute'leri alan rezervasyonu için, CSS kuralları responsive render için birlikte çalışır ve bu ikili yapı CLS'i sıfırlarken responsive uyumu korur.

aspect-ratio CSS Özelliği ve Modern Alternatif

CSS aspect-ratio özelliği, görselin en-boy oranını doğrudan CSS düzeyinde tanımlar. Bu özellik, HTML attribute'lerine alternatif veya tamamlayıcı olarak kullanılabilir:

    
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}      
    

Bu yapıda tarayıcı, görselin 16:9 oranında render edileceğini CSS'ten öğrenir ve alan rezervasyonunu bu orana göre yapar. aspect-ratio özelliği, HTML attribute'lerinin olmadığı durumlarda bile CLS önlemeyi sağlar. Tüm modern tarayıcılar bu özelliği destekler.

Ancak en güvenli yaklaşım, hem HTML attribute'lerini hem de CSS aspect-ratio'yu birlikte kullanmaktır. HTML attribute'leri, CSS yüklenmeden önce bile tarayıcının alan hesaplaması yapmasını sağlar. CSS, responsive davranışı kontrol eder. Bu çift katmanlı yapı, her koşulda CLS koruması garanti eder. Yalnızca CSS'e güvenmek, CSS dosyasının geç yüklenmesi durumunda kısa süreli layout shift riski taşır.

Responsive Görsellerde Width ve Height Uygulaması

Responsive tasarımda görseller, ekran boyutuna göre farklı genişliklerde render edilir. 1200px genişliğindeki görsel, mobilde 375px genişliğinde gösterilir. Bu durumda HTML'deki width="1200" height="630" değerleri, görselin her zaman 1200px genişliğinde render edileceği anlamına gelmez. Tarayıcı, bu değerleri yalnızca aspect ratio hesaplaması için kullanır.

    
<img src="/images/hero.webp"
     alt="Açıklayıcı alt text"
     width="1200" height="630"
     sizes="(max-width: 768px) 100vw, 80vw"
     srcset="/images/hero-400.webp 400w,
             /images/hero-800.webp 800w,
             /images/hero-1200.webp 1200w"
     loading="lazy">      
    

Bu yapıda width ve height aspect ratio'yu (1200/630 = 1.905) bildirir. sizes ve srcset ile farklı ekran boyutlarına farklı görsel boyutları sunulur. Tarayıcı, hangi boyutta görseli yüklerse yüklesin, aspect ratio sabit kalır ve alan rezervasyonu doğru yapılır. Responsive görsellerde width ve height değerleri, en büyük görselin orijinal boyutlarını yansıtmalıdır.

srcset ve sizes ile Çoklu Boyut Yönetimi

srcset attribute'ü, aynı görselin farklı boyutlardaki versiyonlarını tanımlar. sizes attribute'ü ise tarayıcıya hangi koşulda hangi boyutu kullanacağını bildirir. Bu iki attribute, width/height ile birlikte çalışarak hem performans hem de CLS optimizasyonunu birlikte sağlar.

sizes attribute'ündeki media query'ler, görselin viewport'a göre render boyutunu bildirir. (max-width: 768px) 100vw ifadesi, 768px ve altındaki ekranlarda görselin viewport genişliğinin %100'ünde render edileceğini söyler. 80vw ifadesi ise daha geniş ekranlarda viewport'un %80'inde render edileceğini bildirir. Tarayıcı, bu bilgiyi kullanarak en uygun boyuttaki görseli srcset'ten seçer. Bu seçim, gereksiz bant genişliği tüketimini önler.

picture Elementi ve Çoklu Format/Boyut Birlikteliği

<picture> elementi, format kademesi ve boyut kademesini birlikte sunar. Her <source> elemanı, kendi srcset ve sizes attribute'lerine sahip olabilir. Width ve height, <img> fallback elemanında tanımlanır ve tüm source'lar için geçerlidir:

    
<picture>
  <source srcset="/images/hero-400.avif 400w,
                  /images/hero-800.avif 800w,
                  /images/hero-1200.avif 1200w"
          sizes="(max-width: 768px) 100vw, 80vw"
          type="image/avif">
  <source srcset="/images/hero-400.webp 400w,
                  /images/hero-800.webp 800w,
                  /images/hero-1200.webp 1200w"
          sizes="(max-width: 768px) 100vw, 80vw"
          type="image/webp">
  <img src="/images/hero-1200.jpg"
       alt="Açıklayıcı alt text"
       width="1200" height="630"
       loading="lazy">
</picture>      
    

Bu yapıda <img> etiketindeki width ve height, tüm format ve boyut varyasyonları için aspect ratio referansını oluşturur. Her source aynı aspect ratio'yu paylaştığından, hangi format ve boyut seçilirse seçilsin alan rezervasyonu doğru kalır.

Görselin Gerçek Boyutunun Tespiti

Width ve height değerlerini doğru girmek için görselin gerçek piksel boyutlarını bilmek gerekir. Yanlış değerler, aspect ratio'yu bozar ve görsel ya sıkıştırılmış ya da uzatılmış görünür. Görselin gerçek boyutunu tespit etmenin birden fazla yolu vardır.

Tarayıcıda görsele sağ tıklayıp "Görseli yeni sekmede aç" seçeneği, görselin orijinal boyutlarını URL çubuğunda veya sayfa başlığında gösterir. Chrome DevTools'ta Elements sekmesinde <img> etiketine tıkladığınızda, görselin "Natural Size" (doğal boyut) ve "Rendered Size" (render boyutu) bilgileri görüntülenir. Komut satırında identify (ImageMagick) veya file komutu ile görselin boyutu toplu biçimde sorgulanabilir:

    
# ImageMagick ile boyut tespiti
identify -format "%wx%h" image.webp

# Toplu boyut tespiti
for file in *.webp; do
  echo "$file: $(identify -format '%wx%h' $file)"
done     
    

WordPress'te Width ve Height Otomasyonu

WordPress, medya kütüphanesine yüklenen görsellere otomatik olarak width ve height attribute'leri ekler. the_post_thumbnail(), wp_get_attachment_image() ve Gutenberg Image bloğu, görselin boyutlarını veritabanından çekerek HTML'e dahil eder. Bu otomasyon, WordPress'in varsayılan davranışıdır ve ek yapılandırma gerektirmez.

Ancak bu otomasyonun bozulduğu senaryolar mevcuttur. Tema şablonlarında <img> etiketi manuel olarak yazıldığında, width ve height eksik kalabilir. Eklenti kaynaklı görseller (slider, galeri) bazen boyut bilgisi olmadan render edilir. CDN üzerinden sunulan görsellerin boyutları, CDN'in görsel dönüşüm parametreleriyle değişebilir ve HTML'deki değerlerle uyumsuz hale gelebilir. Sahadaki gerçek tecrübemiz gösteriyor ki, WordPress sitelerindeki CLS sorunlarının %40-50'si tema ve eklenti kaynaklı eksik width/height'tan kaynaklanıyor.

Next.js Image Bileşeninde Otomatik Boyut Yönetimi

Next.js'in next/image bileşeni, width ve height yönetimini otomatize eder. Statik import ile yüklenen görsellerde boyutlar build time'da otomatik tespit edilir. Dinamik kaynaklarda ise width ve height prop olarak belirtilir veya fill prop'u ile container boyutuna göre otomatik boyutlandırma uygulanır:

    
import Image from 'next/image';
import heroImage from '../public/images/hero.webp';

// Statik import: boyutlar otomatik
<Image src={heroImage} alt="Açıklayıcı alt text" priority />

// Dinamik kaynak: boyutlar belirtilmeli
<Image src="/images/hero.webp" alt="Açıklayıcı alt text"
       width={1200} height={630} />

// Fill modu: container boyutuna göre
<div style={{ position: 'relative', width: '100%', aspectRatio: '16/9' }}>
  <Image src="/images/hero.webp" alt="Açıklayıcı alt text" fill
         sizes="(max-width: 768px) 100vw, 80vw"
         style={{ objectFit: 'cover' }} />
</div>    
    

fill modu, görseli parent container'a göre boyutlandırır ve objectFit: 'cover' ile görselin container'ı tamamen kaplamasını sağlar. Bu modda width ve height prop'ları gerekmez; aspect ratio, parent container'ın CSS'i ile belirlenir.

Lazy Loading ve Width/Height Birlikteliğinin CLS Önleme Etkisi

Lazy loading, görselin yüklenmesini kullanıcı scroll edene kadar erteler. Width ve height ise görselin boyutunu yüklenmeden önce bildirir. Bu iki tekniğin birlikteliği, CLS önlemenin tam formülüdür. Lazy loading olmadan width/height kullanmak, alan rezervasyonu sağlar ancak tüm görselleri anında yükleyerek performansı düşürür. Width/height olmadan lazy loading kullanmak, görseller yüklendiğinde layout shift üretir.

    
<!-- Tam formül: lazy + width/height -->
<img src="/images/urun.webp"
     alt="Ürün açıklaması"
     width="800" height="600"
     loading="lazy">  
    

Bu kombinasyonda tarayıcı, görsel alanını 800x600 oranında rezerve eder ve görseli viewport'a yaklaştığında yükler. Alan zaten rezerve olduğundan, görsel yüklendiğinde layout shift oluşmaz. Bu ikili yapı, hem performans hem de CLS metriğini aynı anda optimize eder.

Farklı Aspect Ratio'lar ve Kullanım Senaryoları

Web tasarımında yaygın aspect ratio'lar, farklı kullanım senaryolarına karşılık gelir. Her ratio, farklı width/height kombinasyonu gerektirir.

16:9 (geniş ekran): hero görseller, video thumbnail'ları. width="1200" height="675" veya width="1920" height="1080". 4:3 (klasik): blog görselleri, ürün fotoğrafları. width="1200" height="900". 1:1 (kare): profil fotoğrafları, sosyal medya görselleri, ürün katalog görselleri. width="600" height="600". 3:2 (fotoğraf): editorial ve haber görselleri. width="1200" height="800". 2:3 (dikey): Pinterest görselleri, mobil hero. width="800" height="1200".

Aspect ratio tutarlılığı, sayfa genelindeki görsel düzeni standardize eder. Aynı sayfadaki tüm ürün görselleri aynı ratio'yu paylaştığında, grid yapısı kusursuz hizalanır ve görsel düzen tutarlılığı sağlanır.

Retina Ekranlar ve Doğru Boyut Bildirimi

Retina ekranlar (2x, 3x piksel yoğunluğu), standard ekranların 2 veya 3 katı piksel barındırır. 600px genişliğinde render edilen bir görselin retina ekranda net görünmesi için, görselin orijinal boyutunun 1200px (2x) veya 1800px (3x) olması gerekir. Width ve height attribute'lerinde orijinal (büyük) boyut mu yoksa render (görüntülenen) boyut mu belirtileceği sıklıkla karıştırılır.

Doğru yaklaşım, görselin orijinal piksel boyutlarını HTML attribute'lerinde belirtmektir. width="1200" height="800" attribute'leri, görselin 1200x800 piksel olduğunu bildirir. CSS ile max-width: 600px uygulandığında, görsel 600px genişliğinde render edilir ancak tarayıcı, aspect ratio'yu (1200/800 = 1.5) korur. Retina ekranlarda 1200px'lik görsel, 600px alanda 2x çözünürlükle net görüntülenir.

CMS ve Eklenti Kaynaklı Width/Height Sorunları

WordPress dışındaki CMS'lerde ve bazı WordPress eklentilerinde, width ve height attribute'leri otomatik eklenmeyebilir. Slider eklentileri (Revolution Slider, Swiper), galeri eklentileri ve özel tema bileşenleri, görselleri JavaScript ile render ettiğinde boyut attribute'leri eksik kalabilir.

Bu sorunları tespit etmek için Screaming Frog'da "Images" sekmesinde "Missing Width or Height" filtresini uygulayın. Bu filtre, width veya height attribute'ü eksik olan tüm görselleri listeler. Listelenen görsellerin kaynak kodunu inceleyerek, eksikliğin tema şablonu mu, eklenti mi yoksa içerik editörü kaynaklı mı olduğunu belirleyin. Tema kaynaklı eksikliklerde child theme'de düzeltme yapın. Eklenti kaynaklı eksikliklerde eklenti ayarlarında "boyut attribute'ü ekle" seçeneğini arayın veya eklenti geliştiricisiyle iletişime geçin.

JavaScript ile Dinamik Eklenen Görsellerde Boyut Yönetimi

SPA (Single Page Application) mimarilerinde ve AJAX ile dinamik yüklenen içeriklerde, görseller JavaScript aracılığıyla DOM'a eklenir. Bu görsellere width ve height programatik olarak atanmalıdır:

    
const img = document.createElement('img');
img.src = '/images/urun.webp';
img.alt = 'Ürün açıklaması';
img.width = 800;
img.height = 600;
img.loading = 'lazy';
container.appendChild(img); 
    

React bileşenlerinde JSX ile doğrudan attribute eklenir:

    
<img src="/images/urun.webp" alt="Ürün açıklaması"
     width={800} height={600} loading="lazy" />
    

Dinamik görsellerde boyut bilgisinin kaynağı, API yanıtı veya CMS verisi olmalıdır. API'den gelen görsel verisiyle birlikte width ve height bilgisi de döndürülmelidir. Bu bilgi olmadan frontend, görselin boyutunu bilemez ve alan rezervasyonu yapamaz.

Placeholder ve Skeleton Ekranların CLS Koruması

Width ve height ile alan rezervasyonu, görselin yüklenmesini bekleme süresinde boş alan bırakır. Bu boş alan, kullanıcıya "burada bir şey yüklenecek" mesajını doğrudan vermez. Placeholder tekniği, boş alan yerine düşük çözünürlüklü bir ön izleme veya renk bloğu göstererek algılanan yükleme süresini kısaltır.

LQIP (Low Quality Image Placeholder), görselin çok küçük ve bulanık bir versiyonunu anında gösterir. Görsel yüklendiğinde bulanık versiyon, net versiyonla değiştirilir. Bu geçiş, kullanıcı açısından "boş alandan aniden beliren görsel" yerine "bulanıktan netleşen görsel" deneyimi sunar. Next.js next/image bileşeni, placeholder="blur" prop'u ile LQIP'i otomatik uygular. Bu teknik, width/height'ın CLS korumasını korurken kullanıcı deneyimini bir kademe yukarı taşır.

object-fit ve object-position ile Görsel Kırpma Kontrolü

CSS object-fit özelliği, görselin container'a nasıl sığdırılacağını kontrol eder. object-fit: cover görseli container'ı tamamen kaplayacak biçimde kırpar. object-fit: contain görseli container içine aspect ratio'yu koruyarak sığdırır. object-fit: fill görseli container boyutuna zorla yayar (aspect ratio bozulur).

    
.product-image {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: center center;
}
    

Bu yapıda 800x600 piksellik bir ürün görseli, 300x300 kare container'a cover ile sığdırılır. Görselin fazla kısımları kırpılır ve container tamamen dolar. object-position: center center kırpmanın merkezden yapılmasını sağlar. Ürün görseli üst kısmında önemli detay barındırıyorsa, object-position: center top ile kırpma alttan yapılır. Width ve height HTML attribute'leri ile object-fit CSS kuralı birlikte çalışarak, hem alan rezervasyonu hem de görsel kırpma kontrolünü sağlar.

Video ve iframe Elemanlarında Boyut Belirleme

Width ve height gerekliliği yalnızca <img> etiketleriyle sınırlı değildir. <video> ve <iframe> elemanları da boyut tanımı olmadan CLS üretir. YouTube embed'leri, harita iframe'leri ve video player'lar, yüklendiklerinde etraflarındaki içeriği iterek layout shift oluşturur.

    
<!-- Video boyut belirleme -->
<video width="1280" height="720" controls loading="lazy">
  <source src="/videos/demo.mp4" type="video/mp4">
</video>

<!-- iframe boyut belirleme (aspect-ratio ile) -->
<div style="position: relative; width: 100%; aspect-ratio: 16/9;">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"
          style="position: absolute; width: 100%; height: 100%; border: 0;"
          loading="lazy" allowfullscreen></iframe>
</div>
    

iframe'ler doğrudan width ve height attribute'ü destekler ancak responsive yapıda aspect-ratio container yaklaşımı daha esnektir. Bu yaklaşımda container'ın CSS'i alan rezervasyonunu sağlar ve iframe container'ı tamamen doldurur.

Reklam Alanları ve Dinamik İçerik Blokları

Reklam alanları (AdSense, header bidding), CLS'in en yaygın ikinci kaynağıdır. Reklam kodu, görselin boyutunu yüklenmeden önce bilmez ve reklam yüklendiğinde sayfa düzenini bozar. Reklam alanları için sabit boyut container'ı tanımlamak, bu shift'i önler:

    
.ad-container {
  min-height: 250px;
  width: 300px;
  contain: layout style;
}
    

min-height değeri, reklam formatının beklenen yüksekliğine göre ayarlanır. 300x250 banner için min-height: 250px, leaderboard (728x90) için min-height: 90px uygulanır. contain: layout kuralı, reklam alanının iç yapısındaki değişikliklerin dış layout'u etkilemesini engeller. Çoğu uzman aksini iddia etse de, reklam kaynaklı CLS, görsel kaynaklı CLS'ten daha zor kontrol edilir ve sitenin toplam CLS skorunun %30-40'ından sorumlu olabilir.

Screaming Frog ile Toplu Width/Height Eksikliği Tespiti

Site genelindeki width ve height eksikliklerini toplu biçimde tespit etmek, sistematik düzeltmenin ön koşuludur. Screaming Frog'da site taraması tamamlandıktan sonra "Images" sekmesine geçin. "Missing Width or Height" filtresini uygulayın. Bu filtre, width veya height attribute'ü eksik olan tüm görselleri URL, kaynak sayfa ve boyut bilgisiyle listeler.

Bu listeden önceliklendirme yapın: above-the-fold görseller (hero, logo) en yüksek önceliğe sahiptir çünkü bu görseller LCP elemanı olabilir ve CLS etkisi en büyüktür. Sitewide görseller (header logo, navigasyon ikonları) ikinci önceliktedir çünkü her sayfada tekrarlanır. Blog ve ürün içerik görselleri üçüncü önceliktedir. Bu önceliklendirme, sınırlı kaynakla en yüksek CLS iyileştirmesini sağlar.

Chrome DevTools ile CLS Kaynağı Tespiti

Chrome DevTools Performance sekmesi, CLS'e neden olan elemanları ve shift değerlerini detaylı biçimde gösterir. Performance kaydı başlatın, sayfayı yeniden yükleyin ve kaydı durdurun. "Experience" satırında "Layout Shift" olaylarını tıklayarak, hangi elemanın ne kadar shift ürettiğini görebilirsiniz.

"Summary" sekmesinde "Cumulative Layout Shift" değeri, sayfanın toplam CLS skorunu gösterir. Her shift olayına tıkladığınızda, shift'e neden olan elemanın DOM konumu ve shift büyüklüğü görüntülenir. Bu bilgi, width/height eksikliğinin hangi görselde olduğunu ve ne kadar CLS ürettiğini kesin biçimde ortaya koyar. Web Vitals eklentisi (Chrome Extension), sayfa yüklenirken gerçek zamanlı CLS değerini göstererek hızlı kontrol imkanı sunar.

Lighthouse ve PageSpeed Insights CLS Uyarıları

Lighthouse, width ve height eksikliğini "Image elements do not have explicit width and height" uyarısıyla raporlar. Bu uyarı, hangi görsellerin boyut bilgisi eksik olduğunu URL'leriyle birlikte listeler. PageSpeed Insights, aynı uyarıyı hem lab (simülasyon) hem de field (gerçek kullanıcı) verisiyle sunar.

Field verisi (CrUX), gerçek kullanıcıların deneyimlediği CLS değerini gösterir ve algoritmik değerlendirmede kullanılan birincil veri kaynağıdır. Lab verisi ile field verisi arasında fark olması normaldir; field verisi, farklı cihazlar, ağ koşulları ve kullanıcı davranışlarının ortalamasını yansıtır. Düzeltmelerin etkisi, lab verisinde anında, field verisinde ise 28 günlük toplama döngüsü sonrasında görünür.

Font ve Dinamik İçerik Kaynaklı CLS ile Birlikte Yönetim

Width/height eksikliği, CLS'in birincil kaynağıdır ancak tek kaynak değildir. Web font yüklemesi (font-display: swap ile metin boyutu değişimi), dinamik olarak eklenen banner'lar ve geç yüklenen header elemanları da CLS üretir. Kapsamlı CLS optimizasyonu, tüm kaynakların birlikte ele alınmasını gerektirir.

İşin mutfağında durum farklıdır: yalnızca görsellere width/height ekleyip diğer CLS kaynaklarını ihmal etmek, CLS skorunun "iyi" eşiğinin altına inmesini garanti etmez. Font-display swap ile fallback font metrik override, reklam alanlarına sabit container, lazy loaded içeriklere alan rezervasyonu ve JavaScript ile enjekte edilen elemanların boyut bilgisi, CLS optimizasyonunun tamamlayıcı katmanlarıdır. Bu katmanların birlikte çalışması, CLS skorunun 0.1 altına kalıcı biçimde inmesini sağlar.

Width/Height Kontrol Listesi ve Operasyonel Standartlar

Her teknik denetimde uygulanması gereken boyut belirleme kontrol noktaları şunlardır:

• Screaming Frog ile eksik width/height tespiti yapın: "Images > Missing Width or Height" filtresini uygulayarak site genelindeki eksiklikleri listeleyin ve above-the-fold görsellerden başlayarak düzeltin.
• HTML attribute'lerinin görselin gerçek boyutlarını yansıttığını doğrulayın: Yanlış boyut değerleri aspect ratio'yu bozar; DevTools'ta "Natural Size" ile karşılaştırarak doğrulayın.
• CSS responsive kurallarının width/height ile birlikte çalıştığını kontrol edin: width: 100%; height: auto; kombinasyonunun alan rezervasyonunu koruyarak responsive render sağladığını teyit edin.
• Video ve iframe elemanlarına boyut tanımı yapıldığını doğrulayın: YouTube embed'leri ve harita iframe'lerinin aspect-ratio container ile sarıldığını kontrol edin.
• Reklam alanlarına min-height container tanımlandığını teyit edin: Reklam formatlarına uygun sabit yükseklik atanarak reklam kaynaklı CLS'in kontrol altında olduğunu doğrulayın.
• CrUX field verisinde CLS değerinin 0.1 altında olduğunu kontrol edin: Search Console Core Web Vitals raporunda "iyi" kategorisinde olduğunuzu doğrulayın.

Boyut Belirlemenin Uzun Vadeli Yönetimi

Teoride doğru görünen ama pratikte patlayan nokta şudur: mevcut görsellere width/height ekleyip "CLS çözüldü" varsaymak, sonradan eklenen her yeni görselin boyut bilgisi olmadan yüklenmesini gözden kaçırır. İçerik editörü WordPress'te görseli sürükle-bırak ile yerleştirdiğinde veya tema geliştiricisi yeni bileşen eklediğinde, width/height eksikliği yeniden oluşabilir.

Sürdürülebilir yaklaşım, width/height kontrolünü otomatize etmektir. CI/CD pipeline'ında Lighthouse CI ile "Image elements do not have explicit width and height" uyarısını kontrol eden kalite kapısı kurun. Bu kapı, boyut bilgisi eksik görsel tespit ettiğinde deployment'ı durdurur ve hatanın üretime ulaşmasını engeller. WordPress'te eklenti bazlı otomatik boyut ekleme (wp_img_tag_add_width_and_height_attr filtresi) etkinleştirerek, tema şablonlarındaki görsellere otomatik boyut attribute'ü atanmasını sağlayın. Bu iki mekanizma birlikte çalıştığında, CLS koruması yeni görseller için de kalıcı biçimde garanti altına alınır.