Web Siteleri İçin Kendi Tembel Yüklemenizi Özelleştirmenin En İyi Yolları

Tembel Yükleme, daha sonra bir kullanıcı bir web sayfasını ziyaret ettiğinde bazı resimlerin veya web sayfası öğelerinin yüklenmesini ertelemek için kullanılır. Bu genellikle ekranın alt kısmındaki resimler ve web sitesi öğeleri için yapılır. Buradaki fikir, tüm web sayfasını tek seferde yüklemek yerine, kullanıcı aşağı kaydırmaya devam ederken web sayfasının bazı bölümlerini yüklemenizdir.

Tembel Yükleme kullanmanın birincil yararı, genel web sitesinin yükleme süresini azaltmasıdır. Lazy Loading, web sitesinin performansını iyileştirir ve ziyaretçilerin hemen izlemeye veya okumaya başlayabilecekleri ilk bölümü yükleyerek daha iyi bir kullanıcı deneyimi sağlar. Ziyaretçiler web sayfanıza gelip uzun süre beklemek zorunda kaldıklarında ilgilerini kaybederler ve gidebilirler. Ancak, web sayfasının geri kalanını yüklerken onlara anında izleyecekleri veya okuyacakları bir şey verirseniz, onları web sitenize bağlı tutabilirsiniz. Tembel Yüklemenin ikinci avantajı, maliyetin düşürülmesidir. Görseller, yalnızca web sitesi ziyaretçisi web sitesinin belirli bir bölümünü ziyaret ederse indirilir. Bu nedenle, ziyaretçi aşağı kaydırmazsa, cihazlarına daha az veri indirilir ve bu da onlara para tasarrufu sağlar.

Bu avantajlar nedeniyle tembel Yükleme, web sitenizin kullanıcı deneyimini ve verimliliğini artırmanın mükemmel bir yoludur.

Web siteniz için tembel Yüklemeyi iki şekilde özelleştirebilirsiniz – CSS arka plan özelliğini veya <img> etiketini kullanarak. Ancak, <img> etiketi yöntemi, bu tekniğin kullanımı kolay olduğu için ikisinden daha yaygındır.

<img> etiket özelliği:

Toplu iğne

<img> etiketi kullanıldığında, tarayıcı görüntü yüklemesini tetiklemek için src niteliğini kullanır. Kodunuzdaki 1. resim mi yoksa 100. resim mi olduğu önemli değil. Tarayıcı src özniteliğini alırsa, görüntü yüklemesini tetikleyecektir. Bu resimleri tembelce yüklemek için resim URL'sini src dışında bir özniteliğe ekleyin. Örneğin, görsel URL'sini data-src özniteliğine yerleştirirseniz, kaynak özniteliği boş olduğundan tarayıcı görsel yüklemesini tetiklemez.

Artık ön yükleme durduğuna göre, tarayıcıya görüntünün ne zaman yüklenmesi gerektiğini söylememiz gerekiyor. Görüntünün görüntü alanına girer girmez yüklenmesini tetiklemek istiyoruz. Görünüm alanına giren bir görüntünün zamanlamasını kontrol etmenin iki yolu vardır:

1. JavaScript olaylarını kullanma:

Toplu iğne

Bu teknikte, olay dinleyicileri tarayıcıdaki yeniden boyutlandırma, yön değiştirme ve kaydırma olaylarında kullanılır. Scroll olayı en bariz olanıdır. Kullanıcının web sayfasını ne zaman kaydırdığını kontrol etmek için kullanılır. 'orientationChange' ve 'resize' olayları tembel Yükleme için eşit derecede önemlidir. Yeniden boyutlandırma olayı, tarayıcı penceresinin boyutunda değişiklik olduğunda tetiklenir. 'orientationChange' olayı, cihaz dikeyden yatay moda döndürüldüğünde veya tam tersi olduğunda meydana gelir. Bu durumlarda ekranda görünen görüntü sayısı değişecek ve bu nedenle görüntü yüklemesini tetiklememiz gerekecek.

Bu olaylardan biri gerçekleştiğinde, sayfada bulunan ve henüz yüklenmemiş tüm resimleri ararız. Web sayfasında bulunan ve şu anda viewport'ta bulunan tüm yüklenmemiş görüntüleri kontrol ederek, anında yüklenmesi gerekenleri buluyoruz. Bu, geçerli belge kaydırma üstü, pencere yüksekliği ve görüntünün üst ofseti kullanılarak yapılır.

