Lazy Load Nedir?

Tembel yükleme yani lazy load, bir web sayfasındaki görsellerin ve videoların sadece kullanıcı tarafından görülebilir hale geldiğinde yüklenmesini sağlayan bir optimizasyon tekniğidir. Lazy load sayesinde sayfanın ilk açılış hızı artmakta ve kullanıcı deneyimi iyileşmektedir.

Tembel yükleme iki temel yöntem kullanarak çalışmaktadır. İlk yöntem olan görsellerin yer tutucu ile değiştirilmesinde görsellerin gerçek yerine, sayfanın ilk açılışında daha az yer kaplayan yer tutucu (placeholder) görselleri yerleştirilmektedir. 

Kullanıcı sayfayı kaydırdıkça ve görseller görünür hale geldikçe yer tutucu görseller gerçek görsellerle değiştirilmektedir. JavaScript kullanımında ise JavaScript, kullanıcının kaydırma hareketini takip ederek hangi görsellerin görünür hale geldiğini belirlemektedir. Ardından bu görselleri otomatik olarak yüklemektedir.

Lazy Loading Ne İşe Yarar?

Lazy loading, Türkçe’ye tembel yükleme olarak çevrilen bir tekniktir. Web sayfasının ilk açılışında sadece sayfanın görünür kısmındaki içerikler yüklenmektedir. Sayfanın geri kalanındaki içerikler, kullanıcı aşağı kaydırdıkça ihtiyaç duyulduğunda yüklenmektedir.

Özellikle bu tekniğin sağladığı faydalar arasında şunlar yer almaktadır.

• Sayfanın ilk açılışında daha az içerik yüklendiğinden, sayfa daha hızlı açılır. Bu da kullanıcı deneyimini iyileştirir ve web sitenizin daha kullanışlı olmasını sağlar.
• Kullanıcılar sayfanın tamamını kaydırmayabilir. Lazy loading sayesinde kullanıcıların indirdiği veri miktarı azalır. Özellikle bu da mobil kullanıcılar için önemli bir avantaj sağlar.
• Sayfanın ilk açılışında daha az içerik yüklendiğinden, sunucu üzerindeki yük de azalır.
• Daha hızlı sayfa yükleme süresi ve daha az bant genişliği kullanımı, arama motoru sıralamalarında (SEO) da iyileşmeye yol açar.

Lazy Load Nasıl Çalışır?

Lazy load (tembel yükleme) çalışma prensibi aslında oldukça basittir. Sayfa ilk açıldığında, sadece görünür alandaki içerikler yüklenmektedir. Görünür alan dışındaki görseller ve diğer içerikler için placeholder (yer tutucu) kullanılmaktadır.

Kullanıcı sayfayı aşağı kaydırdıkça, placeholder’ların yerini gerçek içerikler almaya başlamaktadır. Özellikle bu işlem JavaScript kodları ile kontrol edilmektedir. Görseller veya diğer içerikler, Intersection Observer API gibi bir API kullanılarak, kullanıcı ekranına girdikleri anda yüklenmektedir.

Lazy Load Kullanım Alanları

Web sayfalarında genellikle çok sayıda görsel bulunur ve bunların hepsini bir anda yüklemek sayfa yükleme süresini önemli ölçüde uzatabilir. Tembel yükleme ile yalnızca kullanıcının ekranında görünen görseller yüklenir ve diğer görseller kullanıcı aşağı kaydırdıkça yüklenir.

Videolar da sayfa yükleme süresini ve bant genişliği kullanımını önemli ölçüde etkileyebilir. Tembel yükleme ile videolar yalnızca kullanıcı oynatmaya başlamak istediğinde yüklenir. Sayfa yükleme süresini kısaltır ve kullanıcıların videoları daha hızlı izlemesine olanak tanır.

E-ticaret sitelerinde genellikle çok sayıda ürün bulunur ve bunların hepsini bir anda yüklemek sayfa yükleme süresini önemli ölçüde uzatabilir. Tembel yükleme ile yalnızca kullanıcının ekranında görünen ürünler yüklenir ve diğer ürünler kullanıcı aşağı kaydırdıkça yüklenir.

Sayfa yükleme süresini kısaltır ve kullanıcıların ürünleri daha hızlı görmesine olanak tanır. Reklamlar da sayfa yükleme süresini ve bant genişliği kullanımını önemli ölçüde etkileyebilir. Tembel yükleme ile reklamlar yalnızca kullanıcı reklama bakmaya başladığında yüklenir.

