Lazy loading, web sayfalarının performansını artırmak amacıyla belirli içeriklerin yüklenmesini erteleyen bir tekniktir. Bu, sayfanın yüklenme süresini azaltarak daha hızlı bir kullanıcı deneyimi sağlar.

Hangi durumlarda lazy loading kullanılmalıdır?

Lazy loading, özellikle büyük boyutlu görseller veya sayfa üzerinde aşağı kaydırıldıkça görünen içerikler için uygundur. Bu durumda lazy loading, sayfanın hızlı yüklenmesini ve kullanıcıların daha iyi bir deneyim yaşamasını sağlar.

Lazy loading'in faydalar nelerdir?

Lazy loading, sayfa yüklenme süresinde azalmaya, veri kullanımında düşüşe ve genel olarak daha iyi bir kullanıcı deneyimine katkıda bulunabilir. Bu teknik, özellikle mobil cihazlarda ve düşük bağlantı hızlarına sahip kullanıcılar için önemlidir.

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

SEO çalışmalarında her zaman kullanıcı deneyiminin ne kadar önemli olduğunu, web site görüntüsünün ne kadar profesyonel durması gerektiğinden bahsederiz. Kullanıcı deneyimini iyileştiren etkenlerden en önemlisi ise etkileyici görseller kullanmaktır. Peki, web siteniz yavaşsa hiç bunun sebebinin görsellerden olabileceğini düşündünüz mü?
Her zaman web sitenizi renklendirmek için görsel çeşitliliğin vurguluyoruz. Ama aslında yüksek kalite görseller, yükleme hızını etkileyen başlıca faktörlerden biri. Bu da kullanıcı deneyimini oldukça negatif yönde etkileyen bir durum. SEO çalışmaları arasında bu durum için bir çözüm mevcut: Lazy Loading. Bugünkü yazımızda sizler için Lazy Loading nedir ve görsel, yani image lazy load nasıl yapılır sizlere açıklayacağız.

Table of Contents

Lazy Loading Nedir?

Lazy Loading ya da lazy load ne demek diye düşünüyorsanız aslında birebir çevirisinin karşılığını vermekte. Lazy ne demek? Tembel. Load ne demek? Yükleme. Yani, aslında web sitenizdeki görsellerinizin yüklenmesini biraz geciktiren bir ‘tembel yükleme’ stratejisi. Lazy Loading web sitenizdeki görsellerin en başta toplu olarak yüklenmesini engeller. Bu da demek oluyor ki, lazy loading görsellerin ihtiyaç duyulduğunu anlarda yüklenmesini gerçekleştirmek için önemli bir etkendir. Örneğin, web sayfanızın üçüncü sayfasındaki bir görselin ilk sayfasındakilerle beraber yüklenmesi web sitenizin yüklenme hızını oldukça düşüren ve yavaşlatan bir faktör. Fakat, lazy load sayesinde üçüncü sayfadaki görselinizin o sayfaya tıklanıldığında yüklenilmesini sağlayabiliyorsunuz. Böylece, görsel yükleme isteği direkt en başta değil ihtiyaç duyulduğu anda gerçekleşmiş oluyor.

Lazy Load Hangi Görsellerde Kullanılmalıdır?

Lazy loading nedir bölümünde bahsettiğimiz gibi, Lazy Loading’de en önemli etken görselin yüklenmesine ‘o an’ ihtiyaç duyulup duyulmadığıdır. Eğer bir görsel, o an kullanıcının tarayıcı ekranında gözükmüyorsa, o görselin yüklenmesini erteleyebilirsiniz. Örnek olarak;

İçerik sayfalarındaki görseller,
‘Footer’ bölümündeki logolar,
En altta, iletişimi için kullanılan sosyal ağ ikonları,
Sidebar görselleri.

