Lazy Load Nedir? Nasıl Yapılır?

Web sitelerinin hızı ve kullanıcı deneyimi, arama motorlarının gözünde giderek daha önemli hale gelmektedir.
 
Bu bağlamda, “Lazy Load” (Tembel Yükleme) yöntemi içerik optimizasyonunda  kritik bir rol oynamaktadır.
 
Bu makalede, Lazy Load’un ne olduğunu, nasıl çalıştığını ve SEO çalışmalarındaki öneminden bahsedeceğiz.
 
Hazırsanız başlayalım.
lazy-load-giris-gorsel
İçindekiler
    Add a header to begin generating the table of contents

    Lazy Load Nedir?

    Lazy load yani tembel yükleme bir web sitesindeki içeriklerin gecikmeli yüklenmesi demektir. 

     

    Bol görsel içeriğe sahip web sitelerinde bütün içeriğin aynı anda yüklenmesi kullanıcı deneyimini yavaşlatır.

     

    Bunun önüne geçmek ve SEO çalışmalarından verimli sonuç almak için lazy load yöntemi kullanılmalıdır.

     

    Gelin şimdi bu yöntemin avantajlarından ve örneklerinden bahsedelim.

    lazy-load-nedir

    Lazy Load Yönteminin Avantajları

    Hızlı Sayfa Yüklemesi

    Lazy load, sayfada yer alan resimler, videolar ve diğer medya içeriklerini sayfa ziyaret edildiği anda değil, ihtiyaç duyulduğu anda yükler.
     
    Bu sayede sayfa yüklenme süresi önemli ölçüde azalır ve kullanıcılara daha hızlı bir deneyim sunulur.
     
    Lazy load sayfanın sadece kullanılan kısmını yükler.
     
    Geri kalan kısmı yüklemediği için daha az kaynak kullanılır.
     
    Bunun sonucunda siteniz daha hızlı yüklenir.
    lazy-load-hizli-sayfa-yuklemesi

    Daha İyi Kullanıcı Deneyimi

    Sayfa hızının artması, kullanıcıların sitenizde daha uzun süre kalmasını ve daha çok içerik tüketmelerini sağlar. 

     

    Sayfalar arası bekleme süreleri azaldığı için, kullanıcı sitenizin diğer sayfalarına da göz atacaktır.

    lazy-load-daha-iyi-kullanici-deneyimi

    Mobil Veri Tüketimi

    Lazy load telefon ekranındaki görünen kısmı yüklediği için, daha az veri tüketimi sağlar.
     
    Böylece internet kullanıcılarının %68’ini oluşturan mobil kullanıcıların deneyimi iyileştirlmiş olur.
    lazy-load-mobil-veri-tuketimi-1
    lazy-load-mobil-veri-tuketimi-2

    Lazy Load Uygulamaları ve Örnekler

    Lazy loading, web sitesindeki HTML ve JavaScript kodlarına müdahale edilerek gerçekleştirişmektedir.

     

    Eğer bir CMS  ( WordPress ) altyapısı kullanıyorsanız, basit bir eklentiyle bu işlemi yapabilirsiniz.

    HTML Lazy Loading

    HTML’de lazy loading, `<img>` etiketine `loading=”lazy”` özelliği eklenerek sağlanır.
    				
    					<!DOCTYPE html>
    <html lang="en">
      <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML Lazy Load</title>
      </head>
      <body>
        <img loading="lazy" decoding="async" src="1.jpg" width="400" height="533" loading="lazy" />
        <img loading="lazy" decoding="async" src="2.jpg" width="400" height="500" loading="lazy" />
        <img loading="lazy" decoding="async" src="3.jpg" width="400" height="600" loading="lazy" />
        <img loading="lazy" decoding="async" src="4.jpg" width="400" height="600" loading="lazy" />
        <img loading="lazy" decoding="async" src="5.jpg" width="400" height="600" loading="lazy" />
      <script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
    </html>
    				
    			
    Burada dikkat edilmesi gereken, her görselin genişlik ve yükseklik bilgilerinin belirtilmiş olmasıdır.
     
    Bu sayede tarayıcı yükleme için gereken hesaplamayı yapabilecektir.
    Videoda da gördüğümüz gibi sayfadaki içerikler ekrana girdikçe yüklenmiştir.

    Iframe Lazy Loading

    Iframe lazy load işleminin HTML lazy load’dan çok bir farkı yoktur.

     

    `<iframe>` etiketine loading=”lazy” özelliğini ekleyip genişlik ve yüksek bilgilerini vermeniz yeterlidir.

     

    				
    					<!DOCTYPE html>
    <html lang="en">
      <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>IFrame Lazy Load</title>
      </head>
      <body>
        <iframe width="400" height="315" loading="lazy" src="https://www.youtube.com/embed/viTCKHa8GEE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </body>
    </html>
    
    				
    			

    JavaScript Lazy Loading

    Eğer tarayıcınız `loading=”lazy”` özelliğini desteklemiyorsa JavaScript ile bu işlemi gerçekleştirebilirsiniz.

     

    Tarayıcınızın lazy loading uyumunu CanIUse aracını kullanarak tespit edebilirsiniz.

    				
    					<!DOCTYPE html>
    <html lang="en">
      <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>JavaScript Lazy Load</title>
      </head>
      <body>
         <!-- görsel -->
        <img loading="lazy" decoding="async" src="yer-tutucu-gorsel.jpg" data-src="./1.jpg" class="lazy" width="400" height="533" />
        
        <!-- lazy load kod bloğu -->
        <script>
          const lazyImages = document.querySelectorAll(".lazy");
    
          const options = {
            root: null, 
            rootMargin: "0px",
            threshold: 0.1 
          };
    
          const handleIntersection = (entries, observer) => {
            entries.forEach(entry => {
              console.log(entry);
              if (entry.isIntersecting) {
                const img = entry.target;
                const src = img.getAttribute("data-src");
                img.src = src;
              
                observer.unobserve(img);
              }
            });
          };
    
          const observer = new IntersectionObserver(handleIntersection, options);
    
          lazyImages.forEach(image => {
            observer.observe(image);
          });
          
        </script>
      </body>
    </html>
    				
    			

    Yukarıdaki kod örneğin:

    – `data-src` görselin dosya yoludur.

    – “lazy-image” görsel sınıfıdır. ( JavaScript kodu için gerekli )

    – `IntersectionObserver` ise görselin görüntü alanı içerisine geldiğinde işlem yapılmasını sağlar.

    WordPress Lazy Loading

    Eğer itenizin altyapısında WordPress kullanıyorsanız hiç koda dokunmadan lazy load işlemini yapabilirsiniz.

     

    Daha önce hiç WordPress eklentisi yüklemediyseniz bu içerikten bakabilirsiniz.

     

    Lazy load ile ilgili iki tane eklentiye değineceğiz ancak bu işlemi yapan birçok yazılım var.

     

    Onların linkini de aşağıda bulabilirsiniz.

    Litespeed Cache

    Litespeed Cache eklentisi en çok kullanılan önbellek eklentilerinden biridir. ( 4+ milyon indirmeye sahip )

     

    Eklentiyi yükleyip aktifleştirdikten sonra “Medya Ayarları” kısmından lazy load özelliğini açabilirsiniz.

    lazy-load-litespeed-cache
    lazy-load-litespeed-cache-2

    Smush

    Smush eklentisi görsel optimizasyonu üzerine yoğunlaşmış bir eklentidir ve birçok kullanıcı tarafından tercih edilmektedir. ( 1 milyondan fazla kullanıma sahip )

     

    Eklentinin lazy load kısmından bu özelliği aktifleştirebilirsiniz.

    lazy-load-smush-1
    lazy-load-smush-2
    lazy-load-smush-3

     

    Diğer lazy load eklentileri için Jetpack’in hazırladığı detaylı içeriği inceleyebilirsiniz.

    Lazy Load Potansiyel Dezavantajları

    Lazy load yöntemi sayfa yükleme ve kullanıcı deneyiminde bize birçok avantaj sunuyor.

     

    Ancak bu yöntemin doğuracağı istenmeyen durumlar da olabilir.

     

    Şimdi gelin bu durumlara bir göz atalım

    Etkileşim Sorunları

    Lazy Load, sayfanın alt kısmında yer alan içeriklerin yüklenmesini erteler.

     

    Eğer kullanıcı sayfayı hızlı bir şekilde kaydırırsa içerikleri yüklenmemiş bir şekilde görüntüleyebilir.

     

    Görselliği ön planda olan bir siteniz varsa, bu yöntemi kullanmadan önce bir demo ortamında test etmenizi öneririm.

    lazy-load-nedir-etkilesim-sorunlari

    Tarama Sorunları

    Lazy Load doğru bir şekilde uygulanmadığı zaman site içeriklerini arama motorlarından gizleyebilir.

     

    Bunun sonucunda arama motorları, sayfada bulunan içeriği indekslemede ve değerlendirmede güçlük çekebilirler.

     

    Google’ın konuyla ilgili açıklamasına buradan ulaşabilirsiniz.

    Kod Boyutunun Artması

    Web sitenize eklenen her yeni özellik yeni bir kod bloğu demektir.

     

    Lazy load yöntemi de sayfanıza ekstra Javascript kodları veya başka türlü eklentiler eklenmesini gerektirir.

     

    Eğer bu eklemeyi kontrollü bir şekilde yapmazsanız, sitenizi hızlandırmak yerine daha yavaş yüklenmesine sebep olabilirsiniz.

     

    Bu yüzden ihtiyacın tespiti doğru bir şekilde yapılıp, yöntem ona göre uygulanmalıdır.

    lazy-load-kod-fazlaliği

    Sonuç

    Bu yazımızda, lazy load yönteminin sitenize katacağı artılara, uygulamalarına ve dezavantajlarına değindik.

     

    Lazy load doğru bir şekilde kullanıldığı zaman site performansınızı önemli ölçüde iyileştirir.

     

    Siz de hemen bugün bu yöntemi sitenizde uygulamaya başlayabilirsiniz.

     

    Eğer uygulamayla veya konuyla ilgili herhangi bir sorunuz olursa yorum kısmına yazabilirsiniz.

    Yorum bırakın

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

    tr_TRTurkish