Lazy Loading Nedir? Nasıl Kullanılır?

Lazy Load Nedir? Nasıl Kullanılır?
Son Güncelleme: 15/03/2023

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ı

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.

1- <Img> Etiketi ile Lazy Load Yöntemi

Görsellerinizi <img> etiketi kullanarak ekliyorsanız aşağıdaki ilgili kodları kullanmalısınız.

HTML: Class etiketine “lazy” ekleyin ve görsellerinizi “data-src” yolu ile çağırın.

CSS: Lazy classı için aşağıdaki css kodunu oluşturun.

Java Script: Aşağıdaki kodu js kaynağına ekleyin.

2- Background-Image CSS ile Lazy Load Yöntemi

HTML’de <img> etiketi kullanmanın dışında CSS ile “background-image” ile görsel eklemek te oldukça popüler bir yöntemdir. CSS kullanılarak çağırılan görselleri lazy load ile ertelemek için aşağıdaki kodları kullanın.

HTML: Örnek HTML için aşağıdaki kodu inceleyin. Görsel içeren id=”kukumavnet-bg” ve engellemeyi sağlayan class=”lazy” bölümlerini kullanın.

CSS: İlgili id ve classlara CSS’de aşağıdaki kodları ekleyin. Image kodundaki width ve height değerlerini, görsel boyutlarınıza göre güncelleyin.

Java Script: Aşağıdaki JS kodunu javascript kaynağınıza ekleyin.

Not: Background-image kimliğine sahip bir bölümde class=”lazy” etiketi eklendiğinde görseli “display:none” olarak ayarlayacaktır. Kullanıcı tarayıcının üst bölümündeyken görsel yüklenmeyecek ancak aşağı kaydırıp görsele geldiğinde “lazy” classını kaldıracak ve görsel görünür olacak.

WordPress Lazy Loading Eklentileri

WordPress bir web sitesine sahipseniz yukarıdaki tüm bu adımlarla uğraşmak zorunda değilsiniz. Hali hazırda Litespeed gibi bir cache eklentisi kullanıyorsanız, eklenti özelliklerinden lazy loading özelliğini etkinleştirerek ekstra kod eklemeden kolayca kullanabilirsiniz. WordPress Litespeed cache eklenti ayarlarını nasıl yapacağınızı bilmiyorsanız aşağıdaki makaleyi inceleyebilirsiniz.

WordPress LiteSpeed Cache Ayarları (En İyi Performans)

Ayrıca WordPressin en popüler eklentilerinden biri olan Jetpack eklentisi hali hazırda yüklüyse yine bu eklenti ayarlarından lazy load özelliğini aktif edebilirsiniz.

Eğer bu eklentiler mevcut değilse aşağıdaki listedeki eklentileri kullanarak lazy load özelliğinden faydalanabilirsiniz.

  1. Lazy Load
  2. Bj Lazy Load
  3. jQuery Image Lazy Load WP
  4. Rocket Lazy Load
  5. Unveil Lazy Load

Yukarıdaki isimleri WordPress eklentiler bölümünde aratarak yükleyebilirsiniz.

Lazy Load Kullanmanın Faydaları Nelerdir?

  1. Büyük bir performans avantajı sağlar.
  2. Binlerce ürünü bulunan e-ticaret siteleri için bant genişliği tüketimini azaltır.
  3. Kullanıcı deneyimine olumlu katkı sağlar.
  4. PageSpeed testindeki ilgili uyarılardan kurtarır.

Lazy loading özelliğini etkinleştirerek site hızınızı artırdıktan sonra tarayıcı önbellekleme özelliğini de kullanmayı tercih edebilirsiniz. Konuyla ilgili aşağıdaki makaleyi inceleyin.

.Htaccess ile Tarayıcı Önbellekleme

Makalemizin sonuna geldik, umarız bu rehber sizin için yararlı olmuştur. Görselleri erteleme ile ilgili yaşadığınız bir sorun olursa lütfen yorum yapmaktan çekinmeyin.

Tüm Yorumlar
  1. bende çalışmıyor kod… 31. satırdaki if’in içindeki ‘;’ yüzünden hata veriyor.

  2. Teşekkürler. Güzel örneklendirme olmuş. Lazy Load işlemi mi daha faydalı yoksa tarayıcı önbellekleme işlemi mi?

  3. Paylaşım için teşekkürler. Yazılarınızı keyifle okuyor ve takip ediyorum.

Comments are closed.