Web Performance 2026

// Mengukur INP menggunakan PerformanceObserver
const interactions = [];

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    interactions.push(entry);

    // Hanya simpan interaksi terburuk (INP = p98)
    if (interactions.length > 50) {
      interactions.sort((a, b) => b.duration - a.duration);
      interactions.length = 50; // Keep top 50
    }

    const inp = interactions[Math.floor(interactions.length * 0.98)];

    console.log(`INP estimate: ${inp.duration.toFixed(2)}ms`);
    console.log(`Type: ${inp.name}`);
    console.log(`Target: ${inp.target}`);

    if (inp.duration <= 200) {
      console.log('✅ INP Good');
    } else if (inp.duration <= 500) {
      console.log('⚠️ INP Needs Improvement');
    } else {
      console.log('❌ INP Poor');
    }
  }
});

observer.observe({ type: 'event', buffered: true, durationThreshold: 16 });

// ❌ BURUK: Blocking main thread dengan operasi berat
function handleBadClick() {
  // Operasi berat di event handler — blokir rendering!
  const result = heavyComputation(data);
  updateDOM(result);
}

// ✅ BAIK: Yield to browser menggunakan scheduler.yield()
async function handleGoodClick() {
  // Beri kesempatan browser untuk render
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  }

  // Batch operasi berat
  const result = await processInChunks(data, 10);

  // Update DOM satu kali (bukan per-item)
  requestAnimationFrame(() => {
    updateDOM(result);
  });
}

// Fungsi helper: proses data dalam chunk
async function processInChunks(data, chunkSize) {
  const results = [];
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    results.push(...processChunk(chunk));

    // Yield setiap chunk
    if ('scheduler' in window) {
      await scheduler.yield();
    } else {
      await new Promise(r => setTimeout(r, 0));
    }
  }
  return results;
}

// ✅ BAIK: Debounce input handler
const searchInput = document.getElementById('search');
let timeoutId;

searchInput.addEventListener('input', (e) => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    // Delay search agar tidak membebani main thread
    performSearch(e.target.value);
  }, 300);
});

// ✅ BAIK: Gunakan Web Workers untuk komputasi berat
const worker = new Worker('/js/search-worker.js');
function performSearch(query) {
  worker.postMessage({ type: 'search', query });
}
worker.onmessage = (e) => {
  renderResults(e.data);
};

<!-- Gambar di atas fold: JANGAN lazy load, JANGAN decoding async -->
<img
  src="/images/hero.webp"
  alt="Hero image"
  width="1200" height="600"
  fetchpriority="high"
  decoding="sync"
>

<!-- Gambar di bawah fold: lazy load + async decoding -->
<img
  src="/images/section-2.webp"
  alt="Section 2"
  width="800" height="400"
  loading="lazy"
  decoding="async"
  fetchpriority="low"
>

<!-- Gambar yang mungkin terlihat: auto (browser decide) -->
<img
  src="/images/maybe-visible.webp"
  alt="Maybe"
  loading="auto"
  decoding="async"
>

<!-- Iframe lazy loading -->
<iframe
  src="https://www.youtube.com/embed/abc123"
  loading="lazy"
  width="560" height="315"
  title="Video"
></iframe>

/* content-visibility: auto — skip rendering elemen di luar viewport */
/* Browser melewatkan rendering sampai elemen mendekati viewport */

/* Untuk section panjang di halaman */
.section-below-fold {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;  /* Perkiraan tinggi */
  /* Browser menggunakan 500px sebagai placeholder */
  /* Rendering aktual terjadi saat mendekati viewport */
}

/* Untuk card list */
.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Untuk konten panjang (blog post, FAQ) */
.article-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* Performance impact: */
/* Halaman dengan 100 card: */
/* Tanpa content-visibility: render semua → slow */
/* Dengan content-visibility: render hanya yang terlihat → fast */
/* Bisa menghemat 50-90% rendering time untuk halaman panjang */

// Dynamic import: load modul hanya saat dibutuhkan
// Ini mengurangi initial bundle size

// Lazy load chart library
async function loadChart() {
  const { Chart } = await import('chart.js/auto');
  return Chart;
}

// Lazy load berdasarkan interaksi
document.getElementById('show-chart-btn').addEventListener('click', async () => {
  const Chart = await loadChart();
  const ctx = document.getElementById('chart').getContext('2d');
  new Chart(ctx, { type: 'bar', data: chartData });
});

// Lazy load berdasarkan visibility (Intersection Observer)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(async (entry) => {
    if (entry.isIntersecting) {
      const module = await import('./heavy-component.js');
      module.default(entry.target);
      observer.unobserve(entry.target);
    }
  });
}, { rootMargin: '200px' });  // Load 200px sebelum terlihat

document.querySelectorAll('.heavy-section').forEach(el => observer.observe(el));

// Preload module berdasarkan user intent
document.addEventListener('mouseover', (e) => {
  if (e.target.matches('[data-chart]')) {
    import('./chart.js');  // Preload saat hover
  }
}, { once: true });

<!-- High priority: gambar hero (di atas fold) -->
<img src="/hero.webp" fetchpriority="high" alt="Hero">

<!-- Low priority: gambar dekoratif -->
<img src="/bg-pattern.svg" fetchpriority="low" alt="">

<!-- Auto priority: browser decide (default) -->
<img src="/content.webp" fetchpriority="auto" alt="Content">

<!-- Priority hints untuk resource lain -->
<!-- CSS kritis: high priority -->
<link rel="stylesheet" href="/critical.css" fetchpriority="high">

<!-- CSS non-kritis: low priority -->
<link rel="stylesheet" href="/animations.css" fetchpriority="low">

<!-- Font: high (karena mempengaruhi LCP) -->
<link rel="preload" href="/fonts/inter.woff2" as="font"
      fetchpriority="high" crossorigin>

<!-- Script non-kritis: low priority -->
<script src="/analytics.js" fetchpriority="low" defer></script>
<script src="/chat-widget.js" fetchpriority="low" defer></script>

<!-- Preconnect (tetap high, karena mempengaruhi semua request) -->
<link rel="preconnect" href="https://cdn.example.com" fetchpriority="high">

// Mengatur priority secara dinamis via JavaScript
// Berguna untuk single-page apps

// Preload gambar yang akan segera dilihat
const nextImage = new Image();
nextImage.fetchPriority = 'high';  // Beri prioritas tinggi
nextImage.src = '/images/next-section.webp';

// Prefetch resource untuk halaman berikutnya (low priority)
fetch('/api/next-page-data', { priority: 'low' });

// Prioritas berdasarkan user intent
document.addEventListener('mouseover', (e) => {
  const link = e.target.closest('a[href]');
  if (link) {
    // Saat user hover link, preload halaman tujuan
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = link.href;
    prefetchLink.fetchPriority = 'low';
    document.head.appendChild(prefetchLink);
  }
}, { once: true });

<!-- Speculation Rules via <script> tag -->
<script type="speculationrules">
{
  "prefetch": [
    {
      "where": {
        "href_matches": "/blog/*"
      },
      "eagerness": "moderate"
    }
  ],
  "prerender": [
    {
      "where": {
        "selector_matches": "a.hero-link"
      },
      "eagerness": "conservative"
    }
  ]
}
</script>

<!-- Eagerness levels: -->
<!-- "immediate": langsung, tanpa tunggu -->
<!-- "eager": saat user mulai berinteraksi (hover) -->
<!-- "moderate": saat pointer hover ke link (100ms+) -->
<!-- "conservative": hanya saat click/tap dimulai -->

// Mengatur speculation rules secara dinamis
function addSpeculationRules(urls, mode = 'prefetch') {
  const rules = {
    [mode]: [{
      where: { href_matches: urls },
      eagerness: 'moderate'
    }]
  };

  const script = document.createElement('script');
  script.type = 'speculationrules';
  script.textContent = JSON.stringify(rules);
  document.head.appendChild(script);
}

// Prefetch semua link di navigasi
addSpeculationRules(['/about', '/blog/*', '/pricing'], 'prefetch');

// Prerender halaman paling populer
addSpeculationRules(['/blog/getting-started'], 'prerender');

// Cek support
if (HTMLScriptElement.supports && HTMLScriptElement.supports('speculationrules')) {
  console.log('✅ Speculation Rules didukung');
} else {
  console.log('⚠️ Speculation Rules tidak didukung, gunakan fallback');
}

