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

Dijital pazarlamanın her geçen gün daha da yaygınlaşması, firmalar arasında sektörel rekabetin giderek sertleşmesine neden olmaktadır. Bunun sonucunda gerek web sitelerinin hızını artırarak performanslarını en üst noktaya taşımak gerek kullanıcılara sorunsuz bir site içi deneyim sunmak için Lazy Loading uygulaması yaygın bir şekilde kullanılmaktadır. Lazy Load web sitesi hızını artırma, ödenecek data ücretlerinin maliyetini artırma ve kullanıcıların deneyimini artırma özelliğine sahiptir.

Lazy Load Nedir?

Lazy Load en basit şekliyle, web sayfalarının performansını yükseltme amacıyla uygulanan bir teknik olarak tanımlanabilir. Bu teknik, web sayfası yüklendiğinde tüm içeriğin yüklenmesi yerine, yalnızca sayfa görüntülenirken gereksinim duyulan bölümlerin yüklenmesine yardımcı olur. Böylece, sayfanın yükleme süresi azalır ve kullanıcıların daha hızlı bir deneyim yaşaması mümkün olur.

Web sayfasında çok fazla sayıda resim olduğu durumlarda, sayfa yüklendiği sırada tüm resimlerin yüklenmesi zaman alıcı olabilir. Bu durumda Lazy Load kullanılarak, sayfa yüklendiğinde yalnızca görüntülenecek resimlerin yüklenmesi, diğerlerinin ise sayfa aşağı kaydırıldıkça eklenmesi sağlanabilir. Bunun sonucunda ise sayfa yükleme süresi azaldığı gibi kullanıcı deneyiminin iyileştirilmesi mümkün olur.

Lazy Load genellikle JavaScript kullanılarak uygulanmakta olup pek çok web sayfası tarafından kullanılmaktadır. Diğer yandan kötü yazılmış bir Lazy Load uygulaması, sayfa yüklemesinin daha da yavaşlamasına ya da yanıt vermeyen sayfalar oluşmasına neden olabilir. Bu yüzden, Lazy Load dikkatli bir şekilde uygulanmalıdır.

Lazy Load Avantajları Nelerdir?

Lazy Load kullanmak web sayfaları açısından pek çok farklı avantajı beraberinde getirir. Bu avantajlar arasında öne çıkanlar aşağıda sıralanmıştır:

• Daha Hızlı Yükleme Süresi: Lazy Load kullanılarak web sayfalarının yükleme süresi azaltılır ve kullanıcılar daha hızlı bir sayfa açılış deneyimi yaşar.
• Daha Az Veri Tüketimi: Sayfanın yüklenmesi sırasında tüm içerik yüklenmediği için kullanıcı daha az veri tüketir.
• Daha Az Sunucu Yükü: Sayfa yükleme süresinin azalması, aynı zamanda sunucu yükünün de azalmasına yardımcı olur.
• Daha İyi Kullanıcı Deneyimi: Sayfa yükleme süresinin azalması sayesinde kullanıcılar daha hızlı bir deneyim yaşar ve daha az bekleme süreleriyle karşı karşıya kalır.
• Daha İyi SEO Performansı: Google ve diğer arama motorları, sayfa yükleme hızını SEO sıralamasını etkileyen bir faktör olarak kabul ederler. Lazy Load kullanarak sayfa yükleme hızının artırılması, SEO performansının iyileşmesine yardımcı olabilir.
• Daha Az Kaynak Kullanımı: Web sayfası yüklenirken tüm içeriğin yüklenmemesi sayesinde kaynaklar daha verimli bir şekilde kullanılabilir.

Lazy Load Dezavantajları Nelerdir?

Bununla birlikte Lazy Load kullanmak bazı dezavantajlar yaşanmasına da neden olabilir. Olası dezavantajlar aşağıda sıralanmıştır:

• Kullanıcı Deneyiminde Sorunlar Yaşanması: Kullanıcılar web sayfasını hızlı bir şekilde kaydırdığında, yüklenmeyen içeriğin yavaş bir şekilde yüklenmesi kullanıcı deneyimini olumsuz yönde etkileyebilir.
• SEO Performansının Azalması: Sayfa yükleme hızı bazı arama motorları nezdinde SEO sıralamasını etkileyen faktörlerden biri olarak kabul edilir. Bununla birlikte, bazı Lazy Load uygulamaları sayfa yükleme hızını etkileyerek SEO performansının düşmesine neden olabilir. 
• JavaScript Kullanımı: Lazy Load çoğunlukla JavaScript kullanılarak uygulanmakta olup buna bağlı olarak sayfanın yüklenme süresi artabilir. Bu durum, bazı kullanıcılar açısından performans sorunlarına yok açabilir.
• Kötü Yazılmış Uygulamaların Etkisi: Kötü yazılmış bir Lazy Load uygulaması web sayfasının yüklenmesi işlemini yavaşlatabilir ya da yanıt vermeyen sayfalar oluşmasına neden olabilir. 
• Bazı Eklentilerle Uyumsuzluk: Lazy Load bazı eklentilerle uyumsuz olabileceği için bu eklentilerin çalışmasını engellemesi gibi istenmeyen durumlar yaşanabilir.
• İçeriğin Görüntülenmesinde Gecikme: Lazy Load kullanılan web sayfalarında, yüklenmelerin içeriklerin görüntülenmesinin gecikebilmesi nedeniyle kullanıcının beklemesi söz konusu olabilir.

Lazy Load Nasıl Yapılır?

İleriye Doğru Yükleme (Progressive Loading): Lazy Load yüklemesi için Progressive Loading yönteminin kullanılması halinde, sayfanın ilk yüklemesi sırasında tüm içeriğin yüklenmesi yerine, yalnızca ilk görünen içerik yüklenir. Geri kalan içerik ise sayfa daha fazla kaydırıldıkça yüklenir. Bu durum, web sayfasının yükleme süresini büyük ölçüde azaltır, ayrıca kullanıcıların sayfayı hızlı bir şekilde görüntülemesi mümkün olur. İleriye doğru yükleme, özellikle çok sayfalı web siteleri açısından faydalı bir yöntemdir.

Görüntü Lazy Load: Yalnızca sayfada görüntülenen görüntülerin yüklenmesini sağlayan bu yöntemde, kullanıcı sayfayı kaydırdıkça diğer görüntüler yüklenmektedir. Özellikle görüntü ağırlıklı web sitelerinde son derece etkili olan bu yöntem, sayfa yükleme süresini önemli ölçüde azaltmaktadır.

AJAX ile Lazy Load: Sayfanın ilk yüklenmesi sırasında yalnızca gerekli olan içeriğin yüklenmesine izin veren bir yöntemdir. Geri kalan içerik ise kullanıcı sayfayı kaydırdıkça AJAX ile yüklenir. Web sitesinin yüklenme süresini azaltan bu yöntem sayesinde kullanıcı deneyimi optimize edilebilir.

Iframe Lazy Load: Sayfada bulunan iframe’leri yüklemeyi erteleyen bu yöntem, sayfa yükleme süresini azaltmaya yardımcı olur. Özellikle çok sayfalı web sitelerinde ya da birden çok irame içeren web sayfalarında kullanılması avantajlı bir yöntemdir.

JavaScript ile Lazy Load: Sayfa içeriğinin yalnızca kullanıcı sayfayı kaydırdığında yüklenmesine yardımcı olan bu yöntem de sayfa yükleme süresini azaltır. Bu sayede kullanıcı deneyimini optimize edebilir. Bununla birlikte, bu yöntemde kullanılan JavaScript’in kalitesi çok önemlidir. Çünkü kötü yazılmış bir kod kullanmak, sayfanın yükleme süresini önemli ölçüde yavaşlatabilir.

HTML’de Kullanılacak Kod

Görüntü Lazy Load için kullanılacak olan HTML kodu şu şekildedir:

<img data-src="path/to/image.jpg" />

Bu kodda, “data-src” özniteliği görüntünün yüklenmesi gereken yolu belirtmekte olup “lazyload” sınıfı görüntünün gecikmeli bir şekilde yüklenmesi için kullanılır. Bu kodun kullanılmasıyla, web sayfasının ilk yükleme süresini azaltmak ve yüksek boyutlu görüntülerin yavaş yüklenmesinden kaynaklanan performans sorunlarını önlemek mümkündür.

AJAX ile Lazy Load ya da JavaScript ile Lazy Road gibi diğer yöntemlerde ise HTML kodunun kullanılması söz konusu değildir. Fakat bu teknikleri kullanmak için JavaScript ya da jQuery gibi programlama dillerini bilmek gerekir.

CSS’de Kullanılacak Kod

“Lazy” sınıfını kullanarak görüntüleri geciktirmek için aşağıda paylaştığımız CSS kodunu kullanabilirsiniz:

.lazy {
  background-image: url("placeholder.jpg");
}
.lazy.loaded {
  background-image: none;
}

