Lazy Load Nedir, Nasıl Yapılır?

const images = document.querySelectorAll("img[data-src]");

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.getAttribute("data-src");
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

Bu yapı sayesinde görseller yalnızca viewport’a yaklaştığında yüklenir.

Ne zaman tercih edilmeli?

• Özel frontend geliştirmelerde
• React, Vue gibi framework’lerde
• Dinamik içerik yüklenen sayfalarda

Lazy Load Kütüphaneleri

Native lazy load çoğu durumda yeterli olsa da bazı projelerde ek kütüphaneler tercih edilebilir.

Öne çıkan seçenekler:

• lazysizes → En yaygın kullanılan kütüphanelerden biridir
• vanilla-lazyload → Hafif ve performans odaklıdır
• lozad.js → Modern ve minimal yapı sunar

Bu kütüphaneler genellikle şu durumlarda kullanılır:

• Eski tarayıcı desteği gerekiyorsa
• Daha fazla kontrol isteniyorsa
• Placeholder / efekt kullanımı planlanıyorsa

Ancak güncel projelerde gereksiz kütüphane kullanımı, performans kazancı yerine kayıp oluşturabilir.

Lazy Load SEO İçin Faydalı mı?

Lazy load, doğru uygulandığında SEO açısından olumlu katkı sağlar. Ancak yanlış yapılandırıldığında ciddi indeksleme ve performans sorunlarına neden olabilir. Bu nedenle konu yalnızca hız optimizasyonu olarak değil, arama motoru erişilebilirliği açısından da değerlendirilmelidir.

Doğru Kullanılırsa SEO’ya Katkı Sağlar

Lazy load sayesinde:

• Sayfa açılış süresi kısalır
• Core Web Vitals metrikleri iyileşir
• Kullanıcı deneyimi artar

Bu faktörler dolaylı olarak sıralama performansını olumlu etkiler.

Yanlış Kullanılırsa Görsel İndeksleme Sorunu Oluşturabilir

Eğer lazy load yalnızca JavaScript ile yapılmış ve HTML içinde görsel kaynağı yer almıyorsa, arama motorları bu içeriği algılamakta zorlanabilir.

Özellikle şu hatalar risklidir:

• img src yerine sadece data-src kullanmak
• Noscript fallback eklememek
• JavaScript olmadan içerik görünmemesi

Googlebot Lazy Load İçeriği Görebilir mi?

Googlebot modern bir tarayıcı gibi çalışır ve JavaScript’i büyük ölçüde işleyebilir. Ancak bu durum, her lazy load uygulamasının güvenli olduğu anlamına gelmez.

Google’ın önerdiği yaklaşım:

• İçerik HTML içinde bulunmalı
• Lazy load yalnızca yükleme zamanını ertelemeli
• İçerik tamamen gizlenmemeli

Görsel SEO İçin Alt Metin Kullanımı

Lazy load kullanılan görsellerde de:

• alt etiketi
• doğru dosya adı
• uygun boyutlandırma eksiksiz olmalıdır.

Lazy load, görsel SEO’nun yerini tutmaz; yalnızca performans katmanı sağlar.

Lazy Load ve İçerik Erişilebilirliği

Erişilebilirlik (accessibility) açısından lazy load uygulamaları dikkatli yapılmalıdır.

• Ekran okuyucular içeriğe erişebilmelidir
• Görsellerin yüklenmesi kullanıcı etkileşimine bağımlı olmamalıdır
• Kritik içerikler ertelenmemelidir

Lazy Load ve Core Web Vitals İlişkisi

Lazy load, site hızını artıran güçlü bir teknik olsa da Core Web Vitals metrikleri ile doğrudan bağlantılıdır. Doğru yapılandırıldığında performansı iyileştirir; yanlış uygulandığında ise özellikle LCP ve CLS değerlerini ciddi şekilde bozabilir. Bu nedenle lazy load, yalnızca “yükleme erteleme” değil, performans dengesi kurma sürecidir.

