Web Siteniz Neden Yavaş - 2026 İçin Görüntü Optimizasyon Kontrol Listesi
Web sitenizi hemen Google PageSpeed Insights ile çalıştırın. Devam edin, yeni bir sekme açın ve yapın. Performans puanınız 80'in altındaysa, en iyi önerinin resimlerle ilgili olması ihtimali yüksektir. Optimize edilmemiş görseller, web sitelerinin yavaşlamasına en büyük katkıyı sağlayan tek faktördür; sürekli olarak JavaScript, CSS, yazı tipleri ve HTML'nin toplamından daha fazla sayfa ağırlığına neden olurlar. İyi haber şu ki, görüntü optimizasyonu aynı zamanda en kolay performans düzeltmesidir. Kod değişikliği yok, sunucunun yeniden yapılandırılması yok, hata ayıklama yok. Sadece daha akıllı görüntüler.
Resimler 1 Numaralı Sayfa Ağırlığı Sorunudur
HTTP Arşivi verilerine göre resimler, ortalama bir web sayfasının toplam ağırlığının yaklaşık %42'sini oluşturur. Ortalama web sayfası yaklaşık 2,3 MB boyutundadır ve bunun kabaca 1 MB'ı resimlerdir. Ancak bu ortalama değerdir; kötü optimize edilmiş siteler rutin olarak sayfa başına 5-15 MB görsel sunar. Her ilave megabayt, tipik bir mobil bağlantıda yaklaşık 1-2 saniyelik yükleme süresi ekler. 10 MB'lık bir sayfanın 4G'de tamamen yüklenmesi 8-12 saniye sürer ve çoğu ziyaretçi 3 saniye sonra sayfayı terk eder.
Sorun neredeyse her zaman iki şeyden biridir: boyut olarak çok büyük resimler (800 piksellik bir kapta 4000 piksellik bir resim sunar) veya yeterince sıkıştırılmamış resimler (%80 görsel olarak aynıyken %100 kalitede tasarruf). Çoğu zaman her ikisi de olur.
Kontrol Listesi Öğesi 1 - Uygun Boyutta Görseller Sunma
Bu, en yüksek etkili optimizasyondur. CSS'niz bir resmi 800 piksel genişliğinde görüntülüyorsa, resim dosyasının 4000 piksel değil, yaklaşık 800 piksel genişliğinde olması gerekir. Büyük boyutlu görsellerin sunulması, tarayıcı tarafından atılan piksellerde bant genişliğini boşa harcar. Tarayıcınızın geliştirici araçlarını açın, görsellerinizi inceleyin ve görüntülenen boyutu doğal (dosya) boyutuyla karşılaştırın. Doğal boyut, görüntülenen boyutun 2 katından fazlaysa veri israfı yapıyorsunuz demektir.
Görüntünün farklı ekranlarda farklı boyutlarda görüntülenebileceği duyarlı tasarımlar için birden fazla görüntü boyutu sağlamak üzere srcset özelliğini kullanın. Tarayıcı, ziyaretçinin ekranı için en iyi olanı seçer. Yaygın bir yaklaşım: 400 piksel, 800 piksel, 1200 piksel ve 1600 piksel genişliğinde görüntüler sağlayın. Bu boyut çeşitlerini oluşturun orijinalinizden seçin ve tarayıcının seçmesine izin verin.
Kontrol Listesi Öğesi 2 — Yeni Nesil Formatları Kullanın
2026'da hâlâ yalnızca JPEG ve PNG dosyaları sunuyorsanız, potansiyel dosya boyutu tasarruflarının %25-50'sini masada bırakmış olursunuz. WebP neredeyse evrensel tarayıcı desteğine sahiptir (küresel olarak %97+) ve aynı kalitede JPEG'den %25-35 daha küçük dosyalar üretir. AVIF JPEG'den yaklaşık %50 daha küçük, daha da iyi bir sıkıştırma elde ediyor ve tarayıcı desteği artık %92'nin üzerinde.
Uygulama basittir: resimlerinizi WebP'ye dönüştürün (veya platformunuz destekliyorsa AVIF). Maksimum uyumluluk için, AVIF'yi onu destekleyen tarayıcılara sunmak için HTML resim öğesini, yedek olarak WebP'yi ve son geri dönüş olarak JPEG'i kullanın. Çoğu modern CMS platformu ve statik site oluşturucu, bunu otomatik olarak gerçekleştirecek eklentilere veya yerleşik özelliklere sahiptir.
Kontrol Listesi Öğesi 3 - Tembel Yüklemeyi Uygulama
Tembel yükleme, görünür görünüm alanının altındaki görüntülerin yüklenmesini geciktirir. Ziyaretçinin tarayıcısı, sayfadaki tüm görselleri aynı anda yüklemek yerine, yalnızca görsellerin yakınında kaydırıldıkça görselleri indirir. Bu, özellikle portföyler, galeriler veya uzun blog gönderileri gibi görsel ağırlıklı sayfalarda ilk sayfa yükleme süresini önemli ölçüde artırır. HTML'de eklemek kadar basittir yükleniyor = "tembel" img etiketlerinize. Çoğu CMS platformu artık bunu varsayılan olarak yapıyor.
Önemli uyarı: İlk görünüm alanında (ekranın üst kısmında) görünen görselleri geç yüklemeyin. Kahraman görseliniz, logonuz ve kaydırma yapılmadan görülebilen tüm görseller hemen yüklenmelidir. Bunları tembelce yüklemek aslında LCP puanınıza zarar verir çünkü en önemli görsel içeriğin oluşturulmasını geciktirir.
Kontrol Listesi Öğesi 4 - Doğru Kalite Düzeyinde Sıkıştırın
Web'deki görsellerin çoğu, fark edilebilir bir kayıp olmadan %75-85 kalitede sıkıştırılabilir. JPEG'de %100 ile %85 kalite arasındaki fark genellikle insan gözüyle görülmez, ancak dosya boyutu farkı 2-3 kattır. Görüntülerinizi bir kompresörden geçirin ve öncesi ile sonrasını karşılaştırın. Görünür bir bozulma olmadan bunları ne kadar küçültebildiğinize şaşıracaksınız.
Görüntü Performansı için Test Araçları
Google Sayfa Hızı Analizleri: Optimizasyon gerektiren belirli görüntüleri belirler ve tasarrufları tahmin eder. GTmetrix: şelale grafiklerini gösterir, böylece hangi görüntülerin işleri yavaşlattığını tam olarak görebilirsiniz. Web Sayfası Testi: yükleme sırasında görüntülerin ne zaman göründüğünü görmek için film şeridi görünümleri sağlar. Chrome Geliştirme Araçları: Ağ sekmesi, en büyük suçluları bulmak için istekleri boyuta göre sıralamanıza olanak tanır.
Kontrol Listesi Madde 5 - Görseller için CDN'yi düşünün
İçerik Dağıtım Ağı, görsellerinizin kopyalarını dünyanın her yerindeki sunucularda saklar; böylece ziyaretçiler, görselleri dünyanın diğer ucundaki başlangıç sunucunuz yerine kendilerine yakın bir sunucudan indirirler. Küresel hedef kitleye sahip siteler için CDN, görsel yükleme sürelerini %40-60 oranında azaltabilir. Birçok CDN sağlayıcısı ayrıca otomatik görüntü optimizasyonu da sunar; ziyaretçinin cihazına ve tarayıcısına bağlı olarak biçimleri anında yeniden boyutlandırır, sıkıştırır ve dönüştürür.
Cloudflare (ücretsiz kullanım mevcuttur), BunnyCDN ve Amazon CloudFront popüler seçeneklerdir. WordPress kullanıyorsanız Cloudflare'in ücretsiz planı tek başına gözle görülür bir fark yaratabilir. Netlify veya Vercel gibi platformlardaki statik siteler için CDN dağıtımı yerleşiktir.
Etki sırasına göre kontrol listesinin tamamı: (1) görüntüleri görüntülenecek boyutlara göre yeniden boyutlandırın, (2) %75-85 kalitede sıkıştırın, (3) WebP veya AVIF'ye dönüştürün, (4) ekranın alt kısmındaki görüntüler için yavaş yükleme uygulayın, (5) birden fazla ekran boyutu için duyarlı srcset kullanın, (6) bir CDN aracılığıyla sunum yapın, (7) geri dönen ziyaretçilerin görüntüleri yeniden indirmemesi için uygun önbellek başlıklarını ayarlayın. Bu liste üzerinde çalışın ve her adımdan sonra PageSpeed Insights'ı çalıştırın. Çoğu site en büyük gelişmeyi yalnızca 1-3. adımlardan itibaren görür.
