Görseller, içeriği daha ilgi çekici hale getirmek ve konuyu daha iyi sunmak için her web sitesinde oldukça kritik öneme sahiptir. Bir web sitesini, logo, ürün fotoğrafları, kampanyalar gibi görseller olmadan hayal etmek imkansızdır. Ancak görsellerin boyutları çok büyük ve yüksek çözünürlükte olduğunda web site hızınızı yavaşlatabilirler. Bu durumda görsellerden kurtulmak yerine, lazy loading ile web sayfalarınızın onlarla birlikte hızlı yüklenmesini sağlayabilirsiniz.
İçindekiler
Lazy Load Nedir?
Lazy load; görüntülerin web sitelerinde eş zamansız olarak yüklenmesidir. Yani ekranın üst kısmındaki içerik tamamen yüklendikten sonra veya ilgili görseli tarayıcı da gördükleri zaman yüklenmesi anlamına gelir.
Lazy load kullanarak ekranda olmayan görsellerin yüklenmesini erteleyip, sitenin daha hızlı açılmasını sağlayabilir, siteye gereksiz yük oluşturmasını engelleyebilirsiniz. Böylece görünüm alanında olmayan görseller ilk sayfa yükleme performansını geliştirir.
Lazy Loading Hangi Görsellerde Kullanılmalıdır?
Lazy load kullanımı ile ilgili temel konu, görselin şu anda yüklenmesinin gerekli olup olmadığıyla ilgilidir. Eğer bir görsel tarayıcı ekranında kullanıcılar tarafından görünmüyorsa o görseli erteleyin. Örnek olarak aşağıdaki türleri ertelemeyi düşünebilirsiniz.
- İçerik alanındaki görseller,
- Footer alanındaki logo,
- Alt bölümde kullanılan sosyal ikonlar,
- Sidebar görselleri.
Lazy loading kullanımı sadece performans için değil, aynı zamanda iyi bir kullanıcı deneyimi sağlamak için de önemlidir. İyi bir kullanıcı deneyimi sunmak site içi SEO‘ya da katkı sağlar. Bu sebeple web sitelerinizde lazy load özelliğini kesinlikle kulanmalısınız.
Lazy Load Nasıl Kullanılır?
Bir web sitesindeki görseller ihtiyaca göre iki şekilde ertelenebilir. Birincisi HTML’e doğrudan <img> etiketi ile eklenen görseller, diğeri de background-image ile eklenen görseller için tercih edilebilir. Şimdi en yaygın olan <img> etiketi ile eklenen görsel kullanımını inceleyim.
1- <Img> Etiketi ile Lazy Load Yöntemi
Görsellerinizi <img> etiketi kullanarak ekliyorsanız aşağıdaki ilgili kodları kullanmalısınız.
HTML: Class etiketine “lazy” ekleyin ve görsellerinizi “data-src” yolu ile çağırın.
1 |
<img class="lazy" data-src="images/gorsel.jpg" width="300" height="50" alt="Kukumav.Net"> |
CSS: Lazy classı için aşağıdaki css kodunu oluşturun.
1 2 3 4 |
.lazy { display: block; width: 100%; } |
Java Script: Aşağıdaki kodu js kaynağına ekleyin.
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
HTML’de <img> etiketi kullanmanın dışında CSS ile “background-image” ile görsel eklemek te oldukça popüler bir yöntemdir. CSS kullanılarak çağırılan görselleri lazy load ile ertelemek için aşağıdaki kodları kullanın.
HTML: Örnek HTML için aşağıdaki kodu inceleyin. Görsel içeren id=”kukumavnet-bg” ve engellemeyi sağlayan class=”lazy” bölümlerini kullanın.
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
CSS: İlgili id ve classlara CSS’de aşağıdaki kodları ekleyin. Image kodundaki width ve height değerlerini, görsel boyutlarınıza göre güncelleyin.
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 } |
Java Script: Aşağıdaki JS kodunu javascript kaynağınıza ekleyin.
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); } }) |
Not: Background-image kimliğine sahip bir bölümde class=”lazy” etiketi eklendiğinde görseli “display:none” olarak ayarlayacaktır. Kullanıcı tarayıcının üst bölümündeyken görsel yüklenmeyecek ancak aşağı kaydırıp görsele geldiğinde “lazy” classını kaldıracak ve görsel görünür olacak.
WordPress Lazy Loading Eklentileri
WordPress bir web sitesine sahipseniz yukarıdaki tüm bu adımlarla uğraşmak zorunda değilsiniz. Hali hazırda Litespeed gibi bir cache eklentisi kullanıyorsanız, eklenti özelliklerinden lazy loading özelliğini etkinleştirerek ekstra kod eklemeden kolayca kullanabilirsiniz. WordPress Litespeed cache eklenti ayarlarını nasıl yapacağınızı bilmiyorsanız aşağıdaki makaleyi inceleyebilirsiniz.
Ayrıca WordPressin en popüler eklentilerinden biri olan Jetpack eklentisi hali hazırda yüklüyse yine bu eklenti ayarlarından lazy load özelliğini aktif edebilirsiniz.
Eğer bu eklentiler mevcut değilse aşağıdaki listedeki eklentileri kullanarak lazy load özelliğinden faydalanabilirsiniz.
- Lazy Load
- Bj Lazy Load
- jQuery Image Lazy Load WP
- Rocket Lazy Load
- Unveil Lazy Load
Yukarıdaki isimleri WordPress eklentiler bölümünde aratarak yükleyebilirsiniz.
Lazy Load Kullanmanın Faydaları Nelerdir?
- Büyük bir performans avantajı sağlar.
- Binlerce ürünü bulunan e-ticaret siteleri için bant genişliği tüketimini azaltır.
- Kullanıcı deneyimine olumlu katkı sağlar.
- PageSpeed testindeki ilgili uyarılardan kurtarır.
Lazy loading özelliğini etkinleştirerek site hızınızı artırdıktan sonra tarayıcı önbellekleme özelliğini de kullanmayı tercih edebilirsiniz. Konuyla ilgili aşağıdaki makaleyi inceleyin.
Makalemizin sonuna geldik, umarız bu rehber sizin için yararlı olmuştur. Görselleri erteleme ile ilgili yaşadığınız bir sorun olursa lütfen yorum yapmaktan çekinmeyin.
Kukumav.Net müşterinin ihtiyaçlarına göre özelleştirilmiş profesyonel web tasarım, arama motoru optimizasyonu (SEO), Google Ads reklamları, sosyal medya reklamları ve grafik tasarım hizmetleri sunmaktadır.
bende çalışmıyor kod… 31. satırdaki if’in içindeki ‘;’ yüzünden hata veriyor.
Bende de aynı hatayı veriyor.
İlgili sorun düzeltilmiştir. Geri bildiriminiz için teşekkürler.
Teşekkürler. Güzel örneklendirme olmuş. Lazy Load işlemi mi daha faydalı yoksa tarayıcı önbellekleme işlemi mi?
Paylaşım için teşekkürler. Yazılarınızı keyifle okuyor ve takip ediyorum.
Comments are closed.