跳至正文
精选文章 · Google SEO

Page Speed for SEO: LCP, INP, CLS and What to Fix First

// / / 光算科技

Page speed matters because it affects how real visitors experience a page, and Google says Core Web Vitals are used by ranking systems. That does not mean “pass these numbers and rankings rise” or “fail one metric and rankings drop.” Relevance and overall page experience still matter. In practice, make important content load promptly, keep interactions responsive, and prevent layout shifts while people read or click.

The current Core Web Vitals metrics are LCP, INP, and CLS. web.dev documents the current metrics and thresholds: FID was formerly used for interactivity, but it has been replaced by INP. If an audit or article still presents FID as the current interactivity metric, re-check it with current tools.

What Core Web Vitals measure today

Core Web Vitals focus on three parts of real user experience:

  • Largest Contentful Paint (LCP) measures loading performance. A good target is LCP within 2.5 seconds from when the page starts loading.
  • Interaction to Next Paint (INP) measures responsiveness to user interactions such as clicks, taps, and keyboard input. A good target is 200 milliseconds or less.
  • Cumulative Layout Shift (CLS) measures visual stability. A good target is a CLS score of 0.1 or less.

Google’s web.dev guidance says these thresholds should be evaluated at the 75th percentile of page loads, segmented across mobile and desktop. That detail is important. A single Lighthouse run, a fast office network, or one test on a high-end phone is not enough to prove that most users are getting a good experience. Field data from real users is usually the better decision point; lab tools are still useful for debugging and regression checks.

Why FID is no longer the right metric to lead with

FID, or First Input Delay, measured the delay before the browser could start processing the first user interaction. It was useful, but narrow: it only considered the first interaction and did not cover the full time until the next visual update. INP is broader. It looks across interactions during the page visit and reports a value that better reflects whether the page consistently responds quickly.

This changes how optimization should be discussed. A page can feel fine at first load but become sluggish when a menu opens, a filter runs, a checkout step validates, or a heavy third-party script blocks the main thread. INP is designed to expose that kind of problem more directly than FID. Current Core Web Vitals reporting in Google’s ecosystem should therefore be discussed as LCP, INP, and CLS—not LCP, FID, and CLS.

How page speed affects SEO without promising rankings

Speed is not a replacement for helpful content, good information architecture, crawlable pages, or search intent fit. Google states that there is no single “page experience signal” and that getting good Core Web Vitals scores does not guarantee top rankings. However, Google also recommends achieving good Core Web Vitals for Search success and for users generally.

For SEO teams, that means the right question is not “Will fixing LCP give us a fixed ranking increase?” The better question is: “Are slow loading, delayed interaction, or layout shifts making this page worse for users and less competitive than other helpful results?” If the answer is yes, Core Web Vitals work is worth prioritizing—especially on templates that generate many important pages, such as category pages, product pages, service pages, article pages, and lead-generation landing pages.

LCP: make the main content appear quickly

LCP usually depends on the most important above-the-fold element: a hero image, a headline block, a product image, a banner, or another large visible element. Improving LCP starts with identifying the actual LCP element for the page, not guessing from the design file.

Common LCP causes

  • Slow server response: the browser waits too long before receiving useful HTML.
  • Unoptimized hero images: the LCP image is too large, has no responsive sizing, or is served in an inefficient format.
  • Render-blocking CSS or JavaScript: critical content cannot appear until large files are downloaded, parsed, or executed.
  • Wrong loading priority: the browser discovers the LCP resource late, or the LCP image is lazy-loaded by mistake.
  • Client-side rendering delays: the visible content depends on a JavaScript bundle before meaningful HTML appears.

Practical LCP fixes

  • Serve important HTML quickly with caching, efficient backend queries, and stable hosting.
  • Compress and resize above-the-fold images; use modern formats such as WebP or AVIF where appropriate.
  • Do not lazy-load the LCP image. Lazy loading is useful for below-the-fold images, not for the main element users need first.
  • Use responsive image markup so mobile visitors do not download desktop-sized assets.
  • Preload or raise priority for the real LCP resource only when testing shows it helps.
  • Reduce render-blocking CSS and defer non-critical JavaScript where it does not break the page.

