WordPress'te Lazy Load ile Gecikmeli Yukleme

Uzun bir blog yazısını ya da onlarca ürünün sıralandığı bir kategori sayfasını düşünün: tarayıcı, ziyaretçi henüz hiçbirini görmeden sayfadaki bütün görselleri, videoları ve gömülü içerikleri baştan indirmeye kalkarsa, ilk ekranın belirmesi gereksiz yere gecikir. Oysa ziyaretçinin ilk saniyede gördüğü tek şey, ekranın en üstündeki küçük bir alandır. Aşağıda gizli duran yirmi görsel için baştan bekletilmek, hem kullanıcıyı sinirlendirir hem de mobilde ölçtüğünüz hız puanını aşağı çeker. İşte lazy load, tam olarak bu israfı ortadan kaldırmak için vardır.

Bu rehberde tembel yükleme (lazy load) diye adlandırılan bu tekniğin perde arkasında nasıl çalıştığını, ilk açılışı neden bu kadar belirgin biçimde hızlandırdığını ve WordPress tarafında hangi seçeneklere sahip olduğunuzu adım adım ele alacağız. WordPress'in kutudan çıkan loading="lazy" desteğinden gelişmiş eklenti çözümlerine, iframe ve videoların ertelenmesinden LCP görselini kapsam dışında bırakma inceliğine kadar her başlığı, bir sunucu yöneticisinin müşterisine anlatacağı sadelikte ve uygulamalı örneklerle işleyeceğiz. Amaç yalnızca "şu ayarı aç" demek değil; hangi durumda neyin işe yaradığını görüp kendi sitenizde doğru kararı verebilmenizi sağlamak.

Lazy Load Nedir ve Nasıl Çalışır?#

