Core Web Vitals 2026: INP & LCP Optimization Guide

As of April 27, 2026, the winning pattern for Core Web Vitals is straightforward: optimize LCP by getting the right resource discovered and rendered earlier, and optimize INP by keeping the main thread free for interaction work. This reference guide is built for fast scanning, not deep theory, so you can move from metric to root cause to fix without digging through five separate docs.

Metrics and Benchmarks

The official thresholds have not changed: INP measures responsiveness, LCP measures perceived load speed, and both should be evaluated at the 75th percentile across mobile and desktop. The definitions and thresholds below align with current guidance from web.dev on INP, web.dev on LCP, and Core Web Vitals thresholds.

2026 Threshold Table

How To Read The Numbers

• Use field data to decide whether the problem is real for users.
• Segment by mobile and desktop because percentile behavior often differs sharply.
• Prefer URL-level data when available; fall back to origin-level data carefully.
• Expect lab tools to explain causes, not to replace production telemetry.

Measurement Workflow

A reliable workflow is field first, then lab reproduction, then targeted fixes. Chrome guidance consistently favors CrUX or your own RUM for prioritization, with DevTools and Lighthouse used to isolate root causes.

Field First

• Check PageSpeed Insights for CrUX data before trusting a one-off local run.
• Use your own RUM if you need interaction context, affected elements, or release-by-release attribution.
• Compare mobile URL, desktop URL, mobile origin, and desktop origin views before assigning work.
• Use TTFB and FCP as supporting diagnostics for slow LCP.

Minimal Production Instrumentation

import {onINP, onLCP} from 'web-vitals/attribution';

function sendToAnalytics(metric) {
  navigator.sendBeacon('/vitals', JSON.stringify({
    name: metric.name,
    id: metric.id,
    value: metric.value,
    rating: metric.rating,
    attribution: metric.attribution
  }));
}

onINP(sendToAnalytics);
onLCP(sendToAnalytics);

This pattern follows the official web-vitals package shape and is the fastest path to production evidence. If you want to clean up snippets before pasting them into docs or incident reports, TechBytes' Code Formatter is a convenient handoff step.

Lab Reproduction

• Record a trace in the Chrome DevTools Performance panel.
• Use the Insights view to connect failures to specific loading or interaction work.
• Reproduce slow interactions during page load as well as after hydration completes.
• For INP, identify whether the time is going into input delay, processing duration, or presentation delay.

LCP Playbook

LCP rarely improves from one micro-fix. The official optimization model breaks total LCP into TTFB, resource load delay, resource load duration, and element render delay, which is the right mental model for debugging.

LCP Subparts To Watch

Highest-Value LCP Fixes

• Make the likely LCP resource discoverable in the initial HTML.
• Preload a CSS background hero image or required web font if it gates the final paint.
• Never use loading="lazy" on a likely LCP image.
• Use fetchpriority="high" on the hero <img> when it is likely the final LCP element.
• Keep critical resources on the same origin when possible to avoid extra connection setup.

Reference Markup

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

<img
  src="/images/hero.webp"
  width="1600"
  height="900"
  fetchpriority="high"
  alt="Product hero"
>

Common LCP Anti-Patterns

• Hero content injected by JavaScript after the document is already parsed.
• Background-image heroes with no preload hint.
• Carousel images competing with the real hero for bandwidth.
• Too many resources marked with fetchpriority="high".

INP Playbook

INP is the practical measure of whether the interface stays responsive after load. The official breakdown is simple: reduce input delay, shorten processing duration, and get the next frame on screen sooner.

Map The Delay Before You Fix It

• Input delay: time before the interaction callback starts.
• Processing duration: callback execution time.
• Presentation delay: time until the browser paints visual feedback.
• Remember that slow interactions inside iframes still count toward page-level INP.

Most Reliable INP Fixes

• Break up long tasks so interactions do not wait behind unrelated work.
• Run only visual-update logic before the next frame; defer non-critical work.
• Avoid layout thrashing from writing styles and then reading layout in the same task.
• Reduce large DOM costs when interactions trigger broad re-rendering.
• Use content-visibility for off-screen regions when it meaningfully cuts rendering work.

Yield Non-Critical Work

textBox.addEventListener('input', (inputEvent) => {
  updateTextBox(inputEvent);

  requestAnimationFrame(() => {
    setTimeout(() => {
      const text = textBox.textContent;
      updateWordCount(text);
      checkSpelling(text);
      saveChanges(text);
    }, 0);
  });
});

This pattern mirrors current web.dev guidance for INP optimization: keep the current interaction light, let the browser paint, then push secondary work into a later task.

Common INP Smells

• Recurring timers that keep the main thread busy during likely interaction windows.
• Large client-side HTML rendering after click or input.
• Animation work that competes with input on the main thread.
• Very large DOM trees that make each update expensive.

Reference Cheat Sheet

This section is designed for scan speed. Use the live filter to narrow the command and config list by metric, tool, or action.

npm install -g lighthouse

lighthouse https://example.com/

lighthouse https://example.com/ --view

lighthouse https://example.com/ --preset=desktop

lighthouse https://example.com/ --output=json --output-path=./report.json --save-assets

lighthouse https://example.com/ -GA=./latest-run

lighthouse https://example.com/ -A=./latest-run

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

<img src="/images/hero.webp" fetchpriority="high" alt="Hero">

.feed-section {
  content-visibility: auto;
}

button.addEventListener('click', () => {
  renderCriticalState();
  requestAnimationFrame(() => {
    setTimeout(runSecondaryWork, 0);
  });
});

Ship Checklist

Use this as the final pass before calling the work done.

• Verify CrUX or RUM shows the page actually has an INP or LCP problem.
• Confirm the likely LCP element and when its resource starts loading.
• Check that no likely hero image is using loading="lazy".
• Record one slow interaction and separate input delay, callback time, and presentation delay.
• Re-test on mobile and desktop after each meaningful fix.
• Keep one production dashboard for release-by-release regression detection.