Lazy loading ile yüklemesini ertelediğiniz görseller sadece web site yükleme hızınızı arttırmaz, aynı zamanda da kullanıcı deneyiminizin iyileşmesinde de önemli rol oynar. Hızlı yüklenme demek, kullanıcılarınızın web sitenizden daha çok memnun kalması, böylece daha çok orada vakit geçirmesi demektir. Bu da aslında SEO çalışmalarının başlıca hedefi olduğundan, lazy loading nedir kısmını anladıktan sonra sitenizde uygulamanız SEO çalışmalarınıza da oldukça katkı sağlayacaktır.

Lazy Loading Nasıl Yapılır?

Lazy loading nedir sorusunu cevapladıktan sonra asıl konuşmamız gereken lazy loading’in nasıl yapıldığı. Bunun için birden fazla seçenek mevcut. İlk seçeneğiniz kendiniz elle ekleyebilirsiniz. Diğeri ise, eğer web siteniz WordPress bazlı ise gerekli eklentileri kullanarak çok rahat web sitenizde lazy load yapılması gereken görselleri işaretleyebilirsiniz. Gelin hep beraber teker teker nasıl lazy loading yapılır, öğrenelim.

Manuel Olarak Ekleme

Bir web sitesindeki görseller manuel olarak iki şekilde lazy loading için işaretlenebilir. Eğer resimlerinizi olarak ekliyorsanız bu yöntem farklı, eğer backgorund-image olarak ekliyorsanız daha da farklı olabilir.

<Img> Etiketi ile Lazy Loading Yapma

Eğer görsel eklemek için bu etiketi kullanıyorsanız, aşağıdaki kodlardan faydalanmanız gerekir.
HTML: Class etiketine aşağıdaki gibi “lazy” yazısını ekleyin ve görsellerinizi “data-src” yolu ile çağırın.

<img class="lazy" data-src="images/gorsel.jpg" width="300" height="50" alt="dopinger.com">

CSS: Lazy classı için aşağıdaki kodu oluşturabilirsiniz.

1        .lazy {
2          display: block;
3          width: 100%;
4        }

Java Script: Lazy Loading JS için gerekli kod aşağıdaki şekilde.

1      $(document).ready(function () {
2        $(window).scroll(function () {
3          $(".lazy").each(function () {
4           if ($(this).offset().top &lt; $(window).scrollTop() + $(window).height() + 100) {
5                $(this).attr("src", $(this).attr("data-src"));
6            }
7        });
8    });
9 });

Background-Image için Lazy Loading Yapma

HTML: Aşağıdaki kodu inceleyip kendi siteniz için uyarlayabilirsiniz.

1    <h2>Örnek Lazy Load Nasıl Yapılır</h2>
2     <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>
3
4    <div id="dopingercom-ll" class="lazy"></div>
5
6
7  <h2>Örnek Background-image Kullanımı</h2>
8  <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.&lt;/p>
9  
10  <div id="dopingercom-ll" class="lazy"></div>

11  
12 <p> Adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak için yazdıklarıdır.</p>

CSS: Görselinizle ilgili ID ve class’lara aşağıdaki kodu ekleyebilirsiniz. Ama genişlik ve uzunluğunu (width and height) güncellemeyi unutmayın.

1 #dopingercom-ll.lazy {
2    background-image: none;
3     background-color: #ebebeb;
4 }
5  #dopingercom-ll {
6    background-image: url("https://www.dopinger.com/images/logo.png?tr=w-255,h-48");
7    max-width: 255x;
8    height: 48px;
9    background-repeat: no-repeat 
10 }

JavaScript: Aşağıdaki kodu direkt JavaScript kayanağınıza ekleyebilirsiniz.



