Merhaba arkadaşlar, bugün sizlerle başıma gelen ve performans optimizasyonu konusunda bana çok şey öğreten bir deneyimi paylaşmak istiyorum. Bir e-ticaret sitesi üzerinde çalışıyordum ve sayfa hız metrikleri (Core Web Vitals) beni deli ediyordu. Özellikle Cumulative Layout Shift (CLS) skorlarımız berbattı. Sayfa yüklenirken içerik aniden zıplıyor, butonlar kayıyordu. Kullanıcı deneyimi felaketti. Tüm optimizasyonları yaptığımı sanıyordum ama gözden kaçırdığım çok basit bir şey vardı: img etiketlerindeki width ve height özellikleri.
Sorunun Tam Olarak Nerede Olduğunu Anlamak
Sorunu anlamak için önce tarayıcının bir sayfayı nasıl oluşturduğuna bakalım. Tarayıcı, HTML'yi ayrıştırırken (parse) bir görsel etiketi (img) gördüğünde, hemen onun boyutlarını bilmez. Görselin yüklenmesini bekler, yüklendikten boyutlarını öğrenir ve ancak o zaman onun kaplayacağı alanı sayfaya yerleştirir. İşte bu bekleyiş ve sonradan yer açma işlemi, sayfanın diğer elementlerinin aniden kaymasına (layout shift) neden olur. Ben de tam olarak bunu yaşıyordum.
Aşağıdaki gibi bir kullanım, sorunun ta kendisiydi:
Çözüm: Basit Ama Etkili İki Özellik
Çözüm, HTML'in ilk günlerinden beri var olan width ve height özelliklerini kullanmaktı. Bu özellikleri kullandığınızda, tarayıcıya şunu söylersiniz: "Hey, bu görsel şu kadar genişlikte ve şu kadar yükseklikte olacak, sen yerini şimdiden ayarla." Böylece tarayıcı, görsel yüklenmeden önce gerekli alanı rezerve eder ve görsel yüklendiğinde hiçbir şey hareket etmez.
İşte doğru kullanım:
Peki ya responsive (duyarlı) bir tasarım yapıyorsak? CSS ile genişliği yüzde olarak ayarlayacağız diye bu özellikleri atlamak yaygın bir hata. İşin sırrı, aspect ratio (en-boy oranı) bilgisini tarayıcıya vermekte. Width ve height değerlerini görselin gerçek oranlarına göre yazarsanız, CSS'te sadece `max-width: 100%; height: auto;` verdiğinizde tarayıcı yükseklik hesaplamasını bu orandan yapacak ve alanı doğru bir şekilde ayıracaktır.
Gerçek Dünya Örneği ve CSS İş Birliği
Bir ürün kartı bileşeni düşünelim. Görsellerin genişliği container'a göre değişsin ama yükseklik oransal olarak kalsın istiyoruz.
Bu kombinasyonu uyguladıktan sonra, Lighthouse ve PageSpeed Insights raporlarımdaki CLS değerinin neredeyse sıfıra indiğini[/COLOR] gördüm. Sayfa artık yüklenirken zıplamıyor, kullanıcılar butona tıklarken sayfa aşağı kaymıyordu. Bu kadar basit bir değişiklik inanılmaz bir kullanıcı deneyimi iyileştirmesi sağladı.
Siz projelerinizde görsel boyutlarını belirlemeyi unutuyor musunuz? Ya da Next.js gibi modern framework'lerde `next/image` kullanırken bile bu konuya dikkat ediyor musunuz? Benim gibi CLS canavarıyla savaşan oldu mu aranızda? Yorumlarda deneyimlerinizi paylaşın!
Sorunun Tam Olarak Nerede Olduğunu AnlamakSorunu anlamak için önce tarayıcının bir sayfayı nasıl oluşturduğuna bakalım. Tarayıcı, HTML'yi ayrıştırırken (parse) bir görsel etiketi (img) gördüğünde, hemen onun boyutlarını bilmez. Görselin yüklenmesini bekler, yüklendikten boyutlarını öğrenir ve ancak o zaman onun kaplayacağı alanı sayfaya yerleştirir. İşte bu bekleyiş ve sonradan yer açma işlemi, sayfanın diğer elementlerinin aniden kaymasına (layout shift) neden olur. Ben de tam olarak bunu yaşıyordum.
Aşağıdaki gibi bir kullanım, sorunun ta kendisiydi:
HTML:
<!-- BU KULLANIM, LAYOUT SHIFT'E DAVETİYE ÇIKARIR! -->
<img src="urun-gorseli.jpg" alt="Harika Ürün">Çözüm, HTML'in ilk günlerinden beri var olan width ve height özelliklerini kullanmaktı. Bu özellikleri kullandığınızda, tarayıcıya şunu söylersiniz: "Hey, bu görsel şu kadar genişlikte ve şu kadar yükseklikte olacak, sen yerini şimdiden ayarla." Böylece tarayıcı, görsel yüklenmeden önce gerekli alanı rezerve eder ve görsel yüklendiğinde hiçbir şey hareket etmez.
İşte doğru kullanım:
HTML:
<!-- BU KULLANIM, YERİ ÖNCEDEN AYIRIR VE SHIFT'I ENGELLER -->
<img src="urun-gorseli.jpg" alt="Harika Ürün" width="800" height="600">Peki ya responsive (duyarlı) bir tasarım yapıyorsak? CSS ile genişliği yüzde olarak ayarlayacağız diye bu özellikleri atlamak yaygın bir hata. İşin sırrı, aspect ratio (en-boy oranı) bilgisini tarayıcıya vermekte. Width ve height değerlerini görselin gerçek oranlarına göre yazarsanız, CSS'te sadece `max-width: 100%; height: auto;` verdiğinizde tarayıcı yükseklik hesaplamasını bu orandan yapacak ve alanı doğru bir şekilde ayıracaktır.
Gerçek Dünya Örneği ve CSS İş BirliğiBir ürün kartı bileşeni düşünelim. Görsellerin genişliği container'a göre değişsin ama yükseklik oransal olarak kalsın istiyoruz.
HTML:
<div class="urun-karti">
<!-- Görselin gerçek boyutu 1000x750 piksel (4:3 oran) -->
<img src="urun.jpg" alt="Örnek Ürün" width="1000" height="750" class="urun-resmi">
<h3>Harika Ürün</h3>
<p>Bu ürünün açıklaması...</p>
</div>
CSS:
.urun-resmi {
/ Genişliği containera sığdır /
max-width: 100%;
/ Yüksekliği, width/height oranına göre otomatik hesaplat /
height: auto;
/ Görsel yüklenene kadar blur efekti (modern yaklaşım) /
background-color: #f0f0f0;
}Bu kombinasyonu uyguladıktan sonra, Lighthouse ve PageSpeed Insights raporlarımdaki CLS değerinin neredeyse sıfıra indiğini[/COLOR] gördüm. Sayfa artık yüklenirken zıplamıyor, kullanıcılar butona tıklarken sayfa aşağı kaymıyordu. Bu kadar basit bir değişiklik inanılmaz bir kullanıcı deneyimi iyileştirmesi sağladı.
Siz projelerinizde görsel boyutlarını belirlemeyi unutuyor musunuz? Ya da Next.js gibi modern framework'lerde `next/image` kullanırken bile bu konuya dikkat ediyor musunuz? Benim gibi CLS canavarıyla savaşan oldu mu aranızda? Yorumlarda deneyimlerinizi paylaşın!