Lazy Loading (Tembel Yükleme) Nedir? Sayfa Hızına Etkisi

Bir web sayfası açtığınızda tarayıcı, o sayfadaki her görseli, her scripti ve her yerleştirilmiş videoyu indirmeye çalışır. Oysa ziyaretçilerin büyük bölümü sayfanın en altına hiç ulaşmaz. Sayfanın dibindeki bir infografiği ya da yorumların yanındaki avatarları indirmek için harcanan bant genişliği, aslında ilk ekranı bir an önce göstermek için kullanılabilecek kaynaktan çalınır. İşte lazy loading, yani tembel yükleme, tam olarak bu israfı önlemek için vardır.

Bu yazıda tembel yüklemenin ne olduğunu, sayfa hızına neden bu kadar etki ettiğini, hangi durumlarda işe yaradığını ve hangi durumlarda tam tersi sonuç doğurduğunu ayrıntılı biçimde ele alacağız. Konu teknik görünse de mantığı oldukça sezgiseldir: ihtiyaç duyulmayan şeyi, ihtiyaç duyulana kadar yükleme.

Lazy Loading (Tembel Yükleme) Nedir?

Lazy loading, bir kaynağın (görsel, iframe, video, hatta JavaScript modülü) yalnızca gerçekten görünür hâle geleceği ya da kullanılacağı ana kadar indirilmesinin ertelenmesidir. Bunun karşıtı eager loading, yani hevesli yüklemedir: tarayıcı sayfayı ayrıştırırken karşılaştığı her kaynağı hemen indirir.

Klasik bir örnek düşünün. Uzun bir blog yazısında 20 tane görsel var. Ziyaretçi sayfayı açtığında ekranında yalnızca ilk iki görsel görünüyor, diğer 18’i görebilmek için aşağı kaydırması gerekiyor. Tembel yükleme olmadan tarayıcı 20 görseli birden indirmeye başlar. Tembel yükleme ile yalnızca ilk iki görsel indirilir; ziyaretçi aşağı kaydırdıkça, alttaki görseller sırayla ekrana yaklaştığı anda yüklenir. Ziyaretçi hiç aşağı inmezse, o görseller hiç indirilmez ve hem sunucunuz hem de ziyaretçinin bağlantısı boşuna yorulmamış olur.

“Fold” (Katlama Çizgisi) Kavramı

Tembel yüklemeyi anlamanın anahtarı, fold yani katlama çizgisi kavramıdır. Gazetecilikten gelen bu terim, gazetenin katlandığı yerin üstünde kalan, yani ilk bakışta görünen kısmı ifade eder. Web’de fold, sayfa ilk açıldığında kaydırma yapmadan görülen alandır ve buna “above the fold” (katlama üstü) denir. Kaydırınca görünen kısım ise “below the fold”tur.

Kural sadedir: katlama üstündeki içerik hemen (eager) yüklenmeli, katlama altındaki içerik tembel yüklenmelidir. Sorunların çoğu bu ayrımın karıştırılmasından doğar.

Tembel Yükleme Sayfa Hızını Nasıl Etkiler?

Tembel yüklemenin performansa etkisi tek yönlü değildir; hem olumlu hem de risk barındıran yönleri vardır. İkisini de tanımak gerekir.

Olumlu Etkiler

• Daha küçük ilk indirme boyutu: Tarayıcı yalnızca ilk ekranı oluşturmak için gereken kaynakları indirir. 2-3 MB’lık bir sayfa, ilk yüklemede birkaç yüz KB’a inebilir.
• Daha hızlı etkileşime hazır olma: Tarayıcının ana iş parçacığı gereksiz kaynaklarla meşgul olmadığı için sayfa tıklamalara, kaydırmalara daha çabuk yanıt verir. Bu, Core Web Vitals içindeki INP (Interaction to Next Paint) metriğine olumlu yansır.
• Bant genişliği ve maliyet tasarrufu: Ziyaretçinin görmeyeceği kaynaklar indirilmez. Mobil kullanıcılar için veri, siz için ise sunucu trafiği tasarrufu demektir.

Riskli Yönü: LCP Tuzağı

İşin can alıcı noktası burasıdır. LCP (Largest Contentful Paint / En Büyük İçerikli Boyama), bir sayfanın ana görsel içeriğinin ne kadar sürede göründüğünü ölçen Core Web Vitals metriğidir. Genellikle bir kapak görseli, ürün fotoğrafı ya da büyük bir başlık bloğu LCP öğesidir.

Eğer sayfanızın en büyük ve ilk görünen görseline tembel yükleme uygularsanız, tarayıcı o görseli “acele etmesi gerekmeyen” bir kaynak sanır. Önce diğer işleri bitirir, sonra o görseli indirmeye başlar. Sonuç: LCP süreniz uzar. Web performansı topluluğunda ölçülen verilere göre, tembel yükleme kullanan sayfaların LCP değerleri, kullanmayanlara kıyasla genellikle daha kötüdür; çünkü çok sayıda site, farkında olmadan LCP görselini de erteler. 2025 Web Almanac verilerine göre sayfaların yaklaşık altıda biri hâlâ LCP görselini tembel yüklüyor.

Yani tembel yükleme sihirli bir “hızlandır” düğmesi değildir. Ayrımı doğru yaparsanız kazanırsınız; her şeyi körlemesine ertelerseniz kaybedersiniz.

Native Lazy Loading: loading="lazy"

Yıllarca tembel yükleme yalnızca JavaScript kütüphaneleriyle yapılabiliyordu. Bugün ise tarayıcılar bu işi kendi başlarına yapabiliyor. Tek yapmanız gereken HTML etiketine bir öznitelik eklemek:

• loading=”lazy” → kaynağı ertele (katlama altı için).
• loading=”eager” → kaynağı hemen yükle (varsayılan davranış; katlama üstü için).

Bu native (yerel) yaklaşım hem <img> hem de <iframe> etiketlerinde çalışır ve 2020’den bu yana tüm büyük tarayıcılarda desteklenir. JavaScript’e, ek kütüphaneye ya da eklentiye gerek kalmadan çalıştığı için performans açısından en temiz çözümdür. Bir JavaScript çözümü yerine mümkün olan her yerde native lazy loading tercih edilmelidir.

fetchpriority ile Öncelik Belirleme

Tembel yüklemenin tamamlayıcısı, önceliklendirmedir. Katlama üstündeki kritik görsele (özellikle LCP öğesine) fetchpriority="high" ekleyerek tarayıcıya “bunu diğerlerinden önce, yüksek öncelikle indir” diyebilirsiniz. Bu öznitelik 2026 itibarıyla tüm modern tarayıcılarda (Chrome, Safari, Firefox, Edge) desteklenmektedir ve üretim ortamında güvenle kullanılabilir. İlginç bir gerçek: sayfaların yalnızca küçük bir kısmı LCP görselinde bu özniteliği kullanıyor; yani hâlâ kolay bir kazanç masada duruyor.

Özetle sağlıklı bir düzen şöyle görünür:

Öğe	Konum	Doğru Ayar
Kapak / hero görseli (LCP)	Katlama üstü	loading=”eager” + fetchpriority=”high”
Logo, başlık ikonları	Katlama üstü	loading=”eager”
Yazı içi alt görseller	Katlama altı	loading=”lazy”
YouTube / harita iframe’i	Genellikle katlama altı	loading=”lazy” veya facade tekniği
Yorum avatarları, footer görselleri	Katlama altı	loading=”lazy”

Sadece Görseller Değil: iframe, Video ve JavaScript

Tembel yükleme yalnızca görsellerle sınırlı değildir. En büyük kazançlar çoğu zaman ağır gömülü içeriklerde gizlidir.

iframe ve Gömülü Videolar