1 document.addEventListener("DOMContentLoaded", function() {
2  var lazyloadImages;
3
4
 if ("IntersectionObserver" in window) {
5  lazyloadImages = document.querySelectorAll(".lazy");
6  var imageObserver = new IntersectionObserver(function(entries, observer) {
7   entries.forEach(function(entry) {
8    if (entry.isIntersecting) {
9     var image = entry.target;
10    image.src = image.dataset.src;
11    image.classList.remove("lazy");
12    imageObserver.unobserve(image);
13   }
14  });
15 });
16
17  lazyloadImages.forEach(function(image) {
18  imageObserver.observe(image);
19 });
20 } else {
21 var lazyloadThrottleTimeout;
22 lazyloadImages = document.querySelectorAll(".lazy");
23
24 function lazyload () {
25  if(lazyloadThrottleTimeout) {
26   clearTimeout(lazyloadThrottleTimeout);
27  }
28
29 lazyloadThrottleTimeout = setTimeout(function() {
30  var scrollTop = window.pageYOffset;
31  lazyloadImages.forEach(function(img) {
32   if(img.offsetTop < (window.innerHeight + scrollTop)) {
33    img.src = img.dataset.src;
34    img.classList.remove('lazy');
35  }
36 });
37 if(lazyloadImages.length == 0) {
38   document.removeEventListener("scroll", lazyload);
39    window.removeEventListener("resize", lazyload);
40    window.removeEventListener("orientationChange", lazyload);
41   }
42  }, 20);
43 }
44
45  document.addEventListener("scroll", lazyload);
46   window.addEventListener("resize", lazyload);
47   window.addEventListener("orientationChange", lazyload);
48  }
49 })

WordPress Eklentileri ile Lazy Loading Yapma

Eğer web siteniz bir WordPress sitesi ise, bu yukarıda bahsettiklerimizi yapmanıza hiç gerek yok. WordPress, 5.5 sürümü itibariyle web sitenizdeki görselleri ve iframeleri otomatik bir şekilde lazy loading olarak ayarlar. Ama eğer başka eklenti veya tema kullanıyorsanız WordPress’in lazy load için kendi eklentileri mevcut. Örneğin, Litespeed gibi bir cache eklentisini hali hazırda kullanıyorsanız, buradaki lazy load özelliğini açarak fazladan kod yazmadan sitenizde lazy loading yapabilirsiniz. İşte sizler için bazı WordPress lazy loading eklentileri;

Lazy Load by WP Rocket: Lazy Load by WP Rocket eklentisi, WP Rocket eklentisinin bir parçası olarak gelior. Ancak, WP Rocket kullanmıyorsanız ve sadece lazy loading için eklenti arıyorsanız bu eklentiyi tek başına da kullanabilirsiniz.
Smush – Lazy Load Images, Optimize & Compress Images: Smush eklentisi, resimleri optimize etme ve sıkıştırma özelliklerine ek olarak lazy loading yapmanızı da sağlar. Eklentiyi yükledikten sonra, resimlerinizi otomatik bir şekilde lazy load olarak ayarlamak için eklenti ayarlarına göz atmanız gerekebilir.
a3 Lazy Load: a3 Lazy Load eklentisi, resimler, iframe’ler, ve videolar için lazy loading özelliği ile gelir. Eklenti, lazy load nedir sorusunun cevabında da dediğimiz gibi, görsellerin yüklemesini geciktirerek site yükleme hızının artmasını sağlar.
Lazy Load Optimizer: Lazy Load Optimizer eklentisi, resimler, iframe’ler, ve videolar için lazy loading özelliği sunar. Ayrıca, kişiye göre özelleştirilebilen ayarları ile her kullanıcının ihtiyacına göre farklı ayarlar ve özellikler sunmaktadır.

Lazy Loading Yapmanın Faydaları

Lazy loading nedir diye açıklarken aslında web siteniz için ne kadar faydalı olduğundan üstü kapalı da olsa bahsettik. Ama gelin lazy loading nedir’den ziyade web sitenize sağladığı değerlere beraber bakalım.

