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 Yönteminin Avantajları
Hızlı Sayfa Yüklemesi
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.
Mobil Veri Tüketimi
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Lazy Load</title>
</head>
<body data-rsssl=1>
<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>
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 data-rsssl=1>
<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 data-rsssl=1>
<!-- 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.
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.
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.
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.
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.
Turkish 
English