Lazy Loading Nedir ve Nasıl Kullanılır?

Lazy loading (geç yükleme), bir sayfadaki görsel ve video gibi ağır kaynakların, kullanıcı o bölüme yaklaşana kadar yüklenmesini erteleyen bir tekniktir. Sayfa açıldığında yalnızca ilk ekrandaki içerik indirilir; kullanıcı aşağı kaydırdıkça diğer kaynaklar sırayla yüklenir.

Bu basit fikrin etkisi büyüktür: ilk yükleme hafifler, sayfa daha hızlı açılır, veri kotası boşa harcanmaz ve sunucu gereksiz isteklerden kurtulur. Özellikle görsel ağırlıklı blog ve e-ticaret sitelerinde en yüksek getirili optimizasyonlardan biridir.

Somut bir örnek üzerinden düşünelim: kırk görsel içeren bir blog yazısında klasik yüklemeyle tarayıcı, kırk görselin tamamını sayfa açılır açılmaz indirmeye başlar. Kullanıcı yalnızca ilk üçünü görecek olsa bile indirme sürer, veri kotası boşa harcanır ve açılış gecikir. Lazy loading'de ise yalnızca ilk birkaç görsel yüklenir; kalanı kullanıcı kaydırdıkça gelir.

Bu rehberde lazy loading'in nasıl çalıştığını, uygulama yöntemlerini ve SEO açısından dikkat edilmesi gereken noktaları anlatacağız. Genel SEO çerçevesi için SEO Nedir? yazımıza göz atabilirsiniz.

Lazy Loading Nedir?

Standart bir sayfada tarayıcı, HTML içinde geçen tüm görselleri sayfa açılır açılmaz indirmeye başlar; kullanıcı o görselleri hiç görmeyecek olsa bile. Lazy loading bu davranışı değiştirir: kaynak, görünürlük alanına girene kadar beklemede kalır.

Teknik arka planda iki ana mekanizma vardır: tarayıcının yerleşik desteği ve JavaScript tabanlı gözlem. Hangisi kullanılırsa kullanılsın amaç aynıdır: önce görüneni yükle, kalanı gerektiğinde getir.

Lazy loading'i komşu kavramlardan ayırmakta fayda var: önbellekleme tekrar ziyaretleri hızlandırırken, geç yükleme ilk ziyareti hızlandırır. İkisi birbirinin yerine geçmez; birlikte kullanıldığında ise birbirini tamamlar.

Bu yaklaşım yalnızca görsellerle sınırlı değildir; iframe'ler, haritalar, videolar ve hatta yorum blokları gibi ağır bileşenler de aynı mantıkla ertelenebilir. Erteleme kapsamını sayfanın yapısına göre seçmek size kalmıştır.

Örneğin gömülü bir YouTube videosu, sayfaya gömülü kaldığı sürece sayfa açılışında hatırı sayılır yük üretir. Video yerine önizleme görseli göstermek ve kullanıcı tıkladığında gerçek videoyu yüklemek, aynı mantığın medya dünyasındaki karşılığıdır.

Tekniğin kısa tarihi de faydalıdır: yıllarca JavaScript kütüphaneleriyle kurulan bu davranış, 2019'da Chrome'un yerleşik destek getirmesiyle birlikte tek bir HTML özniteliğine indi. Bugün tüm modern tarayıcılar bu özniteliği destekliyor; ek kütüphane ihtiyacı büyük ölçüde ortadan kalktı.

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

Yerleşik yöntem son derece basittir: görsel etiketine loading="lazy" özniteliğini eklemek yeterlidir. Modern tarayıcılar bu işareti görünce görseli, kullanıcının ekranına yaklaşana kadar erteleyerek yükler; hiçbir ek kütüphane gerekmez.

JavaScript tabanlı yöntem ise IntersectionObserver API'sini kullanır: bir betik, sayfadaki görselleri izler ve görünürlük alanına girenlerin gerçek adresini yükler. Bu yöntem daha eski tarayıcılarda da çalışır ve davranış üzerinde daha fazla kontrol sunar.

Görsellerin HTML'de boyutlarının tanımlı olması, her iki yöntem için de önemlidir: boyut bilinmezse tarayıcı sayfa düzenini kuramaz ve içerik kayması yaşanır. Erteleme ve düzen kararlılığı birlikte planlanmalıdır.

Hata senaryolarına da hazırlıklı olun: ağ kesintisi ya da yavaş bağlantıda geç yüklenen görseller bir süre boş görünebilir. Bu yüzden her görsele anlamlı bir alt metin ve gerektiğinde düz renk bir yer tutucu arka plan tanımlayın; kullanıcı boşluğu asla hissetmemeli.

Tarayıcıların erteleme davranışında küçük bir incelik vardır: görseller, tam ekrana girene kadar değil, ekrana yaklaştığı anda yüklenmeye başlar. Böylece kullanıcı kaydırırken görsellerin boşluğunu değil, hazır içeriği görür; bu ön yükleme payı deneyimin kesintisizliğini sağlar.

Önbelleğe alma katmanı da sürecin bir parçasıdır: kullanıcı sayfayı ikinci kez ziyaret ettiğinde, geç yüklenen görseller de dahil olmak üzere kaynakların büyük bölümü yerel önbellekten gelir. Böylece erteleme yalnızca ilk ziyareti değil, tekrarlayan ziyaretleri de dolaylı olarak hızlandırır.

Lazy Loading'in Faydaları

• Daha hızlı ilk yükleme: Tarayıcı yalnızca gerekli kaynakları indirir; sayfa kullanıcıya daha erken hazır olur.
• Veri tasarrufu: Kullanıcı hiç görmediği görselleri indirmez; mobil veri kotaları korunur.
• Daha düşük sunucu yükü: İstek sayısı azaldıkça sunucu ve bant genişliği maliyeti düşer.
• Daha iyi kullanıcı deneyimi: İlk ekran hızla gelir; kaydırma deneyimi kesintisiz sürer.
• Daha verimli tarama: Hızlı sayfalar arama motoru botlarının da işini kolaylaştırır.

Mobil bağlamda bu faydalar katlanır: mobil ağların değişkenliği ve veri kotası duyarlılığı, ertelemenin değerini artırır. Mobil deneyimin bütüncül çerçevesini Mobil SEO Nedir ve Neden Önemlidir? yazımızda ele aldık.

Faydaların ölçümü de basittir: ertelemeyi kurmadan önce ve sonra PageSpeed Insights'tan sayfa ağırlığını ve ilk yükleme süresini kaydedin. Görsel ağırlıklı sayfalarda farkın aynı gün içinde görünür olması, tekniğin popülerliğinin nedenidir.

Dönüşüm tarafında da kazanç görülür: ilk ekranın hızlı gelmesi, kullanıcının sayfayı terk etmeden içeriğe ve ürünlere ulaşmasını sağlar. Özellikle ürün listesi sayfalarında kaydırma hızı, doğrudan görüntülenen ürün sayısını artırır. Bu da geç yüklemeyi yalnızca teknik bir iyileştirme değil, ticari bir yatırım haline getirir.

Lazy Loading Nasıl Uygulanır?

Uygulama için sitenizin yapısına göre dört yoldan birini seçebilirsiniz:

1. Yerleşik öznitelik: Görsel etiketlerine loading="lazy" ekleyin; en kolay ve en az riskli yoldur.
2. IntersectionObserver betiği: Davranışı ince ayarla kontrol etmek istiyorsanız küçük bir betikle tüm görselleri yönetin.
3. CMS eklentileri: WordPress gibi sistemlerde olgun eklentiler, yapılandırmayı birkaç tıkla kurar.
4. Framework desteği: React ve Vue gibi çatılarda yerleşik erteleme bileşenlerini kullanın.

Ertelemeyi diğer tekniklerle birlikte düşünün: sık kullanılan kaynakların tekrar tekrar indirilmesini önleyen Tarayıcı Önbellekleme (Browser Caching) Nedir? yazımızdaki yapılandırmalar, erteleme ile birlikte en yüksek verimi üretir. İkisi farklı sorunu çözer: biri ilk yüklemeyi hafifletir, diğeri tekrarları ortadan kaldırır.

Uygulama sonrası test listenizi hazır tutun: görsellerin kaydırdıkça düzgün yüklendiğini, sayfada boş alanlar kalmadığını ve ilk ekranın anında geldiğini gerçek bir telefon üzerinden doğrulayın. Otomasyon araçları göstermez, gerçek cihaz gösterir.

İlginç bir karşılaştırma da AMP'dir: AMP Nedir ve Hala Gerekli mi? yazımızda anlattığımız çerçevede geç yükleme varsayılan davranıştır. Standart sitelerde ise aynı kazancı yukarıdaki yöntemlerle, kısıt olmadan elde edersiniz.

SEO Açısından Dikkat Edilmesi Gerekenler

En kritik kural: ilk ekrandaki ana görseli ertelemeyin. LCP (Largest Contentful Paint) metriğini belirleyen o görseldir; ertelerseniz sayfanızın algılanan hızı ciddi biçimde geriler. Bu metriklerin tamamını Core Web Vitals Nedir? yazımızda açıkladık.

Googlebot da sayfayı tararken kaydırmayı simüle edebildiği için geç yüklenen içerik dizine alınabilir; yine de kritik içerikleri ertelemeye bağımlı kılmayın. Sayfanın anlamını taşıyan metinler her zaman ilk HTML içinde yer almalıdır.

Görsel aramaları da unutmayın: geç yükleme, görsellerin Google Görseller'de dizinlenmesini engellemez; görseller yine taranır ve kendi sonuçlarında gösterilebilir. Yine de görsel dosya adlarını ve alt metinlerini doğru doldurmak, bu kanalın performansını belirler.

