Bir KOBİ sitesinde toplam sayfa ağırlığının en büyük kalemi genellikle görsellerdir. İyi haber şu: bu kalemi düşürmek için siteyi yeniden yazmanız gerekmez. Doğru ölçü, doğru format ve doğru yükleme sırası, tasarıma dokunmadan ölçülebilir bir hız kazancı verir.
Adım 1: Görseli ihtiyacınız olan ölçüde üretin
En yaygın hata, telefondan veya fotoğraf makinesinden çıkan 4000 piksel genişliğindeki dosyayı olduğu gibi yükleyip 400 piksellik bir kartta göstermektir. Tarayıcı dosyanın tamamını indirir, sonra küçültür; bekleyen taraf ziyaretçi olur.
Kural basit: dosya, ekranda kaplayacağı en büyük genişliğin en fazla iki katı olsun. Pratik hedefler:
- Tam genişlik hero görseli: 1600-1920 piksel, üst sınır 200-300 KB.
- Ürün veya blog kart görseli: 600-800 piksel, 40-80 KB.
- İçerik içi fotoğraf: 1200 piksel, 100-150 KB.
- Logo, ikon, çizim: mümkünse SVG; değilse iki katı çözünürlükte PNG.
Farklı ekranlara farklı dosya göndermek için srcset ve sizes özniteliklerini kullanın: aynı görselin 480, 800 ve 1600 piksellik sürümlerini üretip seçimi tarayıcıya bırakın. Böylece telefondaki ziyaretçi 1600 piksellik dosyayı hiç indirmez.
Adım 2: Formatı içeriğe göre seçin
| Format | En uygun kullanım | Beklenen etki | Dikkat |
|---|---|---|---|
| WebP | Fotoğraf ve ürün görselleri | Aynı kalitede JPEG'e göre belirgin küçülme | Güncel tarayıcılarda desteği geniş; varsayılanınız olabilir |
| AVIF | Büyük hero fotoğrafları | Genellikle WebP'den de küçük | Kodlama yavaştır; sunucuda toplu dönüşüm süresi uzar |
| JPEG | Yedek sürüm, eski sistemler | Referans nokta | Kalite 75-82 aralığı çoğu fotoğrafta yeterli |
| PNG | Şeffaflık gereken düz renkli görseller | Fotoğrafta dosyayı şişirir | Fotoğrafı PNG olarak yayınlamayın |
| SVG | Logo, ikon, grafik | Çoğu durumda birkaç KB | Dışarıdan gelen SVG dosyalarını temizlemeden yüklemeyin |
Kalite ayarında mükemmeliyetçilik pahalıya patlar. WebP'de 75-82 aralığı, fotoğraflarda gözle ayırt edilmesi zor bir sonuç verirken dosyayı ciddi biçimde küçültür. Ürün detay sayfasındaki büyütmeli görsellerde 85'e kadar çıkabilirsiniz. Doğru rakamı bulmanın tek yolu, kendi görsellerinizden üç-beş tanesini iki farklı kalitede üretip yan yana karşılaştırmaktır.
Adım 3: Yüklemeyi sıraya sokun
Lazy loading her görsele uygulanacak bir sihir değil, bir öncelik aracıdır. Amaç, ilk ekranda görünen şeyi hızlandırmak; aşağıda kalanı ise ziyaretçi oraya gelene kadar beklemeye almaktır.
- Kaydırmadan görünen ilk bir-iki görsele asla lazy yüklemeyi uygulamayın; bu, sayfanın en büyük içerik ögesini geciktirir ve LCP ölçümünü doğrudan bozar.
- İlk ekrandaki ana görsele yüksek getirme önceliği (fetchpriority) verin, altındaki her şeye loading değeri olarak lazy atayın.
- Çözümlemeyi eşzamansız yapan decoding ayarı, uzun ürün listelerinde kaydırmayı akıcı tutar.
- Arka plan görselleri CSS'ten geldiği için lazy yüklenmez; ilk ekrandaki dekoratif arka planları küçük tutun ya da doğrudan içerik görseline çevirin.
- Görsel sayısını da azaltın: 12 ürünlük bir listede 40 küçük ikon varsa, bunları tek bir SVG setine indirmek istek sayısını düşürür.
Adım 4: Sayfanın zıplamasını önleyin
Görsel yüklenene kadar yerini ayırmazsanız metin aşağı kayar, ziyaretçi yanlış yere tıklar ve düzen kayması (CLS) ölçümünüz bozulur. Her görsele gerçek genişlik ve yükseklik değerlerini yazın; duyarlı düzenlerde en-boy oranını CSS tarafında sabitleyin. Bu, çoğu temada tek bir şablon düzenlemesiyle kapatılabilen, en sık rastlanan hatalardan biridir.
Paylaşımlı hosting ve cPanel gerçekliği
Çoğu paylaşımlı pakette PHP'nin GD veya Imagick eklentisi açıktır; yükleme anında küçültme ve WebP'ye dönüştürme yapabilirsiniz. Sunucuya kabuk erişiminiz varsa klasör bazlı toplu dönüşümü gece çalışan bir cron göreviyle yürütün. Üç pratik not:
- Orijinal dosyaları silmeyin; ileride farklı ölçü üretmeniz gerekebilir, ayrı bir klasörde saklayın.
- Dönüşümü tek seferde binlerce dosyaya uygulamayın; paylaşımlı pakette CPU sınırına takılır ve site yavaşlar. 200-500 dosyalık partiler hâlinde ilerleyin.
- Yeniden boyutlandırılmış sürümleri önbelleğe alın ve dosya adına ölçü ekleyin (urun-800.webp); aynı görseli her istekte yeniden üretmek en pahalı yöntemdir.
Hızlı kontrol listesi
- Ana sayfadaki en büyük görsel dosyası kaç KB? 300 KB'ı geçiyorsa önce onu düzeltin.
- Aynı görselin farklı ölçülerdeki sürümleri var mı, srcset kullanılıyor mu?
- İlk ekrandaki ana görselde lazy yükleme kapalı mı?
- Tüm görsellerde genişlik ve yükseklik değerleri yazılı mı?
- Alt metinler görselin içeriğini anlatıyor mu? Dekoratif görsellerde alt metin boş bırakıldı mı?
- Dosya adları anlamlı mı (urun-kirmizi-canta.webp) yoksa IMG_2381.JPG mi?
- Görseller tarayıcı önbelleği için uzun süreli başlıklarla mı sunuluyor?
- Yeni yüklenen bir görsel otomatik dönüşüyor mu, yoksa süreç el emeğine mi bağlı?
Sık yapılan hatalar
- Görseli CSS ile küçültüp iş bitti sanmak. Ekranda küçük görünmesi, indirilen dosyanın küçüldüğü anlamına gelmez.
- Tüm görsellere lazy uygulamak. İlk ekranda gecikme yaratır, hız ölçümlerini düşürür.
- Aşırı sıkıştırma. Ürün fotoğrafında oluşan lekelenme, ürüne duyulan güveni zedeler; hızdan kazandığınızı satıştan kaybedebilirsiniz.
- Alt metne anahtar kelime doldurmak. Alt metin öncelikle erişilebilirlik içindir; abartı hem kullanıcıya hem de sayfanın güvenilirliğine zarar verir.
- Ölçmeden değiştirmek. Önce mevcut durumu kaydedin ki kazandığınız saniyeyi gösterebilesiniz.
Uygulanabilir özet
- En çok ziyaret edilen üç sayfayı tarayıcının ağ sekmesinde açın, görselleri boyuta göre sıralayın ve en ağır beş dosyayla işe başlayın.
- Hedef ölçüleri belirleyip WebP'ye dönüştürün, kaliteyi 75-82 aralığında tutun.
- İlk ekrandaki görsele öncelik verin, alttakilere lazy yüklemeyi uygulayın.
- Tüm görsellere genişlik ve yükseklik yazıp düzen kaymasını sıfıra yaklaştırın.
- Yeni yüklemelerin otomatik dönüştürülmesini sağlayın; elle yapılan optimizasyon üç ay sonra unutulur.
- Değişiklikten önce ve sonra aynı sayfayı aynı araçla ölçün, iki sonucu yan yana kaydedin.
