Core Web Vitals

Two things to get straight before doing any work.

Field data is the only data that counts. Google ranks on CrUX, which is real Chrome users on real devices and networks. Lighthouse is a simulated lab run on your machine. It's a debugging tool, not a scoreboard. A Lighthouse score of 100 and a failing field LCP happen together constantly.

The ranking effect is small. Page experience is a minor signal and Google has said as much. Fix these because a slow page loses users and conversions, which is a much bigger number than the ranking delta. If someone is choosing between fixing LCP and fixing content, fix the content.

The thresholds

Scored at the 75th percentile of real users. Meaning a quarter of your visitors can be having a bad time while the metric passes. Look at the distribution, not just the pass or fail.

Step 1: Get the field data

curl -s "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com&strategy=mobile&key=$PSI_KEY" \
  | python -c "
import sys, json
d = json.load(sys.stdin).get('loadingExperience', {}).get('metrics', {})
for k, v in d.items():
    print(f\"{k:42} {v['percentile']:>7} {v['category']}\")
"

Search Console's Core Web Vitals report is better still, because it groups URLs by template and tells you which page types fail rather than which single URL you happened to test. Fix a template, fix a thousand pages.

Test mobile. Almost all failures are mobile failures, and desktop passing tells you nothing.

LCP

The LCP element is nearly always a hero image, a heading, or a block of text. Find out which before optimising anything:

new PerformanceObserver((list) => {
  const e = list.getEntries().at(-1)
  console.log('LCP', e.startTime.toFixed(0), e.element)
}).observe({ type: 'largest-contentful-paint', buffered: true })

Then work through the four phases in order. LCP is the sum of these, and it's usually dominated by one.

1. TTFB (target under 800ms). Server response. Fix with caching, a CDN, static generation, or a faster database query. If TTFB is 2 seconds, nothing else you do to the image matters.

2. Resource load delay. The gap between the HTML arriving and the browser starting to fetch the LCP resource. This is the phase people miss and it's often the largest.

<!-- Preload the LCP image so it isn't discovered late -->
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">

• Never lazy-load the LCP image. loading="lazy" on a hero adds a full round trip.
• Never load it via CSS background-image, which the preload scanner can't see.
• Never inject it with JavaScript.
• Add fetchpriority="high" to the hero, and only the hero.

3. Resource load time. Serve AVIF or WebP, size the image to its actual displayed dimensions, and use responsive srcset. A 3000px-wide hero on a 390px phone is the most common single cause of a failing mobile LCP.

4. Render delay. Render-blocking CSS and fonts. Inline the critical CSS, defer the rest, and set font-display: swap with a preloaded font file. Web fonts that block text rendering turn a text LCP into a failure.

INP

INP replaced FID and it's much harder to pass, because it measures the full interaction rather than just the delay before handling starts. Failures are almost entirely long JavaScript tasks on the main thread.

• Find the slow interactions in the field, not the lab. Log them with the event performance entry type and record which element was involved.
• Break up long tasks. Anything over 50ms blocks input. Yield with await scheduler.yield() where available, setTimeout(0) otherwise.
• Stop doing expensive work on every keystroke. Debounce input handlers, and never run layout-thrashing reads and writes in a loop.
• Cut hydration cost. On React sites this is usually the whole story. Server components, fewer client components, less JavaScript shipped.
• Defer third-party scripts. Analytics, chat widgets, tag managers and consent tools are the most common INP offenders, and they're usually added by someone who never sees the metric.
• Use CSS for animation, not JavaScript on the main thread.
• content-visibility: auto on long off-screen sections cuts rendering work substantially.

CLS

The easiest of the three to fix and the most annoying to users.

• Set width and height on every image and video. The browser reserves the space from the aspect ratio. This one change fixes most CLS.
• Reserve space for ads, embeds and iframes with a fixed-height container. Ads that resize themselves after load are the top cause on media sites.
• Never insert content above existing content after load. Cookie banners, promo bars and "you have unread messages" strips pushing the page down are the classic offender. Overlay them or reserve the space.
• Preload fonts and match fallback metrics with size-adjust and ascent-override, so the swap doesn't reflow the text.
• Use transform for animation, never top, left, width or height.

Debug with:

new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    if (!e.hadRecentInput && e.value > 0.01) console.log(e.value.toFixed(3), e.sources?.map(s => s.node))
  }
}).observe({ type: 'layout-shift', buffered: true })

Order of work

1. Get field data and identify which metric fails, on which template, on mobile.
2. Fix that one. Don't fix all three at once.
3. Ship, wait 28 days for CrUX to update, re-measure.

That 28-day window is the part that surprises people. Field data is a rolling 28-day average, so a fix shipped today shows up gradually over a month. Anyone reporting an improvement two days later is reading lab data.

Don't do these

• Don't optimise for the Lighthouse score. It's a lab simulation with a known set of gameable inputs. Passing field metrics is the goal.
• Don't install a performance plugin and consider it done. They mostly add JavaScript.
• Don't lazy-load above-the-fold images. The most common self-inflicted LCP failure.
• Don't defer CSS the page needs immediately. You'll trade LCP for a flash of unstyled content.
• Don't chase 100/100. The thresholds are the thresholds. Effort past "good" returns nothing.
• Don't promise a ranking improvement. Promise a faster site and better conversion, which is true and measurable.

Related skills

technical-seo-audit, nextjs-seo, image-seo, search-console-analysis