Lazy Loading Rehberi: Gecikmeli Yukleme Stratejileri

Lazy Loading Nedir?

Lazy loading (tembel yukleme), web sayfasindaki kaynaklarin — gorseller, videolar, bilesen (component) ve betikler — yalnizca ihtiyac duyuldugunda yuklenmesini saglayan bir performans optimizasyon teknigidir. Sayfa ilk acildiginda yalnizca gorunen alan (viewport) icindeki icerikler yuklenir, ekranin altinda kalan kaynaklar kullanici o bolgeye scroll ettikce yuklenir.

Modern web sitelerinde bir sayfa onlarca gorsel, birden fazla ucuncu parti betik ve agir JavaScript bilesenlerinden olusabilir. Tum bu kaynaklarin sayfa acilisinda ayni anda yuklenmesi, hem bant genisligini israf eder hem de kullanici deneyimini olumsuz etkiler. Lazy loading ile ilk yukleme suresini (Time to Interactive) onemli olcude kisaltabilir, bant genisligi tuketimini azaltabilir ve sunucu yukunu hafifletebilirsiniz.

Neden Lazy Loading Kullanmalisiniz?

• Daha Hizli Ilk Yukleme: Sayfa acilisinda yalnizca kritik kaynaklar yuklenir, kullanici icerigi daha hizli gormeye baslar.
• Azaltilmis Bant Genisligi: Kullanicinin hic gormeyecegi gorseller ve icerikler indirilmez. Mobil kullanicilar icin ozellikle onemlidir.
• Daha Iyi Core Web Vitals: LCP (Largest Contentful Paint) ve INP metriklerini iyilestirir cunku tarayici kritik kaynaklara oncelik verebilir.
• Sunucu Yuku Azaltmasi: Daha az esanli istek, sunucu kaynaklarinin daha verimli kullanilmasi anlamina gelir.
• Daha Dusuk Maliyet: Bulut barindirma ve CDN hizmetlerinde bant genisligi maliyetlerini azaltir.

Native Lazy Loading: Tarayici Destegi

HTML loading ozelligi, tarayicilarin yerlesik lazy loading destegidir. Herhangi bir JavaScript kutuphanesi veya ozel kod gerektirmez.

Gorseller icin <img loading="lazy"> ve iframe'ler icin <iframe loading="lazy"> seklinde kullanilir. Tum modern tarayicilar (Chrome, Firefox, Safari, Edge) bu ozelligi desteklemektedir.

Dikkat Edilmesi Gerekenler

• Above-the-fold icerik: Sayfanin ilk gorunen alanindaki gorsellere loading="lazy" eklemeyin. Bu gorsellerin hemen yuklenmesi gerekir, aksi halde LCP metriginizi olumsuz etkiler.
• Boyut belirtin: Lazy loaded gorsellerin width ve height ozelliklerini mutlaka belirtin. Aksi halde gorsel yuklendiginde layout shift (CLS) olusur.
• Threshold farklari: Tarayicilar, gorseli ne kadar erken yuklemeye baslayacagi konusunda farkli esik degerleri kullanir. Bu davranis uzerinde ince ayar yapmazsaniz bazi tarayicilarda gorseller gec yuklenebilir.

Intersection Observer API

Intersection Observer API, bir HTML elemaninin gorunur alan (viewport) ile kesisimini asenkron olarak izlemenizi saglar. Lazy loading icin en guclu ve performansli JavaScript cozumudur. Scroll olaylarini dinlemek yerine tarayicinin yerlesik mekanizmasini kullandigindan, ana imleci (main thread) bloklamaz.

Nasil Calisir?

Bir IntersectionObserver olusturursunuz ve izlemek istediginiz elemanlari kayit edersiniz. Eleman belirttiginiz esik degerinde gorunur alan ile kesistiginde, bir callback fonksiyonu tetiklenir. Bu fonksiyon icinde gorselin gercek kaynagini atayabilir, bir bileseni render edebilir veya baska bir islemi baslatiabilirsiniz.

Yaygin Kullanim Alanlari

• Gorsel lazy loading: Gorsellerin src ozelligini yalnizca gorunur alana yaklastiklarinda atamak.
• Sonsuz kaydirma (Infinite scroll): Listenin sonuna yaklasildignda yeni icerik yuklemek.
• Animasyon tetikleme: Elemanlar gorunur alana girdiginde CSS veya JavaScript animasyonlarini baslatmak.
• Reklam ve analitik: Bir reklamalarin veya icerigin gercekten goruntulndigini izlemek.
• Video lazy loading: Video oynaticilari yalnizca gorunur oldugunda baslatan.

rootMargin ile Erken Yukleme

rootMargin parametresi ile gorsellerin gorunur alana girmeden once, belirli bir mesafede yuklenmesini saglayabilirsiniz. Ornegin rootMargin: "200px"ayari, gorsel viewport'a 200px yaklastiginda yuklemeyi baslatir. Bu, kullanicinin scroll ederken bos alan gormesini onler.

Next.js'te Lazy Loading

next/image ile Gorsel Optimizasyonu

Next.js'in next/image bileseni varsayilan olarak lazy loading uygular. Ek olarak otomatik boyut optimizasyonu, format donusumu (WebP/AVIF), responsive gorsel sunumu ve blur placeholder desteği saglar.

Above-the-fold gorseller icin priorityprop'u kullanarak lazy loading'i devre disi birakabilir ve gorselin oncelikli olarak yuklenmesini saglayabilirsiniz.

Dynamic Imports ile Bilesen Lazy Loading

Next.js dynamic fonksiyonu, React bilesenlerini lazy load etmenizi saglar. Buyuk bilesenler — grafik kutuphaneleri, harita bilesenler, zengin metin editorleri gibi — yalnizca ihtiyac duyulduklarinda yuklenir.

dynamic(() => import('./HeavyComponent')) seklinde kullanilir. ssr: false secenegi ile bileseni yalnizca istemci tarafinda render edebilirsiniz. Bu, sunucu tarafinda calismasina gerek olmayan bilesenler (harita, grafik, medya oynatici) icin idealdir.

Loading States

Dynamic import'lar icin loading parametresi ile bilesenyuklenirken gosterilecek bir placeholder tanimlayabilirsiniz. Skeleton ekranlar, spinner animasyonlar veya basit metin gostergeleri kullanici deneyimini iyilestirir.

React Suspense ve Lazy

React'in React.lazy() fonksiyonu ve Suspense bileseni, bilesen duzyinde lazy loading icin native bir cozum sunar. Bir bilesen React.lazy()ile sarildiginda, o bilesen ayr bir JavaScript chunk'a ayrilir ve yalnizca render edilmesi gerektiginde yuklenir.

Suspense bileseni, lazy bileseni sararark yukleme sirasinda bir fallback UI gostermeyi saglar. Bu yaklasim, route bazli kod bolme (code splitting) icin ozellikle etkilidir.

Gorsel Lazy Loading En Iyi Uygulamalari

1. Above-the-fold gorselleri lazy load etmeyin: Hero gorseller, logo ve navigasyon ikonlari gibi hemen gorunmesi gereken icerikler icin loading="eager" veya Next.js'te priority kullanin.
2. Placeholder kullanin: Gorsel yuklenene kadar blur placeholder, dominant renk veya skeleton goruntu gosterin. Bu, gorsel alanin bos gozukmesini onler.
3. Boyut belirleme zorunlu: Her gorselin width ve height degerlerini veya aspect-ratio CSS ozelligini belirleyin. Aksi halde CLS olusur.
4. rootMargin ile tampon bolge: Intersection Observer kullanyorsaniz, 100-300px rootMargin ile gorselleri gorunur alana girmeden once yuklemeye baslayin.
5. Progressive JPEG ve WebP: Lazy loaded gorsellerde progressive formatlari tercih edin. Gorsel yuklendikce netleserek daha iyi bir deneyim sunar.
6. Srcset ve sizes kullanin: Farkli ekran boyutlari icin uygun boyutta gorsel sunarak gereksiz veri indirmeyi onleyin.

Bilesen Lazy Loading Stratejileri

• Route bazli kod bolme: Her sayfa veya route icin ayri JavaScript chunk'lari olusturun. Next.js bunu otomatik olarak yapar.
• Etkilesim bazli yukleme: Bir butona tiklandiginda, modal acildiginda veya tab degistiginde gerekli bileseni yukleyin.
• Gorunurluk bazli yukleme: Intersection Observer ile sayfa altindaki agirbilesenleriyalnizca gorunur olduklarinda yukleyin.
• Idle yukleme: requestIdleCallback ile tarayici bosta oldugunda dusuk oncelikli bileseneri arka planda yukleyin.
• Ucuncu parti betikler: Analytics, sohbet widget'lari, reklam betikleri gibi kritik olmayan betikleri async veya defer ile ve mumkunse kullanici etkilesiminden sonra yukleyin.

Performans Olcumu

Lazy loading uygulamanizin etkisini asagidaki metrikler ve araclarla olcun:

• LCP: Sayfa acilisinda en buyuk elementin ne kadar surede yuklendigini olcer. Lazy loading ile kritik olmayan kaynaklarin ertelenmesi LCP'yi iyilestirir.
• CLS: Sayfa duzeni kaymalarini olcer. Dogru uygulanmayan lazy loading CLS'i kotulestirebilir, boyut belirlemesi kritiktir.
• Total Blocking Time: Ana imlegin ne kadar sure bloklandigini olcer. Buyuk JavaScript chunk'larinin lazy loading ile ertelenmesi bu metrigi iyilestirir.
• Network istekleri: Chrome DevTools Network sekmesinde sayfa acilisindaki istek sayisini ve toplam veri transferini karsilastirin.

Sonuc: Lazy loading, modern web gelistirmenin vazgecilmez performans tekniklerinden biridir. Native HTML ozellikleri, Intersection Observer API ve framework odakli cozumler (Next.js dynamic imports, React.lazy) ile uygulamak kolay ve etkilidir. Megis olarak, her projede lazy loading stratejilerini performans optimizasyonunun temel bir parcasi olarak uyguluyoruz.