Bu kodda, “placeholder.jpg” görüntüsü, yüklenmemiş bir görüntüye uygulanan arka plan görüntüsü olarak kullanılmaktadır. Görüntü yüklendiğinde ise “loaded” sınıfı uygulanarak arka plan görüntüsü kaldırılmaktadır. Bu yöntem bir yandan sayfa yükleme süresini azalttığı gibi bir yandan da görüntülerin yavaş yüklenmesinin neden olabileceği performans sorunlarını önlemektedir.

JavaScript’te Kullanılacak Kod

JavaScript kodu, “İntersection Observer API” gibi pek çok farklı yöntemin kullanılması yoluyla uygulanabilir. “Intersection Observer API” görüntülerin ne zaman yüklenmesi gerektiğini belirleyen bir API olma özelliğine sahiptir. Bu kapsamda yalnızca görüntülerin görünür olduğu anda yüklenmesine imkan verir.

Aşağıdaki JavaScript kodu, Intersection Observer API’yi kullanarak görüntülerin Lazy Load işlemini gerçekleştirmektedir:

const images = document.querySelectorAll('img[data-src]');
const imgOptions = {
    threshold: 0.5,
    rootMargin: '0px 0px 100px 0px'
};
const loadImages = (image) => {
    image.setAttribute('src', image.getAttribute('data-src'));
    image.onload = () => {
        image.removeAttribute('data-src');
    };
};
if ('IntersectionObserver' in window) {
    const imgObserver = new IntersectionObserver((entries, imgObserver) => {
        entries.forEach((entry) => {
            if (!entry.isIntersecting) {
                return;
            } else {
                loadImages(entry.target);
                imgObserver.unobserve(entry.target);
            }
        });
    }, imgOptions);
    images.forEach((image) => {
        imgObserver.observe(image);
    });
} else {
    images.forEach((image) => {
        loadImages(image);
    });
}

Bu kod, sayfadaki tüm “imge” etiketlerinde “data-src” özniteliği olan görüntülere seçerek bunları “loadImages” fonksiyonuna göndermektedir. “loadImages” fonksiyonu, “setAttribute” metoduyla “data-src- özniteliğini “src” özniteliğiyle değiştirmektedir. Görüntü yüklendiğinde ise “onload” olayıyla “data-src” özniteliği kaldırılmaktadır.
Bu kod, “Intersection Observer” API’yı kullanma yoluyla sayfadaki görüntülerin hangilerinin görünür olduğunu ve yüklenmesi gerektiğini belirleme özelliğine sahiptir. Bu sayede, performans artar ve sayfa yükleme süresi azalır.

Web Sayfalarında Neden Lazy Road Kullanılır?

Lazy Load web sayfalarında, sayfanın yükleme süresini azaltmak ve kullanıcı deneyimini artırmak amacıyla kullanılır. Sayfadaki tüm içeriklerin yüklenmesi için gereken zaman, sayfaların yükleme süresi olarak adlandırılır. Bu süre; sayfanın boyutuna, sunucunun hızına ve kullanıcının internet bağlantısının hızına göre değişiklik gösterebilir.

Geleneksel bir web sayfasında tüm içerik tek seferde yüklenir, buna bağlı olarak sayfa yükleme süresi uzatılabilir. Kullanıcılar ise sayfa tamamen yüklenene dek beklemek durumunda kalırlar. Bu durum nedeniyle kullanıcı deneyimi olumsuz yönde etkilenebilir. Hata bekleme süresi dolayısıyla kullanıcılar web sitesini terk edebilirler.

Bu sorunu çözmek için Lazy Loading kullanılabilir. Bu özellik, sayfa yüklenirken yalnızca görünen bölümlerin yüklenmesini sağlar. Kullanıcı sayfayı aşağı doğru kaydırdığında ise Lazy Loading aracılığıyla sayfa üzerindeki daha fazla içerik eklenir. Sayfa yükleme süresinin azalmasını sağlayan bu durum aynı zamanda kullanıcıların uzun süreler boyunca beklemesini önler.

Lazy Loading, özellikle yüksek çözünürlüklü resimlerin bulunduğu web sayfalarında büyük ölçüde fayda sağlar. Bu sayfaların yüklenmesi uzun sürerek kullanıcı deneyiminin olumsuz yönde etkilenmesine neden olabilir. Lazy Loading web sayfasını daha hızlı yüklemesinin yanı sıra yüksek çözünürlüklü resimlerin kaliteden ödün vermeden gösterilmesi avantajını sağlar.

