Web Performance Optimization: Panduan Lengkap

// Mengukur LCP menggunakan PerformanceObserver
const lcpObserver = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];

  console.log('LCP:', lastEntry.startTime.toFixed(2), 'ms');
  console.log('Element:', lastEntry.element);

  // Kategorikan skor
  if (lastEntry.startTime <= 2500) {
    console.log('✅ LCP Good');
  } else if (lastEntry.startTime <= 4000) {
    console.log('⚠️ LCP Needs Improvement');
  } else {
    console.log('❌ LCP Poor');
  }
});

lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

<!-- Preload font yang digunakan di hero section -->
<link rel="preload" href="/fonts/inter-bold.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- Preload gambar hero (LCP element) -->
<link rel="preload" href="/images/hero.webp"
      as="image" type="image/webp">

<!-- Preconnect ke domain CDN -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<!-- DNS Prefetch untuk domain pihak ketiga -->
<link rel="dns-prefetch" href="https://analytics.google.com">

<!-- Render-blocking CSS — inline critical CSS -->
<style>
  /* Critical CSS di-inline langsung di HTML */
  .hero { display: flex; align-items: center; min-height: 100vh; }
  .hero h1 { font-size: 3rem; font-weight: 700; color: #fff; }
</style>

<!-- Non-critical CSS dimuat secara async -->
<link rel="preload" href="/css/full.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

// ❌ Buruk: Blocking main thread dengan operasi berat
button.addEventListener('click', () => {
  // Operasi sinkron yang berat — memblokir respons
  for (let i = 0; i < 1000000; i++) {
    heavyCalculation(i);
  }
  updateUI();
});

// ✅ Baik: Gunakan requestIdleCallback atau setTimeout
button.addEventListener('click', () => {
  // Bagi pekerjaan berat menjadi chunk kecil
  const items = Array.from({ length: 1000000 });

  function processChunk(startIndex) {
    const chunk = items.slice(startIndex, startIndex + 1000);

    chunk.forEach(item => heavyCalculation(item));

    if (startIndex + 1000 < items.length) {
      // Yield kembali ke main thread
      requestIdleCallback(() => processChunk(startIndex + 1000));
    } else {
      updateUI();
    }
  }

  requestIdleCallback(() => processChunk(0));
});

// ✅ Baik: Gunakan Web Workers untuk komputasi berat
const worker = new Worker('heavy-task.js');
worker.postMessage({ data: largeDataset });
worker.onmessage = (e) => {
  updateUI(e.data.result);
};

/* Selalu tentukan dimensi gambar */
img, video {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

/* Atau gunakan aspect-ratio property */
.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Placeholder untuk iklan / konten dinamis */
.ad-container {
  min-height: 250px;  /* Reserve space */
  background: #1a1a1a;
}

/* Font loading — hindari FOIT */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* Tampilkan fallback font dulu */
}

/* Hindari inject konten di atas konten existing */
.notification-banner {
  /* Gunakan position: sticky bukan absolute */
  position: sticky;
  top: 0;
  z-index: 1000;
}

<!-- Gambar di bawah fold: gunakan loading="lazy" -->
<img src="/images/product-1.webp"
     alt="Produk 1"
     width="400" height="300"
     loading="lazy"
     decoding="async">

<!-- Gambar di atas fold: JANGAN lazy load -->
<img src="/images/hero.webp"
     alt="Hero Banner"
     width="1200" height="600"
     loading="eager"
     fetchpriority="high">

<!-- Lazy load iframe (video YouTube, Google Maps) -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        loading="lazy"
        width="560" height="315"
        title="Video Tutorial"
        allowfullscreen></iframe>

// Lazy load gambar dengan Intersection Observer
function setupLazyImages() {
  const images = document.querySelectorAll('img[data-src]');

  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;

        // Ganti data-src dengan src
        img.src = img.dataset.src;

        // Jika ada srcset
        if (img.dataset.srcset) {
          img.srcset = img.dataset.srcset;
        }

        img.classList.add('loaded');
        observer.unobserve(img);
      }
    });
  }, {
    rootMargin: '200px 0px',  // Mulai load 200px sebelum terlihat
    threshold: 0.01
  });

  images.forEach(img => imageObserver.observe(img));
}

// Jalankan saat DOM siap
document.addEventListener('DOMContentLoaded', setupLazyImages);

// Contoh HTML:
// <img data-src="/images/foto.webp"
//      src="/images/placeholder.svg"
//      alt="Foto" width="400" height="300">

import { lazy, Suspense } from 'react';

// Lazy load komponen berat
const ChartDashboard = lazy(() => import('./ChartDashboard'));
const VideoPlayer = lazy(() => import('./VideoPlayer'));
const MapComponent = lazy(() => import('./MapComponent'));

function Dashboard() {
  return (
    <div className="dashboard">
      <h1>Dashboard</h1>

      {/* Komponen dimuat hanya saat dibutuhkan */}
      <Suspense fallback={<div className="skeleton">Memuat chart...</div>}>
        <ChartDashboard />
      </Suspense>

      <Suspense fallback={<div className="skeleton">Memuat video...</div>}>
        <VideoPlayer src="/videos/tutorial.mp4" />
      </Suspense>

      <Suspense fallback={<div className="skeleton">Memuat peta...</div>}>
        <MapComponent lat={-6.2} lng={106.8} />
      </Suspense>
    </div>
  );
}

// ❌ Static import — semua dimuat sekaligus
import { Chart } from 'chart.js';
import moment from 'moment';
import lodash from 'lodash';

// ✅ Dynamic import — dimuat saat dibutuhkan
async function renderChart(data) {
  // Chart.js dimuat hanya saat fungsi dipanggil
  const { Chart } = await import('chart.js/auto');
  const chart = new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: data
  });
  return chart;
}

// Dynamic import dengan error handling
async function loadAnalytics() {
  try {
    const module = await import('./analytics.js');
    module.trackPageView();
  } catch (error) {
    console.error('Gagal memuat modul analytics:', error);
    // Fallback: kirim data dasar tanpa library
    sendBasicAnalytics();
  }
}

// Conditional loading — hanya di halaman tertentu
if (window.location.pathname === '/dashboard') {
  import('./dashboard-charts.js').then(module => {
    module.initCharts();
  });
}

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // Pisahkan vendor libraries ke chunk terpisah
        manualChunks: {
          'vendor-react': ['react', 'react-dom'],
          'vendor-utils': ['lodash', 'date-fns'],
          'vendor-charts': ['chart.js', 'd3'],
        },
      },
    },
    // Batasi ukuran chunk warning
    chunkSizeWarningLimit: 500, // 500 KB
  },
});

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Setiap halaman di-split menjadi chunk terpisah
const HomePage = lazy(() => import('./pages/HomePage'));
const ProductPage = lazy(() => import('./pages/ProductPage'));
const CheckoutPage = lazy(() => import('./pages/CheckoutPage'));
const ProfilePage = lazy(() => import('./pages/ProfilePage'));
const AdminPage = lazy(() => import('./pages/AdminPage'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div className="page-loader">Loading...</div>}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/produk/:id" element={<ProductPage />} />
          <Route path="/checkout" element={<CheckoutPage />} />
          <Route path="/profil" element={<ProfilePage />} />
          <Route path="/admin/*" element={<AdminPage />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

<!-- Gunakan <picture> untuk format modern dengan fallback -->
<picture>
  <!-- AVIF untuk browser yang mendukung (terkecil) -->
  <source
    srcset="/images/hero-400.avif 400w,
            /images/hero-800.avif 800w,
            /images/hero-1200.avif 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1024px) 800px,
           1200px"
    type="image/avif">

  <!-- WebP sebagai opsi kedua -->
  <source
    srcset="/images/hero-400.webp 400w,
            /images/hero-800.webp 800w,
            /images/hero-1200.webp 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1024px) 800px,
           1200px"
    type="image/webp">

  <!-- JPEG sebagai fallback -->
  <img
    src="/images/hero-800.jpg"
    alt="Hero Banner"
    width="1200" height="600"
    loading="eager"
    fetchpriority="high">
</picture>

<!-- Menggunakan srcset untuk resolusi berbeda -->
<img
  srcset="/images/foto-small.webp 480w,
          /images/foto-medium.webp 768w,
          /images/foto-large.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="/images/foto-medium.webp"
  alt="Foto produk"
  loading="lazy"
  decoding="async"
  width="800" height="600">

