Lazy load nedir, SEO’ya zarar verir mi?
Tembel yükleme sayfayı hızlandırıyor ama yanlış yerde kullanıldığında yavaşlatıyor ve içeriğin görünmemesine yol açıyor. Hangi görsellere uygulanmalı, hangilerine asla ve Googlebot ne görüyor?
Ne yapıyor?
Bir sayfada yirmi görsel varsa ve kullanıcı yalnızca ilk üçünü görüyorsa, kalan on yediyi baştan indirmenin bir anlamı yok.
Tembel yükleme tam olarak bunu yapıyor: ekranda görünmeyen görselleri, kullanıcı oraya kaydırana kadar indirmiyor.
Kazanç iki yerde. Sayfa daha az veri indiriyor, dolayısıyla daha hızlı açılıyor. Ve tarayıcı ilk anda yalnızca gerçekten gerekli olanla uğraşıyor.
Uygulama basit görünüyor ama yanlış yerde kullanıldığında ters etki yapıyor ve bu, sahada çok sık gördüğümüz bir hata.
En yaygın hata — ilk ekrandaki görsel
Sayfa açıldığında görünen büyük görsele tembel yükleme uygulamak, en sık yapılan ve en pahalı hata.
Sebep şu: tembel yükleme, görselin indirilmesini geciktiriyor. İlk ekrandaki görsel genellikle sayfanın en büyük içerik öğesi ve en büyük içerikli boyama ölçüsü tam olarak onun ne zaman göründüğünü ölçüyor.
Yani hız için eklenen özellik, hız ölçüsünü kötüleştiriyor.
Kural net: kaydırmadan görünen hiçbir şeye tembel yükleme uygulanmaz.
Örnek senaryo — Bir sitede eklenti üzerinden tüm görsellere tembel yükleme açılıyor. Skor düşüyor ve kimse sebebini bulamıyor. Rapor incelendiğinde en büyük içerikli boyama öğesinin ana sayfadaki kapak görseli olduğu ve o görselin de tembel yüklendiği görülüyor. Tek bir görsel istisna tanımlanınca ölçü düzeliyor.
Tarayıcının kendi desteği
Yıllarca tembel yükleme için JavaScript kütüphaneleri kullanıldı. Bugün çoğu site için buna gerek yok.
Tarayıcılar bu özelliği kendi içinde destekliyor ve görsel etiketine tek bir öznitelik eklemek yetiyor. MDN'in tembel yükleme belgesi hangi öğelerde desteklendiğini ve nasıl kullanıldığını açıklıyor.
Yerleşik desteğin üç avantajı var:
Ek yük yok. JavaScript kütüphanesi indirilmiyor. Googlebot açısından güvenli. Standart bir tarayıcı davranışı olduğu için sorun çıkarmıyor. Bakım gerektirmiyor. Kütüphane güncellemesi, uyumsuzluk gibi dertler yok.
Kütüphaneye ihtiyaç duyulan durumlar dar: eski tarayıcı desteği zorunluysa ya da görsel dışında karmaşık öğeler tembel yüklenecekse.
Googlebot içeriği görüyor mu?
En çok sorulan soru ve cevabı koşullu.
Googlebot sayfayı oluştururken ekranı kaydırıyor gibi davranıyor ve kaydırma ile tetiklenen tembel yüklemeyi genellikle görebiliyor. Google'ın tembel yükleme belgeleri bu davranışı ve doğru uygulamayı anlatıyor.
Görmediği durumlar:
- İçerik yalnızca tıklamayla yükleniyorsa
- "Daha fazla göster" düğmesi arkasındaysa
- Çok özel bir JavaScript kurgusu varsa
Test yolu var ve ücretsiz: Search Console'un URL denetleme aracında sayfayı test edin ve oluşturulan HTML'i inceleyin. Görseliniz orada görünmüyorsa Googlebot da görmüyor.
İpucu — Bu testi yalnızca görseller için değil, sonsuz kaydırma kullanan liste sayfaları için de yapın. Sonsuz kaydırmayla yüklenen içerik çoğu zaman taranmıyor ve o içeriğe giden bir bağlantı yoksa kaybediliyor.
Düzen kayması sorunu
Tembel yükleme bir yan etki üretiyor: görsel sonradan geldiğinde, o ana kadar boş olan alan aniden doluyor ve sayfa zıplıyor.
Bu, kümülatif düzen kayması ölçüsünü kötüleştiriyor ve kullanıcı açısından da rahatsız edici — okurken metin kayıyor.
Çözüm tek satırlık: her görsele genişlik ve yükseklik değeri yazmak. Tarayıcı böylece görsel gelmeden önce ne kadar yer ayıracağını biliyor.
Bu iki öznitelik yıllarca gereksiz sayıldı, sonra tam da bu sebeple geri döndü. Bugün atlanması bir hata.
Durum | Doğru uygulama |
|---|---|
İlk ekrandaki büyük görsel | Tembel yükleme YOK, öncelikli yükle |
Ekran altındaki görseller | Tembel yükleme VAR |
Gömülü video | Tembel yükleme VAR, kapak görseliyle |
Sayfa metni | Tembel yükleme YOK |
Liste sayfası içeriği | Sayfalama tercih edilmeli |
Son satır önemli: sonsuz kaydırma yerine gerçek adresleri olan sayfalama kullanmak hem taranabilirlik hem kullanıcı açısından daha güvenli.
Video ve gömülü içerik
Görselden çok daha ağır olan öğeler bunlar. Bir gömülü video, sayfanın toplam ağırlığının yarısını tek başına oluşturabiliyor.
Doğru yaklaşım videoyu doğrudan gömmek yerine kapak görseli göstermek ve kullanıcı tıkladığında asıl oynatıcıyı yüklemek.
Bu yöntem sayfa ağırlığını belirgin şekilde azaltıyor ve neredeyse hiçbir kullanıcı deneyimi kaybı üretmiyor — zaten videoyu izlemeyecek kişi oynatıcıyı hiç indirmemiş oluyor.
Aynı mantık harita, sohbet widget'ı ve sosyal medya gömülerinde de geçerli.
Eklenti mi kod mu?
WordPress gibi sistemlerde tembel yükleme genellikle eklentiyle açılıyor. İki sorun çıkıyor.
Ayrım yapmıyor. Çoğu eklenti tüm görsellere aynı davranıyor ve ilk ekrandaki görsel de tembel yükleniyor.
Kendi JavaScript'ini yüklüyor. Tarayıcının yerleşik desteği varken ek bir kütüphane indiriliyor.
Eklenti kullanılacaksa iki ayar aranmalı: ilk ekran görselleri için istisna tanımlama ve yerleşik tarayıcı desteğini kullanma seçeneği.
Dikkat — Birden çok performans eklentisi aynı anda tembel yükleme uyguluyorsa çakışma çıkıyor ve görseller hiç yüklenmeyebiliyor. Kurulu eklentileri kontrol edin; bu işi yapan tek bir eklenti olmalı.
Ne zaman uğraşmaya değmez?
Görseli az olan sayfalarda kazanç sınırlı. Beş görselli bir kurumsal sayfada tembel yükleme, ölçülebilir bir fark üretmiyor.
Kazanç şu durumlarda büyük:
- Ürün listesi sayfaları
- Uzun blog yazıları
- Galeri ve portföy sayfaları
- Gömülü içerik taşıyan sayfalar
Bunlar dışındaki sayfalarda öncelik başka yerde: görsel boyutlarını küçültmek ve modern biçim kullanmak, tembel yüklemeden daha çok kazandırıyor.
Kontrol listesi
- İlk ekranda görünen görsellere tembel yükleme uygulanmamış olsun.
- Diğer tüm görsellerde uygulanmış olsun.
- Her görselde genişlik ve yükseklik değeri bulunsun.
- JavaScript kütüphanesi yerine tarayıcının yerleşik desteği kullanılsın.
- Search Console'un URL denetleme aracıyla içeriğin göründüğü doğrulansın.
- Video ve gömülü içerikler tıklamayla yüklensin.
Bu altı maddenin tamamı bir öğleden sonrada kontrol edilebiliyor.
Sonsuz kaydırma ayrı bir risk
Tembel yükleme ile sık karıştırılan ama sonuçları çok daha ağır olan bir yöntem.
Sonsuz kaydırmada içerik kaydırdıkça yükleniyor ve o içeriğe ait gerçek bir adres bulunmuyor. Sonuç: liste sayfasının ikinci ve sonraki bölümündeki her şey taranmıyor.
Ürün listelerinde bu, katalogun büyük kısmının aramada görünmemesi demek.
Güvenli yol sayfalama: her sayfanın kendi adresi olması ve o adresin taranabilir olması. Kullanıcı deneyimi için sonsuz kaydırma korunacaksa, arka planda sayfalama bağlantıları da bulunmalı.
Görsel biçimi ve boyutu
Tembel yüklemeden önce yapılacak iki iş var ve ikisi de daha çok kazandırıyor.
Doğru boyut. Ekranda 400 piksel genişlikte görünen bir görselin 2.000 piksel yüklenmesine gerek yok. Farklı ekran boyutları için farklı sürümler sunulabiliyor.
Modern biçim. Aynı görsel, modern bir biçimde belirgin şekilde daha küçük dosya boyutuna iniyor ve gözle fark edilir bir kalite kaybı olmuyor.
Bu ikisi yapılmadan tembel yüklemeye geçmek, büyük dosyaları geç indirmekten ibaret kalıyor.
Kontrol nasıl yapılır?
Tarayıcının geliştirici araçlarında ağ sekmesini açıp sayfayı yeniden yükleyin.
İlk yüklemede kaç görsel iniyor? Ekranda görünenden fazlaysa tembel yükleme çalışmıyor demektir.
Kaydırınca yeni istekler geliyor mu? Gelmiyorsa hepsi baştan inmiş demektir.
İlk ekrandaki büyük görsel ne zaman iniyor? İlk isteklerden biri olmalı; sonlarda geliyorsa yanlış yapılandırılmış.
Üç kontrol de birkaç dakika sürüyor ve eklentinin gerçekten ne yaptığını gösteriyor.
Sonuç — Tembel yükleme bir hız aracı ama körlemesine uygulandığında hızı bozuyor. Belirleyici olan tekniğin kendisi değil, nereye uygulandığı: ekranın altına evet, ilk ekrana asla.
Hız ve görsel optimizasyonunun uygulamasını teknik SEO kapsamında yapıyoruz; site geliştirme tarafında bu ayarlar baştan doğru kuruluyor — web sitesi geliştirme sayfasına bakabilirsiniz.
Ölçümün nasıl okunacağını PageSpeed Insights yazısında anlattık.
Bu konuyla ilgili
- mobil öncelikli indeksleme — Mobilde içeriğin görünmesi.
