Teklif Al
Görseller, içeriği daha ilgi çekici hale getirmek ve konuyu daha iyi sunmak için her web sitesinde oldukça kritik öneme sahiptir. Bir web sitesini, logo, ürün fotoğrafları, kampanyalar gibi görseller olmadan hayal etmek imkansızdır. Ancak görsellerin boyutları çok büyük ve yüksek çözünürlükte olduğunda web site hızınızı yavaşlatabilirler. Bu durumda görsellerden kurtulmak yerine, lazy loading ile web sayfalarınızın onlarla birlikte hızlı yüklenmesini sağlayabilirsiniz.
Lazy Load Nedir?
Lazy load; görüntülerin web sitelerinde eş zamansız olarak yüklenmesidir. Yani ekranın üst kısmındaki içerik tamamen yüklendikten sonra veya ilgili görseli tarayıcı da gördükleri zaman yüklenmesi anlamına gelir.
Lazy load kullanarak ekranda olmayan görsellerin yüklenmesini erteleyip, sitenin daha hızlı açılmasını sağlayabilir, siteye gereksiz yük oluşturmasını engelleyebilirsiniz. Böylece görünüm alanında olmayan görseller ilk sayfa yükleme performansını geliştirir.
Lazy Loading Hangi Görsellerde Kullanılmalıdır?
Lazy load kullanımı ile ilgili temel konu, görselin şu anda yüklenmesinin gerekli olup olmadığıyla ilgilidir. Eğer bir görsel tarayıcı ekranında kullanıcılar tarafından görünmüyorsa o görseli erteleyin. Örnek olarak aşağıdaki türleri ertelemeyi düşünebilirsiniz.
İçerik alanındaki görseller,
Footer alanındaki logo,
Alt bölümde kullanılan sosyal ikonlar,
Sidebar görselleri.
Lazy loading kullanımı sadece performans için değil, aynı zamanda iyi bir kullanıcı deneyimi sağlamak için de önemlidir. İyi bir kullanıcı deneyimi sunmak site içi SEO‘ya da katkı sağlar. Bu sebeple web sitelerinizde lazy load özelliğini kesinlikle kulanmalısınız.
Lazy Load Nasıl Kullanılır?
Bir web sitesindeki görseller ihtiyaca göre iki şekilde ertelenebilir. Birincisi HTML’e doğrudan <img> etiketi ile eklenen görseller, diğeri de background-image ile eklenen görseller için tercih edilebilir. Şimdi en yaygın olan <img> etiketi ile eklenen görsel kullanımını inceleyim.
