Lazy Load Tarayıcı Desteği ve Javascript Kullanımı
Sayfa hızıyla ilgili en hızlı optimizasyon başlığı altında değerlendirilen lazy load(tembel yükleme), bugün birçok platformun zaten aldığı önlemler arasında yer alıyor. Gelin tüm yönleriyle lazy load'u inceleyelim.
Lazy load; kullanıcının sayfa ziyaretinde ilk görebileceği alanın(below the fold) dışında kalan görsellerin yüklenmemesi, sonrasında da hangi alanı görüyorsa o alandaki görsellerin yüklenmesidir.
Neden Lazy Load'a İhtiyaç Var?
Lazy load aslında sadece sizin şirketinizin ya da sayfanızın problemi değil, aynı zamanda bir insanlık problemi.
Yukarıdaki grafiği yorumlamak gerekirse; internet sayfalarının %90'ında Ocak 2021 itibariyle 5.4MB'lık görsel yük bulunuyor. Milyarlarca internet kullanıcısı ve milyarlarca site olduğunu düşünürseniz, hepimizin ortak kullandığı bandwith genişliğinin çok büyük kısmını aslında hiç görmediğimiz görselleri yüklemeye harcadığımızı düşünebilirsiniz. Dolayısıyla lazy load konusu aynı zamanda sosyal sorumluluk işi de diyebiliriz.
Chrome 76 Sonrası Tarayıcı Desteği
Tam da bu sosyal sorumluluk noktasında Google konuya el attı. Chrome ve Chromium tabanlı tarayıcılarda(Chrome, Edge, Opera) ayrıca açık kaynak kodlu Firefox ile birlikte lazy load konusunu sayfaların inisiyatifine bırakmak yerine bir tarayıcı yükümlülüğü olarak kabul etti. Böylece Chrome 76 sonrasında tarayıcılar sayfa geliştiricilerine lazy load desteğini kendinden sunmaya başladılar. Buradan hangi tarayıcının hangi versiyonunda desteği olduğunu kontrol edebilirsiniz. Safari pek çok konuda geride kaldığı için hala bu yazının yayınlandığı Nisan itibariyle Safari desteği hala gelmedi.
Kullanım ise oldukça basit: <img loading=lazy> şeklinde img etiketine parametre eklediğinizde tarayıcı destekli lazy load kullanmış oluyorsunuz. Ancak hala eski tarayıcıların olduğunu ve Safari desteği olmadığını düşünürsek bu yapıyı kullanmak kullanıcılarınızın önemli bir kısmını kaçırmak anlamına gelebilir.
Tarayıcı tabanlı lazy load kullanımının javascript çözümü olarak kendi lazy load'ını uygulamaya göre iki avantajı var:
- Tüm cihaz ve ekran tipleri için below the fold alanının daha iyi hesaplanması,
- Yavaş bağlantı bile olsa görselin görünme süresinin 10ms'nin altında olması. Javascript çözümü kullanırsanız görsellerin yüklenmesi 100 ms'ye kadar çıkabiliyor.
BONUS: Tarayıcı Desteği Dışında Lazy Load Javascript Tavsiyesi
Yıllar içinde birçok lazy load scripti ortaya çıktı. Birçoğunun artık desteği yok, bir o kadarı da en son 7 yıl önce güncellenmiş javascript kütüphaneleridir. 7 yılda sayfa hızı ile ilgili gelinen mesafeyi düşündüğünüzde güncel çözümle ilerlemek gerekiyor. Bu noktada Google gibi biz de lazysizes'ı öneriyoruz. GitHub linkine aşağıdan ulaşabilirsiniz.
aFarkas
Ne gibi avantajları olduğunu maddelemek gerekirse;
- Lazy load içinde retina görsel desteği çok fazla script'te sağlanmıyor ancak lazysizes'da bu destek var.
- 7.7KB'lık küçük boyutu ile web performans bütçesi açısından olumlu olduğu söylenebilir.
- Hala webp desteği sağlamayan Safari için de güzel bir work around var. Safari için jpeg, diğer tarayıcılar için webp görselleri kullanan <picture> etiketi üzerinde de lazy load uygulanabiliyor.
Kaynak: https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds