Görsellerde Lazy Loading ve WebP ile Sayfa Hızlandırma

Görsellerde Lazy Loading ve WebP ile Sayfa Hızlandırma hakkında dağınık bilgiler yerine derli toplu bir kaynak arıyorsanız doğru yerdesiniz. Bu yazı 5 temel noktayı ve bunları bir araya getiren HTML örneğini sade bir dille açıklıyor.

Temel kavram ve amaç

Bir web sayfasının ağırlığının çoğu görsellerden gelir. Tek bir sıkıştırılmamış fotoğraf, sayfanın geri kalanından daha büyük olabilir. Modern biçimler, doğru boyutlandırma ve ekran dışındaki görselleri erteleme, kodda büyük değişiklik yapmadan sayfayı belirgin şekilde hızlandırır.

Kritik noktalar

• WebP ve AVIF: Aynı kalitede JPEG'e göre yüzde 25-50 daha küçük dosya sağlar.
• srcset ve sizes: Telefon küçük, masaüstü büyük görseli indirir; gereksiz veri aktarılmaz.
• loading="lazy": Ekran dışındaki görseller kullanıcı kaydırınca yüklenir.
• İlk görseli ertelemeyin: Sayfanın en üstündeki görselde lazy kullanmak LCP süresini uzatır.
• width ve height: Boyut vermek yükleme sırasında içeriğin kaymasını (CLS) önler.

Uygulamalı örnek

Teoriyi somutlaştırmak için kısa bir HTML örneğine bakalım:

<picture>
  <source srcset="/g/urun-800.avif 800w, /g/urun-1600.avif 1600w" type="image/avif">
  <source srcset="/g/urun-800.webp 800w, /g/urun-1600.webp 1600w" type="image/webp">
  <img src="/g/urun-800.jpg" sizes="(max-width: 768px) 100vw, 50vw"
       width="800" height="600" loading="lazy" decoding="async" alt="Ürün fotoğrafı">
</picture>

Örneği kendi projenize uyarlarken değişken adlarını ve yapılandırma değerlerini ortamınıza göre değiştirmeyi unutmayın.

Avantajları

Kısaca özetlemek gerekirse:

• Bakımı kolay ve okunur bir kod tabanı sağlar
• Farklı cihaz ve tarayıcılarda tutarlı sonuç verir
• Ekip içinde ortak bir uygulama standardı oluşturur
• Sayfa performansını ve kullanıcı deneyimini iyileştirir

Son söz

Görsellerde Lazy Loading ve WebP ile Sayfa Hızlandırma, küçük ama düzenli adımlarla ustalaşılan konulardan biri. Özellikle WebP ve AVIF ve width ve height başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• MySQL İndeksleri ile Sorgu Hızlandırma
• JavaScript Fetch API ve async/await ile Veri Çekme
• Tailwind CSS ile Titreşimsiz Dark Mode

Daha fazla uygulamalı içerik için Akademi derslerine ve blog yazılarına göz atabilirsiniz.