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.
1 2 3 4 5 6 7 8 9 10 | #kukumavnet-bg.lazy { background-image:none; background-color:#ebebeb; } #kukumavnet-bg { background-image:url("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.
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:
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:
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.
Fetch Priority ve Tarayıcı İpuçları ile Lazy Load Performansını Artırmak
GSC verilerinde giren lazy ve html lazy loading gibi sorgular, kullanıcıların tarayıcı seviyesindeki optimizasyonları merak ettiğini gösteriyor. Lazy Load mekanizmasının tarayıcılar tarafından doğal olarak desteklenmeye başlaması, geliştiricilere ek kontrol imkanları sunmaktadır. Bu noktada, loading="lazy" niteliğinin kullanımına ek olarak, fetchpriority ve decoding gibi HTML niteliklerini doğru kullanmak kritik hale gelir. Uzman görüşlerine dayanarak, LCP (Largest Contentful Paint) alanındaki görseller için fetchpriority="high" kullanmak, bu öğelerin gecikmeli yüklenmesini engellerken, geri kalan içeriğin performansını optimize etmenizi sağlar. Bu entegre yaklaşım, hem hız metriklerini iyileştirir hem de kullanıcı deneyimini tutarlı kılar.
Ayrıca, decoding="async" niteliği, tarayıcının görseli arka planda işlemesine izin vererek ana iş parçacığını (main thread) serbest bırakır. Bu, özellikle yüksek çözünürlüklü görsellerin toplu olduğu sayfalarda, sayfa etkileşim süresini (Time to Interactive) doğrudan olumlu etkiler. Araştırmalara göre, bu tür ince ayarlar, Core Web Vitals skorlarında %15'e varan anlık iyileşmeler sağlayabilmektedir. Bu ince ayarlar, Lazy Load uygulamasının sadece bir başlangıç olduğunu, profesyonel optimizasyonun ise bu tarayıcı ipuçlarına hakim olmayı gerektirdiğini ortaya koymaktadır.
Bu tür detaylı optimizasyonlar, sitenizin hızını sadece iyi değil, aynı zamanda sektör lideri seviyelere taşımak için gereklidir. Eğer bu teknik detaylarla uğraşmak yerine profesyonel bir dokunuş arıyorsanız, SEO hizmetimizi inceleyin.
Fırsat Sorgularına Özel Lazy Load Uygulama İçin En İyi Pratikler?
Gelen verilerde lazy ve lazyloading gibi daha kısa terimlerle arama yapan kullanıcılar, sadece görselleri değil, aynı zamanda iframe'leri veya videoları da kapsayan genel bir 'tembel yükleme' stratejisi aramaktadır. Lazy Load kavramının kapsamını yalnızca <img> etiketlerinin dışına taşımak, bu kullanıcıların beklentilerini karşılamak için zorunludur. Örneğin, gömülü YouTube videoları veya üçüncü taraf reklam çerçeveleri (iframe), genellikle sayfanın ilk alanının dışında kalsalar bile yüklenme performansını olumsuz etkiler. Bu öğeler için de kayan yükleme stratejileri veya kullanıcı etkileşimi beklenene kadar yüklemeyi erteleme yöntemleri uygulanmalıdır.
Sektör verilerine bakıldığında, video içeriklerinin %65'inin başlangıçta yüklenmediği durumlarda etkileşim hızının arttığı gözlemlenmiştir. Bu nedenle, Intersection Observer API gibi modern JavaScript çözümleri, bu farklı içerik türleri için en güvenilir ve esnek çözümü sunar. Kullanıcı viewport'a girdiğinde aktifleşen bu API, yalnızca görseller için değil, aynı zamanda dinamik olarak yüklenmesi gereken modüller için de vazgeçilmezdir. Bu derinlemesine teknik yaklaşım, sitenizin genel hızını maksimize etmeye yardımcı olurken, aynı zamanda LiteSpeed Cache gibi önbellekleme çözümleriyle mükemmel uyum sağlar.
📌 Önemli Çıkarımlar
Tarayıcı ipuçları (
fetchpriority,decoding) ile Lazy Load performansı ince ayarlanmalıdır.loading="lazy"özelliği sadece<img>ve<iframe>elemanları için doğaldır; diğer içerikler için Intersection Observer gereklidir.LCP alanındaki görseller gecikmeli yüklenmemeli;
fetchpriority="high"kullanılmalıdır.SEO, sadece bir eklenti kurmakla sınırlı değildir; teknik uygulama derinliği, sıralama için belirleyicidir.
Web sitenizin görsel yükleme hızını artırarak kullanıcı deneyimini ve SEO performansını geliştirmek için uzman desteği alın.
→ SEO hizmetimizi inceleyin.
