Mempercepat Performa Front End dengan Caching dan Lazy Loading

Hello, Spirit Of Learning!✨

Siapa di sini yang masih bingung kenapa web Front End kita buat itu kadang lambat dan performa nya kurang?🤔

Terus bagaimana ya agar web yang kita buat mempunyai performance yang baik?

Agar website yang kita buat mempunyai performance yang baik, ada tekniknya nih!. Salah satunya dengan teknik caching dan lazy loading yang akan dibahas pada artikel kali ini. Yuk langsung aja kita gas kupas tuntas mengenai caching dan lazy loading 😁

Pengenalan Performa Front End

Performa Front End adalah proses untuk memahami dan meningkatkan kinerja antarmuka pengguna (UI) pada situs web atau aplikasi. Kinerja UI berkaitan dengan seberapa cepat, lancar, dan responsif UI dapat ditampilkan dan dioperasikan oleh pengguna. Performa UI yang baik dapat meningkatkan kepuasan, loyalitas, dan konversi pengguna, serta mengurangi biaya pengembangan dan pemeliharaan.

Lalu Apa Itu “Catching” ?

Caching adalah proses menyimpan salinan data di tempat penyimpanan sementara, yang disebut cache, sehingga data tersebut dapat diakses lebih cepat. Tujuan caching adalah untuk meningkatkan kinerja dan efisiensi sistem dengan mengurangi waktu yang dibutuhkan untuk mengakses data yang sering digunakan.

Manfaat Catching

Menggunakan caching pasti ada manfaat yang sangat signifikan dong, yaitu antara lain:

  • Dapat mengurangi waktu muat halaman: Dengan menyimpan data yang sering digunakan di cache lokal, browser tidak perlu mengunduh data tersebut setiap kali pengguna membuka halaman yang sama.
  • Caching dapat menghemat bandwidth: Data yang disimpan di cache tidak perlu diunduh setiap kali pengguna mengunjungi halaman.
  • Caching dapat mempercepat respons aplikasi: Ketika data disimpan di cache, waktu yang dibutuhkan untuk mengambil data tersebut dan menampilkannya pada user interface bisa jauh lebih cepat dibandingkan dengan mengambil data langsung dari server.

Dengan demikian, caching adalah teknik penting yang dapat membantu mempercepat performa Front End aplikasi web.

Implementasi Catching

Lalu apa saja nih yang bisa diterapkan untuk implementasi caching ?

Ada 3 implementasi, yaitu menggunakan Service Workers, Local Storage, dan Cache API. Yuk kita kupas tuntas ketiganya 🔥

Service Workers

Service worker adalah sebuah fitur yang memungkinkan kita untuk mengontrol permintaan dan respons jaringan antara browser web dan server web.

Let's make the code

Berikut adalah contoh sederhana kode Service Worker yang dapat digunakan untuk caching aset statis seperti file HTML, CSS, JavaScript, dan gambar:

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js',
  '/images/logo.png',
  // Tambahkan URL aset lain yang ingin kamu cache di sini
];

self.addEventListener('install', function(event) {
  // Install Service Worker
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Cache dibuka');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  // Menangani permintaan fetch
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cek apakah ada respons dalam cache
        if (response) {
          // Jika ada, kembalikan respons dari cache
          return response;
        }

        // Jika tidak ada, lakukan permintaan fetch ke jaringan
        return fetch(event.request);
      })
  );
});

self.addEventListener('activate', function(event) {
  // Menghapus cache yang tidak terpakai saat Service Worker diaktifkan
  var cacheWhitelist = ['my-site-cache-v1'];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Pastikan kamu menyimpan file service-worker.js di-root direktori proyek web kamu dan mendaftarkannya dari file JavaScript utama kamu, biasanya main.js atau file JavaScript utama lainnya.

Kamu dapat mendaftarkan Service Worker seperti ini:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('ServiceWorker registrasi berhasil: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registrasi gagal: ', err);
    });
  });
}

Local Storage

Local storage adalah sebuah fitur yang memungkinkan kita untuk menyimpan pasangan key dan value di browser web. Data yang disimpan di local storage tidak memiliki batas waktu kadaluarsa, dan tetap tersedia untuk sesi browser berikutnya.

Let's make the code

Berikut adalah contoh penggunaan Local Storage dalam JavaScript:

// Menyimpan data ke Local Storage
localStorage.setItem('nama', 'John');
localStorage.setItem('umur', 30);

// Mendapatkan data dari Local Storage
const nama = localStorage.getItem('nama');
const umur = localStorage.getItem('umur');

console.log(`Nama: ${nama}, Umur: ${umur}`);

// Menghapus data dari Local Storage
localStorage.removeItem('umur');

// Membersihkan semua data dari Local Storage
localStorage.clear();

Cache API

CacheAPI adalah sebuah fitur yang memungkinkan kita untuk menyimpan dan mengambil permintaan dan respons jaringan di browser web. Data yang disimpan di cache bisa berupa permintaan dan respons yang dibuat saat menjalankan aplikasi, atau yang dibuat khusus untuk menyimpan data untuk digunakan nanti.

Lalu Apa Itu “Lazy Loading”?

Lazy Loading adalah teknik yang digunakan untuk mengoptimalkan pemuatan konten pada sebuah website. Bayangkan kamu sedang membuka halaman web. Biasanya, semua konten seperti gambar dan video dimuat sekaligus. Tapi dengan lazy loading konten-konten ini tidak ditampilkan semua sekaligus

Manfaat Lazy Loading