Lazy load, Türkçesiyle tembel yükleme, bir web sayfasındaki ağır kaynakları (öncelikle görseller, ardından iframe ve videolar) yalnızca ihtiyaç duyulduğu anda indirme tekniğidir. "İhtiyaç anı" genellikle şu demektir: ilgili öğe, ziyaretçinin ekranına (görüntü alanına, yani viewport'a) girmek üzeredir. Ziyaretçi sayfayı aşağı kaydırdıkça, o ana kadar boş bekleyen görseller sırayla yüklenir.

Klasik davranışta tarayıcı, sayfanın HTML'ini okurken karşılaştığı her <img> etiketini hemen indirmeye başlar. On beş görselli bir sayfada bu on beş ayrı isteğin peşinen açılması demektir. Lazy load devredeyken tarayıcı, ekran dışındaki görselleri işaretler ve indirmeyi erteler; yalnızca ilk ekranda görünenleri hemen çeker. Bunu mümkün kılan mekanizma, modern tarayıcılardaki IntersectionObserver adlı bir gözlemcidir. Bu gözlemci, bir öğenin görüntü alanına ne kadar yaklaştığını izler ve öğe belirlenen eşiğe geldiğinde yükleme tetiklenir.

Sonuç olarak sayfa iki aşamada dolar: önce ziyaretçinin gördüğü kritik kısım hızla belirir, geri kalanı ise ziyaretçi kaydırdıkça arka planda tamamlanır. Kullanıcı çoğu zaman bu ikinci aşamanın farkına bile varmaz; onun deneyimi, sayfanın "hemen açıldığı" yönündedir.

Lazy Load Sayfayı Neden Hızlandırır?#

Tembel yüklemenin kazancı, tek bir sayının küçülmesinden gelir: ilk açılışta indirilmesi zorunlu veri miktarı. İlk ekranda gerekmeyen her görseli erteleyerek tarayıcının başlangıçta çektiği toplam baytı ciddi biçimde düşürürsünüz. Bu doğrudan üç yerde hissedilir.

• İlk ekran daha erken belirir. Tarayıcı, gizli görseller için bant genişliği ve bağlantı harcamak yerine bütün gücünü ekrandaki içeriğe ayırır. Bu da ilk anlamlı çizimin (First Contentful Paint) hızlanması demektir.
• Mobil ve zayıf bağlantıda fark büyür. Sınırlı bir 4G şebekesinde her fazladan istek pahalıdır. Lazy load, veri kotasını ve pil ömrünü de koruyarak mobil deneyimi belirgin biçimde rahatlatır.
• Sunucu ve CDN yükü azalır. Ziyaretçilerin çoğu sayfanın en altına kadar kaydırmaz. Alttaki görseller çoğu zaman hiç indirilmez; bu da boşa giden bant genişliğini ortadan kaldırır.

Aşağıdaki tablo, tembel yüklemenin devrede olup olmamasının aynı sayfada nasıl bir fark yarattığını kabaca özetliyor.

Lazy load'i, bir WordPress sitesini hızlandıran bütünün bir parçası olarak görmek doğru olur. Önbellekleme, görsel sıkıştırma ve CDN gibi adımlarla birlikte uygulandığında etkisi katlanır; konunun tamamını WordPress hız optimizasyonu rehberimizde bütün adımlarıyla ele aldık.

WordPress'in Yerleşik loading="lazy" Desteği#

İyi haber şu: pek çok site için ekstra hiçbir şey kurmanıza gerek yok. WordPress, 5.5 sürümünden (2020'den) beri görsellere otomatik olarak loading="lazy" özniteliğini ekler. Bu, tarayıcının kendi doğal lazy load mekanizmasını devreye sokan standart bir HTML özelliğidir ve arka planda JavaScript çalıştırmadan işini görür.

Sitenizin bu desteği kullanıp kullanmadığını anlamak çok kolaydır. Bir yazı sayfasını açın, sayfa üzerinde sağ tıklayıp "Sayfa kaynağını görüntüle" deyin ve görsel etiketlerine bakın. Aşağıdakine benzer bir çıktı görüyorsanız her şey yolunda demektir.

<img src="urun-gorseli.webp"
     width="800" height="600"
     loading="lazy" decoding="async"
     alt="Ürün görseli">

Buradaki loading="lazy" özniteliği tembel yüklemeyi açan asıl anahtardır. Yanındaki decoding="async" ise tarayıcının görseli çözerken ana iş parçacığını kilitlememesini sağlar; ikisi birlikte akıcı bir yükleme sunar. width ve height değerlerinin etiket üzerinde bulunması da kritik bir ayrıntıdır: tarayıcı görselin kaplayacağı alanı önceden bildiğinden, görsel yüklenince sayfa zıplamaz ve düzen kaymasını ölçen CLS değeriniz bozulmaz.

Komut satırına erişiminiz varsa, yerleşik desteğin çıktıya yansıyıp yansımadığını hızlıca da denetleyebilirsiniz.

# Bir yazı sayfasındaki lazy işaretli img etiketlerini sayar
curl -s https://siteniz.com/ornek-yazi/ | grep -o 'loading="lazy"' | wc -l

Bu sayı sıfırdan büyükse yerleşik lazy load çalışıyordur. Nadiren bazı temalar veya sayfa oluşturucular kendi görsellerini WordPress'in standart işleyişinden geçirmeden çıktığı için bu özniteliği koymayabilir; böyle bir durumda bir sonraki bölümdeki eklenti çözümleri devreye girer.

LCP Görselini Lazy Load Dışında Tutmak#

Burası, çoğu kişinin gözden kaçırdığı ama performans açısından belki de en önemli inceliktir. Lazy load'i "ne kadar çok görselde açarsam o kadar iyidir" diye düşünürseniz ters teper. Çünkü sayfanın en üstünde, ilk ekranda görünen ana görsel (bir kapak/hero fotoğrafı, ürün sayfasındaki büyük görsel ya da blog yazısının öne çıkan görseli) çoğu zaman Google'ın ölçtüğü LCP (Largest Contentful Paint) öğesidir.

Bu görseli de tembel yüklemeye dahil ederseniz, tarayıcı onu ertelemeye çalışır; oysa o görsel ekranın tam ortasında, hemen görünmesi gereken öğedir. Ertelenen bir LCP görseli, LCP süresini iyileştirmek yerine kötüleştirir. Doğru yaklaşım şudur: ilk ekrandaki ana görseli lazy load dışında bırakmak, hatta ona öncelik vererek erken yüklenmesini istemektir.

Modern WordPress bunu büyük ölçüde otomatik yapar; içeriğin başındaki ilk görseli lazy işaretlemekten kaçınacak kadar akıllıdır. Yine de tema ya da sayfa oluşturucu araya girdiğinde bu davranış her zaman doğru çalışmaz. İlk ekran görselinin hedeflenen çıktısı şuna benzemelidir; dikkat edin, loading="lazy" yoktur, aksine fetchpriority="high" ile önceliklendirilmiştir.

<img src="kapak-gorseli.webp"
     width="1600" height="900"
     fetchpriority="high" decoding="async"
     alt="Ana kapak görseli">

Temanız ilk görsele istemeden lazy load ekliyorsa, bunu functions.php içinde küçük bir kancayla düzeltebilirsiniz. Aşağıdaki örnek, içeriğin ilk görselinden loading="lazy" özniteliğini kaldırıp yerine yüksek öncelik verir.

// İçeriğin ilk görselini lazy load dışında tut, önceliklendir
add_filter( 'wp_content_img_tag', function ( $tag, $context, $attachment_id ) {
	static $ilk = true;
	if ( $ilk && $context === 'the_content' ) {
		$ilk = false;
		$tag = str_replace( ' loading="lazy"', '', $tag );
		$tag = str_replace( '<img ', '<img fetchpriority="high" ', $tag );
	}
	return $tag;
}, 10, 3 );

Bu ayrımı bir kez doğru kurduğunuzda kural nettir: ilk ekranın altındaki her şey tembel yüklensin, ilk ekranın kendisi ise anında ve öncelikli gelsin. Bu tek ayar, PageSpeed puanınızda çoğu zaman gözle görülür bir sıçrama yaratır.

Eklenti ile Gelişmiş Lazy Load#

Yerleşik loading="lazy" desteği görsellerin büyük kısmı için yeterlidir, ancak bazı durumlarda daha fazla denetim istersiniz. Tema görsellerini, arka plan görsellerini (CSS background-image), iframe'leri ve videoları da kapsamak, yükleme sırasında zarif bir bulanık önizleme göstermek ya da eşik mesafesini elle ayarlamak için bir eklenti işi kolaylaştırır.

Bu alanda öne çıkan çözümlerin çoğu aslında birer önbellekleme/optimizasyon eklentisidir ve lazy load onların bir modülüdür:

• LiteSpeed Cache — LiteSpeed sunucularında hem önbellek hem de gelişmiş lazy load (görsel, iframe, arka plan görseli) sunar; bulanık yer tutucu (LQIP) üretebilir.
• WP Rocket — ücretli ama kur-ve-unut niteliğinde; lazy load'u tek anahtarla açar, LCP görselini otomatik hariç tutmaya çalışır.
• a3 Lazy Load — yalnızca lazy load'a odaklanan, sade ve ücretsiz bir seçenek; video ve iframe desteği vardır.
• Perfmatters — hafif bir performans eklentisi; lazy load'a ek olarak istenmeyen script'leri kapatma gibi ince ayarlar sağlar.

Bu araçların ayarlarına girdiğinizde neredeyse her zaman bir "ilk N görseli hariç tut" ya da "LCP görselini atla" seçeneği bulursunuz. Bu seçeneği mutlaka kullanın; genellikle değeri 1 veya 2 yapmak, ilk ekrandaki görseli koruyup gerisini tembelleştirmek için idealdir. Hangi eklentinin sizin altyapınıza uygun olduğuna karar verirken WordPress eklenti önerileri yazımızdaki performans başlığı yol gösterici olacaktır.

Bir noktaya dikkat edin: birden fazla eklenti aynı anda lazy load uygularsa çakışma yaşayabilirsiniz. Örneğin hem tema hem de bir önbellek eklentisi görsellere ayrı ayrı lazy mantığı eklerse görseller hiç yüklenmeyebilir. Kural basit: lazy load'u tek bir yerden yönetin, diğer kaynaklarda kapatın.

iframe ve Video İçin Lazy Load#

Görseller ağırdır ama gömülü içerikler çoğu zaman daha da ağırdır. Bir YouTube videosu, sayfaya gömüldüğünde yalnızca bir görsel değil; koca bir oynatıcıyı, onlarca script'i ve izleme kodunu birlikte getirir. Sayfanızda birkaç gömülü video varsa, bunların hepsinin peşinen yüklenmesi ilk açılışı tek başına dakikalarca değil ama fark edilir saniyeler kadar geciktirebilir.

iframe'ler için de aynı loading="lazy" özniteliği çalışır ve WordPress bunu gömülü içeriklere de uygular.

<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        width="560" height="315"
        loading="lazy" title="Tanıtım videosu"
        allowfullscreen></iframe>

Videolar için daha da etkili bir teknik, "facade" (cephe) yöntemidir. Bu yaklaşımda sayfaya baştan ağır oynatıcı yerine sadece hafif bir kapak görseli ve bir oynat düğmesi konur; ziyaretçi düğmeye bastığında asıl video oynatıcısı o an yüklenir. Böylece videoyu hiç izlemeyen ziyaretçiler onun yükünü hiç taşımaz. WP Rocket, Perfmatters ve LiteSpeed Cache gibi eklentiler bu facade özelliğini "YouTube önizleme görseli ile değiştir" benzeri bir anahtarla hazır sunar.

Sitenizde kendi barındırdığınız <video> etiketleri varsa, preload değerini none yaparak tarayıcının videoyu peşinen indirmesini engelleyebilirsiniz; ayrıca hafif bir poster görseli tanımlamak ilk görünümü hızlandırır.

<video controls preload="none" poster="onizleme.webp">
	<source src="tanitim.mp4" type="video/mp4">
</video>

Lazy Load'i Test Etme ve Doğrulama#

Bir optimizasyonu açtıktan sonra "gerçekten çalışıyor mu ve bir şeyi bozdu mu" sorusunu mutlaka yanıtlamak gerekir. Lazy load için doğrulama birkaç dakikalık bir iştir.

İlk yöntem tarayıcının Geliştirici Araçları'dır. F12 ile paneli açın, Network (Ağ) sekmesine geçin ve Img filtresini seçin. Sayfayı yenilediğinizde başta yalnızca ilk ekrandaki görsellerin listeye düştüğünü görmelisiniz. Sayfayı yavaşça aşağı kaydırdıkça yeni görsel isteklerinin listeye tek tek eklenmesi, lazy load'un doğru çalıştığının en net kanıtıdır.

İkinci yöntem PageSpeed Insights gibi araçlardır. "Ekran dışındaki görselleri erteleyin" (Defer offscreen images) uyarısının kaybolması, tembel yüklemenin devreye girdiğini gösterir. Aynı raporda LCP değerinin iyileştiğini de görmelisiniz; görmüyorsanız büyük olasılıkla LCP görselini yanlışlıkla lazy yapmışsınızdır ve bir önceki bölümdeki hariç tutma adımına dönmeniz gerekir.

Bir de gözden kaçırılan bir kontrol var: SEO. Arama motorlarının içeriğinizi görebildiğinden emin olmak istersiniz. loading="lazy" gibi standart yöntemler arama motorlarınca sorunsuz işlenir, çünkü görsel bağlantısı HTML içinde hâlâ mevcuttur. Ancak eski, tamamen JavaScript'e dayalı bazı lazy load yöntemleri gerçek src yerine yer tutucu koyup görseli sonradan yüklerse, tarama sırasında görseliniz boş görünebilir. Bu da görsel aramada kaybolmak demektir. Bu yüzden mümkün olduğunca tarayıcının yerel loading özniteliğine dayanan çözümleri tercih edin; kurumsal görünürlük hedefleriniz varsa SEO tarafındaki genel prensiplerle de uyumlu olur.

Yaygın Hatalar ve Dikkat Edilecek Noktalar#

Lazy load basit bir teknik olsa da yanlış uygulandığında fayda yerine zarar getirebilir. En sık karşılaşılan tuzakları ve pratik çözümlerini toplu görelim.

• LCP görselini de lazy yapmak. En yaygın hata budur. İlk ekrandaki ana görseli mutlaka kapsam dışında tutun; aksi hâlde puanınız düşer.
• width ve height değerlerini boş bırakmak. Boyut belirtilmeyen görseller yüklenince sayfa zıplar ve düzen kayması (CLS) yaşarsınız. Görsel etiketlerine daima genişlik ve yükseklik verin.
• Çift lazy load çakışması. İki farklı eklenti aynı görsele lazy uygularsa görsel hiç yüklenmeyebilir. Tek bir kaynaktan yönetin.
• Agresif eşik ayarı. Görselin ekrana girmesine "0 piksel" kala yüklemeye kalkmak, ziyaretçiye görseller geç açılıyor hissi verir. Eşiği biraz erken tutun ki görsel, ekrana girmeden hemen önce hazır olsun.
• AMP veya besleme (RSS) çıktısında beklenmedik davranış. Bazı özel çıktılarda lazy load farklı işleyebilir; canlıya almadan önce bu görünümleri de kontrol edin.

Bu ayarları tek tek denerken en güvenli yol, değişiklikleri önce bir test/hazırlık (staging) ortamında sınamaktır. Canlı sitede oynamak zorundaysanız değişiklik öncesi mutlaka yedek alın; ufak bir yapılandırma hatasının bile ziyaretçilerinizi karşıladığı bir anda yakalanmak istemezsiniz. Kendi barındırma altyapınızı en baştan performansa uygun kurmak isterseniz, LiteSpeed tabanlı bir WordPress hosting paketi bu eklentilerin çoğunu tam verimle çalıştırır.

Sıkça Sorulan Sorular#

Lazy load SEO'ya zarar verir mi?#

Doğru yöntemle uygulandığında zarar vermez, aksine dolaylı fayda sağlar. Tarayıcının yerel loading="lazy" özniteliği arama motorlarınca sorunsuz işlenir; görsel bağlantısı HTML içinde açıkça durduğu için görsel aramada da görünmeye devam eder. Yalnızca eski, tamamen JavaScript'e dayalı ve gerçek src değerini gizleyen yöntemler görselin taranmasını zorlaştırabilir. Modern çözümlerde bu risk pratikte ortadan kalkmıştır.

WordPress'te lazy load için eklenti şart mı?#

Hayır, çoğu site için şart değildir. WordPress 5.5 ve sonrası görsellere otomatik olarak loading="lazy" ekler ve bu, sıradan bloglar ile kurumsal siteler için fazlasıyla yeterlidir. Eklentiye yalnızca arka plan görsellerini, video facade'lerini, bulanık yer tutucuları ya da ince eşik ayarlarını istediğinizde ihtiyaç duyarsınız. Yani eklenti bir zorunluluk değil, ek denetim aracıdır.

İlk ekrandaki görseli neden lazy yapmamalıyım?#

Çünkü ilk ekrandaki büyük görsel genellikle Google'ın ölçtüğü LCP öğesidir ve hemen görünmesi gerekir. Onu tembel yüklemeye dahil ederseniz tarayıcı yüklemeyi ertelemeye çalışır, bu da LCP süresini iyileştirmek yerine kötüleştirir. Doğru davranış, ilk ekran görselini kapsam dışında bırakmak ve mümkünse fetchpriority="high" ile önceliklendirmektir. Alttaki görseller ise gönül rahatlığıyla lazy kalabilir.

Lazy load çalışıyor mu, nasıl anlarım?#

En pratik yol tarayıcının Geliştirici Araçları'ndaki Network sekmesidir. Sayfayı açtığınızda yalnızca ilk ekrandaki görsellerin indirildiğini, aşağı kaydırdıkça yeni görsel isteklerinin tek tek listeye eklendiğini görüyorsanız lazy load çalışıyor demektir. Ek olarak PageSpeed Insights raporunda "ekran dışındaki görselleri erteleyin" uyarısının kaybolması da devrede olduğunu doğrular.

Lazy load ile görseller geç açılıyor gibi görünüyor, ne yapmalıyım?#

Bu genellikle yükleme eşiğinin fazla dar ayarlanmasından kaynaklanır. Görsel tam ekrana girdiği anda yüklenmeye başlarsa, ziyaretçi bir an boş alan görebilir. Çözüm, eşiği biraz genişletmek yani görsel ekrana girmeden birkaç yüz piksel önce yüklemeyi tetiklemektir. Kullandığınız eklentinin ayarlarında bu değeri artırmak, görsellerin ziyaretçi oraya varmadan hazır olmasını sağlar.

Tüm görselleri lazy yapmak sayfayı her zaman hızlandırır mı?#

Hayır, "hepsini lazy yap" yaklaşımı en iyi sonuç değildir. İlk ekranda görünen görselleri erteleymek onları geciktireceği için ters teper. En verimli kurulum şudur: ilk ekranın altındaki tüm görseller, iframe'ler ve videolar lazy yüklensin; ilk ekrandaki ana görsel ise anında ve öncelikli gelsin. Bu ayrımı doğru kurmak, körü körüne her şeyi tembelleştirmekten çok daha iyi bir performans verir.

Kapanış#

Lazy load, WordPress performansında az emekle çok kazanç sağlayan nadir tekniklerden biridir. Temel fikir sade: ziyaretçinin görmediği içerikleri baştan indirmeyip yalnızca gerektiğinde yüklemek. WordPress'in yerleşik loading="lazy" desteği çoğu site için işi kendiliğinden halleder; siz sadece iki noktaya dikkat edin. İlk ekrandaki ana görseli kapsam dışında tutun ve görsel etiketlerinde boyut değerlerinin bulunduğundan emin olun. Daha fazla denetim isterseniz bir optimizasyon eklentisiyle iframe, video ve arka plan görsellerini de kapsama alabilirsiniz.

Bu ayarların gerçek karşılığını almak için sağlam bir zemin şart. Tembel yükleme ilk açılışı hafifletir, ama sunucunuz yavaşsa tek başına yeterli olmaz. NVMe diskli, LiteSpeed tabanlı bir WordPress hosting paketiyle bu eklentileri tam verimle çalıştırabilir, trafiğiniz büyüdüğünde kaynakları size ayrılmış bir VDS sunucu çözümüne geçebilirsiniz. Bakım ve performans denetimini kendiniz üstlenmek istemezseniz, düzenli optimizasyonu kapsayan WordPress bakım hizmetimiz bu yükü omuzlarınızdan alır. Sitenizi baştan sona hızlandırmak için ise adım adım ilerleyen WordPress hız optimizasyonu rehberimizle devam etmenizi öneririz.