Web Sitelerinde Lazy Load Kullanımı & Görsel Yükleme Hızını Artırma

Günümüzde web sitelerinde hız, SEO başarısı ve kullanıcı deneyimi için kritik bir faktördür. Özellikle görsel ağırlıklı sitelerde, sayfa yükleme süresini kısaltmak ve kaynak tüketimini azaltmak için Lazy Load (Tembel Yükleme) yöntemi çok etkili bir çözüm sunar. Bu makalede hem PHP tabanlı siteler hem de WordPress için lazy load uygulamasını, teknik detaylarla ve örnek kodlarla anlatacağız.

Ayrıca aşağıdaki içeriklerle ilişkili olarak iç SEO uyumu da sağlanmıştır:

Lazy Load Nedir?

Lazy Load, sayfa yüklenirken tüm görselleri önceden yüklemek yerine, sadece kullanıcının ekranında gözüken görsellerin yüklenmesini sağlayan bir tekniktir. Bu sayede sayfa daha hızlı açılır ve bant genişliği tasarrufu sağlanır.

PHP Tabanlı Sitelerde Lazy Load Uygulaması

PHP ile geliştirilmiş özel bir sitede lazy load uygulaması için resim etiketlerine loading="lazy" HTML5 niteliği eklenebilir:

<img src="resimler/urun.jpg" alt="Ürün görseli" loading="lazy">

Ancak daha ileri seviye kontrol için JavaScript destekli bir yöntem kullanabilirsiniz. Örnek:

<img class="lazy" data-src="resimler/urun.jpg" alt="Ürün görseli">
<script>
document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>

Bu kod, sadece görünür alana gelen resimlerin yüklenmesini sağlar. Özellikle grid ve flex yapıları içeren sayfalarda son derece faydalıdır.

WordPress'te Lazy Load Kullanımı

WordPress 5.5 sürümleri ile birlikte loading="lazy" varsayılan olarak resimlere otomatik eklenmektedir. Ancak daha fazla kontrol için şu eklentiler tercih edilebilir:

a3 Lazy Load
Smush (görsel optimizasyon + lazy load)
Lazy Load by WP Rocket

functions.php örneği ile manuel destek:

function lazyload_images($content) {
  $content = preg_replace('/<img(.*?)src=/i', '<img$1loading="lazy" src=', $content);
  return $content;
}
add_filter('the_content', 'lazyload_images');

Bu kod ile tüm yazı içeriklerinde bulunan görsel etiketlerine lazy loading niteliği otomatik olarak eklenir.

Performansa Etkisi

Lazy load tekniği kullanarak:

Sayfa açılma süreleri ciddi oranda azalır
Bounce rate düşer, SEO skorları artar
Google PageSpeed Insights puanı pozitif etkilenir

Ayrıca, mobil öncelikli tasarımlarda (Bkz: Mobile First Tasarım) ve responsive grid yapılarında lazy load, cihaz kaynaklarını verimli kullanmanızı sağlar.

Sonuç

Görsel ağırlıklı sitelerde lazy load kullanımı, hem kullanıcı deneyimi hem de SEO başarısı için olmazsa olmaz tekniklerden biridir. PHP ve WordPress tabanlı sitelerde uygulanması kolay, etkisi ise yüksek olan bu teknik, grid ve flex yapılara sahip arayüzlerde çok daha verimli çalışır.

Daha fazla UI/UX ve performans tüyosu için şu içerikleri de inceleyebilirsiniz: