Core concepts

Core Web Vitals targets (confirmed)

• LCP: Good < 2.5s; Needs work 2.5–4s; Poor > 4s
• CLS: Good < 0.1; Needs work 0.1–0.25; Poor > 0.25
• INP: Good < 200ms; Needs work 200–500ms; Poor > 500ms

Note: These thresholds remain the recommended targets used by Google Search Central and Lighthouse as of April 2026. (source: Google Search Central docs)

Baseline audits

Lighthouse (v13.1+) now includes the baseline compatibility audit in the default configuration. Run the latest Lighthouse CLI or DevTools-bundled Lighthouse to surface platform-compatibility or feature-gating issues that can impact performance and user experience.

Rendering pipeline reminder

Browser → Parse HTML → Build DOM → Resolve CSS → Layout → Paint → Composite

Reduce blocking work, avoid forced reflows, and animate properties that can be composited (transform, opacity) where possible.

Workflow (updated)

1. Run Lighthouse (local CLI or PageSpeed Insights) using the latest stable (v13.1+). Include a baseline audit and record both lab and field data where available.

2. Identify the LCP element

   • Chrome DevTools → Performance → record a page load → find the LCP marker.

3. Optimize the LCP element

   • Preload critical images (Next.js: priority; non-Next: <link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">)
   • Serve modern formats (AVIF/WebP) via CDN transforms and adjust cache headers

4. Prevent CLS

   • Add explicit width/height attributes or CSS aspect-ratio placeholders
   • Use skeletons/placeholders for async-rendered content
   • Use element-scoped view transitions to animate changes within a subtree instead of forcing global re-layouts (Chrome 147+), falling back to CSS transitions where unsupported

5. Improve INP

   • Use startTransition (React) for non-urgent updates and debounce input handlers
   • Move heavy computation off the main thread (Web Workers) and avoid long task blocking

6. For SPAs: adopt the Navigation API

   • Replace brittle pushState/popstate hacks with the Navigation API's navigate event and intercept() to handle navigations in-place. intercept() supports handler, precommitHandler, focusReset, and scroll options to control commit, focus, and scroll restoration behavior. (source: MDN)

7. Audit bundle size and third-party scripts

   • Code-split heavy libs, lazy-load third-party widgets after LCP

Quick actionable examples (new)

Navigation API — intercept a navigation (MDN pattern)

navigation.addEventListener('navigate', (event) => {
  event.intercept({
    async handler() {
      // fetch data, update DOM, restore scroll or focus as needed
      const html = await fetch(event.destination.url).then(r => r.text());
      document.getElementById('app').innerHTML = html;
    },
    // optional: precommitHandler, focusReset: 'manual' or 'after-transition', scroll: 'after-transition'
  });
});

Notes: intercept() accepts handler, precommitHandler, focusReset, and scroll options. Use focusReset and scroll to match the browser's default behavior where needed. (source: MDN)

Element-scoped View Transitions — scope a transition to a container (Chrome 147+)

const container = document.querySelector('#list');
container.startViewTransition(() => {
  // mutate only container's contents — scoped transition avoids global layout jumps
  container.innerHTML = renderNewList(items);
});

Use element-scoped transitions for nested or concurrent transitions to reduce CLS and make updates feel smoother. Provide a CSS-transition fallback for browsers without element-scoped support.

Preload critical image (non-Next)

<link rel="preload" as="image" href="/hero.avif" type="image/avif" fetchpriority="high">

Use startTransition for responsiveness (React)

import { startTransition, useState } from 'react';

function Search({ onFilter }) {
  const [q, setQ] = useState('');
  function handleChange(e) {
    const v = e.target.value;
    setQ(v);
    startTransition(() => onFilter(v));
  }
  return <input value={q} onChange={handleChange} />;
}

Decision tree (updated)

• LCP > 2.5s → Run Lighthouse v13.1+ → identify LCP element → preload + serve modern formats → check server/TTFB
• CLS > 0.1 → Add explicit dimensions / aspect-ratio placeholder → use skeletons → consider element-scoped view transitions
• INP > 200ms → Profile handlers → startTransition / debounce → offload to Web Worker
• SPA navigation issues → Replace manual history handling with Navigation API intercept() and integrate view transitions when available
• Baseline compatibility warnings in Lighthouse → follow audit suggestions for polyfills or feature-gating

Edge cases and gotchas (updated)

• Baseline audits may surface platform-specific feature gaps; don't suppress findings without testing — they can cause user-visible regressions.
• Element-scoped view transitions are Chrome-first in stable channels (Chrome 147+); always provide graceful fallbacks for older browsers.
• Navigation API intercept() changes how focus/scroll restoration is handled — use focusReset and scroll options if you need default browser behavior.

Evaluation checklist

• Run Lighthouse (v13.1+) and address baseline audit findings
• LCP element identified and preloaded or prioritized
• Images/videos have width/height or aspect-ratio placeholders
• Skeletons reserve space for async content
• Fonts use display: swap or next/font equivalents
• Heavy work moved to Web Worker when necessary
• Non-urgent updates use startTransition
• SPAs use Navigation API intercept() (where supported) instead of custom pushState hacks
• Element-scoped view transitions applied where they reduce CLS

Examples and tooling (kept)

• Next.js Image: use priority, sizes, and width/height
• Code-splitting: dynamic imports and analyze with source-map-explorer or Next.js ANALYZE tooling
• Web Workers: move CPU-heavy tasks off main thread
• Virtualization: use @tanstack/react-virtual for long lists

Research-backed signals (sources)

• Lighthouse changelog — v13.1.0 (Apr 2026): baseline compatibility audit and default config changes. (https://github.com/GoogleChrome/lighthouse/blob/main/changelog.md)
• web.dev — "LCP and INP are now Baseline Newly available" (Dec 2025). (https://web.dev/blog/lcp-and-inp-are-now-baseline-newly-available)
• web.dev — "Navigation API - a better way to navigate, is now Baseline Newly Available" (Feb 2026). (https://web.dev/blog/baseline-navigation-api)
• MDN — NavigateEvent.intercept() documentation (options: handler, precommitHandler, focusReset, scroll). (https://developer.mozilla.org/en-US/docs/Web/API/NavigateEvent/intercept)
• Chrome Developer Blog & Docs — element-scoped view transitions (Chrome 147). (https://developer.chrome.com/blog/element-scoped-view-transitions)

Follow-up experiments (for future refreshes)

• Measure how element-scoped view transitions affect CLS on a representative set of pages (A/B test before/after changes).
• Track CrUX/CrUX API for how LCP and INP Baseline changes affect field metrics in the wild.
• Validate Lighthouse baseline audit guidance across multiple frameworks (Next.js, React SPA, SvelteKit) and document common remediation patterns.