Google PageSpeed'de 100 Puan Almak
Google PageSpeed Insights, sitenizin mobil ve masaüstü performansını ölçer. 100 puan almak her site için mümkün olmayabilir; ancak görsel optimizasyonu doğru yaparak önemli iyileştirmeler sağlayabilirsiniz. Bu rehberde adım adım PageSpeed skorunu artırmayı ele alıyoruz.
Önce Görsel Sorunlarını Tespit Edin
PageSpeed raporunda "Properly size images", "Serve images in next-gen formats", "Defer offscreen images" uyarıları genelde en çok puan kaybettiren maddelerdir. Raporu açıp hangi görsellerin sorunlu olduğunu not alın. PageSpeed LCP görsel rehberimiz bu konuda yardımcı olacaktır.
Görselleri WebP'ye Dönüştürün
JPEG ve PNG görselleri WebP formatına dönüştürmek PageSpeed'in "Serve images in next-gen formats" uyarısını giderir. WebP aynı kalitede %25–35 daha küçük dosya boyutu sunar. Sıkıştırma aracımızla tek tıkla dönüştürebilirsiniz.
LCP (Largest Contentful Paint) İyileştirmesi
LCP genelde hero görsel veya üstteki büyük görseldir. Bu görseli optimize etmek PageSpeed skorunu doğrudan yükseltir. LCP görselini küçültün, WebP kullanın, gerekirse fetchpriority="high" ile öncelik verin. Preload da kullanılabilir ancak dikkatli olun; yanlış preload ters etki yapar.
CLS (Cumulative Layout Shift) Düzeltmesi
Görseller yüklenirken boyut belirtilmezse sayfa kayar ve CLS kötüleşir. Her <img> etiketine width ve height ekleyin. CSS'te aspect-ratio kullanarak da yer ayırımı yapabilirsiniz.
Lazy Loading ve Below-the-Fold Görseller
Ekranın altındaki görseller için loading="lazy" kullanın. LCP görseli asla lazy load yapmayın; ilk ekrandaki kritik görseller hemen yüklenmeli.
Pratik Kontrol Listesi
- Tüm görselleri WebP veya AVIF ile sunun
- LCP görselini optimize edin ve boyutlandırın
- width/height attribute'ları ekleyin
- Below-the-fold görsellere lazy loading uygulayın
- Gereksiz görsel script'lerini kaldırın
Görsellerinizi hemen optimize edin.
Sıkıştırma Aracına Git →