Lazy Loading Nedir? Ne İşe Yarar?

Lazy loading, bir web sayfasındaki görsel, video veya harita gibi kaynakların yüklenmesini ihtiyaç duyulacağı ana kadar erteleyen bir performans tekniğidir. Türkçede gecikmeli yükleme olarak da bilinir. Sayfanın aşağısındaki içerikler ertelendiğinde, tarayıcının ilk açılışta indirmesi gereken veri miktarı azalabilir.

Bir ürün sayfasını düşünün. Ziyaretçi sayfayı açtığında ürünün adını, fiyatını ve ana fotoğrafını görmek ister. Sayfanın sonundaki detay galerisiyle tanıtım videosu biraz bekleyebilir.

Lazy loading’i galeriye ve videoya uyguladığınızda tarayıcı bu kaynakları ziyaretçi ilgili bölüme yaklaşırken yükler. Ana ürün fotoğrafı ise sayfa açılırken yüklenmeye başlayabilir.

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

Tarayıcı, loading=”lazy” işareti bulunan bir görselin ekranın görünen alanına ne kadar uzakta olduğuna bakar. Ziyaretçi aşağı kaydırdıkça görsel bu alana yaklaşır ve tarayıcı indirmeyi başlatır.

Görselin ekranda belirmesini beklemeden indirmeye başlayabilir. Yüklemenin ne kadar erken başlayacağını tarayıcı belirler.

Bu yöntem özellikle fotoğraf galerilerinde, uzun ürün listelerinde ve birden fazla gömülü video içeren yazılarda işe yarar. Örneğin bir okuyucu yazının sonundaki galeriye hiç ulaşmazsa, ekranın uzağında kalan bazı fotoğraflar hiç indirilmeyebilir.

Web uygulamalarında gecikmeli yükleme, JavaScript koduna da uygulanabilir. Bir yönetim panelinin rapor grafiği, kullanıcı Raporlar sekmesini açtığında indirilebilir. Görsellerdeki loading=”lazy” ayarı tarayıcıya bırakılırken, böyle bir bileşenin ne zaman yükleneceğini uygulamanın kodu belirler.

Lazy Loading ve Eager Loading Arasındaki Fark

Eager loading, kaynağın ekrandaki konumu nedeniyle yüklemenin ertelenmediği standart davranıştır. Görsellerde loading özniteliği kullanılmadığında tarayıcı bu şekilde davranır. loading=”eager” yazarak aynı davranışı açıkça belirtebilirsiniz. Bir görsele yüksek indirme önceliği vermek için kullanılan öznitelik ise fetchpriority’dir.

İlk ekranda hangi öğelerin göründüğü cihazın ekran boyutuna ve sayfanın düzenine bağlıdır. Örneğin bir kategori sayfasında masaüstünde dört ürün kartı görünürken telefonda iki kart görünebilir.

Bu yüzden kararınızı görselin HTML’deki sırasına bakarak vermek yerine sayfanın mobil ve masaüstü görünümünü kontrol edin.

HTML’de Lazy Loading Nasıl Yapılır?

Görsellerde loading=”lazy” kullanımı

Sayfanın aşağısındaki bir görseli gecikmeli yüklemek için <img> etiketine loading=”lazy” ekleyin. Tarayıcının yerleşik özelliğini kullandığınızda ayrı bir JavaScript kütüphanesi gerekmez.

<img
  src="/gorseller/keten-canta-ic-cep.webp"
  alt="Keten çantanın iç cep detayı"
  width="800"
  height="600"
  loading="lazy"
>

width ve height değerleri tarayıcıya görselin en-boy oranını bildirir. Böylece tarayıcı, dosya inmeden önce görsel için yer ayırabilir. Bu alan ayrılmadığında görsel yüklenir yüklenmez altındaki metin aşağı kayabilir.

Okuma sırasında fark edilen bu hareket, sayfadaki beklenmedik yerleşim kaymalarını ölçen Cumulative Layout Shift (CLS) metriğini olumsuz etkileyebilir.

