Lazy Load Nedir? Sayfa Hızını Artıran Teknik Rehber

Sezer DEMİR
2 gün önce
5 dakikada okunur

Lazy Load Nedir?

⠀

Lazy load (tembel yükleme), bir web sayfasındaki görsel, video, iframe veya JavaScript gibi kaynakların, kullanıcının sayfayı kaydırarak o alana yaklaşana dek yüklenmesini erteleyen bir tekniktir. Sayfa ilk açıldığında yalnızca ekranda görünen içerik (above the fold — ekranın görünür alanı) yüklenir; geri kalan kaynaklar kullanıcı sayfayı kaydırdıkça devreye girer.

Bu yaklaşım, tarayıcının ilk yükleme sırasında indirmesi gereken toplam veri miktarını azaltır. Daha az veri indiren tarayıcı, sayfayı daha hızlı oluşturur. Özellikle uzun sayfalarda, çok sayıda görselde ve içeriği sayfa sonuna gömülmüş iframelerde etkisi belirgin biçimde hissedilir.

Lazy loading, Core Web Vitals (temel web metrikleri) açısından da kritik bir role sahiptir. Google'ın sayfa deneyimi değerlendirmesi doğrudan bu metriklere baktığı için tekniğin doğru uygulanması hem kullanıcı deneyimini hem de arama motoru sıralamalarını olumlu etkiler.

⠀

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

⠀

Tarayıcı bir HTML sayfasını ayrıştırdığında, <img> veya <iframe> etiketleriyle karşılaşır karşılaşmaz ilgili kaynakları indirmeye başlar. Geleneksel yaklaşımda bu işlem, kullanıcının sayfanın herhangi bir yerine bakıp bakmadığından bağımsız olarak gerçekleşir.

Lazy loading, bu davranışı tersine çevirir. Intersection Observer API (kesişim gözlemci arayüzü) adlı tarayıcı teknolojisi, bir öğenin görüntü alanıyla kesişip kesişmediğini izler. Öğe görünür alana girdiği anda indirme işlemi başlar. Kullanıcı hiç kaydırmazsa sayfanın alt bölümündeki görsel hiç indirilmez; bu hem bant genişliği hem de işlemci yükü açısından tasarruf sağlar.

⠀

Görsellerde Lazy Load: loading="lazy" Attribute'u

⠀

Görseller için lazy loading uygulamanın en basit ve yerel (native) yöntemi HTML'in loading niteliğini kullanmaktır:

<img src="urun-fotografi.jpg" alt="Ürün fotoğrafı" loading="lazy" width="800" height="600">

⠀

loading="lazy" niteliği tarayıcıya şunu söyler: "Bu görseli ancak görüntü alanına yaklaştığında yükle." Herhangi bir JavaScript kütüphanesi gerektirmez. 2025 itibarıyla tüm modern tarayıcılar bu özelliği desteklemektedir.

Bununla birlikte width ve height niteliklerini her zaman belirtmek gerekir. Bu değerler tarayıcıya görselin kaplama alanını önceden hesaplamasını sağlar; aksi hâlde görsel yüklendiğinde sayfa düzeni kayar ve CLS (Cumulative Layout Shift — kümülatif düzen kayması) skoru bozulur.

⠀

İframe'lerde Lazy Load

⠀

YouTube videoları, harita gömmeleri ve üçüncü taraf widget'lar genellikle <iframe> etiketiyle sayfaya eklenir. Bu iframeler, sayfanın kendisinden daha ağır olabilir. Bir YouTube iframe'i yüklendiğinde arka planda onlarca kaynak indirilir.

Çözüm aynı niteliktir:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" title="Video başlığı"></iframe>

⠀

loading="lazy" desteği iframeler için de tüm modern tarayıcılarda mevcuttur. Özellikle sayfa hızını etkileyen faktörleri ele aldığınızda iframe optimizasyonu sıklıkla göz ardı edilen bir alan olarak öne çıkar.

⠀

