fatih toprak Full stack developer & WordPress Master

Jquery Kullanmadan Resimler için Lazy Load (Defer Images)

WordPress optimizasyon temalı bu içerikteki ele alacağımız konu, resimler için lazy load uygulaması. Bir diğer ismi ile, Defer Images.. Peki tam olarak “Lazy Load” nedir, ne işe yarar ? Öncelikle bununla alakalı bir kaç kelimelik tanımlama yapmak herkes için en doğrusu sanırım. Resimlerin sayfa yüklendikten sonra çağırılması olayını defering images ya da diğer adı ile, lazy load diyebiliriz. Buna benzer işlemleri, css dosyaları ve js dosyaları için yapmıştık eski içeriklerde, işte bu içerikte de görünür içeriklerinizin hemen sonrasında, resimlerinizi yüklemeyi deneyeceğiz.

Jquery Kullanılmayan sayfalar için lazy load nasıl yapılabilir ? (Defer Images)

Aslında modern yetenekleri olan siteler için jQuery kullanmamak gibi bir durum söz konusu bile değil ancak, soft bir yapı kullanmak ya da jQuery kütüphanesi olmadan çalışmalar için resimlerinizi içerikleriniz yüklendikten sonra yüklemek için javascript kurgusuna ihtiyacımız var. Sadece lazy load uygulaması için bile düşünsenize bir plug-in(jquery plugini) ve bir jQuery core dosyasına ihtiyacınız var dolayısı ile sırf bu uygulama için, ortalama sayfanıza 100kb ek javascript yükü eklemiş olacaksınız, ancak buna aslında gerek yok. Dolayısı ile daha hafif bir teknik ile, kaynak kodlarınızdan 100kb. tasarruf etmiş olacaksınız.

Daha hızlı sayfalar için resimlerinizin buna ihtiyacı var

Sayfalarınızı hızlandırması, için ve WordPress tema optimizasyonu için cidden bu tip ufak dokunuşlara ihtiyacınız var, oyunu kuralına göre oynadığınızda, herşey daha anlamlı ve herşey daha güzel olacak emin olun. Tabi resimleri içerik yüklendikten sonra da yükletmek tamamen çözüm olmayabilir, mevcut resimlerinizin de optimizasyonu ile alakalı ileriki makalelerde daha çok ipucu ile bu durumu da irdelemiş oluruz.

Ancak bilmeniz gereken çok önemli bir detay daha var, asla bu teknikleri mobil cihazlar için denemenizi tavsiye etmiyorum. Malum sayısız mobil browser ve sayısız mobil işletim sistemleri olduğundan bu teknikler pek modern tarayıcıları desteklediğinden içerikten sonra bile hiç yüklenemeyen resimleriniz dolayısı ile kullanıcılarınızı kaybedebilirsiniz.

Defering Images (jQuery ve lazy load olmadan resimlerinize yükleme optimizasyonu )

Uygulanacak teknikteki mantık üzerine konuşalım isterseniz,

  • Scrool pozisyonunuzu alın,
  • Kullanımdaki scrool pozisyonunu gözlemleyin,
  • Scrool durumunuza göre tepki oluşturun,
  • Son olarak resimlerinizi yükleyin.

Mantık tamamen bu, ve bunu iki aşamalı html düzenlemesi ile oldukça pratik bir kaç satır javascript kodu ile uygulayacağız. Öncelikle kendinize, 1×1 px genişlik ve yüksekliğinde şefaf bir png ya da gif oluşturun. Daha sonra html kısmında, (resimlerimizi çağırdığımız kısımda) ufak bir düzenleme yapacağız; şöyleki ;

<img src="sefaf_resim.png" data-url="resimadresiniz.jpg" />

Buradaki senaryoda, normal img src attr kısmına, oluşturduğumuz şefaf resmi yerleştirip, yeni bir attr ekleyerek, buraya da normal resim adresimizi ekliyoruz. Biraz daha açalım mı mantığı ve işleyişi ne dersiniz ?

Konuya daha hakim olmanız amacı ile bu teknikteki senaryo şu şekilde işleyecek ; 

  • Önce sayfanızın html kısmı yüklenecek,
  • Daha sonra, CSS ve JS dosyalarınız,
  • Akabinde, görünen ilk resimden sonrası sayfanız kaydırıldığında kullanıcı tarafından gözlemlenmeye başlayacak.

Çok mantıklı değil mi ?

Defer Images Nasıl yapılır ?

Aslında, üstteki oluşturduğumuz 1×1 px ‘lik resim yerine de base64 ile oluşturduğumuz daha güzel bir resim daha soft olacak  ; şöyleki;

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-url="resminiz.jpg" />

Hemen bu koddaki gerekli düzenlemelerden sonra, body tag’ının kapanışı evveli ;

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-url')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-url'));
} } }
window.onload = init;
</script>

üstteki javascript kodlarını kaynağınıza dahil edin lütfen. Defer Images için yapılması gerekenlerin, işte hepsi bu artık resimlerinizi sayfanıza dahil herşeyi yükledikten sonra, kullanıcınıza servis etmiş olacaksınız. E daha ne olsun ?

Mutlu WordPress’ler.


, , , ,

“Jquery Kullanmadan Resimler için Lazy Load (Defer Images)” için 5 yorum

Berat dedi ki:

@Fatih eline sağlık. Çok değerli bir paylaşım daha. Bende bir ara wordpress için Lazy Load eklentisini denemiştim. Çok bir fark görmeyince kaldırmıştım.

Fatih Toprak dedi ki:

@berat lazy load candır üstad. 😉

Berat dedi ki:

@Fatih sen candır diyorsun üstüne diyecek bir sözüm olamaz

Fatih Toprak dedi ki:

yok hiç gerek yok bu mantığı kullanabilirsin

* Yorumunuza, kod eklemek için; [code lang="php"] kodunuz [/code] şeklinde tanımlama kullanabilirsiniz. , lang kısmına, php js css html gibi farklı syntax'ler kullanabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir