Kategoriler
Kodlama

JavaScript kullanmadan lazy-loading

Sıfır JavaScript ile görüntüleri Lazy loading olarak yüklenmesi.

  • Volkan Yılmaz
  • Yazı tarihi
Saf HTML ile Lazy Loading
Saf HTML ile Lazy Loading

Lazy Load aslında tarayıcılar için çok yeni bir teknoloji değil, 2017’den beri kullanılmakta, sadece bazı tarayıcılar ve bazı eski versiyonları desteklemiyor olabilir. Modern son sürüm tarayıcıların hepsi, yani Chrome tarayıcılar ve Mozilla Firefox tam olarak desteklemekte diğerlerinin bazı sorunları olabilir.

İlk zamanlar bir standart yoktu ce sadece JavaScript yöntemiyle tarayıcıya görsellerin ekrana geldikçe yüklenmesi(tembel yükleme veya yavaş yükleme), sayfa ilk açıldığında sadece görünen sayfadaki görsellerin yüklenmesi, aşağıda olan tarayıcıda görünmeyen kısımdaki görsellerin daha sonraya bırakılması işlemi bu şekildeydi.

WordPress siteleri 5 versiyonundan veri sayfalarında gösterilen görsellere loading="lazy" otomatik olarak eklemektedir.

Lazy Loading
Lazy Loading

Şimdi HTML’de <img loading="lazy">, <iframe oading="lazy"> vs. şeklinde kullanılabilmekte ve tarayıcı bunları tanımaktadır. Bu makalemde Javascript kullanmaksızın saf HTML ile bu kullanımdan bahseedeğim.

JavaScript ile yapılmış örnek şu şu şekilde:

JavaScript olmadan saf HTML ile aşağıdaki gibi:

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

Lazy Load’ın faydaları nelerdir?

  1. Site hızı ve performansı yükselir.
  2. Sayfaların daha hızlı açılması hemen çıkma oranlarını düşürür. Bu şekilde SEO çalışmaları da olumlu yönde etkilenir.
  3. Siteye giren kullanıcı tüm resimlerin açılmasını beklemez. Bu durumda hemen çıkma oranlarının yükselmesinin önüne geçilmiş olur.
  4. Aşırı kaynak kullanımı yerine sadece internet kullanıcısının görüntülediği alanlar sunucudan yüklenir. Bu sayede ihtiyaç dışı kaynak kullanımının önüne geçilmiş olur.
  5. İçerik hareketlerini geliştirmeye yardımcı olurken kullanıcı deneyimini iyileştirir ve geliştirir.
  6. SQL sorgularının gereksiz şekilde çalıştırılması engellenir.
  7. Dynamically Loading, kullanıcının farklı sayfalara geçmecen ya da tarayıcıların yenilenmesini beklemeden daha fazla içerik keşfetmesini sağlar.

Ayrıca SEO için önerilen bir şeydir ve sayfa içerisinde fazla ürün, fazla görsel bulunduran siteler kullanılmalıdır.

Lazy Loading - Better
Lazy Loading – Better

Bir tarayıcının loading="lazy" destekleyip desteklemediğini öğrenmek de basittir:

if ('loading' in HTMLImageElement.prototype){
  // tarayıcı destekliyor
}else{
  // desteklemiyor - Kaynak
}

Demo site: https://lazy-loading.firebaseapp.com/lazy_loading_lib.html

Kaynaklar: