Bir ziyaretçi sitenize girdiğinde sayfanın en altına kadar inmeyecekse, neden sayfanın sonundaki resimleri veya videoları hemen indirmek için sunucunuzu (ve ziyaretçinin kotasını) yorasınız ki? "Lazy Loading" (Tembel Yükleme) teknolojisi ve "Above the Fold" stratejisiyle sayfa yüklenme sürecini nasıl milisaniyelere düşüreceğinizi inceleyeceğiz.
Lazy Loading (Tembel Yükleme) Nedir?
Klasik sistemde site yüklendiği zaman ana sayfada bulunan 50 resmin 50'si de tarayıcı tarafından (aşağıda kaldığı halde) hemen indirilir. Sonuç: Sayfa çok uzun sürede yüklü konuma geçer (Load event gecikir).
Lazy Loading sisteminde ise; ekranın içinde kalan (Gözle görülen - Viewport) resimler anında yüklenir. Sayfanın aşağısında (Footer veya orta kısımlarda) kalan resimler ise, kullanıcı o kısma doğru kaydırdıkça (Scroll ettikçe) tetiklenir ve indirilir. 50 resimlik yük, kullanıcının internet hızına bölünür.
Lazy Loading Nasıl Uygulanır?
Eskiden: JavaScript (jQuery) kodlarıyla uzun Intersection Observer scriptleri yazmak gerekiyordu.
Modern Yöntem: Artık Google Chrome, Safari ve Firefox bu özelliği yerel olarak (Native) desteklemektedir. Resimlerinizin <img> ve <iframe> HTML etiketlerinin içine sadece loading="lazy" yazmanız yeterlidir!
<!-- Bu resim kullanıcı scroll ettikçe (aşağı indikçe) yüklenecektir -->
<img src="urun-resmi.jpg" alt="Sneaker Ayakkabı" loading="lazy">
<!-- Eğer WordPress (LSCache) vb kullanıyorsanız eklentiler bunu otomatik ekler! -->Kritik Hata: "Above the Fold" Alanında Lazy Loading
Tembel Yükleme harika bir özelliktir ancak Geliştiricilerin (veya yanlış ayarlanmış Cache Eklentilerinin) sık yaptığı korkunç bir hata vardır: İlk Ekrandaki (Above the Fold) Resimlere Lazy Loading Uygulamak!
Above the Fold Nedir? : Ziyaretçi siteye girdiği o ilk saniyede, fareyi (scrollu) hiç aşağı çevirmeden (kaydırmadan) gözüyle Gördüğü "Üst Çerçevedir". Kısaca: Logo, Ana Slider/Banner Resmi ve Menüler.
Eğer Logonuza veya Kapak (Hero) Resminize loading="lazy" eklerseniz, Tarayıcı "Hımm bu resim tembel, o halde acelesi yok, en son yüklerim" diye düşünür ve ziyaretçinin suratına 2-3 saniye boş (beyaz) bir tablo gösterir. Bu durum Google PageSpeed LCP (En Büyük Zengin İçerik Boyası) skorunu adeta "Sıfırlar".
🚀 HazalHost LSCache Desteği İle Otomasyon
Lazy loading işlemlerinde hangi resmin hariç tutulacağı kafanızı mı karıştırıyor? HazalHost'ta barındırılan sitelerinizdeki LSCache altyapısı "Above the Fold" resimlerinizi (Logonuzu ve Kapak görselinizi) akıllı tespit yöntemiyle tembel yüklemeden muaf tutarak mükemmel skora tek tıkla ulaşmanızı sağlar.
Çözüm: Üst Ekranı "Preload" ile Önceliklendirin
Lazy Loading'in panzehiri Preload (Önceden Yükleme)'dur. İlk saniyede görünen Logonuzu veya 1 Numaralı Slider resminizin (Banner) yüklemesini tarayıcıya empoze etmek (Aman diyim bunu css'den falan önce indir) için <head> tagları arasına veya img etiketinin yanına preload komutu gömülür:
<!-- YÖNTEM: Fetch Priority -->
<img src="kapak-banner.jpg" fetchpriority="high" alt="Kapak">Sonuç
Eğer bir resim veya iframe (Youtube video çerçevesi) ekranın en üstünde ziyaretçinin yüzüne bakacak ilk şey ise "Preload (Ön Yükleme)" verin. Ziyaretçi web sitenizde okuyup inerek en dipten (veya ortadan) görecekse kesinlikle "Lazy Load (Tembel Yükleme)" verin. Strateji bu kadar basittir!