Site hızınız oldukça yükselir ve böylece site performansınız da hem kullanıcılar için hem de sizler için gelişir.
Sayfalarınızın hızlı yüklenmesi Bounce Rate, yani Hemen Çıkma Oranınızı düşürmeye başlar. Bu da SEO çalışmalarınızı olumlu yönde etkilemekte, arama sonuçlarında daha üst sıralarda çıkmanızda yardımcı olmaktadır.
Siteye giren her kullanıcı yavaş, görsellerin yüklenmesini beklemesi gerektiği bir site görüp geri çıkmaktansa hızlı bir web sitesi ile karşılaşacağından Hemen Çıkma oranınızın yine düşük kalmasında lazy loading katkıda bulunur.
Sadece içerik hareketlerini değil aynı zamanda kullanıcı deneyimini de oldukça geliştirir. Bu da SEO çalışmalarınız için oldukça önemlidir.

Lazy Loading Yaparken Dikkat Edilmesi Gereken Noktalar

Lazy loading nedir ve nasıl yapılır kısımlarında, bunun web siteniz için ne kadar faydalı olabileceğinden ve kendiniz manuel olarak ya da eklentilerle nasıl ekleyebileceğinizden bahsettik. Ama her konuda olduğu gibi lazy loading yaparken de göz önünde bulundurulması gereken bazı faktörler mevcut. İşte lazy loading yaparken dikkat edilmesi gereken faktörler:

Öncellikle, lazy load sitesi görsel olarak çok yoğun olan işletmeler veya web site sahipleri için uygundur. Eğer web siteniz görselden ziyade içerik ağırlıklıysa lazy loading kullanmanızı önermeyiz.
Eğer yanlış bir kurgu ya da kod dizimi söz konusuysa, web sitenizi ziyaret eden kullanıcılar, resimlerinizi hiç göremeyebilirler. Bu da amacınızın tam tersi bir yolda yürümek demektir. O yüzden lazy loading kurgusunu yaparken dikkatli olmalı, bir uzmandan veya bilir kişiden de göz atmasını isteyebilirsiniz.
Görselleriniz ihtiyacınız olmadığında yüklenmemelidir, evet ama sayfayı kaydırdığımızda da bu görselin yüklenme hızı 3 saniyenin üstünde olmamalıdır. Eğer 3 saniyenin üstündeyse kullanıcı deneyiminiz olumsuz etkilenecek, SEO çalışmalarınız da geri tepecektir.
Arka plan renkleri, küçük görsel ikonları ya da animasyonları kullanarak o bölümde bir görsel olacağını kullanıcılarınıza ipuçlarıyla bildirebilirsiniz. Böylece, orada görsel yükleneceğini anlayacak ve ona göre bekleyeceklerdir.

Sonuç: Lazy Loading ile Optimize Edilmiş Performans

Lazy loading nedir diyecek olursak, web geliştiricilerin sayfa performansını artırmak ve kullanıcı deneyimini optimize etmek için kullandığı etkili bir tekniktir. Bu yazıda, lazy loading nedir sorusunu cevapladık ve nasıl yapıldığını ayrıntılı bir şekilde inceledik. Lazy loading, özellikle büyük boyutlu veya sayfa üzerinde aşağı kaydırıldıkça görünen görsellerde kullanıldığında maksimum verim sağlayacaktır. Manuel ekleme yöntemleri, etiketi için eklemeler, background-image için düzenlemeler ve WordPress kullanıcıları için eklentiler kullanma gibi farklı yöntemlerle lazy loading’i web sitenize uygulayabilirsiniz.
Bu tekniklerin doğru bir şekilde kullanılması, sayfa yüklenme sürelerinde belirgin bir azalmaya, kullanıcı deneyiminde iyileşmeye ve veri kullanımında düşüşe neden olabilir. Ancak, lazy loading uygularken tarayıcı uyumluluğu, SEO etkileri ve kullanıcı deneyimini olumsuz yönde etkileyebilecek faktörlere dikkat etmek önemlidir. Lazy loading, web sayfalarını daha hızlı ve verimli hale getirerek, modern web geliştiricilerinin vazgeçilmez bir unsuru olarak SEO sektöründe yerini almakta.