GIF’ler web sitesini çok fena şişirir abi 😄 Özellikle sayfada birden fazla GIF varsa hem açılışı yavaşlatır hem de tarayıcıyı kasar. En iyi çözüm: GIF yerine video kullanmak.

En etkili çözüm: GIF’leri MP4 / WebM’e çevir

GIF dosyası genelde aynı görüntünün MP4 halinden 5–20 kat daha büyük olur.
Mesela:
<video autoplay loop muted playsinline>
<source src="tasarim.webm" type="video/webm">
<source src="tasarim.mp4" type="video/mp4">
</video>
Bu, GIF gibi otomatik döner ama çok daha hafif çalışır.

Sayfaya girince hepsini yükletme

Eğer sayfada 20 tane GIF/video varsa, hepsi aynı anda yüklenirse site çöker gibi olur.
Bunun yerine lazy loading yap:
<img src="preview.jpg" loading="lazy" alt="Gif tasarımı">
Video için de başlangıçta sadece kapak görseli göster:
<video
muted
loop
playsinline
preload="none"
poster="preview.jpg">
<source src="tasarim.mp4" type="video/mp4">
</video>
preload="none" çok önemli. Sayfa açılır açılmaz videoyu indirmez.

Otomatik oynatma sayısını azalt

Tüm GIF’ler/videolar aynı anda oynuyorsa CPU/GPU’yu yorar. Daha iyi yöntem:

• İlk başta sadece kapak görseli göster
• Kullanıcı üzerine gelince oynat
• Ya da görünür alana gelince oynat

Basit hover örneği:
<video muted loop playsinline preload="none" poster="preview.jpg"
onmouseenter="this.play()"
onmouseleave="this.pause(); this.currentTime = 0;">
<source src="tasarim.mp4" type="video/mp4">
</video>

Görselleri de küçült

Kapak görsellerini .webp yap:
<img src="preview.webp" loading="lazy" width="400" height="300">
Şunlara dikkat et:

• 4K görsel koyma
• Thumbnail için ayrı küçük görsel üret
• width ve height değerlerini ver
• PNG yerine WebP kullan

En iyi galeri mantığı

Ana sayfada:
Kapak görseli / thumbnail
Detay sayfasında veya tıklayınca:
MP4 / WebM animasyon
Yani ana sayfada 30 animasyonu direkt oynatma. Ana sayfa sadece hafif önizleme taşısın.

Ekstra hız için

Şunlar da fark ettirir:

• CDN kullan: Cloudflare gibi
• Dosyaları sıkıştır
• Gereksiz JS eklentilerini kaldır
• Çok ağır slider/galeri kütüphanelerinden kaçın
• Sayfada aynı anda görünen animasyon sayısını azalt
• Mobilde animasyonları otomatik oynatma

Ben olsam senin sitede şu yapıyı kurardım:
Ana sayfa:
- WebP thumbnail
- Lazy load
- Hover’da MP4 oynatma

Detay sayfası:
- MP4/WebM tam animasyon

GIF:
- Hiç kullanma veya sadece çok küçük örneklerde kullan
En net reçete: GIF → MP4/WebM + poster image + preload="none" + lazy loading. Bu dörtlü sitenin kasmasını ciddi azaltır 🚀



Senin için yapay zekaya sordum hocam