Sayfa Hızını Kurtaran Teknoloji:
Lazy Loading Nedir?
Aşağı kaydırınca yüklenecek
Bu Rehberde Ne Öğreneceksin?
Bu rehberin sonunda, sitendeki görsellerin sayfa açılış hızını nasıl yok ettiğini anlayacak ve sadece basit bir ayarla görünmeyen fotoğrafları bekleterek site hızını saniyeler içinde nasıl uçuracağını sıfırdan öğrenmiş olacaksın. Hazırsan başlayalım.
Lazy Loading (Tembel Yükleme) Nedir?
Bir web sitesine girdiğinde, sayfanın bir anda açılmadığını, takıldığını ve beyaz bir ekrana bakakaldığını hiç yaşadın mı? Büyük ihtimalle o site, senin görmediğin en alttaki fotoğrafları bile indirmeye çalışıyordu.
İnternetteki çoğu web sayfası uzun bir kağıt rulosu gibidir. Sen siteye girdiğinde sadece o rulosunun en üst kısmını (telefonunun veya bilgisayarının ekranına sığan bölümü) görürsün. Aşağı indikçe diğer kısımlar karşına çıkar. Ancak standart bir web sitesi, sen siteye girer girmez, sayfanın en altındaki 50. fotoğrafı bile anında indirmeye çalışır. Tarayıcı (Google Chrome, Safari gibi internete girdiğin programlar) tüm bu fotoğrafları aynı anda indirmeye çalıştığı için de site felç olur.
İşte Lazy Loading, bu sorunu çözen akıllı bir sistemdir. Türkçe çevirisi "Tembel Yükleme" olan bu teknoloji, aslında tembel değil, son derece verimlidir. Sistem tarayıcıya şunu söyler: "Sadece kullanıcının şu an ekranda gördüğü fotoğrafları indir. Aşağıdaki fotoğrafları şimdilik boş ver. Kullanıcı aşağı doğru kaydırdıkça, fotoğraf ekrana girmek üzereyken onu indir."
Bu basit mantık, sitemizin sayfa açılış hızını inanılmaz derecede iyileştirir.
Lazy Loading, bir web sayfasındaki görsel veya videoların, sayfa ilk açıldığında değil; sadece kullanıcı sayfayı aşağı kaydırıp o içeriği görmek üzere olduğunda yüklenmesini sağlayan bir performans optimizasyonu tekniğidir.
Eski Yöntem vs. Güncel Yaklaşım
- ❌ Kullanıcı siteye girdiği an, sayfanın en altındaki 30 görsel birden indirilmeye başlanır.
- ❌ Tarayıcı tüm fotoğrafları indirmeye odaklandığı için yazılar bile ekrana geç gelir.
- ❌ Kullanıcı sayfayı hiç aşağı kaydırmadan çıksa bile, görmediği fotoğrafların internet kotasını harcamış olur.
- ✅ Kullanıcı siteye girdiğinde sadece o an ekrana sığan 1-2 görsel indirilir.
- ✅ İndirilecek dosya sayısı az olduğu için site anında (ışık hızında) açılır.
- ✅ Ziyaretçi aşağı kaydırdıkça, bir sonraki görsel yaklaşırken "tam zamanında" indirilir, kota ve hız israfı önlenir.
Bilmen Gereken Terimler
Basitçe açıklıyoruz, ezberlemene gerek yok.
Cihazının (telefon veya monitör) ekranında o an gördüğün, fiziksel görülebilir alandır.
Site açıldığında, sen sayfayı hiç aşağı kaydırmadan önce ekranda gördüğün "üst kısımdır".
Asıl görsel yüklenene kadar onun yerine tutulan boş kutu veya gri arka plandır.
Ekranda gördüğün en büyük öğenin (genelde ana fotoğraf) yüklenme süresidir. Google için çok önemlidir.
Lazy Loading Neden Bu Kadar Önemli?
Nasıl Çalışır? (Bir Restoran Örneği)
Açık büfe bir restorana gittiğini düşün. Garson, yiyip yemeyeceğini bilmeden menüdeki tüm yemekleri aynı anda masana yığarsa ne olur? Masa dolar, yemekler soğur ve asıl yemek istediğin şeye ulaşman zorlaşır.
İnternet siteleri de böyledir. Sunucu (web sitenin dosyalarını barındıran ana bilgisayar), sen daha sayfaya yeni girmişken en alttaki görseli sana göndermeye çalışırsa, hat tıkanır. Lazy Loading ise garsonun sadece sipariş ettiğin yemeği, tam sen onu yiyeceğin zaman sıcak sıcak getirmesidir.
Bir web sayfasının ağırlığının yaklaşık %60'ını görseller oluşturur. Yani bir sitenin yavaşlamasının 1 numaralı sebebi, doğru optimize edilmemiş ve gereksiz yere hemen yüklenen fotoğraflardır. Görsel SEO'sunu kurgularken ilk yapman gereken şey yükü hafifletmektir.
Eskiden Nasıl Yapılırdı, Şimdi Nasıl Yapılıyor?
Eskiden Lazy Loading yapabilmek için sayfaya karmaşık JavaScript (Sitelere hareket katan ve görevler atayan bir kodlama dili) dosyaları eklemek zorundaydık. Sistem sürekli "Kullanıcı nereye kaydırdı?" diye sayfayı dinlerdi ve bu durum bazen siteyi daha da yorardı.
Ancak günümüzde işler çok kolaylaştı. Google Chrome ve Safari gibi modern tarayıcılar artık "Native (Yerleşik) Lazy Loading" özelliğini destekliyor. Yani tarayıcılar bu işi kendi içlerinde otomatik olarak yapıyorlar. Tek yapman gereken, görsel kodunun içine loading="lazy" yazısını eklemektir.
Kritik Bir Hata: Her Şeyi Tembel Yüklemeyin!
Sayfaya girer girmez ekranda ilk görünen görselleri (örneğin sitenin logosu veya sayfanın en üstündeki dev manşet fotoğrafı) ASLA Lazy Load yapmamalısın. Bu öğeler "Above the Fold" alanındadır ve hemen yüklenmelidir. Eğer bunlara da "bekle" dersen, sayfan geç açılır ve Google seni cezalandırır.
Sadece Görseller İçin mi Geçerlidir?
Hayır! Sitenin yavaşlamasına sebep olan başka bir devasa yük daha vardır: İframe'ler (Senin sitenin içine başka bir siteden pencere açan kod yapısı). Örneğin sitene eklediğin bir YouTube videosu ya da Google Haritalar penceresi. Bunlar arka planda yüzlerce gereksiz kod çalıştırır. Videolara ve haritalara da Lazy Loading uygulayarak siteni devasa bir yükten kurtarabilirsin.
Uygulama Adımları
Hadi şimdi bunu sitene nasıl uygulayacağını adım adım, hiçbir şey atlamadan öğrenelim.
Sitenin Mevcut Durumunu Ölç
Önce sorunun ne kadar büyük olduğunu görmeliyiz. Google PageSpeed Insights (Sitenin hızını ve performansını puanlayan Google aracı) sayfasını aç ve sitenin adresini yapıştır.
Sonuç ekranında "Ekran dışındaki resimleri erteleyin" (Defer offscreen images) şeklinde kırmızı bir uyarı görüyorsan, sitende Lazy Loading yok demektir.
Native HTML Kodunu Anla
Eğer siteni özel bir yazılımla (kodlayarak) yapıyorsan işin çok kolay. Görseli sayfaya çeken klasik "img" etiketinin içine sadece bir özellik (attribute) ekleyeceksin.
Tarayıcı bu kodu gördüğünde, "Tamam, bu resmi hemen indirmeme gerek yok, kullanıcı aşağı inince hallederim" der.
<img src="foto.jpg" alt="Doğa manzarası">
<!-- Lazy Loading eklenmiş görsel (Hızlı) -->
<img src="foto.jpg" alt="Doğa" loading="lazy">
WordPress Kullanıyorsan Şanslısın
Eğer siten WordPress altyapısındaysa (Dünyadaki web sitelerinin yarısını çalıştıran hazır site sistemi), WordPress 5.5 sürümünden beri bu özellik sisteme otomatik olarak dahil edilmiştir.
Sisteme yüklediğin tüm resimlere WordPress otomatik olarak loading="lazy" kodunu ekler. Senin ekstra bir kod yazmana gerek kalmaz.
Buraya kadar geldiysen temel mantığı kavradın; görsellere loading="lazy" ekliyoruz ve hızlanıyoruz, çok basit değil mi? Ama bu noktadan sonra işin tehlikeli kısmı devreye giriyor. Birçok acemi kullanıcı, hız eklentilerini kurup "Tüm görselleri geciktir" tuşuna basar ve sitenin açılış (LCP) hızını tamamen mahveder. Çünkü ekranın en üstündeki ilk fotoğrafı geciktirmek, Google'ın gözünde ölümcül bir hatadır. Sonraki adımlara çok dikkat et.
Profesyonel Bir Eklenti Seç (WP İçin)
WordPress'in kendi özelliği bazen kullandığın temanın yapısıyla çakışabilir. Bu yüzden kontrolü ele almak için WordPress hızlandırma eklentilerinden birini kullanmalısın.
Örneğin LiteSpeed Cache, WP Rocket veya Smush gibi eklentilerin ayarlarında "Media" veya "Görseller" sekmesine girip Lazy Load'u aktif et.
İlk Görselleri Hariç Tut (Exclude)
Bu en önemli adımdır! Kurduğun hız eklentisinin "Exclude" (Hariç Tut) bölümünü bul. Sitenin logosunun dosya adını (örnek: logo.png) veya sayfaya girer girmez ekranda beliren ilk büyük manşet fotoğrafının sınıfını buraya yaz.
Böylece sistem aşağıdaki fotoğrafları bekletirken, üsttekileri anında yükleyecektir.
Sonucu Test Et
Ayarları kaydettikten sonra siteni gizli sekmede aç. Sayfayı hızlıca aşağı kaydır. Fotoğrafların sen indikçe saniyenin onda biri sürede belirdiğini (veya bir yüklenme ikonu çıktığını) göreceksin.
Tekrar PageSpeed aracıyla test yap ve o kırmızı uyarının kaybolup puanının arttığını kutla!
"Sayfanıza eklediğiniz her yüksek çözünürlüklü görsel sunucuya binen bir yüktür. Lazy Loading bu yükü yok etmez, sadece ziyaretçi ona bakana kadar onu görünmez kılar."
Sık Sorulan Sorular
Lazy Loading SEO'ya zarar verir mi? ↓
Kesinlikle hayır, aksine çok büyük fayda sağlar. Google botları (siteni tarayan otomatik yazılımlar) Lazy Loading yapılmış görselleri anlayacak kadar zekidir. Siten hızlı açıldığı için Google seni ödüllendirir ve sıralamanı yükseltir.
Her fotoğrafı geciktirmeli miyim? ↓
Hayır. Sayfa ilk yüklendiğinde kullanıcının direkt gördüğü üst kısımdaki (above the fold) fotoğraflara bu işlem uygulanmaz. Eğer uygularsanız, ziyaretçi siteye girdiğinde ana resmi görmek için gereksiz yere bekler. Sadece aşağı kaydırdıkça çıkacak olan fotoğraflara uygulanmalıdır.
Mobilde ve masaüstünde aynı mı çalışır? ↓
Evet, teknik aynıdır. Ancak mobil cihazların ekranı daha küçük olduğu için "ekranda görünen alan" (viewport) değişir. Lazy Loading mobil için çok daha hayatidir çünkü telefonların internet bağlantısı genellikle bilgisayarlardan daha yavaştır.
Bu işlemi yapmak için kod bilmek zorunda mıyım? ↓
Eğer WordPress, Shopify, Ticimax gibi hazır sistemler kullanıyorsan kod bilmene gerek yoktur. Çoğu sistem bunu otomatik yapar veya tek bir tuşla eklenti üzerinden aktifleştirilebilir.
Videolar için de Lazy Loading yapılır mı? ↓
Evet, özellikle sitenize gömdüğünüz YouTube veya Vimeo videoları sayfayı inanılmaz derecede yavaşlatır. İframe Lazy Loading ayarını açarak videoların sadece kullanıcı onlara doğru kaydırdığında yüklenmesini sağlayabilirsiniz.
Kullanıcı sayfayı çok hızlı kaydırırsa fotoğraflar bozuk mu görünür? ↓
İyi yapılandırılmış bir sistem, fotoğrafı tam ekrana girmeden (örneğin ekrana 300 piksel kala) yüklemeye başlar. Böylece kullanıcı ne kadar hızlı kaydırırsa kaydırsın görsel yetişir. Eğer fotoğraf gelene kadar boşluk görünüyorsa, oraya gri bir kutu veya hafif bulanık bir önizleme (placeholder) konulur.
Metinler (yazılar) de tembel yüklenir mi? ↓
Hayır. Metin dosyaları kilobayt seviyesinde çok küçük boyutludur ve anında yüklenir. Lazy loading sadece görseller, videolar ve ağır iframe kodları (haritalar vb.) için kullanılır.
E-ticaret sitelerinde kullanılmalı mı? ↓
Kesinlikle evet! Bir e-ticaret sitesinin kategori sayfasında 40 tane ürün fotoğrafı olabilir. Bunların hepsini aynı anda yüklemeye çalışırsanız müşteri sıkılıp sayfadan çıkar. Lazy Loading e-ticaret sitelerinin can damarıdır.
Arka plan görselleri (Background Image) geciktirilebilir mi? ↓
Standart HTML kodu olan loading="lazy" sadece img (resim) etiketlerinde çalışır. CSS dosyası üzerinden eklenen arka plan görselleri için özel yazılımlar veya WP Rocket gibi gelişmiş eklentiler kullanmanız gerekir.
Lazy Loading ayarını açtım ama sitem hala yavaş, neden? ↓
Sitenizin yavaş olmasının tek sebebi alttaki görseller olmayabilir. Sunucunuz yavaş olabilir, gereksiz kodlar (JavaScript) sitenizi tıkıyor olabilir veya ilk yüklenen görselleriniz çok yüksek boyutludur. Site hızı bütüncül bir çalışmadır.
Desteğe mi İhtiyacın Var? Buradayım.
Buraya kadar okuduysan konuyu artık biliyorsun. Uygulamaya geçerken takılırsan, ilk görseli hariç tutma (exclude) ayarını yapamazsan ya da siteni bir türlü hızlandıramıyorsan, birlikte hızlandıralım.
Gökhan Vatancı ile Görüş →
