Görseller neden sayfa hızını belirler
Çoğu sayfada, tarayıcının indirdiği baytların en büyük kısmını görseller oluşturur. Bu da onları daha hızlı bir site için bir numaralı hedef yapar — ve bir sayfanın Core Web Vitals'tan kalmasının başlıca nedeni, çünkü en büyük görsel çoğu zaman Google'ın ölçtüğü LCP (Largest Contentful Paint) öğesidir. Görselleri optimize etmek kaliteyi düşürmek değildir; aynı resmi çok daha az baytla göndermektir. Bunu doğru yaparsan LCP, mobil skorlar, veri kullanımı — hepsi aynı anda iyileşir.
Doğru boyut ve responsive görseller
En yaygın israf, büyük bir görseli küçük bir alana koymaktır — 800px'te gösterilen 4000px'lik bir fotoğraf yine de 4000px'in tamamını indirir. Görselleri gerçekten gösterildikleri boyuta yakın dışa aktar. Sonra srcset ve sizes ile farklı ekranlara farklı boyutlar sun; telefon küçük dosyayı, masaüstü daha büyüğünü alsın.
srcset ile responsive görsel
<img
src="/hero-800.jpg"
srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Urun gorseli"
width="800" height="500">Next-gen formatlara geç: WebP ve AVIF
WebP ve destekleniyorsa AVIF, aynı görsel kalitede JPEG veya PNG'ye göre %25-50 daha küçük dosya üretir. PageSpeed Insights'ın 'Serve images in next-gen formats' önerisini bitiren değişiklik budur. Bunları bir picture öğesiyle sun ki yeni formatı destekleyen tarayıcılar onu alsın, eski olanlar otomatik olarak orijinaline dönsün.
AVIF/WebP'yi fallback ile sun
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="Fotograf" width="1200" height="800">
</picture>Lazy-load — ama ana görselini değil
Lazy-load görselleri ekrana girmek üzereyken yükler; uzun bir sayfa her şeyi baştan indirmez. Çoğu platform bunu varsayılan yapar. Tek istisna hero veya ana görselin; genelde LCP öğesi odur: onu öncelikli yükle (fetchpriority="high" düşün) ki en önemli piksel mümkün olduğunca hızlı boyalansın. Katlamanın altındaki her şeyi lazy-load et, üstündeki tek şeyi önceliklendir.
Edge'den sun — ve otomatik dönüştür
Mükemmel sıkıştırılmış bir görsel bile uzak bir sunucudan geliyorsa yavaştır. CDN görsellerini edge'de önbelleğe alır ve her ziyaretçiyi en yakın konumdan sunar; baytlar nerede olurlarsa olsunlar hızlı ulaşır. cdn.com.tr bunu her varlık için, modern HTTP/2 ve Brotli üzerinden, önünde otomatik SSL ile yapar.
Ve formatları elle dönüştürmen gerekmez. WordPress için ücretsiz CDNTR eklentisi görselleri kendi sunucunda WebP (destekliyse AVIF) formatına çevirir ve CDN üzerinden bir picture öğesiyle, orijinali otomatik fallback olarak sunar. Yalnızca dönüştürülmüş dosya gerçekten daha küçükse onu servis eder, yani iyi sıkıştırılmış bir fotoğraf asla büyütülmez; medya kütüphanenin tamamını da toplu dönüştürebilir.
Ölç ve doğrula
Sayfanı öncesi ve sonrası PageSpeed Insights'tan geçir. İki şey ararsın: 'Serve images in next-gen formats' ve 'Properly size images' önerilerinin kaybolması ve LCP'nin düşmesi. En büyük görsel hâlâ yavaşsa, lazy-load edilmediğinden ve CDN'den next-gen formatta sunulduğundan emin ol. Hızlı bir öncesi/sonrası, neyin gerçekten yardımcı olduğu konusunda seni dürüst tutar.
En çok işe yaradığı yerler
Ürün sayfaları görsel ağırlıklıdır; daha küçük, next-gen görseller hızlı yüklenir ve dönüşümü artırır.
Makale hero'ları ve galeriler sayfa ağırlığının çoğunu oluşturur; onları optimize etmek LCP ve mobil skorları düzeltir.
Yavaş ağdaki telefonlar her ek kilobaytı hisseder; doğru boyutlu next-gen görseller en çok orada yardım eder.
Görsel optimizasyonu — sık sorulanlar
WebP veya AVIF görsel kalitesini düşürür mü?
Hayır. Aynı görsel kalitede sadece daha küçük dosya üretir. AVIF genelde en iyi sıkıştırır, WebP yakındır ve daha geniş desteklenir; bir picture öğesi ikisini de sunmanı ve eski tarayıcılar için orijinale dönmeni sağlar.
Her görseli kendim mi dönüştürmeliyim?
Hayır. WordPress'te ücretsiz CDNTR eklentisi WebP/AVIF'i otomatik dönüştürüp servis eder ve kütüphaneni toplu dönüştürebilir. Diğer stack'lerde build-time araçları veya bir görsel pipeline'ı aynısını yapabilir; önemli olan ziyaretçilerin daha küçük formatı almasıdır.
Format mı boyut mu daha önemli?
İkisi de, ama doğru boyut genelde önce gelir: 4000px'lik bir görseli 800px'lik alana koymak, formatın kazandırdığından çok daha fazlasını israf eder. Önce doğru boyut, sonra next-gen format, sonra CDN'den teslimat.