<!-- Critical content: inline CSS + langsung render -->
<style>
  /* Critical CSS: hanya untuk above-the-fold */
  .hero { min-height: 100vh; display: flex; align-items: center; }
  .hero h1 { font-size: clamp(2rem, 5vw, 4rem); }
  .navbar { position: fixed; top: 0; width: 100%; }
</style>

<!-- Above the fold: render langsung -->
<nav class="navbar">...</nav>
<section class="hero">
  <h1>Judul Utama</h1>
  <p>Subjudul</p>
</section>

<!-- Below the fold: defer rendering -->
<section class="content-below" style="content-visibility: auto; contain-intrinsic-size: auto 600px;">
  <h2>Konten di Bawah Fold</h2>
  <p>Section ini tidak akan di-render sampai mendekati viewport</p>
</section>

<!-- JavaScript non-kritis: deferred -->
<script src="/js/analytics.js" defer></script>
<script src="/js/chat.js" defer></script>

<!-- CSS non-kritis: loaded asynchronously -->
<link rel="preload" href="/css/animations.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

/* BTF: content-visibility untuk skip rendering */
.btf-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
  /* Browser skip rendering section ini sampai */
  /* mendekati viewport (± viewport height) */
}

/* Gabungan dengan CSS containment */
.btf-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 250px;
  contain: layout style paint;  /* Extra containment */
}

/* Contoh: halaman dengan 50 card */
/* Tanpa BTF: render semua 50 card → ~500ms */
/* Dengan BTF: render hanya 5-6 card yang terlihat → ~50ms */
/* 90% reduction in render time! */

/* Animated section (hindari content-visibility untuk ini) */
.hero-animated {
  /* JANGAN gunakan content-visibility pada section dengan animasi */
  /* karena animasi akan dimulai sebelum terlihat */
}

// npm install web-vitals
import { onLCP, onINP, onCLS } from 'web-vitals';

// Kirim metrik ke analytics
function sendToAnalytics({ name, value, rating }) {
  console.log(`${name}: ${value.toFixed(2)} (${rating})`);

  // Kirim ke Google Analytics 4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_rating: rating,
    non_interaction: true,
  });
}

// Monitor semua Core Web Vitals
onLCP(sendToAnalytics);   // Largest Contentful Paint
onINP(sendToAnalytics);   // Interaction to Next Paint
onCLS(sendToAnalytics);   // Cumulative Layout Shift

<!DOCTYPE html>
<html lang="id">
<head>
  <!-- 1. Preconnect ke origins penting -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://cdn.example.com" crossorigin>

  <!-- 2. Preload critical resources -->
  <link rel="preload" href="/fonts/inter.woff2" as="font"
        type="font/woff2" crossorigin fetchpriority="high">
  <link rel="preload" href="/images/hero.webp" as="image"
        fetchpriority="high">

  <!-- 3. Inline critical CSS -->
  <style>
    /* Hanya CSS untuk above-the-fold content */
    /* Sisanya di-load async */
  </style>

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

  <!-- 5. Speculation Rules -->
  <script type="speculationrules">
  {"prefetch":[{"where":{"href_matches":"/blog/*"},"eagerness":"moderate"}]}
  </script>
</head>
<body>
  <!-- 6. Critical above-fold content -->
  <nav>...</nav>
  <section class="hero">
    <img src="/hero.webp" width="1200" height="600"
         fetchpriority="high" decoding="sync" alt="Hero">
    <h1>Judul</h1>
  </section>

  <!-- 7. BTF: below-fold sections -->
  <section style="content-visibility:auto;contain-intrinsic-size:auto 600px">
    <img src="/section.webp" loading="lazy" decoding="async"
         fetchpriority="low" width="800" height="400" alt="">
    <!-- Konten... -->
  </section>

  <!-- 8. Non-critical JS: deferred -->
  <script src="/js/app.js" defer fetchpriority="low"></script>

  <!-- 9. Analytics & monitoring -->
  <script type="module">
    import {onLCP, onINP, onCLS} from '/js/web-vitals.js';
    [onLCP, onINP, onCLS].forEach(fn => fn(m => {
      navigator.sendBeacon('/api/vitals', JSON.stringify(m));
    }));
  </script>
</body>
</html>