Lazy Loading Nedir?
Lazy loading, sayfa açılırken ekranda görünür olmayan içeriklerin (özellikle resim ve video) yüklenmesini geciktirme tekniği. Kullanıcı scroll edip o içeriğe yaklaştığında yüklemeye başlıyor. İlk sayfa ağırlığını %40-60 azaltıyor, LCP'ye doğrudan katkı.
Native lazy loading (HTML attribute, 2020 sonrası tüm tarayıcılarda): ```html <img src='resim.webp' loading='lazy' /> <iframe src='https://youtube.com/...' loading='lazy'></iframe> ```
Lazy load çeşitleri: 1. Image lazy load — viewport'a 200-400px yaklaşınca yükle 2. Video lazy load — iframe + poster image, oynat'a tıklayınca asıl video yüklensin 3. Component lazy load — React.lazy + Suspense, route bazında code splitting 4. Above the fold optimization — ilk ekrandaki resimler EAGER (loading='eager' + priority), aşağıdakiler LAZY
Dikkat edilmesi gerekenler: 1. Hero image LAZY olmamalı — LCP element olduğu için eager yüklenmeli (Next.js Image priority prop) 2. Above-the-fold image'lerde lazy load = LCP geç görünür 3. Lazy load çalışmazsa (eski tarayıcı) fallback — img display:none + script ile manuel 4. CLS koruması için width + height şart
Next.js Image otomatik akıllı: aspect ratio + priority prop + automatic eager/lazy decision. Ana sayfada hero image priority=true, aşağıdaki gallery için default lazy.
Lazy loading ROI: tipik bir e-ticaret ana sayfasında 30 ürün thumbnail varsa, kullanıcı ilk 6'sını görüyor; geri kalan 24 thumbnail eager yüklenince 3MB+ data + LCP 4s. Lazy load ile 600KB + LCP 1.2s.
DevPixel'in lazy load yaklaşımı: Next.js Image component (loading='lazy' default + above-the-fold için priority), React.lazy + dynamic import code splitting, DeferredChrome ile heavy widget'lar (LiveSupport, WhatsApp) idle-time mount. Sonuç: ilk sayfa weight 250-450KB.