IRCSayfasi - mIRCDunyasi, mIRCForumlari, mIRCRehberi   IRCSayfasi

Geri Dön   IRCSayfasi - mIRCDunyasi, mIRCForumlari, mIRCRehberi > Webmaster > Web Tasarım

Web Tasarım webtasarim

Etiketlenen üyelerin listesi

Yeni Konu Aç  Cevapla
 
LinkBack Seçenekler Stil
Alt 06 Mart 2021, 21:05   #1
Çevrimdışı
GeN
BayrakIRCSayfasiBayrak
GeN - ait Kullanıcı Resmi (Avatar)
Lazy Load Nedir? Nasıl Kullanılır?


-- Sponsor Baglantı --



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


[Sadece üyelerimiz linkleri görebilir.. Üye olmak için tıklayın...]

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 load ile web sayfalarınızın onlarla birlikte hızlı yüklenmesini sağlayabilirsiniz.

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 Load Hangi Görsellerde Kullanılmalıdır?

[Sadece üyelerimiz linkleri görebilir.. Üye olmak için tıklayın...]

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 load 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.

PHP- Kodu:
<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.

PHP- Kodu:
.lazy {
    
displayblock;
    
width100%;

Java Script: Aşağıdaki kodu js kaynağına ekleyin.

PHP- Kodu:
$(document).ready(function () {
    $(
window).scroll(function () {
        $(
".lazy").each(function () {
            if ($(
this).offset().top &lt; $(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.

PHP- Kodu:
<h2>Örnek Background-image Kullanımı</h2>
<
p>Lorem Ipsumdizgi 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 Ipsumdizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.&lt;/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.

PHP- Kodu:
#kukumavnet-bg.lazy {
   
background-imagenone;
   
background-color#ebebeb;
}
#kukumavnet-bg {
  
background-imageurl("https://www.kukumav.net/images/logo.png?tr=w-255,h-48");
  
max-width255x;
  
height48px;
  
background-repeatno-repeat 

Java Script: Aşağıdaki JS kodunu javascript kaynağınıza ekleyin.

PHP- Kodu:
document.addEventListener("DOMContentLoaded", function() {
  var 
lazyloadImages;    

  if (
"IntersectionObserver" in window) {
    
lazyloadImages document.querySelectorAll(".lazy");
    var 
imageObserver = new IntersectionObserver(function(entriesobserver) {
      
entries.forEach(function(entry) {
        if (
entry.isIntersecting) {
          var 
image entry.target;
          
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 &lt; (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.

Eğer WordPress kullanıyorsanız tüm bunlarla 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.

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 load ö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.
__________________

To view links or images in signatures your post count must be 0 or greater. You currently have 0 signatures.
  Alıntı ile Cevapla

İS Reklam
eFTeLYa.NeT
Yeni Konu Aç  Cevapla

Etiketler
lazy load nedir? nasıl kullanılır?


Şu an bu konuyu okuyan kişi sayısı: 1 (0 üye ve 1 misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık


Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
Inshot Nedir? Nasıl Kullanılır? RoJ Mobil Uygulamalar 0 19 Ocak 2021 03:55
IScanner Nedir? Nasıl Kullanılır? RoJ Mobil Uygulamalar 0 19 Ocak 2021 03:54
Teamfluencer Nedir? Nasıl Kullanılır? RoJ Mobil Uygulamalar 0 19 Ocak 2021 03:53
Tinder Nedir? Nasıl Kullanılır? RoJ Mobil Uygulamalar 0 19 Ocak 2021 03:52
Blog Nedir ? Nasıl Kullanılır ? IS-GLobaL Blogger 0 29 Haziran 2020 23:36