JavaScript Kaynaklarında Lazy Load

⠀

Görseller kadar dikkat çekmese de JavaScript dosyalarının da lazy loading mantığıyla yönetilmesi gerekir. Kullanıcının etkileşime girmediği bölümler için gereken scriptler baştan yüklenmemeli, ihtiyaç duyulduğunda dinamik olarak sayfaya eklenmelidir.

Bu yaklaşım iki yöntemle uygulanır:

Dynamic import (dinamik içe aktarım): Modern JavaScript'te import() fonksiyonu, bir modülü yalnızca çağrıldığı anda yükler. Büyük kütüphaneleri yalnızca belirli bir butona tıklandığında yüklemek için idealdir.

⠀

Script attribute'ları: <script defer> ve <script async> nitelikleri, scriptlerin HTML ayrıştırmasını bloklamasını önler. defer scripti sayfanın tamamı yüklendikten sonra çalıştırır; async ise indirme tamamlanır tamamlanmaz çalıştırır.

⠀

LCP ile Çelişmemek: Above-the-Fold Görsellerde Lazy Load Kullanmayın

⠀

Lazy loading'in en sık yapılan hatası, LCP (Largest Contentful Paint — en büyük içerikli boyama) öğesine uygulanmasıdır. LCP, kullanıcı sayfayı açtığında görüntü alanındaki en büyük öğenin ne kadar sürede yüklendiğini ölçer. Bu öğe çoğunlukla sayfanın üst kısmındaki büyük bir görsel ya da hero banner'dır.

Bu görsele loading="lazy" eklenirse tarayıcı onu kasıtlı olarak erteler. Oysa kullanıcı sayfayı açar açmaz bu görseli görmek ister. Sonuç: LCP skoru ciddi biçimde bozulur.

Kural şudur: Sayfa ilk yüklendiğinde ekranda görünen tüm görseller için loading="lazy" kullanmayın; hatta LCP görseline fetchpriority="high" niteliğini ekleyin:

<img src="hero.jpg" alt="Ana banner" fetchpriority="high" width="1200" height="600">  <img src="orta-bolum.jpg" alt="Orta bölüm" loading="lazy" width="800" height="400">

⠀

Core Web Vitals optimizasyonu yaparken bu ayrımı doğru yapmak, LCP ve CLS skorlarının eş zamanlı iyileşmesini sağlar.

⠀

WordPress'te Lazy Load Aktivasyonu

⠀

WordPress 5.5 sürümünden itibaren görsellere otomatik olarak loading="lazy" eklenmektedir. Ek bir eklenti kurmadan bu özellik aktif gelir. Ancak bazı durumlarda ek kontrol gerekebilir:

Tema hero görseli: Çoğu tema hero görselini CSS background-image ile ekler; bu yöntem loading="lazy" desteğinden yararlanamaz. Görseli <img> etiketiyle eklemeyi tercih edin.
LCP görseli için otomatik lazy load kapatma: WordPress bazı eklentiler ve tema yapılandırmalarıyla ilk görselin lazy load'unu otomatik kaldırabilir; bunu test etmek için PageSpeed Insights raporunu inceleyin.
Performans eklentileri: WP Rocket, LiteSpeed Cache ve W3 Total Cache gibi eklentiler, JavaScript tabanlı gelişmiş lazy loading seçenekleri sunar; bu eklentiler CSS arka plan görsellerini de kapsar.

⠀

Diğer Platformlarda Lazy Load

⠀

Shopify

⠀

Shopify, resmi Dawn teması dahil birçok modern temada lazy loading desteğini yerleşik sunar. {{ image | image_url | image_tag: loading: 'lazy' }} gibi Liquid filtresiyle kontrol edebilirsiniz. Ürün listesi sayfalarında bu özelliği doğrulamak önemlidir; yüzlerce ürün görselinin eş zamanlı yüklenmesi performansı doğrudan etkiler.

Wix

⠀