Hızlı sayfalar botun işini de kolaylaştırır; tarama verimliliği ile sayfa hızı arasındaki ilişkiyi Crawl Budget (Tarama Bütçesi) Nedir? yazımızda ele aldık. Erteleme, bu verimliliğe katkı veren tekniklerden biridir.

Uygulamada sık sorulan bir soru da şudur: WordPress gibi hazır sistemlerde ne yapılmalı? Çoğu modern tema yerleşik ertelemeyi zaten etkinleştirir; eklenti kullanıyorsanız yalnızca bu işi yapan hafif bir eklenti seçin. Ağır "hepsi bir arada" optimizasyon eklentileri, kazandırdıklarından fazlasını tüketebilir.

Değişiklikleri canlıya almadan önce bir test ortamında deneyin; özellikle JavaScript tabanlı çözümlerde betiğin sayfa yükünü artırmadığından emin olun. Doğru kurgulanmış bir erteleme, sayfaya neredeyse sıfır ek yük bindirir ve bakım maliyeti de üretmez.

Sık Yapılan Hatalar

• Ana görseli ertelemek: İlk ekran görseline lazy loading uygulamak, LCP'yi bozar ve hız kazancını tersine çevirir.
• Boyut tanımı olmadan ertelemek: Yer ayrılmamış görseller, yüklendikçe sayfa düzenini kaydırır.
• Tüm görselleri kütüphaneyle ertelemek: Yerleşik öznitelik varken ağır bir JavaScript kütüphanesi eklemek gereksiz yüktür.
• Noscript alternatifini unutmak: JavaScript'in kapalı olduğu ortamlarda içerik tamamen görünmez kalabilir.
• Erteleme sonrasını test etmemek: Uygulama sonrası sayfa hızını ve görsellerin açılışını kontrol etmeden işi bitmiş saymak hatadır.
• Her şeyi ertelemek: Küçük simgeler ve kritik görseller için erteleme gereksiz karmaşıklıktır; ertelemeyi ağır kaynaklara saklayın.

Sıkça Sorulan Sorular

Lazy loading SEO'ya zarar verir mi?

Doğru uygulandığında zarar vermez, fayda sağlar. Riskli olan yanlış uygulamadır: ana görselin ertelenmesi ve boyut tanımı eksikliği deneyimi bozar. Google, geç yüklenen içeriği işleyebilir; yine de kritik içerik ilk HTML'de bulunmalıdır.

Ölçüm tarafında da iz bırakın: Search Console'un sayfa deneyimi raporunda ve analitik aracınızda görsel ağırlıklı sayfaların performansını erteleme öncesi-sonrası karşılaştırın. Sayfa ağırlığındaki düşüş, tekniğin çalıştığının en dürüst kanıtıdır.

Hangi içerikler ertelenmemeli?

İlk ekrandaki hero görseli, başlığın hemen altındaki ana görsel ve sayfanın anlamını taşıyan kritik görseller ertelenmemelidir. Kural basittir: kullanıcının ilk gördüğü şey anında yüklenir, gerisi bekleyebilir.

Karar vermekte zorlanıyorsanız sayfanızı üç bölgeye ayırın: ilk ekran (asla erteleme), ilk kaydırma (küçük ön yükleme payıyla erteleme) ve derin içerik (tam erteleme). Bu bölgeleme, küçük sitelerden büyük projelere kadar her ölçekte pratik ve güvenilir bir yol haritasıdır.

Son bir hatırlatma: geç yükleme, kalitesiz görsellerin kusurunu örtmez. Sıkıştırılmamış dev dosyaları ertelemek yalnızca sorunu geciktirir; önce görselleri optimize edin, sonra yüklemelerini erteleyin. Doğru sıralama bu şekilde çalışır.

Lazy loading için eklenti şart mı?

Hayır. Modern tarayıcılarda loading="lazy" özniteliği tek başına yeterlidir; eklenti yalnızca eski tarayıcı desteği veya ince ayarlı davranış gerektiğinde anlamlıdır.

Videolara da lazy loading uygulanabilir mi?

Evet; videolarda en verimli yaklaşım, video yerine önizleme görseli yükleyip kullanıcı tıkladığında gerçek videoyu başlatmaktır. Bu hem hızı korur hem veri kullanımını ciddi biçimde azaltır. Ayrıca video yerine görsel yüklemek, ilk ekranın görünme süresini de iyileştirir; kullanıcı boş bir kutu yerine anlamlı bir önizleme görür.

Sonuç olarak lazy loading, doğru uygulandığında hız ve deneyim kazandıran en basit teknik optimizasyonlardan biridir. Sitenizin görsel yükünü profesyonelce yönetmek istiyorsanız, SEO Eğitim ekibiyle iletişime geçebilirsiniz.