rucoder
Eski üye
- Katılım
- 5 Nis 2022
- Mesajlar
- 221
- Tepki
- 0
Lazy Load Nedir? Iyi mi Yapılır?
Belirli bir web sitesinin tamamen yüklenmesi için uzun süre beklemek zorunda kalmamızın ne kadar sinir bozucu bulunduğunu tamamımız biliyoruz. Bir çok vakit bu gecikme, resimlerin internet sayfasına yüklenmesinden doğar. Bu tonlarca fotoğraf, yavaş bir internet sayfasına ve rahatsız edici bir kullanıcı deneyimine yol açabilir. Hiçbir işletme internet sayfasını yavaşlatmak istemez ve görseller izlenim yarattığı için görsel sayısını azaltmak da pek uygulanabilir değildir. Bu aşamada devreye Lazy Load yöntemi girer.
Lazy Load Nedir?
Lazy Load, görsel yoğunluğu ve sayfa uzunluğunun fazla olduğu sitelerde, sayfaların daha süratli açılmasını sağlayacak ek bir JavaScript dosyasının kullanımıdır.
Lazy Load özelliği, bant genişliği tasarrufu ile sitenizin hızını artırmaya yarayan bir metottur. En geniş anlamıyla gereksinim duyulmayan bir nesnenin çağrılmaması durumudur. Bu özellik yardımıyla kullanıcı bir sayfayı açtığında tüm resimlerin yüklenmesinin önüne geçilir. Bu sayede de daha süratli oluşturulan sayfalara haiz olmuş olursunuz.
Google kullanıcıları daha çok önemsiyor. Bu yüzden de kullanıcı deneyimini iyileştirmek yönünde adımlar atıyor. Web sitelerinden de kullanıcı deneyimini en iyi şekilde sunmasını istiyor. Eğer Google’da oldukça iyi sıralamalar elde etmek istiyorsanız yapmanız ihtiyaç duyulan en mühim şey kullanıcılara iyi bir edinim sunmaktır.
Bunun için de süratli bir siteye haiz olmanız gerekir. Site hızının niçin mühim bulunduğunu açık bir halde belirtecek bir istatistiği de sizlerle paylaşmak istiyoruz. Google’da arama icra eden bir kullanıcı, bir internet sayfasını ziyaret ettiğinde eğer o internet sayfası 3 saniyeden daha çok sürede açılıyorsa siteyi terk ediyor. İşte bu aşamada Lazy Load daha süratli sayfalara haiz olmanızı sağlıyor.
Lazy Load Ne İşe Yarıyor?
Lazy Load, görsel yoğunluğu ve sayfa uzunluğunun fazla olduğu sitelerde, sayfaların daha süratli açılmasını sağlayacak ek bir JavaScript dosyasının kullanılmasıdır. Lazy Load metodunun uygulanmış olduğu sayfalarda, sayfa açıldığında ekranda hemen hemen yer almayan görseller yüklenmeyecektir. Kısacası bir sayfayı açtığınızda tüm görsellerin yüklenmesi ve sayfa hızının yavaşlaması engellenir.
Lazy Load, çoğu zaman e-ticaret sitesi benzer biçimde görsel listelemenin yoğun ve mühim olduğu sitelerde kullanılır. Ek olarak oldukça sayıda görselin kullanıldığı slider ve galeri yer edinen sayfalarda da kullanılmalıdır. Bu sayede görsellerin fazlalığının niçin olduğu sayfa yavaşlığının önüne geçilir.
Lazy Load kullanılmadığı vakit sayfada yer edinen görsellerin tüm aynı anda yüklenecek ve bu yüzden sayfa yavaşlayacaktır. Lazy Load kullanıldığı vakit ise görseller, sayfada aşağı doğru inildikçe yüklenecektir. Görsellerin gerek duyuldukça yüklenmesi sitenin hızını da artıracaktır.
Binlerce ürünün yer almış olduğu e-ticaret sitelerinde sayfa açıldığında tüm görsellerin aynı anda yüklenmesi öteki web sitelerinin hızındaki negatif etkiden daha çok olacaktır. Buna bağlı olarak da kullanıcılar internet sayfasını terk ederek arama sonuçlarında çıkan rakip siteleri ziyaret edecektir.
Lazy Load Yararları Nedir?
Lazy Load’un tek faydası elbetteki site hızını çoğaltması değildir. Lazy Load’un öteki yararları;
- Site hızına bağlı olarak sitenizin performansını artırır.
- Süratli oluşturulan sayfalar kullananların sitenizde daha çok zaman harcamasını sağlar. Böylelikle sitenizin derhal çıkma oranı düşer.
- Aşırı kaynak kullanımının önüne geçilir. Yalnızca kullanıcının görüntülediği alanlar sunucu kaynağından tüketilir.
- Süratli oluşturulan sayfalar kullanıcılara daha iyi bir edinim sunar. Sitenizin sunmuş olduğu kullanıcı deneyiminin iyileşmesi de sıralamalarınızı etkisinde bırakır. Böylelikle hem kullanıcı dostu hem de arama motoru dostu bir internet sayfası inşa etmeniz kolaylaşır.
Bu yöntem, görsel içeriğin yoğun olduğu siteler için yararlıdır. Eğer web siteniz yazılı içerik bakımından yoğun sayfalara sahipse bu yöntemin kullanılmasını tavsiye etmeyiz. Ek olarak dahili bir tarayıcı özelliği değil, JavaScript dosyasının kullanılmasını gerektiren bir metottur. Bundan dolayı kontrol açısından sıkıntılı bir süreçtir.
Herhangi bir hatada sayfanızı ziyaret eden kullananların görselleri asla görüntüleyememesine niçin olabilirsiniz. Ek olarak sayfayı ziyaret eden kullananların ekranında görseller, olabildiğince süratli yüklenmelidir. Eğer görseller 3 saniyeden daha çok sürede yüklenirse kullanıcı deneyimi negatif etkilenir. Bu da derhal çıkma oranını yükseltir.
Lazy Load Iyi mi Yapılır?
Yukarıda da belirttiğimiz benzer biçimde Lazy Load bir metottur. JavaScript ve HTML’de manuel bir halde kalite (attribute) hususi durumunu kullanarak yapabilirsiniz. Uygulama aşamasında ilk olarak:
- HTML ortamında olan görsel ögelerin hepsine (<img src=”” />) şeklinde ortak class (derslik) verin.
- JavaScript’te window.scroll fonksiyonu ile devam edin.
- Ortak class ile each fonksiyonu çalıştırın.
- Each’de yer edinen this kısmını kullanarak offset fonksiyonun top parametresini kullanın. Böylelikle window en üst kıymeti öğrenebilirsiniz.
- Karşınıza çıkan durum uygunsa data-src verdiğiniz image path’i (dizin yolunu) src özelliğine atın.
En mühim kısmı yaptıktan sonrasında şimdi sıra ikinci bölümde:
HTML İçin;
<i m g class="lazy" data-src"image path" />CSS İçin;
Kod:
.lazy
{
display:block;
width:100%;
}
.text-area
{
margin:30px 0;
}JavaScript İçin;
$(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’)); } }); }) })
WordPress Lazy Load Eklentileri
Lazy Load, siteler tarafınca, tüm web sitesinin süratli bir halde yüklenebilmesi için görüntülerin yüklenmesini geciktirmek yada yavaşlatmak için kullanılır. Tüm görüntülerin bir kerede yüklenmesi, bir internet sayfası için daha yavaş yükleme süresine niçin olabilir. Bundan dolayı, bir web sitesinin daha süratli yüklenmesini sağlamak için tembel yükleme kullanılır. Görüntüler, bir kullanıcı onları görmek istediğinde yüklenir. Bu teknik çoğunlukla Lazy Load WordPress Eklentileri tarafınca yapılır. Bu mevzuda size daha çok informasyon vermek için en iyi WordPress Lazy Load eklentilerinin bir listesini derledik
# Lazy Load by WP Rocket Eklentisi
Bir gönderideki resimlerde, minik resimlerde ve ek olarak widget metnindeki, avatarlardaki, iframe’lerdeki ve suratlardaki resimlerde çalışır. Ek olarak, web sitesinin yükleme süresini daha da hızlandırabilmeniz için YouTube iframe’lerini bir önizleme minik resmiyle değiştirmenize olanak tanır.
#A3 Lazy Load Eklentisi
Performansı artıran ve bir internet sayfasını hızlandıran mobil odaklı bir eklentidir. Web sitesinin hangi öğelerinin tembel yüklenmesi icap ettiğini ve ne vakit görünür hale geleceğini seçebildiğiniz için kurulumu kolaydır. Bu eklenti tembel, resimleri yazılarınıza, sayfalarınıza, widget’larınıza, minik resimlerinize, gravatarlarınıza ve öteki içerik alanlarına yükler. Resimlerinizi, videolarınızı, iframe’inizi, gömme yayınınızı, WordPress AMP’nizi ve Gelişmiş Hususi Alanlarınızı tembelce yükler.
# JCH Optimize Eklentisi
JCH Optimize eklentisi, hususi bir tembel yük WP eklentisi değildir, sadece aynı işlevselliği sağlar. JCH Optimize, web sitenizin hızını artıran ve birçok optimizasyon seçeneği sunan, özellik dolu bir eklentidir. Toplam HTTP isteklerini azaltmak için CSS/JS dosyalarını birleştirir ve ek olarak HTML’nizi küçültür. Bu WordPress hız optimizasyonu eklentisi, internet sayfası optimizasyonunun gücüyle resimlerinizi tembelce yüklemenize müsaade eden tek tıklamayla kurulum özelliğidir.
Lazy Loader Eklentisi
Bu, görüntülerin, videoların, ses öğelerinin ve iFrame’lerin tembel yüklenmesini de destekleyen başka bir parasız ve rahat tembel yükleme WP eklentisidir. Hafifçe tembel boyutlu bir komut dosyası kullanır. Ek olarak, işaretlemenin manuel olarak değiştirilmesinin yardımıyla arka plan resimlerinin, stillerin ve komut dosyalarının tembelce yüklenmesine izin verir. Bu eklenti, tembel yükü etkinleştirmenize yada dönem dışı bırakmanıza kolayca destek olmak için birkaç tembel yükleme seçeneğiyle beraber gelir.
# Speed Up- Lazy Load Eklentisi
Hızlandırma eklentisi tembel yükleme tekniğini uygular ve sayfanın alt kısmındaki resimler benzer biçimde ekranda görünmeyen fotoğraf ve iframe’lerin kullanıcı tarafınca gösterilmesini isteyinceye kadar indirilmesini engeller. Bu, sayfaların yüklenme hızında iyileştirmeler sağlar ve bant genişliğinden tutum sağlar.
# WordPress Infinite Scroll- Ajax Load More Eklentisi
Bu tembel yükleme WordPress eklentisi, Ajax destekli sorguların yardımıyla tembel yükleme sayfaları, gönderiler, tek gönderiler, yorumlar vb. içindir. Ajax Daha Fazla Yükle, sonsuz kaydırma için hususi olarak tasarlanmıştır. Bu eklenti bir Ajax Daha Fazla Kısa Kod Oluşturucu ile beraber gelir. Hususi WordPress Sorguları oluşturmak için kullanılabilir. Bu eklenti, WooCommerce ve Easy Digital Downloads ile de uyumludur. Bu eklentinin öteki özellikleri içinde Sorgu Parametresi, Tekrarlayıcı Şablonları, Çoklu Örnekler, Ajax Filtreleme ve daha fazlası bulunur.