Website Performance Optimization: Membuat Website Super Cepat

Mengapa Performance Penting di 2024?

Google Core Web Vitals sekarang menjadi ranking factor utama. Website yang lambat tidak hanya kehilangan user, tapi juga ranking di search engine. 53% user akan meninggalkan website jika loading lebih dari 3 detik.

Core Web Vitals Metrics

• LCP (Largest Contentful Paint): < 2.5 detik
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1
• FCP (First Contentful Paint): < 1.8 detik
• TTI (Time to Interactive): < 3.8 detik

Image Optimization Strategies

Images biasanya mengambil 60-70% dari total page weight:

• Gunakan format modern: WebP, AVIF untuk browser support
• Implement lazy loading untuk images below the fold
• Responsive images dengan srcset
• Compress images tanpa mengurangi quality
• Use CDN untuk faster delivery

<!-- Modern responsive image -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg"
       alt="Description"
       loading="lazy"
       width="800"
       height="600">
</picture>

<!-- JAMstack Image component -->
<Image
  src="/image.jpg"
  alt="Description"
  width={800}
  height={600}
  priority={false}
  placeholder="blur"
/>

JavaScript Optimization

• Code splitting untuk load hanya yang dibutuhkan
• Tree shaking untuk remove unused code
• Minification dan compression
• Use modern bundlers (Vite, Webpack 5)
• Implement service workers untuk caching

CSS Performance

• Critical CSS inline untuk above-the-fold content
• Remove unused CSS dengan tools seperti PurgeCSS
• Use CSS containment untuk better rendering
• Optimize CSS delivery dengan preload
• Minimize reflows dan repaints

Caching Strategies

// Service Worker caching strategy
self.addEventListener('fetch', event => {
  if (event.request.destination === 'image') {
    event.respondWith(
      caches.open('images').then(cache => {
        return cache.match(event.request).then(response => {
          return response || fetch(event.request).then(fetchResponse => {
            cache.put(event.request, fetchResponse.clone());
            return fetchResponse;
          });
        });
      })
    );
  }
});

// HTTP Cache Headers
Cache-Control: public, max-age=31536000, immutable
ETag: "abc123"
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT