FreeWebsiteAnalyzer

Explaining LCP, FID/INP, and CLS

The current Core Web Vitals are:

  1. Largest Contentful Paint (LCP):

    • What it measures: Loading performance. Specifically, the time it takes for the largest image or text block visible within the viewport to render, relative to when the page first started loading.
    • Why it matters: It indicates when the main content of the page has likely loaded, giving users the perception that the page is useful.
    • Good score: 2.5 seconds or less.
    • Common causes of poor LCP: Slow server response times, render-blocking JavaScript/CSS, slow resource loading (large images, fonts), client-side rendering issues. (Learn how to fix LCP)

  2. First Input Delay (FID) / Interaction to Next Paint (INP):

    • What they measure: Interactivity.
      • FID: The time from when a user first interacts with your page (e.g., clicks a button, taps a link) to the time when the browser is actually able to respond to that interaction. (Note: FID is being replaced by INP).
      • INP: Measures the overall responsiveness of a page to user interactions throughout the entire page lifecycle. It looks at the latency of all click, tap, and keyboard interactions.
    • Why they matter: They quantify the user's first impression of your site's responsiveness. Long delays are frustrating. INP provides a more comprehensive picture than FID.
    • Good score (FID): 100 milliseconds or less.
    • Good score (INP): 200 milliseconds or less.
    • Common causes of poor FID/INP: Long-running JavaScript execution, large JavaScript bundles blocking the main thread (see Render-Blocking Resources), complex CSS selectors, excessive DOM size.

  3. Cumulative Layout Shift (CLS):

    • What it measures: Visual stability. It quantifies how much unexpected layout shifts occur as the page loads. Think of elements jumping around as images or ads load in.
    • Why it matters: Unexpected movement of page content can cause users to click on the wrong thing or lose their place, leading to a poor experience.
    • Good score: 0.1 or less.
    • Common causes of poor CLS: Images without dimensions, ads/embeds/iframes without dimensions, dynamically injected content, web fonts causing FOIT/FOUT, actions waiting for a network response before updating the DOM. (Learn how to fix CLS)