Sayfa yüklenme hızı, günümüz dijital pazarlama dünyasında çeşitli nedenlerle oldukça önemlidir. Sitenize gereken hızda ulaşamayan kullanıcıların, blog gönderileri veya ürünler için markanızı tercih etmeme ve bunun sonucunda diğer web sitelerine bakma olasılıkları yükselir. Sayfa yüklenme hızında yalnızca 500 milisaniyelik bir gecikme, %26’dan fazla “hemen çıkma oranı“na ve etkileşimde %8’lik bir azalmaya neden olabilir. Araştırmaya göre bir saniyeden kısa sürede yüklenen sayfaların, beş saniyeden daha kısa sürede yüklenen sayfalardan yaklaşık 2,5 kat daha yüksek bir oranda dönüşüm sağladığı ortaya çıkmıştır. Peki sayfa yükleme hızı ile doğrudan ilişkili olan Lazy Load nedir?
Lazy Load terimi, web sitelerinin belirli alanlarının yüklenme sürelerini ifade eder. Eager Load’un tersidir ve yalnızca kullanıcının tarayıcı penceresine kaydırdığı içeriğin dinamik olarak yüklendiği anlamına gelir. Eager Load’da ile ise bir web sitesindeki tüm içerikler eksiksiz ve aynı anda yüklenmektedir.
Lazy Load’un Önemi
Görüntüler, bir web sitesinin indirme hacminin büyük bir bölümünü oluşturur. Web sitesine erişildiğinde ne kadar çok resim yüklenmesi gerekiyorsa, web sitesi de o kadar yavaş yüklenir. Yükleme süreleri, özellikle mobil bant genişliklerinde artabilmektedir.
Yavaş yükleme sürelerinin bir web sitesinin başarısı üzerinde çeşitli olumsuz etkileri vardır. Örneğin kullanıcıların “hemen çıkma” olasılığı daha yüksektir veya satın alma eylemi de düşüşe geçer. Google ayrıca yavaş web sitelerini sıralamasında cezalandırmaktadır. Bir web sitesinin başarısı, yükleme süresi ile ters orantılı olarak azalıp artabilmektedir.
Ayrıca, web sitesi operatörü için indirilen her görüntüyle ilişkili maliyetler de vardır. Ancak, her kullanıcı ürüne genel bakışın veya fotoğraf galerisinin tamamında gezinmez. Bu nedenle, sayfa çağrıldığında tüm resimleri yüklemek hiç de pratik değildir. Bu nedenle kaçınılmalıdır.
Lazy Load’un faydalarından bazıları şunlardır:
- Görüntülerin gecikmeli yüklenmesi nedeniyle daha hızlı yükleme süreleri,
- Tüm görüntülerin nadiren yüklenmesi gerektiğinden daha düşük trafik maliyetleri,
- Öncelikli olmayan içeriği yüklemeyerek bant genişliği kullanımını optimize etme.
Bu avantajlar söz konusu olduğunda dahi Lazy Load oldukça önemli olabilmektedir.
Lazy Load Nasıl Çalışır?
Normalde, sayfa çağrıldığında tarayıcı, web sitesinin HTML kodunda saklanan tüm resimleri yükler. Görüntüler “<img>” öğesiyle tanımlanır. “src” niteliği, görüntünün hangi kaynaktan yükleneceğini belirtir. Örneğin:
<img src=”image.jpg”>
Lazy Load’un etkili olabilmesi için önce src özniteliğinin üzerine yazılması gerekir. Bu şekilde görüntünün otomatik olarak yüklenmesini önleyebilirsiniz. Örneğin:
<img data-src=”image.jpg”>
Artık web sitesinin kaydırma işlevine bir komut dosyası bağlanabilir. Eğer görüntü ekrana gelirse data-src tekrar src ile değiştirilir ve yükleme işlemi başlatılır.
Lazy Load Hususunda Dikkat Edilmesi Gerekenler
Lazy Load komut dosyalarının çoğu yalnızca yükleme işleminin sonunda çalışır. “Top Fold“, yani kullanıcının doğrudan görüş alanında bulunan resimler bu nedenle Lazy Load ile yüklenmemelidir. Bunu başarmanın en kolay yolu, bu görüntülere ilk etapta src niteliğini vermektir. Elbette bu, sayfaların ve resimlerin sayısı ve sürekli güncellenmesi ile artan önemli miktarda çaba anlamına gelir.
Lazy Load görüntüleri tasarımı bozabilir. Bir görüntü sitede aniden boş bir noktaya yüklenirse, diğer öğeleri hareket ettirir. Bu nedenle, yüklemeden önce görüntünün tam boyutlarını piksel cinsinden belirtmek önemlidir. Örneğin:
<img data-src=”image.jpg” width=”100″ height=”200″>
Yer tutucular kısa bekleme süresinde etkilidir. Bir kullanıcı siteyi çok hızlı kaydırırsa veya bant genişliği daha düşükse, görüntülerin yüklenmesinde kısa bir gecikme olabilir. Bu durumda, boş içerikle karşılaşmak, kötü kullanıcı deneyimine neden olacaktır. Bu nedenle, kullanıcıya resimlerin yakında buraya yükleneceğini belirten yer tutucularla çalışmak faydalı olacaktır.
Bazı kullanıcılar JavaScript’i devre dışı bırakır. Bu çok nadir olmasına rağmen, hiçbir görüntünün yeniden yüklenmemesini sağlayabilir. Bunlar ürün resimleri ise bu durumdan elbette kaçınılmalıdır. “<noscript>” HTML öğesiyle, JavaScript’in devre dışı bırakılması gerekiyorsa tarayıcıya bir alternatif sunabilirsiniz. Örneğin:
<img data-src=”image.jpg”>
<noscript>
<img src=”image.jpg”>
</noscript>
Bu örnekte, görüntü “data-src” özniteliği ile Lazy Load yoluyla yüklenir. JavaScript devre dışı bırakılırsa, bunun yerine “src” özniteliğine sahip görüntü yüklenir. Bu, kullanıcı için daha hızlı yükleme sürelerinin avantajını ortadan kaldırsa da yine de tüm görüntüleri görebilir.
Programlama Olmadan Lazy Load Uygulama
Her web sitesi operatörünün Lazy Load için bir komut dosyası geliştirme fırsatı yoktur. Bu aynı zamanda, özellikle çevrim içi mağazalar gibi Lazy Load için birçok olası uygulamaya sahip web sitelerinde yüksek maliyet anlamına da gelir.
Herhangi bir programlama bilginiz olmasa bile Lazy Load kullanmanın birkaç yolu vardır.
Hazır Komut Dosyaları Kullanma
Bu yöntemin avantajı internette tembel yükleme için birçok hazır çözümün bulunmasıdır. Dezavantajı ise bu scriptleri temanıza veya şablonunuza entegre etmek için el işçiliğinin gerekli olmasıdır.
Eklentileri veya Uzantıları Kullanma
Bu yöntemin avantajı, WordPress veya gibi kullandığınız sisteme entegre olabilmeleridir. Yani kendi gelişimleri artık gerekli değildir. Dezavantajı ise iyi ve düzenli olarak bakımı yapılan eklentilerin ücrete tabi olmasıdır. Ayrıca, bir sistem güncellemesinden sonra artık uyumlu olmama veya kullanılan diğer eklentilerle çalışmama riski her zaman vardır. Ek olarak, eklentiler, sayfa çağrıldığında yüklenmesi ve yükleme hızını yavaşlatması gereken kendi komut dosyası kitaplıklarına ihtiyaç duyar.
Lazy Load WordPress Eklentileri
Blog yazılımı WordPress, “Woocommerce” eklentisi ile basit bir çevrim içi mağaza olarak bile kullanılabilen popüler bir CMS’dir. Lazy Load için bir eklenti kullanmak istiyorsanız, şunlardan birini tercih edebilirsiniz:
- WP Rocket Lazy Load: Bu eklenti ile görseller ve küçük resimler ile widget’lar veya metinler gibi diğer sayfa içerikleri gecikmeli olarak yüklenebilir. Bu aynı zamanda bir “<iframe>” içine yüklenen içerik için de geçerlidir, ör. YouTube videoları.
- A3 Lazy Load: A3 eklentisinin kurulumu ve yapılandırılması hızlıdır. Özellikle mobil ekranlar için optimize edilmiştir.
- Speed Up Lazy Load: Diğer iki eklentinin aksine Speed Up herhangi bir konfigürasyon gerektirmez. Bu, eklemeyi çok hızlı hale getirir, ancak özelleştirilemez.
Bu eklentiler düzenli olarak güncellenmektedir. Ancak, kullandığınız WordPress sürümü ile uyumlu olup olmadıklarını detaylı bir şekilde incelemelisiniz.
