Lazy loading (geç yükleme) SEO'yu nasıl etkiler? Doğru kullanım rehberi

Lazy loading (geç yükleme), sayfadaki görsellerin ve diğer içeriklerin kullanıcı o bölüme yaklaştığında yüklenmesidir. Sayfa ilk açıldığında yalnızca ekranda görünen kısım yüklenir. Doğru kurulduğunda sayfayı hızlandırır ve SEO’ya zararı yoktur. İki hata ise ciddi sorun yaratır: İçeriğin yalnızca kaydırma ya da tıklamayla yüklenmesi, çünkü Google sayfayla etkileşime girmez. Bir de ilk ekrandaki ana görselin geç yüklenmesi, çünkü bu LCP süresini uzatır.

Lazy loading, hız optimizasyonunda ilk akla gelen ayarlardan biri. Birçok tema ve hazır altyapı bunu varsayılan olarak açıyor, birçok hız eklentisi de sayfadaki bütün görsellere tek tuşla ekliyor. Sorun da burada başlıyor: “Bütün görsellere” ilk ekrandaki ürün görseli ve ana sayfa bannerı da dahil. Bu yazıda Google’ın geç yüklenen içerik hakkındaki önerilerini, hangi görsellerin geç yüklenmesi gerektiğini ve kurulumun nasıl test edileceğini anlatıyorum.

Google geç yüklenen içeriği nasıl görür?

Google’ın tembel yükleme belgesi önemli bir cümle içeriyor: Google Arama sayfanızla etkileşime girmez. Yani Googlebot sayfayı aşağı kaydırmaz, “Daha fazla göster” düğmesine tıklamaz, sekmeleri tek tek açmaz.

Bu yüzden Google iki yöntemi öneriyor: tarayıcının kendi geç yükleme özelliği (görseller ve iframe’ler için loading="lazy") ve IntersectionObserver API. Belgeye göre bu yöntemler içeriği yüklemek için kaydırma ya da tıklama gibi bir kullanıcı hareketine ihtiyaç duymaz. Google sayfayı oluştururken bu içerikleri de görür.

Sorun, eski tip JavaScript kütüphanelerinde çıkar. Bazı eski çözümler görselin gerçek adresini data-src gibi bir alanda tutar ve yalnızca scroll olayı tetiklendiğinde src alanına taşır. Kullanıcı kaydırmadığı sürece görsel yüklenmez. Google da kaydırmadığı için bu görselleri hiç göremeyebilir. Görsel arama trafiğiniz ürün görsellerinden geliyorsa bu, doğrudan trafik kaybı demektir.

Hangi görseller geç yüklenmeli?

Kural basit: İlk ekranda görünmeyen görseller geç yüklenir, ilk ekranda görünenler normal yüklenir.

Google’ın belgesi, sayfa açıldığında hemen görünmesi muhtemel içeriğe geç yükleme eklenmemesini söylüyor. web.dev’deki tarayıcı tabanlı geç yükleme rehberi de daha açık: Sayfa yüklendiğinde ekranda olması muhtemel görselleri, özellikle LCP görsellerini geç yüklemeyin.

E-ticaret sitesinde bunun karşılığı şöyle:

Sayfa	Normal yüklenecek	Geç yüklenecek
Ana sayfa	Üstteki banner ya da slider’ın ilk görseli, logo	Aşağıdaki kategori kutuları, ürün listeleri, blog görselleri
Kategori sayfası	İlk satırdaki ürün görselleri (mobilde ilk 2-4 ürün)	Diğer bütün ürün görselleri
Ürün sayfası	Ana ürün görseli	Galerideki diğer görseller, benzer ürünler, yorum fotoğrafları
Blog yazısı	Kapak görseli	Yazının içindeki görseller

“İlk ekran” mobilde ve masaüstünde farklıdır. Masaüstünde ilk satırda 4 ürün görünürken mobilde 2 ürün görünebilir. Hangisinin ilk ekranda olacağını kesin bilemiyorsanız, ilk birkaç görseli normal yüklemek daha güvenlidir. Birkaç görsel fazladan yüklemek, LCP görselini geç yüklemekten çok daha küçük bir sorundur.

LCP görseli hatası

Lazy loading ile ilgili en yaygın hız sorunu budur. LCP (Largest Contentful Paint), ilk ekrandaki en büyük öğenin ne zaman göründüğünü ölçer. Ürün sayfasında bu öğe çoğu zaman ana ürün görselidir. Bu görsele loading="lazy" eklenirse tarayıcı, görselin ekranda olduğunu sayfa düzeni hesaplanana kadar anlamaz ve görseli geç indirmeye başlar.

web.dev’deki bir analiz, HTTP Archive verilerinde geç yükleme kullanan sayfaların LCP süresinin kullanmayanlardan daha yavaş olduğunu gösteriyor. Makale bunların ilişkisel sonuçlar olduğunu, yani tek başına sebep-sonuç kanıtı olmadığını belirtiyor. Ama aynı makaledeki testte ilk ekrandaki görsellerden geç yüklemenin kaldırılması, LCP’deki gerilemeyi geri almış.

