Lazy Loading Nedir?

Lazy loading, bir web sayfasındaki görsellerin, videoların veya diğer içeriklerin sayfa ilk yüklendiğinde değil, kullanıcı o içeriğe yaklaştığında yüklenmesini sağlayan bir performans tekniğidir.

Lazy Loading Nasıl Çalışır?

Geleneksel yüklemede (eager loading) tarayıcı, sayfayı açtığı anda tüm içeriği kullanıcının henüz görmediği en alt bölümdeki görseller dahil indirir. Lazy loading ise bu davranışı tersine çevirir.

Süreç şu şekilde işler:

1. Sayfa yüklendiğinde yalnızca ekranda görünen alan içindeki içerikler indirilir.

2. Kullanıcı sayfayı aşağı kaydırdıkça tarayıcı, görünür alana yaklaşan içerikleri tespit eder.

3. İçerik görünüm alanına girmek üzereyken yükleme başlar.

4. Kullanıcı o bölüme ulaştığında içerik hazır biçimde ekranda belirir.

Lazy Loading Neden Önemlidir?

Modern web sayfaları giderek daha fazla görsel içerik barındırır. Bir e-ticaret sitesinde yüzlerce ürün görseli, bir haber sitesinde onlarca fotoğraf bulunabilir. Tüm bu içerikleri sayfa açılışında yüklemek ciddi sorunlara yol açar:

• Sayfa yükleme süresi uzar. Kullanıcı sayfanın kullanılabilir hale gelmesini beklemek zorunda kalır.

• Gereksiz veri tüketimi oluşur. Kullanıcı hiç kaydırmadan sayfayı kapattığında, indirilen içeriklerin büyük bölümü boşa gitmiş olur.

• Sunucu üzerindeki yük artar. Tüm isteklerin eş zamanlı işlenmesi sunucu kaynaklarını zorlar.

• Mobil kullanıcılar olumsuz etkilenir. Sınırlı veri paketi kullananlar için gereksiz indirmeler doğrudan bir maliyet oluşturur.

Lazy Loading Hangi İçerikler İçin Kullanılır?

Görseller

En yaygın kullanım alanıdır. Özellikle uzun sayfalarda, ürün listelerinde ve galeri içeriklerinde etkilidir.

Videolar

Video dosyaları büyük boyutludur. Kullanıcı sayfayı o bölüme kaydırmadan video yüklemek gereksiz bant genişliği tüketir. Lazy loading ile video yalnızca görünür alana girdiğinde yüklenmeye başlar.

iframe İçerikleri

Harita yerleştirmeleri, YouTube videoları veya dış kaynaklı widget'lar iframe ile sayfaya eklenir. Bu öğelerin lazy loading ile yüklenmesi sayfa açılış performansını belirgin biçimde artırır.

Lazy Loading Nasıl Uygulanır?

Modern tarayıcılar, ekstra JavaScript gerektirmeden loading="lazy" özelliğini destekler.

<img src="urun-gorseli.jpg" alt="Ürün görseli" loading="lazy">

<iframe src="harita.html" loading="lazy"></iframe>

Bu yöntem 2019'dan itibaren Chrome, Firefox, Edge ve Safari tarafından desteklenmektedir. Ek kütüphane gerektirmez ve uygulaması son derece kolaydır.

Lazy Loading’in SEO’ya Etkisi Var mı?

Lazy loading doğru uygulandığında SEO üzerinde olumsuz bir etkisi yoktur. Googlebot, JavaScript'i işleyebildiği için lazy loading ile yüklenen içerikleri de dizine ekleyebilir.

1. Placeholder boyutlarını doğru tanımlayın. Görsel yüklenirken yer tutucu olarak doğru boyut belirtilmezse sayfa düzeni kayar ve CLS (Cumulative Layout Shift) skoru bozulur.

2. LCP (Largest Contentful Paint) görseline lazy loading uygulamayın. Sayfanın en büyük ve en önemli görseli viewport içindeyse ertelenmiş yükleme bu kritik metriği olumsuz etkiler.

3. İlk sayfa yükleme süresi kısalır. Tarayıcının işlemesi gereken veri miktarı azalır.

4. Bant genişliği tasarrufu sağlanır. Özellikle görsel ağırlıklı sitelerde bu tasarruf %40-60 düzeyine ulaşabilir.

5. Core Web Vitals skorları olumlu etkilenir. Google'ın sıralama faktörleri arasında yer alan bu metrikler, lazy loading ile iyileşebilir.

Lazy Loading ile İlgili Sıkça Sorulan Sorular

Lazy Loading Tüm Tarayıcılarda Çalışır mı?

Lazy loading özelliği Chrome, Firefox, Edge ve Safari'nin güncel sürümlerinde desteklenmektedir.

Her Görsel İçin Lazy Loading Kullanılmalı mı?

Hayır. Sayfa açıldığında ekranda görünen görseller, özellikle hero bölümündeki büyük görseller veya logolar, lazy loading olmadan yüklenmelidir. Bu görsellere lazy loading uygulamak ilk yükleme deneyimini olumsuz etkileyebilir.

Video İçeriklerine Lazy Loading Nasıl Uygulanır?

HTML5 video öğesi için preload="none" özelliği kullanılabilir. Bu ayar tarayıcıya videoyu ön yüklememe talimatı verir. YouTube veya Vimeo gibi dış kaynaklı videolar için iframe'e loading="lazy" eklenmesi yeterlidir.

Lazy Loading ile Görsellerin Görünürlüğü Olumsuz Etkilenir mi?

Doğru uygulandığında etkilenmez. Googlebot JavaScript'i işleyebildiğinden lazy loading ile yüklenen görselleri de tarayabilir ancak bazı üçüncü taraf botlar bu görsellere ulaşamayabilir. Alt etiketleri ve dosya adlarının açıklayıcı olması bu riski azaltır.