Video ve Haritalarda Iframe Kullanımı

Sayfanın altındaki bir YouTube videosu ya da harita <iframe> ile eklenmişse, iframe etiketine de loading=”lazy” yazabilirsiniz. Sayfanın ana içeriği olan ve ilk ekranda görünen bir video için normal yükleme daha uygun olabilir.

CSS ile tanımlanan background-image öğelerine HTML’deki loading özniteliği uygulanmaz. Özel bir bileşeni ekranın görünen alanına yaklaştığında yüklemek gerekiyorsa, JavaScript’te IntersectionObserver kullanılabilir.

Claude veya ChatGPT ile Yapılan Sitelerde Lazy Loading

Claude veya ChatGPT ile oluşturduğunuz bir sitede gecikmeli yükleme, sitenin kaynak koduna eklenir. Düz HTML kullanıyorsanız ilgili <img> ve <iframe> etiketlerini düzenleyebilirsiniz.

Site React gibi bileşen tabanlı bir yapıyla hazırlanmışsa galeri, ürün kartı veya video bileşenini düzenlemek daha pratiktir.

Burada sık karşılaşılan durum, aynı ürün kartı bileşeninin hem ilk ekrandaki ürünler hem de listenin sonundaki ürünler için kullanılmasıdır. Bileşene doğrudan loading=”lazy” eklerseniz bütün kartlar aynı ayarı alır.

Bu durumda yükleme biçimini, kartın sayfada nerede kullanıldığına göre belirleyin. İlk ekrandaki görsellerin ve LCP öğesinin gecikmeli yüklenmesi açılışı yavaşlatabilir.

Claude veya ChatGPT’ye Verilebilecek Örnek Talimat

Proje dosyalarınızı veya görselleri oluşturan ilgili bileşenleri paylaştıktan sonra şu talimatı kullanabilirsiniz.

Proje dosyalarını incele. Mobil ve masaüstü yerleşimlerini dikkate alarak ilk ekranın dışında kalan görsellere ve uygun iframe’lere loading=”lazy” ekle. Kapak görselini, ana ürün fotoğrafını ve ilk ekranda görünen diğer önemli görselleri normal yüklemeye bırak. Aynı bileşen sayfanın farklı yerlerinde kullanılıyorsa yükleme biçimini kullanım yerine göre belirle. Mevcut srcset ve sizes değerlerini koru. Gerçek boyutları bilinen görsellerde eksik width ve height değerlerini tamamla. Değişen dosyaları ve tarayıcıda kontrol etmem gereken sayfaları listele.

Kodu aldıktan sonra ana sayfayı ve görsel ağırlıklı bir iç sayfayı açın. Aynı bileşen iki sayfada farklı konumlarda kullanılıyorsa, kapak görseliyle sayfa sonundaki görsellerin yükleme davranışını ayrı ayrı kontrol edin.

WordPress Sitelerinde Lazy Loading Nasıl Yapılır?

WordPress çekirdeği, uygun görsellere ve iframe’lere otomatik olarak gecikmeli yükleme uygulayabilir. İlk ekranda görünmesi muhtemel bazı öğeleri bu uygulamanın dışında tutar.

Tema, sayfa oluşturucu ve performans eklentileri de görsellerin HTML çıktısını değiştirebildiği için işe yayındaki sayfayı inceleyerek başlayın.

