Lazy loading (tembel yükleme), görsellerin site açılışı esnasında yüklemeyi engellememesi ve sayfanın yüklenme süresini uzatmaması için uzun zamandan beri 3. parti js kütüphaneleri ile kullanımda olan ve büyük sayfalarda da sayfanın aktif alanı içerisinde ilgili görselin görünür olması ile asenkron olarak görselin yüklenmesi mantığı ile çalışan bir yaklaşım. Google gibi arama motorlarının lazyload olarak yüklenen görselleri görüyor ve google görsellerde yer veriyor olması da lazı load kullanımını daha cazip hale getiriyordu. Bir süredir tarayıcı seviyesinde lay load kullanmak mümkün hale geldi, sitede daha önce kimsenin yazmadığını fark edince ben paylaşmak istedim. Lazy load kullanımı konusunda sitede gördüğüm başlıkları da yine buraya ekliyorum.
bkz: 2019 LazyLoad tembel yükleme tavsiyesi (HTML)
bkz: lazyLoad SEO için faydalı mı zararlı mı?
HTML kodlarken artık img etiketlerine loading özelliği ekleyebiliyoruz ve lazy load şeklinde yüklenmesini istediğimiz görseller için de kullanım örneği loading="lazy" şeklinde oluyor. Bir img etiketi ile örnek verelim.
<img src="/dosyalar/resim.jpg" alt="görsel" loading="lazy">
lazy load şeklinde yüklenmesini istemediğimiz durumlarda kullanmamız gereken kullanım ise su şekilde:
<img src="/dosyalar/resim.jpg" alt="görsel" loading="eager">
Lazy load özelliğini HTML içinde native olarak kullanabiliyor olmak hem ek js kütüphanelerini eklemeye gerek burakmaması açısından, hem de halihazırda optimize edilmiş olarak sunulduğundan çok kolaylık sağlayacak diye düşünüyorum. loading="lazy" özelliğini hangi tarayıcıların hangi sürümleri destekliyor tablosunu bulamadığım için paylaşamıyorum ama güncel Google Chrome'da (güncel sürüm) kullanarak sorunsuz bir şekilde çalıştığını kendim görmüş oldum.