PAYLAŞ
lazy load
lazy load

Site hızı sadece teknik anlamda değil, kullanıcı deneyimi anlamında da bir site için çok önemli metriklerden birisi. Yapılan araştırmalara göre bir site max 5 saniye içinde tam anlamıyla yüklenmiş olmuyorsa şayet kullanıcı sayfayı terk ediyor. Özellikle Google’ın açıkladığı Speed Update güncellemesinden sonra daha önemli bir hale gelmiş oldu. Özellikle SEO çalışmalarında önemli unsurlardan biridir. Özellikle fotoğraflar ile bir akışın sağlandığı içerik sitelerinde ve alışveriş sitelerinde görsel sayılarının metinlere göre fazla olmasından kaynaklı site hızı olumsuz anlamda etkilenir. Bulmayı umduğu içeriğe ulaşamadan ya da ilgili ürüne varamadan kullanıcı siteyi terk eder. Bu durumda lazy load, CDN gibi çözümlere başvurmak gerekir.

Bu tip durumlarda CDN kullanımı da etkili çözümlerden biridir ki buradan CDN kullanımı ile alakalı detaylı yazıma ulaşabilirsiniz. CDN haricinde site hızını arttırmak için kod revizeleri uygulanmalıdır. Kullanılmayan kod parçaları ya da database kalıntıları temizlenir. Özellikle wordpress, opencart gibi CMS kullanımı oluyorsa kullanılmayan eklentiler ve ya silinmiş eklentilerin kalıntılarından kurtulmak gerekir.

En önemli çözümlerden bir tanesi de Lazy Load ‘dur. Lazy Load ‘ın diğer ismi Dynamic Function Loading’dir. Aslında işin temeli bant genişliği tasarrufu ile site hızını arttırma çabasıdır. Kısaca ihtiyaç duyulana kadar nesnenin çağırılmamasıdır. İhtiyaç olmayan bir nesnenin çağırılmaması sayfa ve site performansı olarak geri döner.

Lazy Load çok fazla görselin kullanıldığı siteler için uygundur. Özellikle sitelerde sayfalar uzun ise geç açılma problemini ciddi anlamda azaltacak bir uygulamadır. Lazy load kullanımı ek bir javascript dosyası ile yapılır. Aktif ekranın dışında kalan tüm resimler yüklenmez. Resimler aktif ekrana girmeye başladıkça istek atılır ve istek atılma geçiktirilerek zamana yayılır. Bu sayede ilk istekte aşırı yoğun bir talep olmamış olur. Herhangi bir görsel gerekmedikçe istek atmaz ve performans sağlanır.

Lazy load aslında çok kapsamlı alanlarda kullanılabilir. Örneğin bir haber sitesinde 12 li carousel biçimde manşet olduğunu düşünelim. Slider içinde yer alan 12 tane görsel ilk açılışta ciddi bir yük bindirebilir sisteme. İlk iki ya da ilk üç resim simple load olarak konunlanabilir ve geriye kalan resimler tekli ya da üçlü şekilde lazy load yapısına dahil edilebilir. Yani Lazy load sadece alışveriş siteleri için uygundur demek çok yararlı bir aracın kullanım alanları çok ciddi bir oranda daraltmaktır. Bu yükleme metodu bir çok site ve alanda kullanılabilir.

Lazy Load aşağıdaki faydaları sağlar.
  • Site hızı artar.
  • Site performansı artar.
  • Sayfalar daha hızlı açılır ve kullanıcı deneyimi olumlu etkilenir.
  • Aşırı kaynak kullanını yaşanmamış olur.

Bu yapının kullanılması esasında yapılan en büyük hata yüksek boyutlu görsellerin yüklenmesidir. İster simple load ile ister lazy load ile resimleri sayfanıza getirin, en önemli konu en iyi kalitede en optimize boyut ile resmi servis etmelisiniz. Yani nasıl olsa lazy load çalışıyor sitemiz yanılgısına düşerek resim başına 1 megabyte düşünmemek gerekiyor. Temelde amaç görselleri kullanıcı tarayıcısına en hızlı şekilde servis etmek. Yine olası internet hızlarını da hesaba katarak ya da teknik sorunlardan dolayı yaşanabilecek yükleme gecikmelerini hesaba katarak resimlerin yerleşeceği alanlara bilgi amaçlı placeholder koymak çok daha profesyonel bir görüntü oluşturacaktır.