Görüntüler, çoğu web sitenin toplam boyutunun %50’sinden fazlasını oluşturuyor ve kendi sitenizi incelediğinizde benzer değerleri göreceksiniz. Sayfa yükleme sürelerini önemli ölçüde iyileştirme söz konusu olduğunda önce sitenizin resimlerinden başlamak mantıklıdır. Bunun, düşük hemen çıkma oranları ve daha yüksek Google sıralamaları gibi sayısız faydaları vardır. Online Resim Optimize Edici gibi araçlar, görüntüde önemli bir bozulma olmadan büyük resimlerinizin boyutunu azaltmanıza yardımcı olur, ancak resimler yine de site yükleme sırasında ağır yük oluşturur. Bu durumda Lazy Load yani tembel yükleme size yardımcı olabilir. Amaç, bir web sayfası yüklenirken sadece tarayıcının o an penceresinde görünen resimlerin eşzamansız yüklenmesi veya hatta koşullu olarak yüklemek. Böylece, kullanıcı tarayıcı penceresini aşağı doğru kaydırmazsa bazı resimler hiç yüklenmez. Bunun çalışan halini büyük olasılıkla birçok sitede gördünüz. Lazy Load, sayfada yer alan bir ögenin ihtiyaç duyulmadığı takdirde çağrılmaması veya yüklenmemesi prensibi ile çalışan bir sistemdir. Bu yazıda, Lazy Load resim yükleme için en iyi 5 yönteme bakacağız. Bu yöntemleri basitçe ve otomatik olarak fazla bir bilgi gerektirmeden uygulayabilirsiniz. 1. Sadece JavaScript Kullanarak Lazy Load Yöntemi İlk Lazy Load yöntemi sadece 7 satır JavaScript'ten oluşur ve tüm görüntüleri otomatik olarak yüklerken sayfanın ilk açılma süresini optimize etmek için yeterlidir. Yüklenmesini ertelemek istediğiniz görüntülerin "src" etiketini boş bırakın veya yükleme simgesi gösterecek şekilde değiştirin ve sonradan yüklenmesi gereken gerçek görüntü yolunu "data-src" gibi özel bir etikete tanımlayın: 
Yukarıdaki ilk img etiketindeki orijinal "src" özelliği basitçe Base 64 şeffaf bir gif'i işaret ediyor. Ardından, sayfadaki tüm resimleri taramak ve sayfa tamamen yüklendikten sonra tanımlanmış bir data-src özniteliğine sahip olanları Lazy Load olarak yüklemek için sayfanızın altına aşağıdaki JavaScript'i ekleyin: Bu optimizasyonun işe yaramasını sağlayan temel işlem, sayfa yüklendikten sonra gerçek resimleri yüklemesidir. Hedef görüntüleri sayfa yüklendikten sonra eşzamansız olarak yüklenecek şekilde kümeleyerek, sayfa açılma hızını artırır. Bu tekniğin en kötü yanı, görülseler de görülmeseler de sayfadaki her görüntüyü yine de yüklemesidir. 2. Echo.js ile Lazy Load Echo.js, kullanıcının ekranında görünür olduklarında görüntüleri isteğe bağlı olarak tembel bir şekilde yükleyen kompakt, vanilla JavaScript arıyorsanız, düşünülecek bir sonraki mantıklı yöntemdir. Sadece 1kb boyutundaki komut dosyası, herhangi bir ekstra özellik olmadan tembel yükleme görüntülerine odaklanır. İşte komut dosyasının örnek bir uygulaması: 
Bu tekniğin artı yönü, JQuery gibi kütüphaneye bağımlı olmaması ve yalnızca 1 kb dosya boyutuna sahip olmasıdır. Ancak bu yöntemde görüntüleri açarken yerleşik bir "loading.gif" veya görüntü geçişi yoktur. Ayrıca kaydırılabilir bir DIV içindeki görüntülerle de çalışmıyor. 3. [be]Lazy.js ile Lazy Load 1.6kb boyutundaki BLazy, Echo.js'den biraz daha büyüktür, ancak bu ekstra baytlar ile çok fazla ek özellik elde edersiniz. Görüntüleri ve arka plan görüntülerini tembel olarak yükleyebilmenin yanı sıra, 480 piksel veya daha az piksel boyutuna sahip cihaz için bir görüntü ve 720 piksel veya daha az piksel boyutu için başka bir görüntü gibi cihaz boyutlarına göre farklı tembel görüntüler de sunabilirsiniz. Retina görüntüleme özellikli cihazlar için yüksek çözünürlüklü görüntüler de yükleyebilirsiniz. Ve son olarak, kaydırılabilir div kalıpları içinde de tembel yükleme işe yarar. Örnek bir Lazy Load uygulaması: 
Bu tekniğin artıları 1,6 kb boyutunda dosya yapısı ve yine JQuery gibi kütüphane bağımlılığı olmaması. Lazy Load görüntü yükleme özelliğinin yanı sıra, cihaz genişliğine ve retina cihazlarına göre farklı görüntüler de sunabilirsiniz. 4. jQuery Lazy Siteniz zaten jQuery kullanıyorsa, resimlerinizi tembel yüklemek için bir jQuery eklentisini kullanmamak için bir neden yoktur. jQuery Lazy, yukarıdaki komut dosyalarından birkaç şekilde farklılaşan kompakt bir jQuery Lazy Image eklentisidir (1.27kb boyutundadır). Bu komut dosyasıyla ilgili en dikkat çekici özellik, görüntüleri hem yatay hem de dikey bir düzende tembel olarak yükleme yeteneğidir, örneğin kaydırılabilir bir yatay “carousel” varsa faydalıdır. Ayrıca, eklenti, Iframe, JavaScripts, ses ve video gibi diğer içerik türlerini tembel yüklemeye ekleyebileceğiniz ek, isteğe bağlı eklentilerle (toplamda 2.27kb başka bir eklenti) birlikte gelir. Son olarak, eklentilerin CDN tarafından barındırılan sürümleri mevcuttur, bu nedenle sunucunuza herhangi bir dosya yüklemenize de gerek yoktur. Örnek bir uygulama: 
5. Lazy Load XT jQuery eklentisi Lazy Load XT, yaklaşık 3 kb boyutunda bir Lazy Load eklentisidir. Kaydırılabilir içerikler, hem dikey hem de yatay düzenler ve “sonsuz kaydırma” kurulumları içindeki tembel yükleme görüntülerini destekler. Görüntüler yüklenirken varsayılan bir animasyon göstermek ister misiniz? Başka bir .css dosyasına başvurmanız yeterlidir. Animate.css sayısız efekt sağlamak için Lazy Load XT ile birlikte çalışır. Cihaz boyutuna göre farklı görüntüler sunmak için de “response image” eklentisini kullanabilirsiniz. Bu teknik için temel bir uygulama örneği: 6. a3 Lazy Load - WordPress Eklentisi WordPress siteniz varsa tembel yükleme için a3 Lazy Load eklentisini kullanabilirsiniz. Ücretsizdir, hafiftir ve çalışmaya başlamak için herhangi bir yapılandırma gerektirmez. Yüklemek için eklentiyi WordPress kontrol panelinizde “a3 lazy load” adıyla arayın veya manuel olarak indirmek için yukarıdaki bağlantıyı tıklayın.
