lazy loading kullanimi: Hızlı ve Doğru Uygulama Rehberi

lazy loading kullanimi, ekranda hemen görünmeyen görsel, video ve iframe gibi kaynakların ihtiyaç duyulana kadar yüklenmesini sağlayan performans tekniğidir. Doğru uygulandığında ilk açılışta indirilen veri miktarını azaltır ve sayfanın kritik içeriğinin daha hızlı görünmesine yardımcı olur. Ancak ilk ekranda bulunan hero veya LCP görselini lazy loading ile ertelemek performansı iyileştirmek yerine kötüleştirebilir.

Önemli Noktalar

• Lazy loading, kritik olmayan kaynakların yüklenmesini erteler.
• En kolay yöntem, görsellerde native `loading=”lazy”` niteliğini kullanmaktır.
• İlk ekranda görünen görseller genellikle lazy loading dışında tutulmalıdır.
• `width` ve `height` değerleri, görsel yüklenirken sayfa kaymasını azaltır.
• `alt` metni, lazy loading kullanılsa da erişilebilirlik ve görsel SEO için gereklidir.
• JavaScript tabanlı çözümler, içerik görünürlüğü ve arama motoru erişimi açısından test edilmelidir.
• Uygulama sonrasında Lighthouse, PageSpeed Insights ve tarayıcı geliştirici araçlarıyla kontrol yapılmalıdır.

Lazy loading nedir ve nasıl çalışır?

Lazy loading, bir web sayfasındaki kaynakların hepsini ilk anda yüklemek yerine yalnızca gerekli olanları önceliklendiren yöntemdir. Kullanıcı sayfayı açtığında görünür alandaki metin, stil dosyaları ve kritik görseller yüklenir. Sayfanın aşağısında bulunan görseller veya gömülü içerikler ise kullanıcı onlara yaklaşana kadar ertelenebilir.

Bu yaklaşım, tarayıcının kritik oluşturma yolundaki gereksiz kaynakları azaltmasına yardımcı olur. MDN, lazy loading’i kritik olmayan kaynakları ihtiyaç anına kadar erteleyerek ilk yükleme süresini ve ağ kullanımını azaltan bir strateji olarak tanımlar.

Örneğin uzun bir blog yazısında 20 görsel bulunuyorsa, kullanıcı ilk açılışta yalnızca üst bölümdeki görselleri görür. Sayfanın sonunda bulunan görsellerin tümünü aynı anda indirmek, başlangıçta gereksiz ağ ve işlemci kullanımı oluşturabilir. Lazy loading, bu kaynakları kullanıcı aşağı kaydırdığında veya ilgili bölüm görünmeye yaklaştığında yükler.

lazy loading kullanimi neden önemlidir?

Lazy loading’in temel amacı, sayfanın ilk görünümünü daha hızlı ve daha verimli hâle getirmektir. Özellikle görsel ağırlıklı web sitelerinde her resmin başlangıçta yüklenmesi, mobil bağlantılarda ve düşük güçlü cihazlarda gecikmeye yol açabilir.

Ekran dışında kalan kaynakları ertelemek şu sonuçlara katkı sağlayabilir:

• İlk yüklemede daha az veri indirilmesi
• Kritik CSS, JavaScript ve yazı kaynakları için daha az ağ rekabeti
• Kullanıcının sayfayı daha erken kullanabilmesi
• Gereksiz görsel isteklerinin azaltılması
• İçerik yoğun sayfalarda daha iyi kaynak yönetimi

web.dev, ekran dışında bulunan görsellerin ve iframe’lerin ertelenmesinin ilk yüklemede kritik kaynaklarla yaşanan bant genişliği rekabetini azaltabileceğini belirtir. Bu durum bazı senaryolarda LCP değerinin iyileşmesine yardımcı olabilir.

Bununla birlikte lazy loading tek başına bir hız çözümü değildir. Büyük dosya boyutları, yanlış görsel formatı, render-blocking CSS, fazla JavaScript veya yavaş sunucu yanıtı devam ediyorsa yalnızca lazy loading eklemek beklenen sonucu vermeyebilir. Bu nedenle uygulama, genel Sayfa Hızı Optimizasyonu sürecinin bir parçası olarak ele alınmalıdır.

Hangi içerikler lazy loading ile yüklenmelidir?

Genellikle ilk ekranın altında bulunan ve sayfanın açılışı için zorunlu olmayan kaynaklar lazy loading için uygundur. Bu seçim yalnızca dosyanın türüne göre değil, sayfadaki konumuna ve işlevine göre yapılmalıdır.

Lazy loading için uygun kaynaklar

• Makale gövdesinin aşağısındaki görseller
• Ürün listelemelerinde ilk ekranda görünmeyen ürün fotoğrafları
• Kullanıcının aşağı kaydırmasıyla görünen galeri görselleri
• Sayfanın alt bölümündeki sosyal medya gömüleri
• Harita, video oynatıcı veya üçüncü taraf widget içeren iframe’ler
• Açılır panel ya da sekme içinde başlangıçta görünmeyen medya içerikleri

Görselin sayfa için anlamlı olması, lazy loading uygulanamayacağı anlamına gelmez. Görsel arama sonuçlarında görünürlük için dosyanın HTML içinde erişilebilir bir `src` değeri taşıması, anlamlı bir `alt` metnine sahip olması ve arama motorlarının işleyebileceği biçimde sunulması gerekir. Görsellerin erişilebilirlik boyutu için alt etiketi ve görsel SEO rehberine göz atılabilir.

Hangi görseller lazy loading dışında bırakılmalıdır?

İlk ekran açıldığında görünen veya sayfanın ana mesajını taşıyan görseller lazy loading ile ertelenmemelidir. Bu gruba çoğunlukla hero görseli, ana ürün fotoğrafı, üst bölüm banner’ı ve bazı logo kullanımları girer.

LCP, kullanıcının ilk bakışta gördüğü en büyük içerik öğesinin ekrana gelme süresini ölçer. web.dev, LCP adayı olan görsellere `loading=”lazy”` eklenmemesi gerektiğini açıkça belirtir; çünkü bu nitelik kritik görsel isteğini geciktirebilir.

Kısaca, “bütün görselleri lazy loading yap” yaklaşımı güvenli bir standart değildir. Her kaynağın kritikliği, görünürlük durumu ve kullanıcı yolculuğundaki rolü değerlendirilmelidir.

Native lazy loading nasıl uygulanır?

Modern HTML’de görseller için temel uygulama oldukça basittir. Ekran dışında kalması beklenen görsele `loading=”lazy”` niteliği eklenir. Tarayıcı, görseli ne zaman indirmeye başlayacağına görünür alan, bağlantı durumu ve kendi yükleme stratejilerine göre karar verir.

Örnek kullanım: ``

Bu yöntemin avantajları şunlardır:

• Ek JavaScript kütüphanesi gerektirmez.
• Uygulama ve bakım süreci daha basittir.
• Tarayıcı yükleme zamanlamasını kendi koşullarına göre yönetebilir.
• Görsel URL’si HTML içinde doğrudan bulunduğu için indekslenebilirlik daha öngörülebilir olur.

web.dev, tarayıcı seviyesinde lazy loading kullanıldığında harici bir kütüphaneye ihtiyaç kalmayabileceğini ve görsel yüklemenin JavaScript devre dışı bırakılsa bile çalışmaya devam edeceğini aktarır.

Iframe içerikleri için de “ kullanılabilir. Harita, video veya sosyal medya bileşenleri gibi üçüncü taraf kaynaklar başlangıç yükünü büyütebildiğinden, ekranın altındaki iframe’lerde bu yöntem anlamlı olabilir. Ancak iframe desteği ve davranışı tarayıcılar arasında farklılık gösterebileceği için gerçek cihazlarda test yapılmalıdır.

Görsel boyutları neden belirtilmelidir?

Lazy loading uygulamasında en sık gözden kaçan ayrıntılardan biri görselin kaplayacağı alanın önceden tanımlanmamasıdır. Tarayıcı görsel yüklenmeden önce ne kadar alan ayıracağını bilemezse görsel geldiğinde metin veya diğer bileşenler aşağı itilebilir.

Bu hareket, Cumulative Layout Shift yani CLS metriğini olumsuz etkiler. Görsel etrafında ayrılmış alan kullanmak, yükleme tamamlandığında düzenin değişmesini önlemeye yardımcı olur.

Uygulama için:

