<!-- Preload the LCP image with high priority -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
 
<!-- Inline critical CSS for above-fold content -->
<style>
  .hero { min-height: 60vh; display: grid; place-items: center; }
  .hero img { width: 100%; height: auto; }
</style>
 
<!-- LCP image: no lazy loading, explicit dimensions, high priority -->
<img src="/hero.webp" alt="Hero" width="1200" height="600"
     fetchpriority="high" decoding="async">

User clicks button
    │
    ├── Input Delay (waiting for main thread)    ──┐
    ├── Processing Time (event handler execution)  ├── INP measures all three
    └── Presentation Delay (rendering the update)  ──┘

// ❌ Heavy handler blocks next paint
button.addEventListener('click', () => {
  const result = processThousandItems(data); // 300ms
  updateUI(result);
});
 
// ✅ Yield to browser between processing and painting
button.addEventListener('click', async () => {
  showSpinner();
  await scheduler.yield(); // Let browser paint the spinner
 
  const result = processThousandItems(data);
  updateUI(result);
});
 
// ✅ React: use transitions for non-urgent updates
const [isPending, startTransition] = useTransition();
 
function handleFilter(query) {
  setInputValue(query);              // Urgent: update input
  startTransition(() => {
    setFilteredResults(filter(query)); // Non-urgent: can be interrupted
  });
}

<!-- Always set dimensions to prevent shift -->
<img src="photo.jpg" width="800" height="600" alt="Photo">
 
<!-- Reserve space for dynamic content -->
<div style="min-height: 250px; contain: layout;">
  <!-- Ad or async content loads here -->
</div>

/* Prevent font-swap layout shift */
@font-face {
  font-family: 'Custom';
  src: url('/custom.woff2') format('woff2');
  font-display: optional;
  size-adjust: 105%;
  ascent-override: 95%;
}

import { onLCP, onINP, onCLS } from 'web-vitals';
 
function sendToAnalytics({ name, value, id, rating }) {
  analytics.track('web_vital', {
    metric: name,
    value: Math.round(value),
    rating,
    id,
    url: window.location.href,
    connection: navigator.connection?.effectiveType,
  });
}
 
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

// Lighthouse CI config
{
  "assertions": {
    "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
    "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
    "total-blocking-time": ["error", { "maxNumericValue": 300 }],
    "resource-summary:script:size": ["error", { "maxNumericValue": 200000 }]
  }
}