Web Sitesi İçin Lazy Loading Nedir
5 dk okuma
Uzun bir ürün listesi sayfasında 50 görselin tamamının anında yüklenmesi gerekir mi? Cevap hayır: ziyaretçi henüz sayfanın altını görmemişken o görselleri indirmek zaman ve bant genişliği israfıdır. Lazy loading tam olarak bu israfı önleyen bir tekniktir. Bu yazıda ne olduğunu, nasıl çalıştığını ve nerelerde kullanılmaması gerektiğini anlatıyoruz.
Lazy loading nasıl çalışır
Lazy loading, ekranda henüz görünmeyen görsel ve videoların yüklenmesini erteleyerek, ziyaretçi o bölüme kaydırdığında içeriği indiren bir tekniktir. Bu sayede sayfa ilk açıldığında sadece görünür alandaki (above the fold) içerikler yüklenir, geri kalan kaynaklar beklemeye alınır.
Modern tarayıcılar bu özelliği görsel etiketine loading=lazy niteliği ekleyerek yerel olarak (native) destekler; ayrıca JavaScript kütüphaneleriyle daha gelişmiş kontrol de sağlanabilir.
Hangi durumlarda gerçek fayda sağlar
- Uzun blog yazılarında makale içindeki görseller.
- Ürün listeleme sayfalarında aşağıda yer alan ürün görselleri.
- Sosyal medya tarzı sonsuz kaydırmalı (infinite scroll) sayfalar.
- Sayfa altındaki video ve iframe içerikleri (harita, YouTube gömme gibi).
- Çok sayıda görsel içeren galeri ve portföy sayfaları.
Nerede kullanılmamalı
Sayfa açıldığında ilk ekranda görünen (above the fold) ana görsel, logo veya kahraman (hero) görseli lazy loading ile geciktirilmemelidir; aksi halde Core Web Vitals'taki LCP (En Büyük İçerikli Boyama) ölçümü kötüleşir çünkü tarayıcı görseli görmeye başlamadan yükleme isteğini geciktirir.
Bu yüzden kural basittir: ekranın hemen görünen kısmındaki içerikler hızlı (eager) yüklensin, aşağıdaki içerikler tembel (lazy) yüklensin.
Uygulama örneği
HTML'de bir görsel etiketine loading=lazy niteliğini eklemek çoğu modern tarayıcıda ekstra kütüphane gerektirmeden çalışır. WordPress gibi hazır sistemler bu özelliği genellikle sürüm 5.5'ten itibaren varsayılan olarak otomatik uygular.
Daha gelişmiş kontrol isteyen projelerde Intersection Observer API kullanılarak görselin ekrana ne kadar yaklaştığında yükleneceği (örneğin 200 piksel önce) hassas şekilde ayarlanabilir.
Ölçülebilir sonuçlar
Çok sayıda görsel barındıran bir sayfada lazy loading uygulandığında ilk yükleme süresi genellikle yüzde 20-40 oranında kısalır çünkü tarayıcı aynı anda onlarca değil, sadece birkaç görseli indirir. Bu iyileşme özellikle mobil ve yavaş bağlantılarda daha belirgin hissedilir.
Bu tür performans ince ayarlarını kendiniz yapmak istemiyorsanız, WebSitesi Burada üzerinden bulacağınız bir geliştiriciden sitenizin teknik SEO ve hız denetimini de kapsayan bir teklif alabilirsiniz.
Sıkça Sorulan Sorular
Lazy loading tüm görsellere uygulanmalı mı?
Hayır, ilk ekranda görünen görsellere uygulanmamalı; sadece kaydırıldığında görünecek görsel ve videolara uygulanması önerilir.
Lazy loading SEO'yu olumsuz etkiler mi?
Doğru uygulandığında etkilemez, hatta sayfa hızını artırarak SEO'ya olumlu katkı sağlar. Yanlış uygulandığında (örneğin ana görsele uygulandığında) LCP ölçümünü kötüleştirebilir.
Lazy loading için eklenti kurmak gerekir mi?
Modern tarayıcılarda HTML niteliği ile eklenti gerekmeden uygulanabilir; WordPress gibi sistemlerde bu özellik genellikle zaten varsayılan olarak aktiftir.
websitesiburada.com Editöryal Ekibi
Bu yazı, platformumuzda listelenen web sitesi uzmanlarıyla yürüttüğümüz projelerden edindiğimiz gözlemler ve güncel fiyat/piyasa verileri baz alınarak editoryal ekibimiz tarafından hazırlanmıştır.
Hakkımızda daha fazla bilgi →Web sitesi yaptırmaya hazır mısınız?
Birkaç soruya cevap verin; ihtiyacınıza uygun uzmanı ve net fiyatı size önerelim.
Web Sitesi İstiyorum