M

MLOG

Bahasa Indonesia

Panduan komprehensif untuk lazy loading gambar dan komponen, meningkatkan performa situs web dan pengalaman pengguna untuk audiens global.

Lazy Loading: Mengoptimalkan Performa Web dengan Gambar dan Komponen

Di lanskap digital saat ini, performa situs web adalah yang terpenting. Pengguna mengharapkan pengalaman yang cepat dan responsif, dan mesin pencari memprioritaskan situs web yang mampu memberikannya. Salah satu teknik penting untuk meningkatkan performa adalah lazy loading. Artikel ini menyediakan panduan komprehensif untuk lazy loading gambar dan komponen, membantu Anda mengoptimalkan situs web Anda untuk audiens global.

Apa itu Lazy Loading?

Lazy loading adalah teknik yang menunda pemuatan sumber daya (gambar, iframe, komponen, dll.) hingga benar-benar dibutuhkan – biasanya, saat sumber daya tersebut akan masuk ke dalam viewport. Ini berarti alih-alih memuat semua aset di awal, browser hanya memuat sumber daya yang terlihat oleh pengguna pada pemuatan halaman awal. Saat pengguna menggulir halaman ke bawah, lebih banyak sumber daya dimuat saat menjadi terlihat.

Anggap saja seperti ini: bayangkan Anda sedang berkemas untuk bepergian. Alih-alih membawa seluruh lemari pakaian Anda dari awal, Anda hanya mengemas pakaian yang Anda tahu akan segera Anda butuhkan. Seiring perjalanan Anda, Anda membongkar barang-barang tambahan saat Anda membutuhkannya. Pada dasarnya, begitulah cara kerja lazy loading untuk situs web.

Mengapa Menggunakan Lazy Loading?

Lazy loading menawarkan beberapa keuntungan signifikan:

Lazy Loading Gambar

Gambar sering kali merupakan aset terbesar di sebuah situs web, menjadikannya kandidat utama untuk lazy loading. Berikut cara menerapkan lazy loading untuk gambar:

Lazy Loading Bawaan (Native)

Browser modern (Chrome, Firefox, Safari, dan Edge) sekarang mendukung lazy loading bawaan menggunakan atribut loading. Ini adalah cara termudah dan paling efisien untuk melakukan lazy loading pada gambar.

Untuk mengaktifkan lazy loading bawaan, cukup tambahkan atribut loading="lazy" ke tag <img> Anda:

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

Atribut loading dapat memiliki tiga nilai:

Contoh:

<img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">

Dalam contoh ini, gambar Jembatan London, Langit Tokyo, dan Rio de Janeiro hanya akan dimuat saat pengguna menggulir ke arahnya. Ini sangat membantu, terutama jika pengguna tidak menggulir hingga ke bagian paling bawah halaman.

Lazy Loading dengan JavaScript

Untuk browser lama yang tidak mendukung lazy loading bawaan, Anda dapat menggunakan pustaka JavaScript atau menulis skrip kustom Anda sendiri. Berikut adalah contoh dasar menggunakan Intersection Observer API:

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);
});

Penjelasan:

  1. Kita memilih semua elemen <img> yang memiliki atribut data-src.
  2. Kita membuat instance IntersectionObserver baru. Fungsi callback dieksekusi ketika elemen yang diamati masuk atau keluar dari viewport.
  3. Di dalam fungsi callback, kita mengulang entries (elemen-elemen yang telah berpotongan dengan viewport).
  4. Jika sebuah elemen berpotongan (entry.isIntersecting bernilai true), kita mengatur atribut src dari gambar ke nilai atribut data-src.
  5. Kita kemudian menghapus atribut data-src dan menghentikan pengamatan pada gambar, karena tidak lagi diperlukan.
  6. Akhirnya, kita mengamati setiap gambar menggunakan observer.observe(img).

Struktur HTML:

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

