Pertemuan 14 – Optimasi Performa Web

← Kembali ke Beranda

Tujuan Pembelajaran

Mahasiswa diharapkan mampu mengoptimalkan performa website menggunakan teknik caching dan performance tuning untuk meningkatkan kecepatan loading, user experience, dan efisiensi resource.

Caching dan Performance Tuning

Caching simpan resource (CSS, JS, gambar) di browser/cache server agar load cepat saat revisit. Performance tuning optimasi kode/resource untuk kurangi load time. Teknik: Browser cache, service worker (PWA), minify file, compress gambar, lazy loading.

Analoginya: Caching seperti simpan bahan di dapur, tuning seperti efisiensi resep.

Teknik Utama Optimasi

  • Caching: Gunakan HTTP headers (Cache-Control) atau service worker untuk offline access.
  • Minify: Kompres CSS/JS hapus spasi/comment, gunakan tools online.
  • Compress Gambar: Kurangi ukuran file tanpa loss quality.
  • Lazy Loading: Load gambar saat scroll, tambah loading="lazy".

Tools: Google PageSpeed Insights audit performa, GTmetrix measure speed.

Contoh Kode

// Service Worker untuk Caching (sw.js)
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll(['/', '/index.html', '/style.css']);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

// Register: navigator.serviceWorker.register('sw.js');

// Lazy Loading
<img src="image.jpg" alt="Lazy" loading="lazy">

// Minify CSS (hasil tool)
body{margin:0;font-family:Arial,sans-serif}

Penjelasan: Service worker cache resource. Lazy loading tunda load gambar. Minify kurangi ukuran file.

Tips Praktis

  • Gunakan CDN untuk library (jQuery via CDN) kurangi load server.
  • Audit dengan Lighthouse: Buka dev tools > Lighthouse > Generate report.
  • Untuk gambar, gunakan format WebP untuk compress lebih baik.
  • Test performa di mobile, karena bandwidth terbatas.

Ringkasan Materi

Optimasi performa buat web cepat dan efisien. Caching dan tuning tingkatkan UX, kurangi bounce rate.

Latihan dan Diskusi

1. Audit website dengan PageSpeed Insights, implementasi 3 rekomendasi. 2. Tambah lazy loading ke gambar. 3. Minify CSS/JS file. 4. Diskusikan: Mengapa performa penting untuk e-commerce? Jika lambat, cek Network tab dev tools.