1. Yazının aşağısındaki bir görseli inceleyin. Görsele sağ tıklayıp İncele seçeneğini açın. <img> etiketinde loading=”lazy” görüyorsanız, tarayıcının yerleşik gecikmeli yükleme özelliği o görsel için etkindir.
2. İlk ekrandaki görseli kontrol edin. Yazının öne çıkan görseli veya ana sayfanın kapak görseli ilk ekranda görünüyorsa yüklemesini ertelemeyin. Bir performans eklentisi bu görsele lazy loading uyguluyorsa eklentinin istisna ayarını kontrol edin.
3. Özel HTML bloğunda gerekiyorsa özniteliği elle ekleyin. Yazının altına yerleştirdiğiniz bir görsel için <img> etiketine, gömülü harita için <iframe> etiketine loading=”lazy” yazabilirsiniz.
4. Önbelleği temizleyip sayfayı yeniden test edin. Ayarı değiştirdikten sonra varsa sayfa önbelleğini temizleyin. Öne çıkan görseli ve aşağıdaki bir içerik görselini yeniden inceleyin.

Özel bir WordPress teması geliştiriyorsanız, görselin loading değerini wp_get_attachment_image() çağrısında belirleyebilirsiniz.

Aynı tema şablonunda ilk ekran için eager, sayfanın aşağısındaki galeri görselleri için lazy kullanılabilir. WordPress’in mevcut çıktısı ihtiyacınızı karşılıyorsa bunun için ek bir performans eklentisi kurmanız gerekmez.

Lazy Loading SEO’yu Nasıl Etkiler?

SEO açısından iki şeyi kontrol edin. Sayfanın ana içeriği zamanında görünüyor mu? Google, ertelenen içeriğe ulaşabiliyor mu?

İlk Ekrandaki LCP Görselini Geciktirmeyin

Largest Contentful Paint (LCP), ilk ekrandaki en büyük uygun görsel veya metin öğesinin ne zaman görüntülendiğini ölçer. Bir blog yazısında bu öğe kapak görseli olabilir. Bir ürün sayfasında ise ana ürün fotoğrafı olabilir.

Bu görsele loading=”lazy” eklemek, tarayıcının indirme isteğini geciktirerek LCP’yi kötüleştirebilir. Ölçümde LCP öğesi olduğu görülen önemli bir görsel için fetchpriority=”high” kullanılabilir.

Dizine Girmesi Gereken İçeriği Tıklamaya Bağlamayın

Google Search, bir ziyaretçi gibi sayfayı kaydırmaz veya Daha fazla göster düğmesine tıklamaz. Örneğin bir e-ticaret kategorisindeki sonraki ürünler ancak düğmeye basıldığında geliyorsa, Google bu ürünleri söz konusu etkileşim üzerinden keşfedemez.

Sonsuz kaydırma kullanılan bir listede her ürün grubuna kalıcı bir sayfa adresi vermek ve bu adreslere normal bağlantılar eklemek, sonraki ürünlerin keşfedilmesini kolaylaştırır. Google’ın sayfayı nasıl işlediğini Search Console’daki URL Denetleme aracıyla kontrol edebilirsiniz.

Performans ölçümünü tarama, dizine eklenme ve sayfa içi optimizasyonla birlikte ele almak için SEO nasıl yapılır? rehberine bakabilirsiniz.

Lazy Loading Nasıl Test Edilir?

1. Chrome’da Geliştirici Araçları → Network sekmesini açın. Önbelleğin sonucu etkilememesi için Disable cache seçeneğini işaretleyin ve sayfayı en üstten yeniden yükleyin.
2. Img filtresiyle görsel isteklerine bakın. İlk ekrandaki ana görselin isteği açılışta başlamalı. Ekranın uzağındaki galeriye doğru kaydırırken yeni görsel isteklerinin ne zaman başladığını gözlemleyin.
3. Aynı denemeyi mobil görünümde ve daha yavaş bir bağlantı profiliyle tekrarlayın. Galeriye ulaştığınızda görseller uzun süre boş kalıyorsa veya görsel geldiğinde metin yer değiştiriyorsa, ilgili öğenin yükleme biçimini ve boyut ayarlarını gözden geçirin.
4. PageSpeed Insights ile sayfanın LCP ve CLS ölçümlerine bakın. Kapak görseli LCP öğesiyse ve isteği geç başlıyorsa, ilk kontrol edeceğiniz yer görselin loading özniteliği olsun.