Bu teknik, görselleri yalnızca görünür durumdayken veya kullanıcının ekranının yakınındayken yükleyerek web sayfası performansını artırır.

Günümüzün hızlı tempolu dijital dünyasında, yüksek performanslı bir web sitesine sahip olmak çok önemlidir. Bunun kritik yönlerinden biri görsellerinizin verimli bir şekilde yüklenmesini sağlamaktır. Kullanıcılar sorunsuz ve hızlı bir gezinme deneyimi bekler ve bu makale size bunu nasıl başaracağınızı gösterecektir.

Görüntülerin geç yüklenmesi kavramını keşfedecek ve Intersection Observer API ile HTML ve JavaScript kullanarak bunu nasıl uygulayacağınızı öğreneceksiniz.

Tembel Yükleme Nedir?

Tembel yükleme, görseller gibi öğelerin yüklenmesini gerekene kadar geciktirir. Bir sayfa yüklendiğinde tüm görselleri yüklemek yerine, yavaş yükleme yalnızca o anda görünür olan veya kullanıcının görüntüleme alanına yakın görselleri yükler. Web sitesi performansındaki bu iyileşme, ilk yükleme süresini azaltır ve bant genişliğinden tasarruf sağlar.

Neden Tembel Yükleme Kullanılmalı?

instagram viewer

Web sitenizde görsellerin yavaş yüklenmesini kullanmanın birkaç zorlayıcı nedeni vardır, örneğin:

  • Daha Hızlı İlk Sayfa Yükleme: Tembel yükleme, tüm görsellerin aynı anda yüklenmesini önleyerek ilk sayfa yükleme süresini azaltır. Kullanıcılar sitenizle daha erken etkileşime girmeye başlayabilir ve bu da daha iyi bir kullanıcı deneyimine yol açabilir.
  • Geliştirilmiş Sayfa Duyarlılığı: Kullanıcılar kaydırdıkça görseller yüklendiğinde, web sitesi duyarlı ve akıcı kalır, tüm içeriğin yüklenmesini beklemeye gerek kalmadan sorunsuz kaydırma ve gezinme sağlanır.
  • Bant Genişliği Tasarrufu: Tembel yükleme, bant genişliğinden tasarruf ederek mobil kullanıcılar ve yavaş internet bağlantısına sahip olanlar için idealdir. Bu olabilir web sitenizin veri tüketimini azaltın, kullanıcılara fayda sağlıyor.
  • SEO'nun Faydaları: Google gibi arama motorları Sayfa hızını bir sıralama faktörü olarak düşünün. Tembel yükleme olabilir sitenizin SEO performansını olumlu yönde etkiler yükleme süresini iyileştirerek.

Artık tembel yüklemenin neden faydalı olduğunu anladığınıza göre, nasıl uygulanacağını inceleyelim.

Tembel Yüklemeyi Uygulamak: HTML İşaretlemesi

Başlamak için HTML kodunuzu aşağıdakileri içerecek şekilde değiştirmeniz gerekir: yükleniyor = "tembel" senin özelliğin Etiketler.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

Yükleniyor nitelik, HTML'de bir web sayfasındaki öğelerin yüklenme davranışını kontrol etmek için kullanılır. Ayarladığınızda yükleniyor = "tembel" bir etiketi, tarayıcıya kaynağın yüklenmesini ihtiyaç duyulana kadar ertelemesini söyler.

Şu anda sayfa şöyle görünüyor:

Tembel Yüklemeyi Uygulamak: JavaScript Uygulaması

Geç yükleme işleminizi bir sonraki seviyeye taşımak için Intersection Observer API'sini kullanın. Bu API, bir öğenin görünüm alanına ne zaman girip çıktığını izlemenizi sağlar.

Görüntülerin geç yüklenmesi için Kesişme Gözlemcisi'ni kullanmanın ardındaki mantık basittir: sayfa yüklendiğinde daha düşük kaliteli bir görüntü getirir.

Daha sonra, bu görüntü görünüm alanında görünür hale geldikçe, JavaScript onu daha yüksek kaliteli sürümle değiştirir. Bunu uygulamaya koymak için HTML'nizi değiştirin.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Burada birincil görüntü kaynağı düşük kaliteli versiyon, yüksek kaliteli görüntü ise ikincil kaynaktır. Daha sonra sayfa şöyle görünür:

Ardından, yavaş yüklemek istediğiniz tüm görselleri seçin:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Bundan sonra bir oluşturun Kavşak Gözlemcisi nesne.

const observer = new IntersectionObserver();

Daha sonra girişleri (bir dizi) iletin KavşakGözlemciGirişi gözlemlenen öğeleri ve bunların görüntü alanıyla kesişimlerini temsil eden nesneler) ve gözlemci ( Kavşak Gözlemcisi örneğin kendisi).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Daha sonra, kesişim noktalarını kontrol edin ve bu öğe kesiştiğinde düşük kaliteli görüntüyü yüksek kaliteli görüntüyle değiştirin.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Son olarak, her öğe için gözlemi başlatın.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Ve bununla birlikte, JavaScript ile yavaş yüklemeyi uyguladınız.

Tembel Yüklemeyle İlgili Hususlar

Tembel yüklemeyi entegre ederken aşağıdaki hususların dikkate alınması hayati önem taşır:

  • Ulaşılabilirlik: Erişilebilirliği sağlamak için görsellere alternatif metin sağlayın. alternatif bağlanmak. Bu bilgiler ekran okuyucular için bir güven noktası görevi görür.
  • Tarayıcı Uyumluluğu: Tembel yüklemeyi uygulamadan önce farklı tarayıcılarla uyumluluğunu doğrulayın. Tüm tarayıcılar bu özelliğe yönelik desteği genişletmez. Bazı durumlarda, özellikle eski tarayıcılar için çoklu doldurmanın eklenmesi zorunlu hale gelebilir. Gibi bir araç Kullanabilirmiyim tarayıcı uyumluluğunu değerlendirmek için değerli bir kaynaktır.
  • Test yapmak: Tembel yükleme uygulamasının çeşitli cihazlar ve ekran boyutları genelinde kapsamlı olarak test edilmesi büyük önem taşımaktadır.

Web Sitesi Hızını ve Kullanıcı Deneyimini Artırma

Web sitenizdeki resimler için yavaş yüklemeyi dahil ettiğinizde sitenizi hızlandırabilir ve kullanıcı deneyimini iyileştirebilirsiniz. Kullanıcıların istediği şey daha hızlı yükleme süresi ve daha sorunsuz gezinme deneyimleridir ve bu teknik de aynısını sağlar.

Ayrıca, daha iyi SEO'nun keyfini çıkaracak ve bant genişliği kullanımından tasarruf edeceksiniz. Peki neden bekleyelim? Bu basit ama güçlü yöntemle web sitenizi bugün optimize etmeye başlayın.