Görüntü alanına bir görüntü girdiyse, veri kaynağı özniteliğinden görüntü URL'sini alır ve görüntü yüklemesini tetikleyen kaynak özniteliğine yerleştiririz. Daha sonra tembel sınıfını görüntüden kaldırmalıyız, çünkü bu sınıf görüntülerin tembelce yüklenmesini sağlar. Tüm görüntüler yüklendiğinde olay dinleyicileri kaldırılır.

Kaydırma durumunda, kaydırma olayı sürekli olarak tetiklenir. Bu nedenle, performansı artırmak için tembel yükleme yürütmesini azaltacak küçük bir zaman aşımı ekleyebiliriz.

2. Kavşak gözlemci API'sini kullanma:

Toplu iğne

Intersection Observer API, tarayıcılarda nispeten yeni bir API'dir. Bu teknik, görüntü alanına giren bir öğenin zamanlamasını algılamayı çok kolaylaştırır. Bu teknik, önceki yönteme kıyasla karmaşık Matematik kullanmadan mükemmel performans sunar.

İlk olarak, tembel Yükleme gerektiren tüm görüntülere gözlemci eklemeliyiz. API, görüntü alanına bir görüntünün girdiğini algıladığında, veri kaynağından URL'yi seçer ve görüntü yüklemesini tetiklemek için 'isIntersecting' yöntemini kullanarak src özniteliğine yerleştirir. Bundan sonra, tembel sınıf, gözlemcinin kaldırılmasıyla birlikte kaldırılır.

Intersection Observer API, JavaScript olaylarını kullanmaya kıyasla sitenin kaydırma sırasında yavaş görünmesine neden olmadan hızlı bir şekilde çalışır. Olay dinleyicisi tekniği ile biraz gecikme ekleyen bir zaman aşımı eklemek zorunda kaldık. Ancak Intersection Observer API, tüm tarayıcılar tarafından desteklenmez. Bu nedenle, olay dinleyicisi kullanıcılar için popüler bir seçim haline geldi.

CSS arka plan özelliği:

Toplu iğne

CSS arka plan resimlerini yüklemek için tarayıcının, CSS stilinin mevcut belgede bulunan bir DOM'ye uygulanıp uygulanmayacağına karar vermek için Belge Nesne Modeli (DOM) ile birlikte CSS Nesne Modeli (CSSOM) oluşturması gerekir. CSS kuralı öğeye uygulanmazsa, tarayıcı arka plan resmini yüklemez.

Bu teknikle, viewport'a bir eleman geldiğinde arka plan görüntüsü CSS özelliğini uygularız. CSS'de bg-image (arka plan resmi) kimliğine sahip bir öğe var. Resme tembel sınıfı eklendikten sonra, CSS tekniğinde bg-image özelliğini geçersiz kılıyoruz ve onu yok yapıyoruz.

CSS'de #bg-image'e .lazy sınıfı eklemek, tek başına #bg-image kullanmaktan daha çok tercih edilir. Başlangıçta, tarayıcı öğeye background-image: none uygular. Web sayfasını kaydırdığımızda, olay dinleyicileri veya Kesişme Gözlemcisi, görünüm alanında bulunan görüntüyü algılar ve .lazy sınıfını siler. Arka plan görüntüsü yüklemesini tetikleyen öğeye bg-image özelliği uygulandığından, bu CSS tekniğinde geçerli değildir.

İşte kendi tembel yükleme web sitenizi özelleştirmenin iki yolu. Bu tekniklerin her ikisi de olağanüstü sonuçlar verir. Ancak, basit bir teknik istiyorsanız, <img> etiketini kullanmalısınız. WordPress kullanıcılarının, WordPress web sitelerinde tembel yükleme resimlerini özelleştirmeleri için birçok eklenti mevcuttur. Bu eklentileri kullanarak WordPress web siteniz için görüntüleri optimize etmek, tembel yükleme ile birlikte web sitenizin performansını artıracak, daha iyi bir deneyim sunacak ve SEO'ya da yardımcı olacaktır.