Görsel Yüklenme Süresi Nasıl Hızlandırılır?

LazyLoad başlamak, jQuery Lazy gibi JS kitaplıklarıyla çok basittir . Tembel yükleme için kullanılabilen JS kitaplıklarından çok daha performanslı olan en son IntersectionObserver API’sini de kullanabilirsiniz 

Tüm resimlerinizi optimize ettikten sonra bile, çok fazla görsel olması web sitenizi yavaşlatacak ve kullanıcı deneyimini olumsuz yönde etkileyecektir. Daha az resim kullanmanız gerektiğini savunmuyoruz. Ancak, görselleri sayfa kaydırılmadan önden yüklemekten kaçınabileceğimiz durumlar vardır.

Kullanabileceğiniz diğer daha önemli teknik, resimleriniz için lazy load teknolojisidr . Lazy load, temel olarak, o anda sayfada bulunduğunuz kısımda gerekli olmayan görüntülerin yüklenmesini ertelediğimiz anlamına gelir.

Tipik olarak, kullanıcının ekranında veya görüntü alanında görünmeyen herhangi bir görüntü, daha sonraki bir zamanda, yani görüntü görüntü alanına girdiğinde veya girmek üzereyken yüklenebilir.

Web sayfanızda 100 ürününüz olduğu bir durumu düşünün. 100 ürün görselinin hepsini aynı anda ve en baştan istemeniz yükleme süresini yavaşlatacaktır. Görüntüler, ağ bant genişliği ve CPU kaynakları için sayfadaki CSS ve JS gibi diğer kritik öğelerle rekabet ederdi.

LazyLoad ile, yalnızca başlangıçta kullanıcı tarafından görülebilen 30 resim yüklerdik. Ardından, kullanıcı sayfayı aşağı kaydırmaya başladığında, daha fazla resim yüklemeye devam edeceğiz. Bu, ilk yükleme süresinin ve kullanıcı deneyiminin iyileştirilmesine yardımcı olacaktır. Kullanıcının tüm sayfayı aşağı kaydırmadığı ve bu nedenle bazı resimlerin hiç yüklenmediği durumlar olacaktır. Böylece, görüntü teslimi için bant genişliği maliyetlerinden de tasarruf etmiş olursunuz.

Bir cevap yazın