Modern Web Uygulamalarında Performans Artışı Sağlamak İçin Lazy Loading Kullanmanın 7 Yolu

Web tasarımı ve geliştirme dünyasında, kullanıcı deneyimini artırmak, hızlı yükleme süreleri sağlamak ve performansı iyileştirmek her zaman önemli hedeflerdir. Modern web uygulamalarında bu hedeflere ulaşmanın en etkili yollarından biri ise *lazy loading* tekniğini kullanmaktır. Lazy loading, web sayfalarının yalnızca gerekli içeriği yüklemesini sağlayarak, sayfanın hızını artıran ve kullanıcı etkileşimini iyileştiren bir tekniktir. Ancak lazy loading yalnızca görseller için değil, farklı içerik türleri için de uygulanabilir. Bu yazıda, lazy loading’i kullanarak web uygulamalarınızda performans artışı sağlamak için 7 etkili yöntemi keşfedeceksiniz.

1. Görselleri Yalnızca Görünür Olduklarında Yükleyin

Web sayfalarındaki görseller, genellikle sayfa yüklenmesinin en ağır parçalarından biridir. Lazy loading sayesinde, görseller yalnızca sayfada görünür olduklarında yüklenir. Bu, sayfanın ilk yüklenme süresini önemli ölçüde azaltır ve kullanıcıya daha hızlı bir deneyim sunar. Görsel yükleme işlemi gerçekleştirilene kadar, kullanıcılar sayfa içeriği ile etkileşime girebilir.

document.addEventListener('DOMContentLoaded', function () {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach((img) => {
    img.src = img.getAttribute('data-src');
  });
});

2. Videoları Geç Yükleyin

Web sayfalarındaki video içerikler de genellikle büyük veri yüklemelerine neden olur. Lazy loading, videolar için de oldukça faydalıdır. Video içeriklerinin yalnızca kullanıcı sayfada belirli bir alana geldiğinde yüklenmesini sağlayarak, sayfanın hızlı açılmasını sağlayabilirsiniz. Ayrıca, video yüklenmeden önce bir placeholder (yer tutucu) görüntüleyerek kullanıcıya görsel bir ipucu verebilirsiniz.

3. JavaScript Dosyalarını Dinamik Olarak Yükleyin

Birçok web uygulamasında, sayfa ilk yüklendiğinde tüm JavaScript dosyaları yüklenir, ancak bazıları yalnızca kullanıcı etkileşimi sonrası gerekli olur. Lazy loading kullanarak JavaScript dosyalarını ihtiyaca göre yüklemek, sayfa yüklenme süresini kısaltır. Kullanıcılar sayfa ile etkileşimde bulundukça, yalnızca gerekli olan JavaScript kodları yüklenir.

function loadScript(src) {
  const script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}

document.getElementById('loadMore').addEventListener('click', function() {
  loadScript('additionalFeature.js');
});

4. API İsteklerini Lazy Load Edin

Web uygulamaları genellikle dış API'lere başvurur, ancak bu API istekleri sayfanın ilk yüklenme süresini artırabilir. API isteklerini lazy load etmek, yalnızca kullanıcı sayfanın belirli bir kısmına geldiğinde ya da belirli bir etkileşim gerçekleştiğinde isteklerin yapılmasını sağlar. Bu yöntem, sayfa yüklenmesinde önemli bir hız artışı sağlar.

5. Fontları Yalnızca Kullanıldıkları Zaman Yükleyin

Web fontları da sayfa yüklenmesinin yavaşlamasına neden olabilir. Lazy loading kullanarak fontları, yalnızca gerekli olduklarında yükleyebilirsiniz. Bu, özellikle büyük web uygulamalarında performansı iyileştirir.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'MyFont', sans-serif;
}

6. Dinamik İçerik Yükleme

Web sayfaları dinamik olarak içerik yüklemek için lazy loading kullanabilir. Kullanıcı sayfayı aşağı kaydırdıkça yeni içerikler yüklenir, böylece başlangıçta tüm içerik yüklenmez. Bu, sayfanın hızlı yüklenmesini ve kullanıcıların sayfayla hızlı bir şekilde etkileşimde bulunmasını sağlar. Sayfada kaydırma (scroll) olaylarını dinleyerek yeni içerik yüklemek, modern web uygulamalarında oldukça yaygın bir tekniktir.

7. Lazy Loading İçin Üçüncü Taraf Kütüphaneleri Kullanın

Lazy loading uygulamak için bazı popüler JavaScript kütüphanelerini kullanabilirsiniz. Bu kütüphaneler, lazy loading işlevselliğini hızlı bir şekilde entegre etmenizi sağlar. Örneğin, *Lozad.js* veya *LazyLoad* gibi kütüphaneler, hızlı ve verimli bir lazy loading uygulaması sağlar.

const observer = lozad('.lozad', {
  loaded: function(el) {
    el.classList.add('loaded');
  }
});
observer.observe();

Sonuç olarak, lazy loading, modern web uygulamalarının hızını ve performansını iyileştirmenin güçlü bir yoludur. Görsellerden API isteklerine kadar bir dizi farklı öğe için lazy loading uygulayarak, kullanıcı deneyimini önemli ölçüde iyileştirebilirsiniz. Performans artışı sağlamak için bu teknikleri web uygulamanıza entegre etmek, yalnızca sayfa hızınızı artırmakla kalmaz, aynı zamanda SEO sıralamanızı da iyileştirecektir.