Görselleri doğru hazırlama: boyut, biçim ve yükleme sırası
Yavaş sitelerin en sık sebebi görseller. Bir fotoğrafı yüklemeden önce yapmanız gereken üç işlem var ve hepsi birkaç dakika sürüyor.
Bir sitede en çok yer kaplayan şey neredeyse her zaman görsellerdir. Metin birkaç kilobayt tutar, görseller birkaç megabayt. Hız çalışmasına buradan başlamak en az emekle en çok sonucu veriyor.
Yapmanız gereken üç şey var.
1. Doğru boyuta küçültün
Telefonunuzun çektiği fotoğraf 4000 piksel genişliğinde, ama sitenizde en fazla 1200 piksel yer kaplıyor. Aradaki fark boşuna indirilen veri.
Görselin sitede kaplayacağı genişliği ölçün, yüksek çözünürlüklü ekranlar için iki katını alın ve görseli o boyuta küçültün. Tam genişlikteki bir kapak için 2400 piksel, yazı içindeki bir görsel için 1400 piksel fazlasıyla yeterli.
2. WebP biçimine çevirin
JPEG ve PNG eski biçimler. WebP aynı görüntüyü ortalama %30 daha az yerde tutuyor ve bugün her tarayıcı destekliyor. 3 MB'lık bir fotoğraf, gözle fark edilmeden 120 KB'a inebiliyor.
Dönüştürmek için pahalı bir araç gerekmiyor. squoosh.app tarayıcıda çalışıyor ve ücretsiz. Bu sitenin yönetim paneli de yüklenen her görseli otomatik olarak WebP'ye çeviriyor.
3. Ekranın dışındakileri geciktirin
Sayfanın en altındaki görsel, ziyaretçi oraya kaydırana kadar indirilmemeli. Buna "lazy loading" deniyor ve artık tarayıcıların kendi özelliği. Görsele loading="lazy" eklemek yetiyor.
Bunun tek istisnası sayfa ilk açıldığında ekranda görünen görsel. Onu geciktirmeyin, öncelikli yükleyin. LCP ölçüsünü genelde o görsel belirliyor.
Alt metni atlamayın
Her görselin bir alt metni olmalı. Görme engelli ziyaretçinin ekran okuyucusu bu metni sesli okuyor, görsel yüklenemezse de yerinde bu yazı çıkıyor. Google da görselde ne olduğunu buradan anlıyor.
Alt metne "resim1" yazmayın, görselde ne olduğunu anlatan bir cümle yazın: "Ahşap tezgâhta duran el yapımı deri çanta". Sadece süs için konmuş görsellerde alt metni boş bırakmak doğru, ekran okuyucu onları atlıyor.
Ne kadar fark eder?
Geçen ay bir restoran sitesinde yalnızca görselleri düzelttim. On dört fotoğrafın toplam boyutu 18 MB'tan 900 KB'a indi, mobilde açılma süresi 5,1 saniyeden 1,8 saniyeye düştü. Kodda tek satır değişmedi.