Perhatikan bahwa URL gambar yang sebenarnya ditempatkan di atribut data-src alih-alih atribut src. Ini mencegah browser memuat gambar secara langsung.

Menggunakan Pustaka Lazy Loading

Beberapa pustaka JavaScript dapat menyederhanakan proses lazy loading gambar. Beberapa opsi populer meliputi:

Pustaka-pustaka ini biasanya menyediakan API sederhana untuk menginisialisasi lazy loading dan menawarkan fitur tambahan seperti gambar placeholder dan efek transisi.

Lazy Loading Komponen

Lazy loading tidak hanya untuk gambar; ini juga dapat diterapkan pada komponen, terutama dalam kerangka kerja JavaScript modern seperti React, Angular, dan Vue. Ini sangat berguna untuk aplikasi halaman tunggal (SPA) besar dengan banyak komponen.

Lazy Loading di React

React menyediakan fungsi React.lazy() bawaan untuk lazy loading komponen. Fungsi ini memungkinkan Anda untuk mengimpor komponen secara dinamis, yang kemudian dimuat hanya saat dirender.

import React, { Suspense } from 'react';

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

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

export default App;

Penjelasan:

  1. Kita menggunakan React.lazy() untuk mengimpor MyComponent secara dinamis. Fungsi import() mengembalikan sebuah promise yang akan resolve ke modul komponen.
  2. Kita membungkus MyComponent dalam komponen <Suspense>. Komponen Suspense memungkinkan Anda menampilkan UI fallback (dalam hal ini, "Loading...") saat komponen sedang dimuat.

Lazy Loading di Angular

Angular mendukung lazy loading modul menggunakan properti loadChildren dalam konfigurasi routing.

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

Penjelasan:

  1. Kita mendefinisikan rute untuk path my-module.
  2. Kita menggunakan properti loadChildren untuk menentukan bahwa MyModuleModule harus di-lazy load. Fungsi import() mengimpor modul secara dinamis.
  3. Metode then() digunakan untuk mengakses modul dan mengembalikan kelas MyModuleModule.

Lazy Loading di Vue.js

Vue.js mendukung lazy loading komponen menggunakan impor dinamis dan tag component.

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

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

Penjelasan:

  1. Kita menggunakan tag <component> dengan atribut :is untuk merender komponen secara dinamis.
  2. Di dalam lifecycle hook mounted, kita menggunakan fungsi import() untuk mengimpor MyComponent.vue secara dinamis.
  3. Kita kemudian mengatur properti data dynamicComponent ke ekspor default dari modul tersebut.

Praktik Terbaik untuk Lazy Loading

Untuk memastikan bahwa lazy loading diterapkan secara efektif, pertimbangkan praktik terbaik berikut:

Pertimbangan Internasionalisasi

Saat menerapkan lazy loading untuk audiens global, pertimbangkan faktor-faktor internasionalisasi berikut:

Kesimpulan

Lazy loading adalah teknik yang kuat untuk mengoptimalkan performa situs web dan meningkatkan pengalaman pengguna. Dengan menunda pemuatan sumber daya di luar layar, Anda dapat mengurangi waktu muat halaman awal, menurunkan konsumsi bandwidth, dan meringankan beban server. Baik Anda membangun situs web pribadi kecil atau aplikasi perusahaan besar, lazy loading harus menjadi bagian penting dari strategi optimasi performa Anda. Dengan mengikuti praktik terbaik yang diuraikan dalam artikel ini dan mempertimbangkan faktor internasionalisasi, Anda dapat memastikan bahwa implementasi lazy loading Anda efektif dan memberikan pengalaman pengguna yang positif untuk audiens global.

Rangkullah lazy loading dan buka pengalaman web yang lebih cepat, lebih efisien, dan ramah pengguna untuk semua orang.

Lazy Loading: Mengoptimalkan Performa Web dengan Gambar dan Komponen | MLOG