Bir YouTube ya da Google Haritalar yerleştirmesi, tek başına 500 KB ile 1 MB arası bir yük getirebilir. Bir iframe’e loading="lazy" eklemek, kullanıcı o alana yaklaşana kadar bu yükü erteler. Daha da agresif bir yöntem facade (cephe) tekniğidir: gerçek iframe yerine önce hafif bir kapak görseli (örneğin videonun küçük resmi) gösterilir; kullanıcı üzerine tıkladığında asıl iframe yüklenir. Bu, ilk yüklemeden yüzlerce KB’lık yükü tamamen kaldırabilir.

JavaScript İçin Tembel Yükleme (Code Splitting)

Modern uygulamalarda tembel yüklemenin bir başka boyutu da JavaScript’tir. Dynamic import (import()) sözdizimiyle, bir kod parçası yalnızca gerçekten gerektiğinde indirilir. React’te React.lazy(), Vue’de asenkron bileşenler bu mantığı kullanır. Buna code splitting (kod bölme) denir ve büyük uygulamalarda ilk yükleme süresini dramatik biçimde kısaltır.

IntersectionObserver ile Özel Kontrol

Native özniteliklerin yetmediği, tamamen özel senaryolarda geliştiriciler IntersectionObserver API’sini kullanır. Bu API, bir öğenin görünüm alanına ne zaman girdiğini verimli biçimde tespit eder ve o anda ilgili kaynağı yükleyecek kodu tetikler. Ancak günlük ihtiyaçların büyük bölümü için native loading="lazy" fazlasıyla yeterlidir.

Sık Yapılan Hatalar ve CLS Tehlikesi

Tembel yüklemeyi “aç ve unut” bir özellik sanmak en büyük yanılgıdır. En sık karşılaşılan hatalar şunlardır:

• LCP görselini tembel yüklemek: Yukarıda anlattığımız en kritik hata. Katlama üstündeki büyük görseli asla ertelemeyin.
• Genişlik ve yükseklik belirtmemek: Tembel yüklenen görsellere width ve height (ya da CSS ile aspect-ratio) vermezseniz, görsel geç geldiğinde sayfa içeriği yerinden zıplar. Bu, CLS (Cumulative Layout Shift / Kümülatif Düzen Kayması) metriğini bozar. Tarayıcının görsel için önceden yer ayırabilmesi için boyutları mutlaka belirtin.
• Her şeyi körlemesine ertelemek: “Ne kadar çok tembel yükleme, o kadar hızlı” düşüncesi yanlıştır. Aşırı tembel yükleme, sayfayı yavaşlatabilir.

WordPress gibi platformlar bu dengeyi otomatikleştirmeye çalışır: WordPress 5.5 ve sonrası görsellere otomatik loading="lazy" ekler, 6.1 ve sonrası ise ilk içerik görselini bu davranışın dışında bırakıp ona fetchpriority="high" verir. Yine de kritik sayfalarda sonucu kendiniz bir hız testiyle doğrulamak en sağlıklısıdır.

Sunucu Tarafı: Hızın Görünmeyen Yarısı

Tembel yükleme tarayıcı tarafında bir optimizasyondur; ancak bir görsel indirilmeye başladığında, o baytların ne kadar hızlı geldiği tamamen barındırma altyapınıza bağlıdır. Katlama altındaki görsel tembel yükleniyor olsa bile, kullanıcı o noktaya geldiğinde sunucu görseli hızlıca teslim edemezse yine bir bekleme yaşanır.

Bu noktada altyapının önemi devreye girer. Alastyr hosting paketlerinde LiteSpeed web sunucusu ve LSCache önbellekleme birlikte çalışır; statik kaynaklar (görseller dâhil) diskten değil önbellekten, çok daha düşük gecikmeyle sunulur. Tüm depolama katmanı Dell EMC Unity 650F all-flash üzerinde çalıştığı için görsel teslim süreleri klasik disk sistemlerine kıyasla belirgin biçimde kısadır. İzmir’deki kendi veri merkezimizin 40 Gbit yedekli omurgası ise bu baytların ziyaretçiye hızlı ulaşmasını sağlar.