Wix, görsel yüklemeyi platform düzeyinde yönetir. Özel kod yazmadan lazy loading devreye girer; ancak Wix içinde oluşturulan sayfaların hız testini düzenli aralıklarla yapmak gerekir.

Özel (Custom) Projeler

⠀

Vanilla JavaScript kullanıyorsanız Intersection Observer API ile küçük bir lazy loading modülü yazabilirsiniz. Alternatif olarak lazysizes gibi hafif kütüphaneler hem görsel hem de iframe lazy loading için yaygın tercih olmaya devam eder.

⠀

Tarayıcı Desteği Durumu

⠀

loading="lazy" niteliği 2025 itibarıyla şu tarayıcılarda desteklenmektedir:

Tarayıcı | Versiyon | Destek

Tarayıcı: Chrome | Versiyon: 77+ | Destek: Tam
Tarayıcı: Firefox | Versiyon: 75+ | Destek: Tam
Tarayıcı: Safari | Versiyon: 15.4+ | Destek: Tam
Tarayıcı: Edge | Versiyon: 79+ | Destek: Tam
Tarayıcı: Opera | Versiyon: 64+ | Destek: Tam

⠀

Eski tarayıcılar bu niteliği yok sayar ve kaynağı normal şekilde yükler; bu nedenle loading="lazy" kullanımı güvenlidir — geriye dönük uyumluluk sorun oluşturmaz.

⠀

Lazy Load Uygularken Dikkat Edilmesi Gerekenler

⠀

Lazy loading doğru uygulandığında performans kazanımı sağlar; ancak bazı hataları daha baştan önlemek gerekir:

LCP öğesine asla lazy load uygulamayın.
Görsellerin width ve height nitelikleri olmadan lazy load'u etkinleştirmeyin; CLS skoru bozulur.
JavaScript tabanlı lazy loading çözümleri bot tarayıcılarıyla zaman zaman sorun yaşayabilir; teknik SEO denetimi sırasında Googlebot'un görselleri görüp görmediğini kontrol edin.
Test için Chrome DevTools'un "Network" sekmesini ve Google PageSpeed Insights'ı birlikte kullanın.

⠀

Sık Sorulan Sorular

⠀

Lazy load SEO'yu olumsuz etkiler mi?

Doğru uygulandığında etkilemez. Google'ın Googlebot'u JavaScript render ederek sayfa içeriğini tarar. Ancak JavaScript tabanlı lazy loading kullanan bazı yapılandırmalarda Googlebot görseli göremeyebilir. Bu riski en aza indirmek için yerel HTML loading="lazy" niteliğini tercih edin.

Tüm görsellere lazy load uygulamalı mıyım?

Hayır. Ekranın ilk görünür alanındaki (above the fold) görselleri hariç tutun. Kaydırma yapıldığında görünen tüm görseller için lazy loading mantıklı ve önerilir bir tercihtir.

Lazy load sayfanın tüm hız sorunlarını çözer mi?

Tek başına çözmez. Sayfa hızı; görsel formatı, sunucu yanıt süresi, JavaScript yükü ve render-blocking kaynaklar gibi birçok faktörden etkilenir. Blakfy olarak teknik SEO süreçlerinde lazy load'u kapsamlı hız optimizasyonunun bir parçası olarak ele alıyoruz.

iframe'lerin lazy load'u ne zaman uygulanmalı?

Özellikle sayfa ortasında veya alt bölümlerde yer alan YouTube videoları, Google Haritalar gömmeleri ve üçüncü taraf formlar için hemen uygulanmalıdır. Sayfanın en üstündeki iframeler için durum LCP görselleriyle aynıdır: önce test edin.

Lazy loading testi nasıl yapılır?

Chrome DevTools'u açın, "Network" sekmesine geçin ve sayfayı yükleyin. Görsellerin yalnızca kaydırma sırasında yüklendiğini "waterfall" görünümünde izleyebilirsiniz. PageSpeed Insights ve Lighthouse raporları da "defer offscreen images" önerisini gösterir.