Lazy loading juga memiliki beberapa manfaat penting dalam meningkatkan performa aplikasi web, yaitu antara lain:

  • Pengurangan waktu dan memori: Hanya sebagian kecil halaman web yang diperlukan dimuat terlebih dahulu, sehingga waktu yang dibutuhkan lebih sedikit dan penggunaan memori lebih efisien.
  • Pengalaman pengguna lebih baik: Konten yang diminta diumpankan dengan cepat, meningkatkan pengalaman pengguna.
  • Hemat biaya: Pendekatan hemat biaya dari sudut pandang pemilik situs web.
  • Tidak perlu kode tambahan: Untuk pengguna WordPress, tidak perlu repot membuat kode tambahan untuk lazy loading

Implementasi Lazy Loading

Lalu apa saja nih yang bisa diterapkan untuk implementasi lazy loading ?

Ada 3 implementasi, yaitu menggunakan Intersection Observer API, Javascript Dynamic Imports, dan React.Lazy(). Yuk kita kupas tuntas ketiganya 🔥

Intersection Observer API

Intersection Observer API adalah sebuah fitur yang memungkinkan kita untuk mengamati perubahan pada posisi suatu elemen di halaman web. Misalnya, kita bisa mengetahui apakah elemen tersebut sudah masuk ke dalam area pandang pengguna viewport atau belum, atau apakah elemen tersebut berpotongan dengan elemen lain.

Let's make the code

Berikut adalah contoh penggunaan Intersection Observer API untuk implementasi lazy loading pada gambar:

// Dapatkan semua elemen gambar yang ingin diterapkan lazy loading
const images = document.querySelectorAll('.lazy');

// Buat instance Intersection Observer
const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    // Jika elemen gambar tidak dalam viewport, hentikan eksekusi fungsi
    if(!entry.isIntersecting) return;

    // Jika elemen gambar dalam viewport, tambahkan URL gambar ke atribut src
    const img = entry.target;
    img.src = img.dataset.src;

    // Hapus class 'lazy' dan berhenti mengobservasi gambar
    img.classList.remove('lazy');
    observer.unobserve(img);
  });
});

// Mulai mengobservasi setiap gambar
images.forEach(img => observer.observe(img));

JavaScript Dynamic Imports

JavaScript dynamic imports adalah cara untuk mengimpor modul secara dinamis dan asinkron pada saat runtime. Ini berbeda dengan impor statis yang dievaluasi pada saat load time.

Let's make the code

Berikut adalah contoh penggunaan impor dinamis dalam JavaScript untuk lazy loading:

button.addEventListener('click', event => {
  // Impor modul JavaScript secara dinamis ketika tombol diklik
  import('./dialogBox.js')
    .then(dialogBox => {
      dialogBox.open();
    })
    .catch(error => {
      /* handle error */
    });
});

React.Lazy()

React.lazy() adalah sebuah fungsi yang memungkinkan kita untuk mengimpor komponen React secara dinamis dan asinkron pada saat runtime. Ini berarti kita bisa menunda pemuatan kode komponen sampai komponen tersebut benar-benar dibutuhkan untuk ditampilkan. Hal ini bisa meningkatkan kinerja dan efisiensi aplikasi React kita, karena kita tidak perlu mengirimkan seluruh bundle kode ke browser pengguna.

Let's make the code

Berikut adalah contoh penggunaan React.lazy() untuk implementasi lazy loading dalam aplikasi React:

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

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

Dalam contoh di atas, React.lazy() memuat OtherComponent hanya ketika OtherComponent perlu di-render. Suspense digunakan untuk menampilkan konten fallback dalam hal ini, "Loading..." sementara OtherComponent sedang dimuat.

Penerapan Bersamaan Caching dan Lazy Loading

Penerapan bersamaan caching dan lazy loading adalah sebuah strategi untuk meningkatkan kinerja dan efisiensi website dengan cara mengatur kapan dan bagaimana konten dimuat dan disimpan. Caching adalah proses menyimpan data yang sering digunakan di tempat yang mudah diakses, seperti memori atau disk, sehingga tidak perlu mengambilnya dari sumber aslinya setiap kali dibutuhkan. Lazy loading adalah proses menunda pemuatan konten yang tidak terlihat atau tidak penting sampai pengguna menggulir ke arahnya, sehingga menghemat bandwidth dan sumber daya.

Dengan menerapkan caching dan lazy loading secara bersamaan, kita bisa mendapatkan beberapa manfaat, seperti:

  • Meningkatkan kecepatan loading website: karena konten yang sudah disimpan di cache tidak perlu dimuat ulang, dan konten yang belum disimpan di cache hanya dimuat ketika diperlukan.
  • Menghemat kuota internet pengguna: karena konten yang tidak dilihat atau tidak diinginkan tidak perlu diunduh, dan konten yang diunduh bisa disimpan di cache untuk penggunaan selanjutnya.
  • Meningkatkan pengalaman pengguna: karena konten yang penting dan menarik bisa ditampilkan lebih cepat dan lebih lancar, tanpa gangguan atau jeda.

Kesimpulan

Nah, itulah 2 teknik yang bisa menaikan performance web kalian guys ! 😁

“Dengan demikian, penerapan bersamaan caching dan lazy loading dapat membantu mempercepat performa front end, mengurangi beban pada server, dan memberikan pengalaman pengguna yang lebih baik.”

Tentunya untuk melakukan implementasi tadi harus mempelajari Javascript terlebih dahulu. Tapi belum mempelajari javascript? tenang di BuildWithAngga menyediakan kelas gratis Javascript ES6 Dasar

Tunggu apa lagi? buruan join untuk upgrade skill front end bersama BuildWithAngga 😍

See you guys! ✨