Web sitelerinde görseller, içeriği cazip kılmak ve mesajı etkili bir şekilde iletmek için vazgeçilmezdir. Bir web sitesini, logo, ürün görselleri veya kampanya materyalleri olmadan hayal etmek neredeyse imkansızdır. Ancak, yüksek çözünürlüklü ve büyük boyutlu görseller, sitenizin yüklenme hızını ciddi ölçüde yavaşlatabilir. Bu performans düşüşünü engellemenin en akıllı yolu, görsellerden tamamen vazgeçmek yerine lazy loading (tembel yükleme) tekniğini kullanarak web sayfalarınızın hızla açılmasını sağlamaktır.
Lazy Load Nedir?
Lazy load, web sitelerindeki görüntülerin eş zamansız olarak yüklenmesi prensibine dayanır. Bu yaklaşım, bir görselin yalnızca kullanıcının ekran alanına (viewport) girmesi anında veya sayfanın üst kısmındaki kritik içerik tamamen yüklendikten sonra devreye girmesini sağlar.
Lazy loading, bir web sayfasındaki kaynakların (genellikle görsellerin) kullanıcının aktif görüntüleme alanına girene kadar yüklenmesini erteleyen bir optimizasyon tekniğidir. Bu yöntem, ilk sayfa yükleme süresini %35'e kadar azaltarak Core Web Vitals skorlarını iyileştirmede kritik rol oynar.
Lazy loading sayesinde, ekranda henüz görünmeyen görsellerin yüklenmesi ertelenir. Bu durum, sitenizin ilk sayfa açılış performansını (First Contentful Paint) önemli ölçüde iyileştirirken, siteye gereksiz kaynak yükünü binmez. Sektör verilerine bakıldığında, doğru uygulanan tembel yükleme, mobil cihazlarda ilk yüklemede %50'ye varan hızlanma sağlayabilir. Sonuç olarak, görünür olmayan öğelerin ilk yükleme üzerindeki olumsuz etkisi ortadan kalkar.
Hangi Görsellerde Lazy Loading Kullanılmalıdır?
Lazy load uygulamasının temel mantığı, bir görselin o an yüklenmesinin gerçekten gerekli olup olmadığını belirlemektir. Eğer bir görsel, kullanıcının tarayıcı ekranında mevcut değilse, yüklenmesini ertelemek mantıklıdır. Bu, özellikle uzun sayfalarda ve mobil cihazlarda kullanıcıya daha hızlı içerik sunulmasını sağlar. İşte bu yöntemi uygulamayı düşünebileceğiniz başlıca alanlar:
Sayfanın ana içerik alanında yer alan görseller,
Sayfa altbilgisinde (footer) bulunan logolar,
Alt kısımda kullanılan sosyal medya ikonları,
Yan sütunlarda (sidebar) yer alan görseller.
Lazy loading sadece teknik performans optimizasyonu sağlamakla kalmaz; aynı zamanda kullanıcı deneyimini (UX) doğrudan pozitif yönde etkiler. Kaliteli bir kullanıcı deneyimi ise dolaylı olarak site içi SEO çalışmalarınıza da önemli katkılar sunar. Araştırmalara göre, yükleme hızı 1 saniyeden fazla olan sayfalarda kullanıcıların hemen çıkma (bounce rate) oranı %32 artmaktadır. Bu stratejik avantajlar nedeniyle, web sitelerinizde lazy load özelliğini aktif olarak kullanmanız önerilir. Hız optimizasyonu, dijital performansın temelidir; bu nedenle SEO stratejilerinin ayrılmaz bir parçasıdır.
Lazy Load Nasıl Uygulanır?
Bir web sitesindeki görsellerin yüklenmesini ertelemenin iki temel yolu vardır: Birincisi doğrudan <img> etiketleri aracılığıyla, ikincisi ise CSS background-image özelliği üzerinden. En yaygın kullanım olan <img> etiketi ile görsel yükleme yöntemini detaylıca inceleyelim.
1- <Img> Etiketi ile Lazy Load Yöntemi
Görsellerinizi standart <img> etiketi ile ekliyorsanız, aşağıdaki kod yapılarını uygulayarak lazy loading özelliğini entegre edebilirsiniz.
HTML Yapılandırması: class etiketine "lazy" ekleyin ve görsel yolunu standart src yerine data-src özniteliği ile çağırın.
<img class="lazy" data-src="images/gorsel.jpg" width="300" height="50" alt="Kukumav.Net">
|
1 |
<img class="lazy" data-src="images/gorsel.jpg" width="300" height="50" alt="Kukumav.Net"> |
CSS Stili: "lazy" sınıfına sahip öğeler için temel stil tanımlamalarını yapın.
.lazy { display: block; width: 100%; }
|
1 2 3 4 |
.lazy { display:block; width:100%; } |
JavaScript İşlevi: Aşağıdaki JavaScript kodunu projenizin JS dosyasına ekleyin. Bu kod, sayfa kaydırıldığında "lazy" sınıfına sahip öğeleri tespit eder ve data-src içeriğini src'ye aktarır.
$(document).ready(function () { $(window).scroll(function () { $(".lazy").each(function () { if ($(this).offset().top < $(window).scrollTop() + $(window).height() + 100) { $(this).attr("src", $(this).attr("data-src")); } }); }); });
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $(window).scroll(function(){ $(".lazy").each(function(){ if($(this).offset().top < $(window).scrollTop() + $(window).height() + 100) { $(this).attr("src", $(this).attr("data-src")); } }); }); }); |
2- Background-Image CSS ile Lazy Load Yöntemi
<img> etiketi yerine CSS background-image kullanarak görsel eklemek de yaygın bir yöntemdir. CSS ile çağrılan bu tür görselleri lazy load ile ertelemek için aşağıdaki kod setini kullanabilirsiniz.
HTML Yapısı: Görselin temsil edileceği elemana id="kukumavnet-bg" ve yüklenmesi ertelenecek anlamına gelen class="lazy" etiketlerini ekleyin.
<h2>Örnek Background-image Kullanımı</h2> <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p> <div id="kukumavnet-bg" class="lazy"></div> <h2>Örnek Background-image Kullanımı</h2> <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p> <div id="kukumavnet-bg" class="lazy"></div> <p>Beşyüz yıl boyunca varlığını sürdürmekle kalmamıştır.</p>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h2>ÖrnekBackground-imageKullanımı</h2> <p>LoremIpsum,dizgivebaskıendüstrisindekullanılanmıgırmetinlerdir.</p> <divid="kukumavnet-bg" class="lazy"></div> <h2>ÖrnekBackground-imageKullanımı</h2> <p>LoremIpsum,dizgivebaskıendüstrisindekullanılanmıgırmetinlerdir.</p> <divid="kukumavnet-bg" class="lazy"></div> <p>Beşyüzyılboyuncavarlığınısürdürmeklekalmamıştır.</p> |
CSS Stili: Bu yapı için gerekli olan stil tanımlamaları aşağıdadır. Lütfen max-width ve height değerlerini kullandığınız görsele göre güncellediğinizden emin olun.
#kukumavnet-bg.lazy { background-image: none; background-color: #ebebeb; } #kukumavnet-bg { background-image: url("https://www.kukumav.net/images/logo.png?tr=w-255,h-48"); max-width: 255x; height: 48px; background-repeat: no-repeat }
|
1 2 3 4 5 6 7 8 9 10 |
#kukumavnet-bg.lazy { background-image:none; background-color:#ebebeb; } #kukumavnet-bg { background-image:url("https://www.kukumav.net/images/logo.png?tr=w-255,h-48"); max-width:255x; height:48px; background-repeat:no-repeat } |
JavaScript Uygulaması: Bu yöntem için aşağıdaki JavaScript kodunu kullanmalısınız. Bu kod, Intersection Observer API'yi desteklemeyen eski tarayıcılar için bir geri dönüş (fallback) mekanizması içerir, bu da uyumluluğu artırır.
document.addEventListener("DOMContentLoaded", function() { var lazyloadImages; if ("IntersectionObserver" in window) { lazyloadImages = document.querySelectorAll(".lazy"); var imageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { var image = entry.target; image.src = image.dataset.src; image.classList.remove("lazy"); imageObserver.unobserve(image); } }); }); lazyloadImages.forEach(function(image) { imageObserver.observe(image); }); } else { var lazyloadThrottleTimeout; lazyloadImages = document.querySelectorAll(".lazy"); function lazyload () { if(lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function() { var scrollTop = window.pageYOffset; lazyloadImages.forEach(function(img) { if(img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if(lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener("orientationChange", lazyload); } }); }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); } })
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
document.addEventListener("DOMContentLoaded", function(){ var lazyloadImages; if ("IntersectionObserver" in window) { lazyloadImages = document.querySelectorAll(".lazy"); var imageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { var image = entry.target; image.src = image.dataset.src; image.classList.remove("lazy"); imageObserver.unobserve(image); } }); lazyloadImages.forEach(function(image) { imageObserver.observe(image); }); } else { var lazyloadThrottleTimeout; lazyloadImages = document.querySelectorAll(".lazy"); function lazyload () { if(lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function() { var scrollTop = window.pageYOffset; lazyloadImages.forEach(function(img) { if(img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if(lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener("orientationChange", lazyload); } }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); } }) |
Önemli Not: Background-image ile uygulanan lazy load'da, ilgili ID'ye sahip div'e class="lazy" eklendiğinde, görsel başlangıçta display:none olarak ayarlanır. Kullanıcı ekranın üst kısmındayken görsel yüklenmez. Ancak kullanıcı aşağı kaydırdığında ve görselin bulunduğu alana ulaştığında, JavaScript "lazy" sınıfını kaldırır ve CSS ile belirlenen arka plan görseli görünür hale gelir. Bu yöntem, görsellerin tarayıcı tarafından indekslenmesini zorlaştırdığından, SEO açısından kritik görsellerde (logo, ana banner) data-src yerine doğrudan src kullanılması veya bu görseller için özel bir yükleme stratejisi belirlenmesi gereklidir.
WordPress Kullanıcıları İçin Lazy Loading Eklentileri
Eğer WordPress altyapısını kullanıyorsanız, yukarıdaki manuel kodlama adımlarıyla uğraşmanıza gerek kalmaz. Zaten kullanmakta olduğunuz bir önbellekleme (cache) eklentisi varsa, işiniz çok kolaydır. Örneğin, Litespeed Cache gibi popüler eklentiler, ayarlar menüsünden lazy loading özelliğini etkinleştirerek ek kod yazmadan bu optimizasyonu uygulamanıza olanak tanır. WordPress LiteSpeed Cache eklenti ayarlarını detaylıca öğrenmek isterseniz aşağıdaki rehberi inceleyebilirsiniz:
WordPress LiteSpeed Cache Ayarları (En İyi Performans)
Ayrıca, WordPress'in en bilinen eklentilerinden biri olan Jetpack yüklüyse, yine bu eklentinin kendi ayarlarından lazy load özelliğini kolayca aktif edebilirsiniz. Bu eklentiler, özellikle web sitesi tasarımı sürecinde hız gereksinimlerini karşılamak adına zaman kazandırır.
Bu eklentilere sahip değilseniz, aşağıdaki popüler alternatifleri kullanarak da lazy load avantajlarından faydalanabilirsiniz:
Lazy Load
Bj Lazy Load
jQuery Image Lazy Load WP
Rocket Lazy Load
Unveil Lazy Load
Bu eklentileri WordPress yönetim panelinizdeki Eklentiler bölümünden aratarak kolayca kurabilirsiniz.
Lazy Load Kullanmanın Sağladığı Temel Avantajlar
Web sitesi için önemli bir performans artışı sağlar. Google, 2024 itibarıyla mobil sayfalarda LCP (Largest Contentful Paint) süresinin 2.5 saniye altında olmasını kritik bir sıralama faktörü olarak değerlendirmektedir.
Özellikle binlerce ürüne sahip e-ticaret platformlarında sunucu bant genişliği tüketimini minimuma indirir. Bu, barındırma maliyetlerinin optimize edilmesine de katkıda bulunur.
Kullanıcıların sayfayı daha hızlı algılamasına olanak tanıyarak genel kullanıcı deneyimini iyileştirir.
Google PageSpeed Insights gibi hız testlerindeki ilgili "Görüntüleri ertele" uyarısından kurtulmanızı sağlar. Bu metrik, Lighthouse skorlarının %15'ini oluşturmaktadır.
Lazy loading özelliğini etkinleştirerek site hızınızı maksimize ettikten sonra, bir sonraki adım olarak tarayıcı önbellekleme özelliğini devreye almayı düşünebilirsiniz. Bu konudaki derinlemesine bilgiyi aşağıdaki makalemizde bulabilirsiniz:
.Htaccess ile Tarayıcı Önbellekleme
Bu kapsamlı rehberimizin sonuna geldik. Umuyoruz ki görselleri erteleme (lazy loading) konusunda ihtiyacınız olan tüm bilgileri sağlamışızdır. Optimizasyon süreçleri teknik bilgi gerektirir; bu nedenle profesyonel destek almak verimliliği artırır. → teknik seo hizmeti hizmetimizi inceleyin.
→ SEO hizmetimizi inceleyin.