Lazy Load’ı Hangi Siteler Kullanmalıdır?

Lazy Load genellikle yüksek boyutlu medya dosyalarının, özellikle de yüksek çözünürlüklü görüntülerin yer aldığı web siteleri için işlevsel bir çözümdür. Bu tür web sitelerinin yavaş yükleme süreleri dolayısıyla kullanıcı deneyimini olumsuz yönde etkilenebilir. Özellikle e-ticaret siteleri, fotoğraf galerileri, haber siteleri, sanal tur siteleri, portföy web siteleri ve video içerikleri olan web siteleri gibi içeriklerin ağırlıklı olduğu sitelerde Lazy Load kullanılabilir.

Diğer yandan, Lazy Load kullanımı her web sitesi için uygun olmayabilir. Örnek vermek gerekirse, küçük ölçekli web siteleri ya da metin ağırlıklı web sitelerinde Lazy Load kullanımı önerilmez. Çünkü bu tür web sitelerinde yer alan medya dosyaları çoğunlukla daha küçük boyutlarda olur. Buna bağlı olarak daha hızlı bir şekilde yüklenirler.

Ayrıca, Lazy Load kullanmak, web sitelerinin performansının artmasını sağlarken bazı kullanıcılar açısından yanıltıcı bir deneyime yol açabilir. Örneğin, web sitesindeki tüm görüntülerin yüklenmesi gerektiğinden emin olan kullanıcıların, belirli bir sayfa yüklenirken görüntülerin henüz yüklenmediğini fark etmesi mümkündür. Bu yüzden, web sitesi Lazy Load ile optimize edilmeden önce kullanıcı deneyimi göz önünde bulundurulmalıdır.

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

Özellikle yüksek boyutlu ya da yavaş yükleme süresi olan görseller için Lazy Loading kullanımı önerilir. Bu tür görseller, web sitelerinin yüklenme süresini uzatarak kullanıcı deneyiminin olumsuz etkilenmesine neden olur. Lazy Loading, web sitelerindeki görsellerin yalnızca görünür olduğunda yüklenmesini sağlar. Bu sayede web sitesinin yükleme süresini hızlandırarak kullanıcı deneyimini optimize eder.

• Büyük Boyutlu Görseller: Yüksek çözünürlüklü görseller, çoğunlukla büyük boyutlu olur ve yükleme süresinin yavaşlamasına yol açabilir. Lazy Loading bu görsellerin yalnızca görüntülendiği anda yüklenmesini sağlayarak önemli bir avantaj sunar.
• Galeri Görselleri: Web sitelerinde yer alan galeri sayfaları, birden fazla görselin yüklenmesiyle birlikte yavaş yükleme sürelerine neden olabilir. Lazy Loading kullanıldığında galeri görselleri sadece görüntülendiği anda yüklenir.
• İçerik Görselleri: Haber siteleri ve bloglar gibi içerik ağırlıklı web sitelerinde birden fazla görsel içeren sayfalara sıklıkla rastlanır. Lazy Loading bu tür içerik görsellerinin sadece görüntülendiği anda yüklenmesine imkan verir.
• Arka Plan Görselleri: Web sitelerinde arka plan resimleri çoğunlukla yüksek boyutlu olurlar. Lazy Loading, söz konusu tür arka plan görsellerinin sadece görüntülendiği anda yüklenmesi avantajını sağlar.
• İlgili Görseller: İlgili görseller kullanıcılara web sitesindeki diğer sayfalara ya da içeriklere yönlendirme yapma amacıyla kullanılır. Lazy Loading kullanıldığında ilgili görseller sadece görüntülendiği anda yüklenir.

WordPress Lazy Loading Eklentileri

WordPress kullanıcılarının, web sitelerine Lazy Loading özelliği eklemek için kullanabilecekleri pek çok farklı eklenti vardır. WordPress Lazy Loading eklentilerinden bazıları şu şekilde sıralanabilir:

• WP Rocket: Web sitelerinin performansını artırmak için kullanılabilecek popüler WordPress eklentilerinden biri olup Lazy Loading özelliğini içermektedir.
• Jetpack: Güvenlik, performans ve site yönetimi için pek çok farklı özellik sunan bir WordPress eklentisi olma özelliğine sahiptir. Lazy Loading özelliğini içeren bir eklentidir.
• Lazy Load by WPForms: Görsellerin yalnızca görüntülendiği anda yüklenmesini sağlayan Lazy Load by WPForms, web sitelerinin yüklenme sürelerini azaltarak kullanıcı deneyimini optimize eder.
• BJ Lazy Load: Web sitelerinin yükleme süresini hızlandıran ve kullanıcı deneyimini iyileştiren BJ Lazy Load, görsellerin yalnızca görüntülendiği anda yüklenmesini sağlayan diğer bir WordPress eklentisidir.
• Lazy Load Optimizer: Web sitesinin yükleme süresini hızlandırıp kullanıcı deneyimini iyileştiren Lazy Load Optimizer, görsellerin sadece görüntülendiği anda yüklenmesini sağlayan WordPress eklentilerinden biridir.

