Boyutu belirtilmemiş görseller (CLS riski)

ÖnemDüşük

KapsamSayfa başına

EmekAz

DoğrulamaGörevi tamamlayınca yeniden tarama

Kural anahtarıimage_no_dimensions

Kısa cevap

Bazı <img> öğelerinde width/height öznitelikleri (ve CSS aspect-ratio) yok; bu yüzden tarayıcı görsel yüklenmeden önce yer ayıramaz ve görsel geldiğinde içerik kayar. Bu kayma, Core Web Vitals'tan biri olan Cumulative Layout Shift'tir (CLS). Her görsele gerçek genişliğini ve yüksekliğini ekleyin; CSS onu yine duyarlı biçimde ölçekleyebilir.

Neden önemli

CLS gerçek kullanıcılardan ölçülür ve Google'ın sayfa deneyimi sinyalinin bir parçasıdır; yer ayrılmamış görseller en yaygın sebebidir. Modern tarayıcılar, CSS width: 100%; height: auto belirlese bile en-boy oranını width ve height özniteliklerinden hesaplar; dolayısıyla bunları eklemenin düzene bir maliyeti yoktur.

Glimana bunu nasıl tespit eder

Kural, sayfada ne width+height öznitelikleri ne de satır içi bir aspect-ratio bulunan en az bir görsel olduğunda tetiklenir; kanıtta sayı gösterilir. Hız sayfası, CLS'nin sahada gerçekten kötü olup olmadığını gösterir.

Nasıl düzeltilir

Glimana'da etkilenen sayfaları bulun. Sorunlar › Boyutu belirtilmemiş görseller (CLS riski) bölümünü açın. Etkilenen her sayfa bir satırdır; Glimana'nın o sayfa için kaydettiği kanıtı (ölçülen değer, soruna yol açan öğe ya da hedef adres) görmek için satırı açın. Aynı liste Görevler altındaki görev kartında da yer alır; sayfanın Sayfalar altındaki kendi ayrıntı görünümü ise tüm sinyallerini gösterir.
Düzeltmeyi platformunuzda uygulayın.

WordPressShopifyÖzel kod

WordPress, düzenleyiciyle eklenen görsellere genişlik ve yükseklik ekler. Eksik boyutlar tema görsellerinden, tembel yükleme seçenekli sayfa oluşturuculardan ya da ham HTML olarak eklenen görsellerden gelir; performans eklentinizde (WP Rocket, Perfmatters) "Eksik görsel boyutlarını ekle" seçeneğini açın ya da boyutları şablona ekleyin.

image_tag filtresini width ve height ile kullanın ya da boyutları basan {{ image | image_url: width: 800 | image_tag: widths: '400, 800, 1200' }} kalıbını kullanın; img_url kullanan eski temalarda öznitelikleri elle eklemeniz gerekir.

Her görselle birlikte gerçek boyutlarını saklayıp basın; duyarlı görseller için CSS'te aspect-ratio kullanın.
Yayımlayın ve önbellekleri temizleyin. Kaydedip yayımlayın, ardından tarayıcının yeni sürümü göreceğinden emin olun: WordPress — önbellek eklentinizde sayfa önbelleğini temizleyin ve CDN'i boşaltın; Shopify — tema ve içerik değişiklikleri kaydedildiği anda yayına girer, ancak mağazanın önünde bir CDN varsa onu boşaltın; özel kod — dağıtımı yapın ve uç (edge) önbelleği boşaltın. Canlı HTML'in değiştiğini gizli bir pencerede ya da curl -s https://your-domain/page | grep -i '<title\|canonical\|robots' ile kontrol edin; Glimana, web tarayıcınızın önbelleğindekini değil, sunucunun gönderdiğini okur.
Glimana'da doğrulayın. Görevi Görevler altında açıp Yaptım düğmesine tıklayın. Etkilenen sayfalar birkaç saat içinde doğrulama taramasına alınır; etkilenen sayfalardaki görsellerin boyutları belirtildiğinde görev kapanır. Kontrol yine başarısız olursa görev bir notla Yeni durumuna döner; geçerse Etki raporlarında Giderilen teknik sorunlar altında listelenir. Daha erken kontrol etmek için sorundaki Etkilenen sayfaları yeniden tara düğmesini kullanın.

Düzeltme nasıl doğrulanır

Yeniden tarayın; etkilenen sayfalardaki görsellerin boyutları belirtildiğinde görev kapanır.