Lazy Loading Nedir?
Lazy Loading, web sitesinde gerekli olmayan kaynakların yüklenmesini ihtiyaç duyulana kadar erteleyen, kullanıcı deneyimi ve sayfa açılış sürelerini iyileştiren performans optimizasyon tekniğidir.
Örnekler
- İçerik alanındaki görseller,
- Footer alanındaki logo,
- Alt bölümde kullanılan sosyal ikonlar,
- Sidebar görselleri.
Lazy Loading Kullanmanın Faydaları
Site Hızı
Çok sayıda görsel içeren bir sayfaya girildiğinde, Lazy Loading kullanılmıyorsa sayfadaki bütün görseller aynı anda yüklenir ve bu durum web sitesinin daha geç açılmasına yol açar. Lazy Loading ile ilk açılışta yalnızca ekranda görünen görseller yüklenir; diğerleri kullanıcı sayfayı aşağı kaydırıp o alana yaklaştıkça yüklenir. İlk anda kaç görselin yükleneceği ekran boyutuna ve sayfanın tasarımına göre değişir.
Kullanıcı Deneyimi
Kullanıcıların sayfaları gereksiz gecikmeler olmadan hızlıca gezinmesini sağlar. Hızlı açılan sayfalar kullanıcıların sayfadan ayrılma olasılığını azaltır, ilgisini canlı tutar. Özellikle mobil cihazlar üzerinden daha yavaş internet bağlantısına sahip kullanıcılar için çok faydalıdır.
Optimize Edilmiş Kaynak Kullanımı
İlk açılış ekranında yüklenen kaynak sayısı daha az olur, sayfanızı ziyaret eden kullanıcının bant genişliğini korur. Arama motorları sayfanızı ziyaret ettiğinde ilk olarak en alakalı içeriği taramaya odaklanır ve bu da öncelikli içeriğin daha iyi şekilde arama motoru dizinine eklenmesine yardımcı olur.
Core Web Vitals
Google Core Web Vitals, web sitelerinin yükleme süresi, görsel kararlılığı ve etkileşimini ölçer. Lazy Loading, sayfanın üst kısmında görünen içeriğin oluşturulmasına öncelik verir. LCP, Google’ın Temel Web Verileri’nde önemli bir faktör olduğundan, iyileştirilmesi sıralamanızı olumlu yönde etkileyebilir. Önemli içerikleri önce yükleyip, gereksiz öğeleri erteleyerek, SEO için bir diğer önemli performans ölçütü olan FCP’yi iyileştirmeye yardımcı olur.
Lazy Loading Nasıl Uygulanır?
Lazy Loading web sitesine çeşitli şekillerde uygulanabilir. En basit yöntem, modern tarayıcıların doğrudan desteklediği loading=”lazy” özelliğidir. WordPress 5.5 sürümünden itibaren bu özelliği görsellere otomatik olarak ekler; Shopify gibi diğer hazır altyapılarda da tema ayarları veya eklentilerle kullanılabilir.
Örnek: <img> Etiketi ile Lazy Load
Görselleri <img> etiketiyle ekliyorsanız etikete loading=”lazy” özelliğini eklemeniz yeterlidir. Ek bir JavaScript veya CSS koduna gerek yoktur.
<img src="images/urun-gorseli.jpg" alt="Kahverengi deri sırt çantası" width="800" height="600" loading="lazy">
width ve height değerlerine görselin gerçek piksel boyutlarını yazın. Tarayıcı görsel yüklenmeden önce yerini ayırır, böylece görsel yüklendiğinde sayfadaki içerik kaymaz.
Bu özelliği sayfanın ilk ekranında görünen görsellere eklemeyin. Özellikle LCP öğesi olan ana görselin (banner, kapak görseli) geç yüklenmesi LCP süresini uzatır.
Lazy Loading uygulamasından en iyi şekilde faydalanmak için dikkat etmeniz gereken bazı noktalar vardır:
- Sayfanın yalnızca alt kısmında yer alan kaynakları Lazy Loading’e dahil edin.
- Sitenin ilk açılış ekranında işlevsellik için gerekli olan kaynakları Lazy Loading’e dahil etmeyin.
- Lazy Loading’i sayfalarınıza uyguladıktan sonra; ana sayfa, kategori ve ürün detay sayfalarının Google PageSpeed analizini gerçekleştirin.
- Yanlış bir uygulama varsa, Lazy Loading ile ilgili uyarılarla karşılaşabilirsiniz.
- Çok katı tembel yükleme parametreleri belirlemekten kaçının.
- Daha verimli hale getirmek için tembel yükleme kodunu en aza indirin.
- JavaScript tabanlı bir Lazy Load eklentisi kullanıyorsanız, JavaScript çalışmadığında görsellerin yine görünmesi için yedek çözüm ekleyin. loading=”lazy” özelliğinde buna gerek yoktur; bu özelliği desteklemeyen tarayıcılar görseli normal şekilde yükler.