Görseller Sitenizi Nasıl Yavaşlatır? 147 MB'tan 10 MB'a Bir Örnek

Bir sitenin yavaşlığının sebebi çoğu zaman karmaşık bir teknik sorun değildir. Çoğu zaman, telefondan ya da profesyonel makineden çekilip olduğu gibi yüklenen fotoğraflardır. Tek bir ürün fotoğrafı birkaç megabayt olabilir; bir ana sayfada bunlardan onlarcası varsa, müşterinin telefonu sayfayı açmak için bir filmin bir bölümünü indirecek kadar veri çekmeye çalışır. İyi haber şu ki, görsel optimizasyonu hız çalışmalarının en hızlı sonuç veren kısmıdır.

Görseller neden bu kadar ağır?

Telefon kameraları bugün çok yüksek çözünürlükte fotoğraf çeker. Böyle bir fotoğraf, sitenizde küçük bir kutuda gösterilse bile olduğu gibi yüklendiyse tam boyutuyla indirilir. Müşterinin ekranı o fotoğrafın yalnızca küçük bir kısmını gösterebilir; geri kalanı boşuna indirilen veridir. Buna bir de eski formatlar eklenir: aynı görüntü, eski bir formatta modern bir formatın birkaç katı yer kaplayabilir.

Üç temel düzeltme

• Doğru ölçü: Görsel, sayfada gösterildiği boyuttan çok büyük olmamalıdır. Telefon ve bilgisayar için farklı boyutlarda kopyalar hazırlanır; tarayıcı hangi ekrandaysa ona uygun olanı indirir.
• Modern format: WebP gibi modern formatlar, aynı görüntüyü eski formatlara göre belirgin şekilde daha küçük dosyayla sunar.
• Geç yükleme: Sayfanın alt kısmındaki görseller, müşteri o bölüme kaydırdığında yüklenir. Böylece sayfanın ilk açılışı hafifler.

Dikkat: ilk ekrandaki görseli geç yüklemeyin

Geç yükleme doğru kullanıldığında harikadır, yanlış kullanıldığında zarar verir. Sayfa açıldığında ilk görünen büyük görsel, yani ana afiş ya da ürünün ana fotoğrafı, geç yüklenmemeli; tam tersine öncelikli yüklenecek şekilde işaretlenmelidir. Google'ın hız ölçümünde en çok ağırlık taşıyan göstergelerden biri, bu en büyük görselin ne kadar sürede göründüğüdür.

Sayfanın kaymasını önleyin

Görseller yüklenirken sayfanın aşağı kaydığını, tam tıklamak üzereyken düğmenin yer değiştirdiğini fark etmişsinizdir. Bu, görselin ölçüsü önceden belirtilmediği için olur. Her görselin genişlik ve yükseklik bilgisi baştan verildiğinde tarayıcı yerini önceden ayırır ve sayfa yerinde durur. Bu küçük ayrıntı hem müşteri deneyimini hem de Google'ın ölçümünü doğrudan etkiler.

Asıl sorun: yükleme alışkanlığı

Mevcut görselleri düzeltmek işin yarısıdır. Diğer yarısı, yeni görsellerin nasıl yüklendiğidir. Siteye ürün ya da duyuru ekleyen personel çoğu zaman fotoğrafı telefondan olduğu gibi yükler. Bir süre sonra site yeniden ağırlaşır. Kalıcı çözüm, yüklenen her görselin otomatik olarak doğru boyuta getirilip modern formata çevrilmesidir. Böylece kimsenin görsel boyutunu düşünmesi gerekmez.

Görsel sayısını da sorgulayın

Hız yalnızca görsellerin boyutuyla değil, sayısıyla da ilgilidir. Ana sayfalardaki kayan afişler buna iyi bir örnektir: beş altı büyük görsel yüklenir ama ziyaretçilerin büyük kısmı yalnızca ilkini görür. Tek, güçlü bir afiş çoğu zaman hem daha hızlıdır hem de mesajı daha net iletir.

Bir örnek: 147 MB'tan 10 MB'a

Bu iki örnek, görsel optimizasyonunun neden hız çalışmalarının ilk adımı olduğunu gösteriyor: çoğu sitede en büyük kazanç, en basit düzeltmededir.

Nereden başlamalı?

Önce en çok ziyaret alan sayfalarınızı ölçün: ana sayfa, en çok satan ürünler, kategori sayfaları. Bu sayfalardaki en büyük görselleri bulun; genellikle birkaç görsel toplam yükün büyük kısmını oluşturur. Ardından mevcut görselleri toplu olarak dönüştürün ve yeni yüklemeler için otomatik küçültmeyi kurun. Hızın diğer bileşenlerini WordPress hız rehberimizde anlattık. Bu işi sizin yerinize yapmamızı isterseniz WordPress hızlandırma sayfamıza göz atın.

Sıkça sorulan sorular

WebP formatı her tarayıcıda açılır mı?

Güncel tarayıcıların neredeyse tamamı WebP'yi destekler. Doğru kurulumda çok eski bir tarayıcı için yedek format da sunulabilir; müşteri hiçbir fark görmez.

Görselleri küçültmek kaliteyi düşürür mü?

Doğru yapıldığında gözle görülür bir fark oluşmaz. Kayıp, genellikle ekranın hiç gösteremediği ayrıntılarda ve gereksiz dosya bilgilerindedir.

Mevcut yüzlerce görseli tek tek mi düzeltmek gerekir?

Hayır. Mevcut görseller toplu olarak dönüştürülebilir; yeni yüklenecekler için de otomatik küçültme kurulur.