LCP (Largest Contentful Paint) Üzerindeki Etkisi

LCP, sayfadaki en büyük görsel veya içerik bloğunun ne kadar sürede yüklendiğini ölçer. Bu genellikle:

• Hero görsel
• Banner alanı
• Büyük başlık veya içerik bloğu olur.

Kritik nokta:

Eğer bu alan lazy load yapılırsa, tarayıcı bu içeriği yüklemeyi geciktirir ve LCP süresi uzar. Bu da doğrudan performans kaybı anlamına gelir.

Doğru yaklaşım:

• Above the fold (ilk ekran) içerikleri lazy load yapılmamalıdır
• Hero görseller öncelikli yüklenmelidir (preload veya eager load)
• Lazy load yalnızca ekran dışı içeriklerde kullanılmalıdır

CLS (Cumulative Layout Shift) Sorunları Nasıl Önlenir?

CLS, sayfa yüklenirken oluşan kaymaları ölçer. Lazy load yanlış uygulanırsa görseller sonradan yüklendiği için sayfa düzeni kayabilir.

Bu durum özellikle şu senaryoda görülür:

• Görsel yüklenmeden önce yer ayrılmaz
• Görsel yüklendiğinde içerik aşağı kayar

Çözüm:

• Tüm görseller için width ve height değerleri tanımlanmalı
• Alternatif olarak CSS ile aspect ratio kullanılmalı
• Placeholder (yer tutucu) alanlar oluşturulmalı

Bu sayede görsel yüklenmeden önce alan sabitlenir ve kayma engellenir.

INP (Interaction to Next Paint) ve Kullanıcı Etkileşimi

INP, kullanıcı etkileşimlerinin ne kadar hızlı işlendiğini ölçer. Lazy load, doğru uygulandığında JavaScript yükünü azaltarak INP üzerinde olumlu etki oluşturabilir.

Ancak:

• Aşırı JavaScript tabanlı lazy load kullanımı
• Ağır kütüphaneler
• Gereksiz event listener’lar INP değerini kötüleştirebilir.

Doğru yaklaşım:

• Native lazy load öncelikli kullanılmalı
• Gereksiz JS bağımlılığı azaltılmalı
• Kritik etkileşim alanları ertelenmemeli

PageSpeed Insights Uyarıları

Lazy load uygulaması sonrası PageSpeed Insights ve Lighthouse araçlarında şu uyarılar dikkatle incelenmelidir:

• “Largest Contentful Paint element is lazy loaded”
• “Avoid enormous network payloads”
• “Defer offscreen images”
• “Reduce unused JavaScript”

Bu uyarılar, lazy load’un doğru veya yanlış uygulandığını doğrudan gösterir.

Lazy Load Kullanırken Yapılan Hatalar

Lazy load’un yanlış uygulanması, performans kazancı yerine ciddi kayıplara yol açabilir. Rakip içeriklerde genellikle bu hatalar yeterince detaylı ele alınmamaktadır. Bu bölüm, içerği otoriter yapan kritik alanlardan biridir.

Hero Görseli Lazy Load Yapmak

En sık yapılan hatadır.

Ana görsel lazy load yapıldığında:

• LCP değeri yükselir
• Sayfa geç açılıyor hissi oluşur
• Kullanıcı deneyimi düşer

Tüm Görselleri Otomatik Lazy Load Etmek

Her görsel lazy load yapılmamalıdır.

Yanlış yaklaşım: “Tüm img etiketlerine otomatik lazy load eklemek”

Doğru yaklaşım:

• İlk ekran → eager load
• Alt içerikler → lazy load

Alt Metinleri Eksik Bırakmak

Lazy load uygulanan görsellerde alt metin unutulursa:

• Görsel SEO zayıflar
• Erişilebilirlik düşer

JavaScript Olmadan İçeriğin Görünmemesi