Lazy load kullanım alanları arasında ise en yaygın kullanım alanları şöyledir.

• Görsel ağırlıklı web sitelerinde lazy load kullanımı, sayfa yükleme süresini önemli ölçüde kısaltabilmektedir.
• Uzun sayfalarda lazy load kullanımı, kullanıcıların sayfayı daha hızlı kaydırmalarını sağlayabilmektedir.
• Mobil internet bağlantısı genellikle daha yavaş olduğundan, mobil web sitelerinde lazy load kullanımı daha da önemli olmaktadır.

Tembel yükleme özellikle görselleri ve videoları yoğun bir şekilde kullanan web siteleri için idealdir. Bu teknik e-ticaret siteleri, haber siteleri ve bloglar gibi web sitelerinde yaygın olarak kullanılmaktadır.

Lazy Load Nasıl Uygulanır?

Tembel yükleme, bir sayfadaki görselleri veya diğer içerikleri, kullanıcı bunlara ihtiyaç duyana kadar yüklemeyi geciktirir. Sayfa yükleme süresini önemli ölçüde kısaltmaya ve kullanıcı deneyimini iyileştirmeye yardımcı olabilir.

Tembel yüklemeyi uygulamanın iki ana yolu bulunmaktadır. HTML loading özelliği lazy load için en çok tercih edilen yoldur. HTML5’te, img ve iframe elementleri için loading adında yeni bir özellik eklenmiştir. Özelliğin üç olası değeri vardır.

• “eager” varsayılan değerdir ve tarayıcının içeriği mümkün olan en kısa sürede yüklemesini söyler.
• “lazy” tarayıcının içeriği, kullanıcı tarafından görünür hale gelene kadar yüklememesini söyler.
• “auto” tarayıcının içeriği ne zaman yükleyeceğine karar vermesini söyler.

Tembel yüklemeyi uygulamak için, ilgili elementlerin loading özelliğini lazy olarak ayarlamanız yeterlidir.

• <img src=”ornek.jpg” loading=”lazy” alt=”Örnek resim”>

Birçok JavaScript kütüphanesi de tembel yükleme işlevselliği sunmaktadır. Özellikle bu kütüphaneler, genellikle daha fazla özelleştirme seçeneği sunmakta ve daha karmaşık senaryoları ele alabilmektedir. Popüler JavaScript tembel yükleme kütüphanelerinden bazıları şunlardır.

• Lozad
• Lazysizes
• Vanilla Lazyload

Lazy Load Kullanırken Dikkat Edilmesi Gerekenler

Lazy Load kullanırken dikkat edilmesi gereken bazı noktalar bulunmaktadır. Öncelikle Lazy Load, SEO açısından bazı dezavantajlara sahip olabilmektedir. Arama motorları, sayfanın ilk açılışında görmediği içerikleri dizine eklemeyebilmektedir.

Bu nedenle Lazy Load kullanırken SEO için gerekli optimizasyonların yapılması önemlidir. Lazy Load, görsellerin piksel piksel yüklenmesine neden olabilmektedir. Bu durum, kullanıcı deneyimi açısından olumsuz bir etki yaratabilmektedir.

Özellikle bu nedenle, görsellerin yüksek kalitede olduğundan ve kademeli olarak yüklendiğinde de iyi göründüğünden emin olunması gerekmektedir. Lazy Load, kullanıcı deneyimi açısından bazı riskler de barındırmaktadır.

Kullanıcılar, sayfanın aşağı kaydırıldıkça içeriklerin bir anda ortaya çıkmasını garip bulabilmektedir. Bu nedenle Lazy Load’un kullanıcı deneyimini olumsuz etkilemeyecek şekilde kullanılması önemlidir. Lazy Load kullanırken dikkat edilmesi gereken diğer noktalar arasında şunlar yer almaktadır.

• Tembel yükleme tüm içerik türleri için uygun değildir. Örneğin, sayfanızın düzeni için kritik önem taşıyan görselleri veya videoları tembel yüklememelisiniz.
• Tembel yükleme kullanırken, erişilebilirlik gereksinimlerini göz önünde bulundurmanız önemlidir. Görme engelli kullanıcılar için, tembel yüklenen görseller için alternatif metin sağlamanız gerekir.
• Arama motorlarının sayfanızdaki tüm içeriği dizine ekleyebildiğinden emin olmak için, tembel yüklenen görseller için data-src özelliğini kullanmanız gerekir.