Lazy Load Dikkat Edilmesi Gerekenler Nelerdir?

• SEO Uyumlu URL’ler: Web sitesinde Lazy Load özelliğinin kullanılacağı durumlarda, ilgili sayfadaki tüm resimlerin uygun SEO URL’lerine sahip olduğundan emin olmak gerekir. Bu sayede resimlerin arama motorları tarafından taranması mümkün olabilir.
• Resimlerin Boyutları: Lazy Loading özelliği, web sayfasının yükleme süresini azaltma amacıyla kullanılır. Yüksek boyutlu resimlerin yüklenmesinin geciktiği durumlarda, kullanıcı deneyiminin olumsuz yönde etkilenmesi riski doğabilir. Buna bağlı olarak, resimlerin boyutunun mümkün olduğunca küçük olmasına özen gösterilmelidir.
• Mobile Uyumlu Tasarım: Mobil cihazlarda Lazy Loading özelliğinin doğru bir şekilde çalışmasına özen gösterilmelidir. Bu kapsamda, mobil cihazlar için web sitesi tasarımının Responsive olduğundan ve uyumlu olduğundan emin olmak gerekir.
• Test Etme: Lazy Loading özelliği kullanılmadan önce web sitesi test edilmelidir. Böylece, sayfanın yükleme süresini ve performansını test etmek mümkün olur.
• JavaScript Sorunları: Lazy Loading özelliğinin doğru bir şekilde çalışması, JavaScript’in etkinleştirilmiş olmasına bağlıdır. Ayrıca, JavaScript dosyaları doğru bir şekilde yüklenmelidir.
• Kullanıcı Deneyimine Dikkat Edin: Lazy Loading özelliği kullanıcı deneyimini iyileştiren bir unsur olup zaman zaman kullanıcının beklemesine neden olan gecikmeler yaşanabilir. Bu yüzden, web sitesinin kullanıcı dostu olduğundan ve kullanıcı deneyimini olumsuz yönde etkilemediğinden emin olmak gerekir.

Lazy Load ile SEO İlişkisi Nasıl Kuruluyor?

Arama motorları kullanıcı aramaları sonucu yaptıkları sıralamalarda, web sitelerinin nasıl bir performansla çalıştığını ve ne kadar hıza sahip olduğunu dikkate alarak sıralama yapar. Bu nedenle, herhangi bir web sitesinin hızlı olmasıyla arama sonuçlarının üst sıralarında yer alması birbiriyle bağlantılı durumlar olarak kabul edilir.

Bu kapsamda, Lazy Load’ın SEO çalışmalarının önemli bir parçası olduğunu söylemek mümkündür. Web sitesinin iç yapısıyla ilgili bir çalışma olduğundan, site içi SEO çalışmaları kapsamında değerlendirilebilir. Web sitesinin arama motoru sonuçlarının üst sıralarında listelenmesini sağlayan Lazy Loading uygulaması sayesinde web sitesinin trafiğini artırmak da söz konusu olabilir.

Lazy Load ile UX Nasıl Kuruluyor?

UX diğer bir deyişle Uxer Experience, kullanıcı deneyimi anlamına gelir. SEO literatürünün en önemli kavramlarından biri olan UX; web sitesi ziyaretçilerinin, site içinde hiçbir sorunla karşılaşmadan dolaşmasını sağlama amacıyla yapılan çalışmaların bütünü olarak tanımlanabilir. SEO çalışmaları kapsamında yer alan pek çok yöntemin temel amacı, kullanıcı deneyiminin optimize edilmesidir. Lazy Loading uygulamasıyla sayfaların hızlı yüklenmesi de kullanıcı deneyimini artıran unsurlar arasında yer alır.

Diğer rehber yazılarımıza göz atın:

• Kullanıcı Deneyimi (UX) Nedir
• Landing Page Nedir
• SEO Hosting Nedir
• WordPress Site Hızlandırma
• CDN Nedir, Ne İşe Yarar
• Core Web Vitals Nedir
• Görsel SEO