Eğer içerik yalnızca JavaScript ile yükleniyorsa ve HTML içinde yer almıyorsa:

• Arama motorları içeriği göremeyebilir
• İndeksleme sorunları oluşabilir

iframe ve Harita Embedlerini Kontrolsüz Yüklemek

YouTube ve Google Maps gibi embedler ağırdır.

Lazy load yapılmadığında:

• Sayfa yükü artar
• İlk açılış süresi uzar

Ancak tamamen kontrolsüz lazy load da sorun yaratabilir.

CLS Oluşturacak Şekilde Görsel Alanı Ayırmamak

Görsel boyutları belirtilmezse:

• Sayfa yüklenirken kayma oluşur
• Core Web Vitals düşer

Test Etmeden Yayına Almak

Lazy load uygulaması sonrası mutlaka test yapılmalıdır:

• PageSpeed Insights
• Lighthouse
• Gerçek cihaz testleri

Test edilmeden yapılan optimizasyonlar, çoğu zaman sorun oluşturur.

WordPress Sitelerde Lazy Load Ayarları Nasıl Kontrol Edilir?

WordPress altyapısında lazy load genellikle otomatik olarak aktif olsa da, doğru yapılandırılmadığında performans sorunlarına yol açabilir. Bu nedenle sistematik bir kontrol süreci gereklidir.

Tema Ayarları

Bazı temalar kendi lazy load sistemine sahiptir.

Kontrol edilmesi gerekenler:

• Tema panelinde lazy load aktif mi?
• Görseller için özel yükleme ayarı var mı?
• Hero alanı hariç tutulabiliyor mu?

Performans Eklentileri

LiteSpeed Cache, WP Rocket gibi araçlar:

• Lazy load kontrolü
• Görsel erteleme
• iframe optimizasyonu sunar.

Ancak aynı anda birden fazla eklenti kullanımı çakışma oluşturabilir.

Görsel Optimizasyon Eklentileri

Smush, Imagify gibi araçlar:

• Lazy load + sıkıştırma
• WebP dönüşümü
• CDN entegrasyonu sağlar.

Bu sistemlerin birlikte çalışıp çalışmadığı kontrol edilmelidir.

Çakışan Lazy Load Sistemleri

En kritik sorunlardan biri budur.

Örnek:

• Tema lazy load aktif
• Eklenti lazy load aktif
• WordPress çekirdeği lazy load aktif

Bu durumda:

• Çift yükleme gecikmesi
• JS çakışmaları
• performans düşüşü oluşabilir.

Page Builder Kullanırken Dikkat Edilmesi Gerekenler

Elementor, WPBakery gibi araçlar:

• Kendi lazy load sistemlerini kullanabilir
• Görselleri farklı şekilde render edebilir

Bu nedenle:

• builder ayarları ayrıca kontrol edilmelidir
• lazy load davranışı test edilmelidir

Lazy Load Nasıl Test Edilir?

Lazy load uygulamasının başarılı olup olmadığını anlamak için teknik testler yapılmalıdır. Bu süreç, optimizasyonun gerçekten işe yarayıp yaramadığını gösterir.

PageSpeed Insights ile Test

Google PageSpeed Insights:

• LCP
• CLS
• TBT gibi metrikleri analiz eder.

Lazy load sonrası iyileşme beklenir.

Lighthouse ile Kontrol

Chrome Lighthouse ile:

• Performans skorları
• görsel yükleme davranışı
• JS etkisi detaylı incelenebilir.

Chrome DevTools Network Paneli

Network sekmesinde:

• Görsellerin ne zaman yüklendiği
• scroll sonrası tetiklenip tetiklenmediği kontrol edilebilir.

Search Console Performans ve Dizin Kontrolü

Lazy load sonrası:

• Görseller indeksleniyor mu?
• Trafik değişimi var mı? analiz edilmelidir.

Mobil Cihazda Gerçek Kullanıcı Testi

En kritik test budur.

• Gerçek cihaz
• gerçek internet hızı ile deneyim kontrol edilmelidir.

Lazy Load Her Sitede Kullanılmalı mı?

Lazy load, çoğu projede fayda sağlayan bir teknik olsa da her sayfa tipi için otomatik uygulanacak bir standart değildir. Asıl değer, doğru yerde ve doğru yoğunlukta kullanılmasından gelir. Aşağıdaki senaryolar, hangi sayfalarda nasıl yaklaşılması gerektiğini netleştirir.

Blog Siteleri İçin

Blog içerikleri genellikle uzun metinler ve çok sayıda görsel içerir. Kullanıcıların sayfanın tamamını görmeden çıkma ihtimali yüksektir. Bu nedenle sayfanın alt bölümlerindeki görsellerin ilk yüklemede çağrılması gereksizdir.

Bu tür sayfalarda:

• İlk ekran (başlık, kapak görseli, ilk paragraf) öncelikli yüklenmeli
• İçeriğin ilerleyen bölümlerindeki görseller lazy load yapılmalıdır
• Özellikle infografik, tablo ve medya blokları ertelenmelidir

Doğru uygulandığında blog sayfalarında hem okuma akıcılığı artar hem de sayfa açılış süresi ciddi şekilde iyileşir.

Ancak burada yapılan yaygın hata, kapak görselinin de lazy load yapılmasıdır. Bu durum kullanıcıda “sayfa boş açılıyor” hissi oluşturur ve LCP değerini kötüleştirir.

E-Ticaret Siteleri İçin

E-ticaret siteleri lazy load’un en kritik kullanıldığı alanlardan biridir. Kategori sayfalarında onlarca hatta yüzlerce ürün görseli bulunabilir. Tüm bu görsellerin aynı anda yüklenmesi performansı ciddi şekilde düşürür.

Bu tür sayfalarda:

• İlk 3–4 ürün görseli normal yüklenmeli
• Alt sıradaki ürünler lazy load ile yüklenmelidir
• Scroll davranışına göre dinamik yükleme yapılmalıdır

Ayrıca ürün detay sayfalarında:

• Ana ürün görseli asla lazy load yapılmamalıdır
• Galeri görselleri lazy load ile optimize edilebilir

Bu yaklaşım, hem kullanıcı deneyimini hem de dönüşüm oranlarını doğrudan etkiler. Çünkü kullanıcı, hızlı açılan bir sayfada alışverişe daha yatkın olur.

Kurumsal Siteler İçin

Kurumsal sitelerde genellikle daha az sayıda görsel bulunur ve sayfa yapısı daha sade olur. Bu nedenle lazy load kullanımı daha stratejik olmalıdır.

Bu tür sitelerde:

• Hero alanı, banner ve ana mesaj bölümü öncelikli yüklenmelidir
• Referanslar, galeri ve alt içerikler lazy load yapılabilir
• Gereksiz optimizasyonlardan kaçınılmalıdır

Aşırı optimizasyon, performans kazancı sağlamaz; aksine gereksiz karmaşıklık oluşturur. Kurumsal sitelerde temel hedef, hızlı ve stabil açılış deneyimi sağlamaktır.

Haber Siteleri İçin

Haber siteleri yüksek trafik ve sürekli içerik akışı nedeniyle performans açısından hassas yapılardır.

Bu tür sitelerde:

• İlk içerik bloğu hızlı yüklenmeli
• Scroll ile yeni içerikler lazy load ile çağrılmalıdır
• Infinite scroll (sonsuz kaydırma) ile birlikte kullanılabilir

Ancak dikkat edilmesi gereken en önemli nokta, içerik erişilebilirliğidir. Lazy load uygulaması, arama motorlarının içeriğe erişimini engellememelidir.

Landing Page (Tek Sayfa) İçin

Landing page’lerde kullanıcıya tek bir mesaj verilir ve dönüşüm hedeflenir. Bu sayfalarda performans kritik olsa da içerik akışı farklıdır.

