Herkese merhabalar,
LCP ve Speed Index sorunları için basit bir örnek uygulama paylaşacağım. Bu paylaşacağım bilgi sorunlardan sadece birisi içindir.
Tüm sitelerde ana sayfada haber kısmı veya bulunmakta. Slider için 10 resimli bir haber akışımız olduğunu düşünelim. Her bir resminde 50kb olduğunu farz ediyorum 50X10 500k eder. Bu sayfa açılışı için oldukça yüksek bir veri indirme demektir.
Zaten Google Lighthouse ile baktığınızda hemen bunları size söyleyecektir.
Şimdi slider için owlCarousel https://owlcarousel2.github.io/OwlCarousel2/ kullandığımız farz ediyorum.
var owl = $('#news').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
pagination: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
klasik yazacağımız kod bu şekilde olacak.
HTML kısmı ise
<div class="owl-carousel">
<div class="item"><img src="http://shrani.si/f/1W/4U/KrJheJj/tine.jpg"></div>
<div class="item"><img src="http://shrani.si/f/3A/q3/kC00r7/torbice.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/2o/hl/1xmizZhJ/medvedki.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/27/wV/4moHQxYk/maladva.jpg"></div>
</div>
şeklinde olacak.
Bu yaklaşım ile sayfa açılışında tüm resimleri kaynağından çekme isteğinde bulunuyoruz. Bunun önüne geçmek için yapacağımız şey ise, ilk haber hariç diğer haberlerin img ksımlarının src alanlarını boş bırakıp data-src olarak path'leri atamak.,
<div class="owl-carousel">
<div class="item"><img src="http://shrani.si/f/1W/4U/KrJheJj/tine.jpg"></div>
<div class="item"><img src="" data-src="http://shrani.si/f/3A/q3/kC00r7/torbice.jpg"></div>
<div class="item padded"><img src="" data-src="http://shrani.si/f/2o/hl/1xmizZhJ/medvedki.jpg"></div>
<div class="item padded"><img src="" data-src="http://shrani.si/f/27/wV/4moHQxYk/maladva.jpg"></div>
</div>
Sıra geldi işin püf noktasına.
owl.on('changed.owl.carousel', function (property) {
var current = property.item.index;
var src = $(property.target).find(".owl-item").eq(current).find("img").attr('src');
if (src === "")
{
$(property.target).find(".owl-item").eq(current).find("img").attr('src',$(proper ty.target).find(".owl-item").eq(current).find("img").data('src'));
}
});
Şimdi burada diyoruz ki slider değiştiğinde eğer img elemanın src kısmı boş ise data-src dan alarak atama yap değilse es geç.
Bu yaklaşım ile sayfa açılışında ilk resim için kaynağa gidilecek diğerleri için gidilmeyecek.
Umarım faydalı olmuştur.
LCP ve Speed Index için Örnek Bir Yaklaşım Kodlaması.
2
●252
