M

MLOG

Türkçe

Görseller ve bileşenler için lazy loading'e yönelik bu kapsamlı rehberle web sitesi performansını ve küresel kullanıcı deneyimini artırın.

Lazy Loading: Görseller ve Bileşenlerle Web Performansını Optimize Etme

Günümüz dijital dünyasında web sitesi performansı her şeyden önemlidir. Kullanıcılar hızlı, duyarlı deneyimler bekler ve arama motorları bu deneyimi sunan web sitelerine öncelik verir. Performansı artırmak için en önemli tekniklerden biri lazy loading'dir. Bu makale, görsellerin ve bileşenlerin yavaş yüklenmesine yönelik kapsamlı bir rehber sunarak web sitenizi küresel bir kitle için optimize etmenize yardımcı olur.

Lazy Loading Nedir?

Lazy loading, kaynakların (görseller, iframe'ler, bileşenler vb.) gerçekten ihtiyaç duyulana kadar, yani genellikle görüntü alanına girmek üzereyken yüklenmesini erteleyen bir tekniktir. Bu, tüm varlıkları başlangıçta yüklemek yerine, tarayıcının yalnızca ilk sayfa yüklemesinde kullanıcı tarafından görülebilen kaynakları yüklediği anlamına gelir. Kullanıcı sayfayı aşağı kaydırdıkça, daha fazla kaynak görünür hale geldikçe yüklenir.

Şöyle düşünün: Bir seyahat için bavul hazırladığınızı hayal edin. Tüm gardırobunuzu baştan yanınızda sürüklemek yerine, yalnızca hemen ihtiyacınız olacağını bildiğiniz kıyafetleri paketlersiniz. Yolculuğunuzda ilerledikçe, ihtiyaç duyduğunuz ek eşyaları çıkarırsınız. Lazy loading'in web siteleri için çalışma şekli esasen budur.

Neden Lazy Loading Kullanılmalı?

Lazy loading birçok önemli avantaj sunar:

Görselleri Yavaş Yükleme (Lazy Loading)

Görseller genellikle bir web sitesindeki en büyük varlıklardır, bu da onları lazy loading için birincil adaylar yapar. İşte görseller için lazy loading'i nasıl uygulayacağınız:

Yerel (Native) Lazy Loading

Modern tarayıcılar (Chrome, Firefox, Safari ve Edge) artık loading niteliğini kullanarak yerel lazy loading'i desteklemektedir. Bu, görselleri yavaş yüklemenin en basit ve en verimli yoludur.

Yerel lazy loading'i etkinleştirmek için <img> etiketinize loading="lazy" niteliğini eklemeniz yeterlidir:

<img src="image.jpg" alt="Resmim" loading="lazy">

loading niteliği üç değere sahip olabilir:

Örnek:

<img src="london_bridge.jpg" alt="Londra Köprüsü" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Silüeti" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">

Bu örnekte, Londra Köprüsü, Tokyo Silüeti ve Rio de Janeiro'nun görselleri yalnızca kullanıcı onlara doğru kaydırdığında yüklenecektir. Bu, özellikle bir kullanıcı sayfanın en altına kadar kaydırmazsa son derece yardımcı olur.

JavaScript ile Lazy Loading

Yerel lazy loading'i desteklemeyen eski tarayıcılar için JavaScript kütüphaneleri kullanabilir veya kendi özel betiğinizi yazabilirsiniz. İşte Intersection Observer API'sini kullanarak temel bir örnek:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

Açıklama:

  1. data-src niteliğine sahip tüm <img> öğelerini seçiyoruz.
  2. Yeni bir IntersectionObserver örneği oluşturuyoruz. Geri arama işlevi, gözlemlenen bir öğe görüntü alanına girdiğinde veya çıktığında yürütülür.
  3. Geri arama işlevinin içinde, entries (görüntü alanıyla kesişen öğeler) üzerinde yineliyoruz.
  4. Bir öğe kesişiyorsa (entry.isIntersecting doğruysa), görselin src niteliğini data-src niteliğinin değerine ayarlıyoruz.
  5. Ardından data-src niteliğini kaldırıyoruz ve artık ihtiyaç duyulmadığı için görseli gözlemlemeyi bırakıyoruz.
  6. Son olarak, observer.observe(img) kullanarak her bir görseli gözlemliyoruz.

HTML Yapısı:

<img data-src="image.jpg" alt="Resmim">

Gerçek görsel URL'sinin src niteliği yerine data-src niteliğine yerleştirildiğine dikkat edin. Bu, tarayıcının görseli hemen yüklemesini engeller.

Lazy Loading Kütüphanelerini Kullanma

Çeşitli JavaScript kütüphaneleri, görsellerin yavaş yüklenmesi sürecini basitleştirebilir. Bazı popüler seçenekler şunlardır:

Bu kütüphaneler genellikle lazy loading'i başlatmak için basit bir API sağlar ve yer tutucu görseller ve geçiş efektleri gibi ek özellikler sunar.

Bileşenleri Yavaş Yükleme (Lazy Loading)

Lazy loading sadece görseller için değildir; özellikle React, Angular ve Vue gibi modern JavaScript framework'lerinde bileşenlere de uygulanabilir. Bu, birçok bileşene sahip büyük tek sayfa uygulamaları (SPA) için özellikle kullanışlıdır.

React'te Lazy Loading

React, bileşenleri yavaş yüklemek için yerleşik bir React.lazy() işlevi sunar. Bu işlev, bileşenleri dinamik olarak içe aktarmanıza olanak tanır ve bu bileşenler yalnızca render edildiklerinde yüklenir.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Yükleniyor...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

Açıklama:

  1. MyComponent'i dinamik olarak içe aktarmak için React.lazy() kullanıyoruz. import() işlevi, bileşen modülüne çözümlenen bir promise döndürür.
  2. MyComponent'i bir <Suspense> bileşeni içine sarıyoruz. Suspense bileşeni, bileşen yüklenirken bir yedek kullanıcı arayüzü (bu durumda, "Yükleniyor...") görüntülemenizi sağlar.

Angular'da Lazy Loading

Angular, yönlendirme yapılandırmasındaki loadChildren özelliğini kullanarak modüllerin yavaş yüklenmesini destekler.

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

Açıklama:

  1. my-module yolu için bir rota tanımlıyoruz.
  2. MyModuleModule'ün yavaş yüklenmesi gerektiğini belirtmek için loadChildren özelliğini kullanıyoruz. import() işlevi modülü dinamik olarak içe aktarır.
  3. then() metodu, modüle erişmek ve MyModuleModule sınıfını döndürmek için kullanılır.

Vue.js'de Lazy Loading

Vue.js, dinamik içe aktarmalar ve component etiketini kullanarak bileşenlerin yavaş yüklenmesini destekler.

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

Açıklama:

  1. Bir bileşeni dinamik olarak render etmek için :is niteliğine sahip <component> etiketini kullanıyoruz.
  2. mounted yaşam döngüsü kancasında, MyComponent.vue'yu dinamik olarak içe aktarmak için import() işlevini kullanıyoruz.
  3. Ardından dynamicComponent veri özelliğini modülün varsayılan dışa aktarımına ayarlıyoruz.

Lazy Loading için En İyi Uygulamalar

Lazy loading'in etkili bir şekilde uygulandığından emin olmak için bu en iyi uygulamaları göz önünde bulundurun:

Uluslararasılaştırma Hususları

Küresel bir kitle için lazy loading uygularken, bu uluslararasılaştırma faktörlerini göz önünde bulundurun:

Sonuç

Lazy loading, web sitesi performansını optimize etmek ve kullanıcı deneyimini iyileştirmek için güçlü bir tekniktir. Ekran dışı kaynakların yüklenmesini erteleyerek, ilk sayfa yükleme süresini azaltabilir, bant genişliği tüketimini düşürebilir ve sunucu yükünü azaltabilirsiniz. İster küçük bir kişisel web sitesi ister büyük bir kurumsal uygulama oluşturuyor olun, lazy loading performans optimizasyon stratejinizin önemli bir parçası olmalıdır. Bu makalede özetlenen en iyi uygulamaları takip ederek ve uluslararasılaştırma faktörlerini göz önünde bulundurarak, lazy loading uygulamanızın etkili olmasını ve küresel bir kitle için olumlu bir kullanıcı deneyimi sunmasını sağlayabilirsiniz.

Lazy loading'i benimseyin ve herkes için daha hızlı, daha verimli ve kullanıcı dostu bir web deneyiminin kilidini açın.