1. Görselin gerçek en-boy oranını belirleyin.
2. HTML’de `width` ve `height` değerlerini tanımlayın.
3. Duyarlı tasarım için CSS’te `max-width: 100%` kullanın.
4. Farklı görsel oranlarının aynı bileşende kaymaya neden olup olmadığını kontrol edin.
5. Mobil ve masaüstü görünümlerini ayrı ayrı test edin.

CLS denetimi için sayfa kaymalarını azaltma rehberindeki yöntemler, lazy loading uygulamasının görsel düzenle birlikte değerlendirilmesine yardımcı olabilir.

JavaScript ile lazy loading ne zaman kullanılmalı?

Native yöntem çoğu standart görsel ve iframe senaryosu için yeterlidir. Bununla birlikte CSS arka plan görselleri, özel medya bileşenleri, karmaşık galeriler veya kullanıcı etkileşimine bağlı modüller için JavaScript gerekebilir.

JavaScript tabanlı sistemlerde genellikle Intersection Observer API kullanılır. Bu API, bir öğenin görünür alana yaklaşıp yaklaşmadığını izler ve uygun zamanda kaynak yüklemesini başlatır. Eski yöntemlerde kullanılan yoğun scroll dinleyicilerine göre daha kontrollü bir yaklaşım sunabilir.

Ancak JavaScript ile çalışan bir sistem şu riskleri taşıyabilir:

• Görsel URL’si yalnızca `data-src` içinde bulunabilir.
• Script hatası görselin hiç yüklenmemesine neden olabilir.
• Google’ın oluşturduğu HTML’de içerik görünmeyebilir.
• Placeholder kalıcı hâle gelebilir.
• Ek JavaScript, beklenen performans kazancını azaltabilir.

Google Search Central, lazy-loaded içeriklerin arama motorlarından gizlenmemesi için URL Inspection Tool ile oluşturulmuş HTML’nin kontrol edilmesini önerir. Görsel veya video URL’sinin oluşturulmuş HTML’de ilgili `src` niteliğinde görünmesi, temel bir doğrulama adımıdır.

SEO açısından lazy loading kullanımı nasıl güvenli hâle getirilir?

Lazy loading doğrudan bir SEO cezası değildir. Risk, içeriğin arama motoru tarafından erişilemeyecek şekilde kurulmasından veya kritik görsellerin gereksiz yere ertelenmesinden doğar.

Güvenli uygulama için şu kriterleri kullanın:

• Ana metni yalnızca scroll olayından sonra oluşturmayın.
• Görsel URL’sini mümkünse doğrudan `src` veya `srcset` içinde verin.
• Anlamlı görsellerde açıklayıcı `alt` metni kullanın.
• LCP görselini lazy loading dışında bırakın.
• Görsel genişlik ve yüksekliğini tanımlayın.
• `picture` ve `srcset` kullanımını mobil ihtiyaçlara göre test edin.
• JavaScript bağımlı bileşenlerde oluşturulmuş HTML’yi inceleyin.
• Görsel site haritası veya standart site haritası gereksinimlerini ayrıca değerlendirin.

Lazy loading görselin indekslenmesini otomatik olarak engellemez. Fakat görselin gerçek kaynağı HTML’de hiç bulunmuyorsa veya yalnızca kullanıcı etkileşimiyle üretiliyorsa arama motoru içeriği kaçırabilir. Bu nedenle performans ile erişilebilirlik ve indekslenebilirlik aynı kontrol listesinde bulunmalıdır.

Uygulama süreci hangi adımlardan oluşur?

Başarılı bir lazy loading uygulaması, tek bir HTML niteliği eklemekten çok kaynak önceliklendirme çalışmasıdır.

1. Sayfayı envanterleyin.

Görselleri, iframe’leri, videoları ve arka plan kaynaklarını listeleyin.

1. İlk ekranı belirleyin.

Masaüstü ve mobil görünümlerde açılışta görünen öğeleri ayrı ayrı inceleyin.

1. LCP adayını tespit edin.

Hero görselinin mi, başlık bloğunun mu LCP olduğunu ölçüm araçlarıyla kontrol edin.

1. Kritik olmayan kaynakları seçin.

Ekranın altında kalan görsellere ve iframe’lere lazy loading uygulayın.

1. Boyutları ve alternatif metinleri ekleyin.

CLS riskini azaltın ve erişilebilirliği koruyun.

1. Native yöntemi önce deneyin.

Gereksiz JavaScript kütüphanelerini kaldırmayı değerlendirin.

1. Oluşturulmuş HTML’yi test edin.

Arama motorlarının içeriği ve görsel URL’lerini görebildiğinden emin olun.

1. Gerçek cihazlarda ölçün.

Farklı ekran boyutları, bağlantılar ve tarayıcılarla yükleme davranışını inceleyin.

1. Core Web Vitals sonuçlarını karşılaştırın.

LCP, CLS ve INP değerlerindeki değişimi yayın öncesi ve sonrası kontrol edin.

Lazy loading, görsel optimizasyonunun yalnızca bir bileşenidir. Görsel boyutunu küçültmek, uygun format seçmek ve doğru boyutta sunmak da aynı derecede önemlidir. Bu kapsamda WebP görsel dönüştürme rehberi dosya optimizasyonu için tamamlayıcı bir kaynak sunar.

En sık yapılan hatalar nelerdir?

Her görsele otomatik olarak lazy loading eklemek

CMS eklentileri veya tema ayarları bazen tüm görsellere otomatik olarak `loading=”lazy”` ekler. Bu ayar hero ve LCP görsellerini de kapsıyorsa ilk ekranın yüklenmesi gecikebilir. Otomatik sistemi tamamen devre dışı bırakmak yerine kritik görseller için istisna tanımlamak daha doğru olabilir.

Görsel boyutlarını boş bırakmak

Boyut tanımlanmayan görseller yükleme tamamlandığında düzeni değiştirebilir. Bu durum özellikle kart listelerinde, galerilerde ve uzun makalelerde belirginleşir.

Yalnızca JavaScript’e güvenmek

Görselin gerçek URL’sini yalnızca script ile üretmek, hata ayıklamayı ve arama motoru doğrulamasını zorlaştırır. Standart senaryolarda native HTML yaklaşımı daha düşük bakım maliyeti sunar.

Lazy loading ile dosya optimizasyonunu karıştırmak

Lazy loading, kaynağın ne zaman yükleneceğini yönetir; dosyanın boyutunu küçültmez. Büyük bir görsel, ertelenmiş olsa bile kullanıcı o bölüme geldiğinde yine ağır yük oluşturabilir.

Test yapmadan yayına almak

Tek bir masaüstü testine bakarak karar vermek yanıltıcıdır. Mobil cihaz, yavaş bağlantı, uzun sayfa, farklı viewport ve JavaScript hatası senaryoları kontrol edilmelidir.

lazy loading kullanimi için karar kriterleri

Bir kaynağa lazy loading uygulamadan önce şu soruları yanıtlayın:

• Kullanıcı sayfayı açtığında bu içerik görünür mü?
• İçerik ilk izlenim veya dönüşüm yolu için kritik mi?
• Kaynak LCP adayı olabilir mi?
• Kaynak boyutu başlangıç yükünü anlamlı biçimde artırıyor mu?
• Kullanıcı bu bölüme hiç ulaşmadan sayfadan ayrılabilir mi?
• Görselin URL’si HTML içinde erişilebilir mi?
• Yükleme sırasında ayrılmış alan korunuyor mu?
• Uygulama farklı tarayıcılarda beklenen şekilde çalışıyor mu?

Bu soruların çoğu “kritik değil” yönünde yanıtlanıyorsa lazy loading mantıklı bir adaydır. Kritik bir kaynak söz konusuysa eager veya varsayılan yükleme tercih edilmelidir.

Sonuç

Doğru lazy loading kullanimi, sayfanın başlangıçta yalnızca ihtiyaç duyduğu kaynaklara odaklanmasını sağlar. En güvenli yaklaşım; ilk ekrandaki ve LCP’ye katkı veren görselleri hemen yüklemek, ekranın altındaki medya ve iframe içeriklerini ertelemek, boyutları önceden tanımlamak ve oluşturulmuş HTML’yi test etmektir.

Performans kazanımı ancak kullanıcı deneyimi, erişilebilirlik ve SEO ile birlikte değerlendirildiğinde sürdürülebilir olur. Uygulama sonrasında LCP iyileştirme yöntemlerini ve Core Web Vitals iyileştirme rehberini kullanarak sonuçları düzenli biçimde takip edebilirsiniz.