Core Web Vitals Impact Checker
Select a web technology or technique to see how it impacts your Core Web Vitals and get an improvement checklist.
Google's Core Web Vitals are the industry standard metrics for measuring user experience. They quantify how fast a page loads, how quickly it becomes interactive, and how visually stable it is during loading.
Return to our main Web Performance Guide to understand the full context of these metrics.
Understanding the Metrics
Largest Contentful Paint (LCP)
LCP measures loading performance. It marks the point in the page load timeline when the page's main content has likely loaded.
Primary factors affecting LCP: Slow server response times, render-blocking JavaScript and CSS, slow resource load times, and client-side rendering constraints.
Interaction to Next Paint (INP)
INP is replacing First Input Delay (FID) as the primary interactivity metric. INP observes the latency of all interactions a user has with the page, reporting a single value which all (or nearly all) interactions were below.
Primary factors affecting INP: Long-running JavaScript tasks on the main thread, complex DOM manipulations, and heavy third-party scripts that block user input.
Cumulative Layout Shift (CLS)
CLS measures visual stability. It quantifies how much unexpected layout shift occurs during the lifespan of the page. A layout shift occurs anytime a visible element changes its position from one rendered frame to the next.
Primary factors affecting CLS: Images without dimensions, ads/embeds without reserved space, dynamically injected content, and web fonts causing FOUT/FOIT.
By understanding how different technologies interact with these metrics, you can make informed architectural decisions. For example, if you know that a heavy client-side React app will likely struggle with LCP, you can plan to implement Server-Side Rendering (SSR) or Static Site Generation (SSG) early in the project.
Similarly, recognizing that dynamic ad networks often ruin CLS allows you to pre-allocate exact dimensions for ad slots using CSS, preserving the user experience.
Frequently Asked Questions
What is considered a good LCP score?
A good Largest Contentful Paint (LCP) score is 2.5 seconds or less. This means the largest visual element on your page is fully rendered within 2.5 seconds of the initial request.
What is the difference between FID and INP?
First Input Delay (FID) only measures the delay of the first user interaction. Interaction to Next Paint (INP) measures the responsiveness to all interactions throughout the page's lifecycle, providing a more comprehensive view of interactivity.
How do I fix Cumulative Layout Shift (CLS)?
Ensure all <img>, <iframe>, and <video> elements have explicit width and height attributes. Avoid injecting dynamic content above existing content. Pre-allocate space for ads, and use font-display: optional or swap with matched fallback fonts to prevent text resizing layout shifts.