Doğru kurulum şöyle görünür:

<!-- İlk ekrandaki ana ürün görseli -->
<img src="/urunler/deri-bot.webp" alt="Siyah deri erkek bot" width="800" height="800" fetchpriority="high">

<!-- Sayfanın aşağısındaki benzer ürün görseli -->
<img src="/urunler/suet-bot.webp" alt="Kahverengi süet bot" width="400" height="400" loading="lazy">

fetchpriority="high", tarayıcıya bu görseli öncelikli indirmesini söyler (fetchpriority). web.dev’e göre loading="lazy" ile fetchpriority="high" birlikte kullanılmamalı: Görsel ekran dışındaysa yine gecikir, bu yüzden bu birleşim bir işe yaramaz.

Görsellere width ve height değerlerini yazmayı unutmayın. Geç yüklenen bir görselin yeri önceden ayrılmazsa, görsel yüklendiğinde sayfa kayar ve CLS puanınız bozulur. Hız ölçümlerini nasıl okuyacağınızı PageSpeed Insights nasıl okunur? yazısında anlattım.

Metin ve ürün listeleri

Lazy loading yalnızca görsellerde kullanılmıyor. Bazı siteler ürün yorumlarını, ürün açıklamasının devamını, “benzer ürünler” listesini ya da kategori metnini de kullanıcı kaydırdığında yüklüyor.

Bu içeriklerin arama açısından bir değeri varsa, yüklenmeleri bir kullanıcı hareketine bağlı olmamalıdır. Örneğin ürün yorumları sayfanın yalnızca kullanıcı “Yorumlar” sekmesine tıkladığında çağrılan bir bölümündeyse, Google bu yorumları görmeyebilir. Yorumların SEO’ya katkısını ürün yorumları ve SEO yazısında anlattım.

Sekmeli içerik ise ayrı bir durumdur. İçerik sayfanın HTML’inde varsa ve yalnızca CSS ile gizleniyorsa Google onu görür. Sorun, içeriğin tıklamayla sunucudan sonradan çağrılmasıdır.

Sonsuz kaydırma

Sonsuz kaydırma, lazy loading’in liste sayfalarındaki biçimidir: Kullanıcı aşağı indikçe yeni ürünler yüklenir. Google kaydırmadığı için, arkasında bir sayfalama yapısı olmayan sonsuz kaydırma Google’a yalnızca ilk ürün grubunu gösterir.

Google’ın belgesi sonsuz kaydırma için şunları öneriyor: Her bölüme kalıcı ve benzersiz bir adres verin, sayfa numaralarını mutlak yazın (?page=12 gibi), bölümleri sırayla birbirine bağlayın ve yeni bölüm ekranda ana öğe olduğunda tarayıcıdaki adresi History API ile güncelleyin. Bu yapının ayrıntılarını sayfalama SEO yazısında anlattım.

Kurulumu nasıl test edersiniz?

Google’ın önerdiği yöntem, Search Console’daki URL Denetleme aracı. Bir ürün ya da kategori sayfasının adresini girin, “Canlı URL’yi test et” seçeneğini çalıştırın ve “Test edilen sayfayı görüntüle” bölümünden oluşturulan HTML’e bakın. Sayfanın aşağısındaki görsellerin src alanında gerçek görsel adresleri görünüyorsa Google onları görüyor demektir. src alanında boş bir görsel ya da yer tutucu varsa ve gerçek adres yalnızca data-src içindeyse, geç yükleme yönteminiz Google için çalışmıyor olabilir.

İlk ekrandaki görseller için tarayıcınızın geliştirici araçlarını kullanın. Ürün sayfasını açın, ana ürün görseline sağ tıklayıp “İncele” deyin ve loading özelliğine bakın. loading="lazy" yazıyorsa, bu ayarı ilk görsel için kaldırmanız gerekiyor. PageSpeed Insights da LCP ile ilgili önerilerinde geç yüklenen LCP görselini işaret eder.

Hazır altyapılarda dikkat edilecekler

Hazır e-ticaret altyapılarında ve temalarda lazy loading çoğu zaman otomatik gelir. Yapmanız gereken iki kontrol var. Birincisi, ana ürün görselinin ve ana sayfadaki ilk bannerın geç yüklenip yüklenmediği. İkincisi, kullanılan yöntemin tarayıcının kendi loading="lazy" özelliği mi, yoksa kaydırmaya bağlı eski bir kütüphane mi olduğu.

Hız eklentisi ya da tema ayarı ilk görseli istisna tutmanıza izin vermiyorsa, bunu altyapı firmasına iletin. Görsel tarafındaki diğer ayarları ürün görselleri ve SEO yazısında, hız tarafını e-ticarette site hızı ve Core Web Vitals yazısında anlattım. Sitenizin teknik altyapısını birlikte incelemek isterseniz teknik SEO danışmanlığı sayfasına göz atabilirsiniz.