web-performance

Web Performance

Core Web Vitals

LCP Fixes

1. Preload LCP image: <link rel="preload" as="image" href="/hero.webp">
2. Inline critical CSS (eliminate render-blocking)
3. Server response <200ms (TTFB): optimize DB queries, use edge caching
4. Avoid lazy-loading above-fold images — use loading="eager" or omit attribute
5. Use fetchpriority="high" on LCP element

INP Fixes

1. Break long tasks (>50ms) by yielding to the main thread. There is no standalone yield() in browsers; use scheduler.yield() where available (Chromium 129+ and Firefox 142+; not in Safari as of Jul 2026) with a setTimeout(0) fallback.
2. Defer non-critical JS: <script defer> or dynamic import()
3. Use requestIdleCallback for analytics/telemetry — but it is unsupported in Safari (use a setTimeout shim) and always pass a timeout so the work runs even if the page never goes idle.
4. Debounce input handlers: 100-150ms for search, immediate for buttons

// Yield to the main thread, with feature detection + fallback.
// scheduler.yield() resumes at high priority (front of queue);
// setTimeout(0) is the universal fallback (resumes after pending tasks).
function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise(r => setTimeout(r, 0));
}

async function processItems(items) {
  let lastYield = performance.now();
  for (const item of items) {
    process(item);
    // Yield every ~50ms so input stays responsive.
    if (performance.now() - lastYield > 50) {
      await yieldToMain();
      lastYield = performance.now();
    }
  }
}

// requestIdleCallback with Safari shim + mandatory timeout.
const ric = window.requestIdleCallback
  || ((cb) => setTimeout(() => cb({ didTimeout: true, timeRemaining: () => 0 }), 1));
ric(() => sendTelemetry(), { timeout: 2000 }); // runs within 2s even if never idle