Bu tür sayfalarda:

• Kritik içerikler (başlık, CTA, ana görsel) anında yüklenmelidir
• Alt bölümlerdeki dekoratif görseller lazy load yapılabilir

Burada amaç hız değil, algılanan hızdır. Kullanıcı sayfayı anında dolu görmelidir.

Lazy Load ile Görsel Optimizasyonu Birlikte Nasıl Kullanılır?

Lazy load tek başına yeterli değildir. Gerçek performans artışı, görsel optimizasyon ile birlikte uygulandığında elde edilir. Bu iki yaklaşım birlikte çalıştığında hem yükleme süresi düşer hem de kullanıcı deneyimi iyileşir.

WebP ve AVIF Format Kullanımı

Modern görsel formatları (WebP ve AVIF), geleneksel JPG ve PNG formatlarına göre çok daha küçük boyutlarda aynı kaliteyi sunar.

Lazy load ile birlikte kullanıldığında:

• Görseller daha geç yüklenir
• Yüklendiğinde daha hızlı açılır

Bu çift etki, performans açısından ciddi avantaj sağlar.

Görsel Sıkıştırma

Lazy load yalnızca yükleme zamanını değiştirir, dosya boyutunu küçültmez. Bu nedenle:

• Görseller yüklenmeden önce optimize edilmelidir
• Kalite kaybı minimum seviyede tutulmalıdır

Optimize edilmemiş büyük görseller, lazy load yapılsa bile performansı düşürür.

Responsive Images Kullanımı

Farklı cihazlar için farklı boyutlarda görseller sunmak kritik bir optimizasyondur.

Örnek:

     srcset="gorsel-400.jpg 400w, gorsel-800.jpg 800w, gorsel-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     loading="lazy" alt="örnek">

Bu yapı sayesinde:

• Mobil kullanıcı küçük görsel yükler
• Masaüstü kullanıcı daha kaliteli görsel görür

Lazy load ile birlikte kullanıldığında maksimum verim elde edilir.

CDN (Content Delivery Network) Kullanımı

CDN, görselleri kullanıcıya en yakın sunucudan iletir. Lazy load ile birleştiğinde:

• Görsel hem geç yüklenir
• Hem de daha hızlı ulaşır

Bu kombinasyon özellikle global trafik alan siteler için kritik öneme sahiptir.

Cache Sistemi ile Birlikte Kullanım

Tarayıcı cache ve sunucu cache sistemleri:

• Daha önce yüklenen görsellerin tekrar çağrılmasını engeller
• Lazy load sonrası deneyimi daha da hızlandırır

Bu nedenle lazy load tek başına değil, cache + CDN + optimizasyon ile birlikte düşünülmelidir.

Lazy Load Doğru Kullanıldığında Güçlü Bir Teknik SEO Hamlesidir

Lazy load, yüzeyde basit görünen ancak yanlış uygulandığında ciddi performans sorunlarına yol açabilen bir tekniktir. Bu nedenle yalnızca “aktif etmek” değil, nerede kullanılacağını doğru belirlemek kritik öneme sahiptir.

Başarılı bir lazy load stratejisinde:

• Kritik içerikler öncelikli yüklenir
• Ekran dışı içerikler ertelenir
• Core Web Vitals dengesi korunur
• Görsel optimizasyon ile desteklenir

Bu yaklaşım, yalnızca hız değil; kullanıcı deneyimi, SEO performansı ve dönüşüm oranları üzerinde de doğrudan etki oluşturur.

Optimia yaklaşımı, lazy load’u tek başına bir teknik olarak değil; teknik SEO, kullanıcı deneyimi ve performans optimizasyonunun birleştiği stratejik bir yapı olarak ele almaktır. Bu sayede siteler yalnızca hızlı değil, aynı zamanda sürdürülebilir ve arama motoru dostu bir yapıya kavuşur.