INP: keep interactions responsive after the page loads

INP focuses on the time from a user interaction until the next frame is painted. It is affected by input delay, event handler work, and presentation delay. A low INP means the page is generally able to respond to clicks, taps, and keyboard input without feeling stuck.

Common INP causes

  • Long JavaScript tasks: the main thread is busy and cannot respond promptly.
  • Large bundles: heavy framework code, hydration, or unused scripts delay interaction readiness.
  • Expensive event handlers: a click or input event triggers too much synchronous work.
  • Complex rendering work: large DOM updates, layout thrashing, or expensive style recalculation delay the next paint.
  • Third-party scripts: ads, tracking, chat widgets, embeds, and tag managers can compete for main-thread time.

Practical INP fixes

  • Use field data to identify which interactions are actually slow for users.
  • Break long tasks into smaller chunks so the browser has opportunities to respond.
  • Remove unused JavaScript and avoid shipping heavy code to pages that do not need it.
  • Keep event handlers focused; do only the work needed for immediate feedback, then defer non-urgent work.
  • Move heavy computation to a Web Worker when it does not require direct DOM access.
  • Audit third-party scripts and load them in a way that does not block critical interactions.

CLS: prevent unexpected page movement

CLS measures unexpected layout shifts. It is not about whether the page has animation; it is about whether visible content moves in a way the user did not expect. Layout shifts can cause mis-clicks, make forms frustrating, and reduce confidence in the page.

Common CLS causes

  • Images, videos, iframes, or ads without reserved dimensions.
  • Late-loading banners, cookie notices, chat widgets, or promotional blocks inserted above existing content.
  • Web fonts that swap in and change text dimensions.
  • Dynamic content that appears without reserved space.

Practical CLS fixes

  • Set width and height attributes or use CSS aspect-ratio for images, videos, embeds, and ad slots.
  • Reserve space for components that load later instead of pushing content down after the user starts reading.
  • Use font loading strategies that reduce visible text reflow.
  • Avoid inserting new content above existing content unless it is a direct response to the user’s action.
  • Test templates on real mobile widths, not only on desktop.

Which tools should you use?

Use more than one tool, because each answers a different question:

  • PageSpeed Insights combines field data, when available, with lab diagnostics.
  • Search Console Core Web Vitals report helps find groups of URLs with similar issues.
  • Chrome DevTools Performance panel helps debug loading, scripting, rendering, and long tasks.
  • CrUX data gives aggregated real-user measurements when a page or origin has enough data.
  • Real User Monitoring is useful when you need page-level and interaction-level detail for your own audience.

Lab tests are excellent for finding causes, but they are not a substitute for field measurement. INP in particular depends on actual interactions. If a lab test loads the page but does not perform the interaction that users struggle with, it may miss the problem.

A practical SEO workflow for Core Web Vitals

  1. Start with important templates. Prioritize pages that receive organic traffic, support conversions, or represent many URLs.
  2. Check field data first. Confirm whether users are failing LCP, INP, or CLS at the 75th percentile.
  3. Find the page element or interaction causing the issue. Do not optimize every asset equally; fix the bottleneck.
  4. Ship the smallest safe improvement. Compress the LCP image, reserve ad space, split a long task, or defer a non-critical script.
  5. Re-test in lab and monitor field data. Lab changes are visible quickly; field data may need time and enough traffic.
  6. Keep business functionality intact. Do not remove analytics, forms, payment scripts, consent tools, or customer-service features without a validated replacement and business approval.

What a “pass” really means

A page should be considered in good Core Web Vitals condition when real-user data shows LCP, INP, and CLS meeting the recommended thresholds at the 75th percentile for the relevant device segments. Passing these metrics is a strong technical quality signal, but it is not a ranking guarantee. Failing them is a useful warning, but not proof that rankings will drop by a fixed percentage.

The safest SEO position is also the most useful one for users: make pages fast enough to show important content quickly, responsive enough to use without frustration, and stable enough that people can read and click confidently. That is the role Core Web Vitals should play in an SEO program.