Bir sitedeki görseller nasıl daha hızlı yüklenir
Herhangi bir sitedeki görselleri hafifleten beş değişiklik, etkilerine göre sıralı.
Çoğu sitede ziyaretçinin indirdiği verinin büyük kısmı görsellerdir. İyileştirilmemiş tek bir telefon fotoğrafı, sayfanın geri kalanının tamamından ağır olabilir. Görselleri düzeltmek genellikle en büyük ve en ucuz hız kazancıdır; hızlı bir sayfa daha iyi sıralanır, ziyaretçiyi daha çok tutar ve daha çok dönüşüm getirir.
1. Görselleri göründükleri boyutta yükleyin
Telefondan çıkan bir fotoğraf 4000 piksel ya da daha geniştir. Bir içerik sütunu nadiren 1200 pikseli aşar, bir kart ya da küçük görsel ise çok daha dardır. Fazla her piksel indirilir ve tarayıcı tarafından atılır. Yüklemeden önce boyutlandırın: tam genişlik afişler için yaklaşık 2000 piksel, yüksek yoğunluklu ekranlarda net kalsın diye; içerik görselleri için 1200 ila 1600; kartlar için 600 ila 800. Boyutlandırma aracı bir klasörün tamamını tek seferde işler.
2. Sıkıştırın
Ölçüler doğru olduğunda gerisini sıkıştırma halleder. Kalite 80 ile kaydedilen bir fotoğraf, web sayfasında kalite 100 ile aynı görünür ve çoğu zaman üçte biri kadar yer kaplar. Görsel sıkıştırıcı toplu çalışır ve her dosya için kazancı gösterir.
3. WebP kullanın
WebP bugünkü tüm tarayıcılarda desteklenir ve görünür kalite aynıyken JPG’den genellikle yüzde 25 ila 35 daha hafiftir; üstelik saydamlığı da desteklediği için birçok PNG’nin de yerini alır. JPG’den WebP’ye ya da PNG’den WebP’ye ile dönüştürün. AVIF daha da hafiftir ama kodlaması yavaştır ve yükleme sistemleri tarafından daha az kabul edilir, bu yüzden pratik varsayılan WebP’dir.
4. İçeriğe göre biçim seçin
| İçerik | En iyi biçim |
|---|---|
| Fotoğraflar | WebP, WebP kabul edilmeyen yerlerde JPG |
| Logolar ve simgeler | Varsa SVG, yoksa PNG veya WebP |
| Metin içeren ekran görüntüleri | PNG veya kayıpsız WebP |
| Basit animasyonlar | GIF yerine kısa video |
5. Tarayıcının akıllıca yüklemesine yardım edin
- Geciktirilmiş yükleme. İlk ekranın altındaki görseller, ziyaretçi kaydırarak yaklaşana kadar yüklenmemeli. Çoğu platform bunu kendisi yapar; düz HTML’de ilk başta görünmeyen img etiketlerine loading="lazy" ekleyin.
- Ölçüler. Her görsele genişlik ve yükseklik verin ki görseller geldikçe sayfa zıplamasın. Yerleşim kayması, Google’ın Core Web Vitals ölçütlerinden biridir.
- Önce ana görsel. Sayfanın üstündeki büyük görsel, yani genellikle Largest Contentful Paint sayılan öğe, asla geciktirilmiş yüklenmemeli. Tam tersine, olabildiğince erken yüklenmeli.
Farkı ne kadar
Telefondan çıkmış on fotoğraf içeren tipik bir sayfa 30 MB olabilir. Makul genişliklere getirilip sıkıştırıldığında aynı sayfa genellikle 2 MB civarına iner. WebP’ye çevrildiğinde yaklaşık 1,4 MB. Mobil bağlantıda bu, bir saniyede beliren bir sayfa ile birçok ziyaretçinin terk ettiği bir sayfa arasındaki farktır.
Sonuçları ölçmek
Google PageSpeed Insights ve Chrome geliştirici araçlarındaki Lighthouse paneli; fazla büyük görselleri, WebP olması gerekenleri ve Largest Contentful Paint öğesini listeler. Öncesini ve sonrasını ölçün ve en çok trafik alan sayfalardan başlayın.