# Instal Sharp — library pemrosesan gambar untuk Node.js
npm install sharp

# Atau gunakan CLI tools
npm install -g @squoosh/cli    # Google Squoosh CLI
npm install -g imagemin-cli     # Imagemin CLI

# Contoh: Konversi batch ke WebP menggunakan sharp
node -e "
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './images/original';
const outputDir = './images/optimized';

fs.readdirSync(inputDir).forEach(file => {
  const input = path.join(inputDir, file);
  const output = path.join(outputDir,
    file.replace(/\.(jpg|png)$/, '.webp'));

  sharp(input)
    .resize({ width: 1200, withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(output)
    .then(info => console.log(file, '→', info.size / 1024, 'KB'));
});
"

# /etc/nginx/conf.d/cache.conf

# Cache aset statis (CSS, JS, gambar, font) selama 1 tahun
location ~* \.(css|js|jpg|jpeg|png|gif|webp|avif|svg|woff2|woff)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header Vary "Accept-Encoding";
}

# Cache HTML selama 5 menit dengan revalidation
location ~* \.html$ {
    expires 5m;
    add_header Cache-Control "public, must-revalidate";
}

# API response — cache 1 jam
location /api/ {
    expires 1h;
    add_header Cache-Control "public, stale-while-revalidate=3600";
}

# Tidak cache halaman sensitif
location /admin/ {
    add_header Cache-Control "no-store, no-cache, must-revalidate";
    add_header Pragma "no-cache";
}

// service-worker.js — Cache-First Strategy untuk aset statis
const CACHE_NAME = 'beebane-v1';
const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/css/style.css',
  '/js/app.js',
  '/images/logo_beebane.png',
  '/offline.html',
];

// Install: cache aset statis
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
  self.skipWaiting();
});

// Activate: hapus cache lama
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(
        keys.filter(key => key !== CACHE_NAME)
            .map(key => caches.delete(key))
      );
    })
  );
  self.clients.claim();
});

// Fetch: strategi cache-first untuk aset, network-first untuk API
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);

  // Aset statis: cache-first
  if (STATIC_ASSETS.includes(url.pathname)) {
    event.respondWith(
      caches.match(event.request).then(cached => {
        return cached || fetch(event.request);
      })
    );
    return;
  }

  // API: network-first dengan fallback ke cache
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          const clone = response.clone();
          caches.open(CACHE_NAME).then(cache => {
            cache.put(event.request, clone);
          });
          return response;
        })
        .catch(() => caches.match(event.request))
    );
    return;
  }
});

<!-- Font dari Google Fonts CDN dengan preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Self-host lebih baik daripada CDN pihak ketiga -->
<!-- Download font dan simpan di server/CDN sendiri -->
<style>
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
</style>

<!-- Subresource Integrity — keamanan CDN pihak ketiga -->
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"
        integrity="sha384-xxx..."
        crossorigin="anonymous"></script>

# Instal Lighthouse globally
npm install -g lighthouse

# Jalankan audit pada halaman website
lighthouse https://example.com \
  --output=html \
  --output-path=./report.html \
  --chrome-flags="--headless --no-sandbox" \
  --only-categories=performance

# Jalankan untuk mobile
lighthouse https://example.com \
  --preset=perf \
  --form-factor=mobile \
  --throttling-method=simulate

# Bandingkan performa sebelum dan sesudah optimasi
lighthouse https://example.com --output=json --output-path=before.json
# ... lakukan optimasi ...
lighthouse https://example.com --output=json --output-path=after.json

# Hasil umum yang ingin dicapai:
# Performance Score: ≥ 90
# LCP: ≤ 2.5s
# INP: ≤ 200ms
# CLS: ≤ 0.1

# /etc/nginx/conf.d/compression.conf

# Brotli compression (lebih efisien dari Gzip)
brotli on;
brotli_comp_level 6;
brotli_types
  text/plain
  text/css
  text/javascript
  application/javascript
  application/json
  application/xml
  image/svg+xml;

# Gzip sebagai fallback
gzip on;
gzip_comp_level 6;
gzip_min_length 256;
gzip_vary on;
gzip_types
  text/plain
  text/css
  text/javascript
  application/javascript
  application/json
  image/svg+xml;