Özellikle görsel ağırlıklı, WordPress tabanlı siteler için WordPress hosting; kaynak taleplerinin arttığı büyüyen projeler için ise bulut sunucu çözümleri, tembel yüklemenin kazandırdığı hızı sunucu tarafında da tamamlar. Frontend optimizasyonu ile hızlı bir altyapı bir araya geldiğinde Core Web Vitals puanları gerçek anlamda iyileşir.

Sıkça Sorulan Sorular

Lazy loading (tembel yükleme) tam olarak nedir?

Lazy loading, bir sayfadaki görsel, iframe ya da video gibi kaynakların sayfa açılır açılmaz değil, kullanıcı o kaynağa yaklaştığında yüklenmesini sağlayan bir tekniktir. Böylece ilk yükleme daha küçük ve daha hızlı olur, görülmeyen içerikler için gereksiz veri indirilmez.

Lazy loading sayfamı gerçekten hızlandırır mı?

Doğru uygulandığında evet. İlk indirme boyutunu düşürür ve sayfanın etkileşime hazır olma süresini kısaltır. Ancak katlama üstündeki ana görsel (LCP öğesi) yanlışlıkla tembel yüklenirse tam tersine sayfayı yavaşlatabilir. Kazanç, katlama üstü ile altını doğru ayırmaya bağlıdır.

loading=”lazy” özniteliği tüm tarayıcılarda çalışır mı?

Evet. Native loading=”lazy” özniteliği 2020’den bu yana Chrome, Firefox, Safari ve Edge dâhil tüm modern tarayıcılarda desteklenir. Desteklemeyen çok eski bir tarayıcıda ise özellik yok sayılır ve görsel normal şekilde yüklenir, yani bir zarar oluşmaz.

Hangi görsellere lazy loading uygulamamalıyım?

Sayfa açıldığında hemen görünen katlama üstü içeriklere, özellikle kapak / hero görseline ve LCP öğesine tembel yükleme uygulamayın. Bu öğeler loading=”eager” ile hemen yüklenmeli, hatta LCP görseline fetchpriority=”high” eklenmelidir.

Lazy loading sadece görseller için mi kullanılır?

Hayır. Görsellerin yanı sıra iframe’ler (YouTube, harita gömmeleri), videolar ve JavaScript modülleri için de kullanılır. JavaScript tarafında buna code splitting denir ve dynamic import ile yalnızca gereken kod indirilir.

Lazy loading neden bazen CLS sorununa yol açar?

Tembel yüklenen görsele genişlik ve yükseklik (ya da aspect-ratio) belirtilmezse, görsel geç geldiğinde tarayıcı ona ayrılacak yeri önceden bilemez ve içerik yerinden kayar. Bu kayma CLS metriğini bozar. Çözüm, her görsele boyut bilgisi vermektir.

WordPress’te lazy loading’i kendim ayarlamam gerekir mi?

WordPress 5.5 ve sonrası görsellere otomatik olarak loading=”lazy” ekler; 6.1 ve sonrası ilk içerik görselini bu davranışın dışında tutup ona yüksek öncelik verir. Çoğu durumda ek ayara gerek kalmaz, ancak kritik sayfalarda sonucu bir hız testiyle doğrulamanız önerilir.

fetchpriority ile lazy loading arasındaki fark nedir?

Lazy loading bir kaynağın indirilmesini erteler; fetchpriority ise indirilecek bir kaynağın öncelik sırasını belirler. İkisi zıt değil tamamlayıcıdır: katlama altını lazy load edip, katlama üstündeki kritik görsele fetchpriority=”high” verirsiniz.

Lazy loading için ayrı bir eklenti şart mı?

Hayır. Native loading=”lazy” özniteliği eklentisiz çalışır ve en temiz çözümdür. Facade tekniği ya da IntersectionObserver gibi özel senaryolar için kod ya da eklenti gerekebilir, ancak günlük ihtiyaçların çoğu için native yaklaşım yeterlidir.