Core Web Vitals: understand and optimize your site

Core Web Vitals are three metrics defined by Google to evaluate the quality of user experience on a website: LCP (loading speed of the main content, threshold at 2.5 seconds), CLS (visual stability of the page, threshold at 0.1), and INP (responsiveness to interactions, threshold at 200 milliseconds). These metrics are part of Google's ranking factors and have a direct impact on bounce rate and conversion. The tools to measure them are free: PageSpeed Insights, Google Search Console, and Lighthouse. Webflow offers native advantages for Core Web Vitals (global CDN, clean code, no plugins, automatic WebP images), but certain areas still require attention (animations, fonts, third-party embeds). This article explains each metric in simple terms, how to measure it, and what concrete actions to take to optimize it.

Google no longer evaluates only the quality of a site's content to determine its search ranking. It also evaluates the technical experience the site provides to its visitors: does the page load quickly? Does the content remain stable during loading? Does the site respond fast when you click a button? These questions have had an official measurement framework since 2020, and that framework is called Core Web Vitals.

For many founders, marketing managers, and digital project leads, Core Web Vitals remain a vague concept. People know they exist, know they matter for SEO, but do not know exactly what they measure, how to check them, or what concrete actions can improve them. Yet these three metrics have a measurable impact on both search rankings and conversion.

This article is a clear, actionable guide. It covers what Core Web Vitals are, what each metric concretely measures, why they influence your Google ranking and business results, how to check them with Google's free tools, and what actions to implement to optimize them. Whether your site runs on Webflow, WordPress, or another platform, the principles are the same.

‍

What are Core Web Vitals?

Core Web Vitals are a set of three metrics defined by Google to evaluate the quality of user experience on a web page. They are part of a broader set called "Page Experience," which also includes mobile compatibility, secure browsing (HTTPS), and the absence of intrusive interstitials. But Core Web Vitals are the three central metrics, the ones Google highlights and on which site owners should focus their optimization efforts.

Google created these metrics because a site's speed and stability have a direct impact on user experience. A site that takes five seconds to display its content, whose elements jump around during loading, or that takes a full second to respond when you click a button frustrates visitors and pushes them to leave the page. Core Web Vitals formalize these expectations into specific, measurable, and comparable thresholds, which allows every site owner to know exactly where they stand and what to improve.

In short, Core Web Vitals are three official Google metrics (LCP, CLS, INP) that measure loading speed, visual stability, and responsiveness of a website. They are part of Google's ranking factors and directly influence user experience and conversion.

‍

The three metrics you need to know

Each Core Web Vital measures a different aspect of user experience. Here is what each one evaluates, along with the official thresholds defined by Google.

LCP: loading speed of the main content

LCP (Largest Contentful Paint) measures the time it takes for the largest visible element in the viewport to fully render. This element is typically the hero image, a large text block, or an embedded video. In other words, LCP answers the question: "How long does the visitor wait before seeing the main content of the page?"

The threshold defined by Google is: an LCP under 2.5 seconds is considered good, between 2.5 and 4 seconds it needs improvement, and above 4 seconds it is considered poor. Concretely, if your hero image takes 4 seconds to display, the visitor sees an empty space for 4 seconds before accessing the content. That is a wait that pushes many visitors to leave the page before they have even seen it.

CLS: visual stability of the page

CLS (Cumulative Layout Shift) measures the visual stability of the page during loading. It detects whether elements "jump" or shift unexpectedly. The most common example is a button that moves down when an image loads above it, or text that shifts when a web font finishes loading. These shifts are frustrating for users, especially on mobile, because they can cause accidental clicks.

The threshold defined by Google is: a CLS below 0.1 is good, between 0.1 and 0.25 it needs improvement, and above 0.25 it is poor. The closer the score is to zero, the more visually stable the page. A high score means elements move perceptibly during loading, which degrades the user experience.

INP: responsiveness to interactions

INP (Interaction to Next Paint) measures the site's responsiveness to user interactions. When the visitor clicks a button, taps a link on mobile, or uses the keyboard, INP measures the time between that interaction and the moment the browser displays the visual response. This metric replaced FID (First Input Delay) in March 2024 because it covers all interactions during the session, not just the first one.

The threshold defined by Google is: an INP below 200 milliseconds is good, between 200 and 500 ms it needs improvement, and above 500 ms it is poor. A high INP means the site feels "slow to respond" when you interact with it, which creates an impression of heaviness and unreliability.

Here is a summary of the three metrics with their thresholds:

‍

Why Core Web Vitals matter for your site

Impact on organic search rankings

Google uses Core Web Vitals as ranking factors in its search results. This does not mean a good performance score automatically pushes a site to the first position. Content, relevance, and site authority remain the dominant factors. But when content and relevance are equal, Google favors the page that delivers a better technical experience. A slow or unstable site risks being outranked by a competitor offering similar content with better Core Web Vitals.

The impact is particularly significant on mobile, where network constraints and processing power are more limited than on desktop. A site that scores well on desktop but poorly on mobile can lose positions on searches performed from smartphones, which represent the majority of search traffic today. For a broader view of SEO optimization on Webflow, our complete SEO checklist covers all the points to verify.

Impact on conversion and user experience

Beyond SEO, Core Web Vitals have a direct impact on business results. A faster site retains visitors better, reduces bounce rate, increases pages viewed per session, and improves conversion rate. Conversely, a page that takes five seconds to display its main content, whose elements jump during loading, or that seems "frozen" when you click a button, generates frustration and pushes visitors to leave.

Users are increasingly intolerant of performance issues. A slow site does not just make a bad technical impression: it sends a signal of unprofessionalism that reflects on the perception of the business itself. For sites whose goal is lead generation or conversion, every extra second of loading time represents lost visitors and missed opportunities.

‍

How to measure your Core Web Vitals

Three free Google tools allow you to measure Core Web Vitals. Each takes a different approach, and they complement each other.

PageSpeed Insights

PageSpeed Insights is the most accessible tool to start with. Simply enter a page URL to get LCP, CLS, and INP scores, along with concrete recommendations for each blocking issue. The tool provides two types of data: lab data (simulated under standardized conditions) and field data (based on the real experience of Chrome users). Field data is the most reliable because it reflects what real visitors actually experience. For a deeper dive into this tool and its recommendations, our PageSpeed Insights guide covers the topic in detail.

Google Search Console

Google Search Console offers a site-wide view of Core Web Vitals, not page by page. The "Core Web Vitals" report identifies URLs classified into three categories: good, needs improvement, and poor. It distinguishes between mobile and desktop data, making it easy to spot problems specific to a device type. It is the best starting point for prioritizing optimizations, because it immediately shows which pages have issues and at what scale.

Lighthouse and Chrome DevTools

Lighthouse is a technical audit tool built into Chrome DevTools (accessible via F12 or right-click then "Inspect"). It provides detailed data on performance, accessibility, best practices, and SEO for a page. Lighthouse results are lab data (not field data), which makes them useful for diagnosing the technical causes of a poor score but less reliable for evaluating the real user experience. It is the tool to use when PageSpeed Insights has identified a problem and you want to understand exactly what is causing it.

‍

How to optimize each metric

Improving LCP

LCP is in most cases determined by the hero image or the largest text block visible in the initial viewport. Optimization starts with images: use modern formats (WebP or AVIF), compress files properly, resize images to their actual display size (do not load a 3000-pixel-wide image to display it at 800 pixels), and implement lazy loading for images below the fold. The hero image, however, should not be lazy-loaded since it is the first visible element.

Using a CDN to serve resources faster is another important lever. Preloading critical elements (hero image, primary font) via preload tags speeds up their availability. Finally, CSS and JavaScript files that block the initial render should be removed or deferred. Every script that executes before the content is displayed delays the LCP.

Reducing CLS

CLS is primarily fixed by reserving the necessary space for elements before they load. This means defining fixed dimensions (width and height) for all images, videos, iframes, and ad spaces. Without these dimensions, the browser does not know the element's size before loading and shifts the rest of the content once the element appears, creating a visible "jump."

Web fonts are another frequent source of CLS. When a custom font takes time to load, the text first appears in a system font then "jumps" to the final font. Using font-display: swap and preloading critical fonts reduces this effect. You should also avoid dynamically injecting content (banners, notifications, cookie bars) above existing content without reserving space beforehand. Testing specifically on mobile is important, because some shifts only occur on smaller screens where space is more constrained.

Optimizing INP

INP is primarily affected by the amount and quality of JavaScript executed on the page. The first action is to remove unnecessary scripts and defer the execution of non-essential code. Every loaded script is work the browser must perform, and when a script occupies the main thread while a user clicks a button, the visual response is delayed.

Long JavaScript tasks (over 50 milliseconds) should be broken into shorter blocks to regularly free the main thread. Code splitting, which involves loading only the JavaScript needed for each page rather than the entire bundle, is another effective optimization. Third-party scripts (analytics, social widgets, live chat, ad tracking) should be loaded asynchronously to avoid blocking interactions. Each third-party widget added to the site is a potential risk for INP, and its impact should be evaluated before integration.

‍

Speeding up diagnosis with AI

Measurement tools like PageSpeed Insights and Lighthouse provide recommendations, but those recommendations often remain technical and generic. Interpreting them, prioritizing them, and turning them into concrete actions takes time and a certain level of expertise. This is where AI can make a real difference in the optimization process.

The most direct method is to take a screenshot of the PageSpeed Insights or Lighthouse report and submit it to an AI assistant like Claude. The AI can read the report, identify the priority issues, and produce clear, site-specific instructions: which file to compress, which image to resize, which script to defer, which attribute to add. What was a list of technical recommendations becomes an operational action plan, with the steps in priority order. The same approach works by copy-pasting the text results of the report rather than using a screenshot.

To go further, it is possible to connect SEO tools directly to the AI. By connecting an Ahrefs account to Claude for example, the assistant can access the site's performance data, cross-reference crawl information with Core Web Vitals scores, and identify precisely which pages are problematic along with the exact changes to make. This is no longer a generic diagnosis: it is a contextual analysis of the site, with instructions tailored to its structure, CMS, and specific constraints.

The value of this approach is turning "recommendations" into executable instructions. A PageSpeed report that says "reduce the impact of third-party JavaScript" does not tell you which script to remove or how to defer it concretely in Webflow or WordPress. AI can provide the precise steps to follow, adapted to the platform being used. It is an efficient way to move fast without depending on a developer for every micro-optimization. If your site is on Webflow, the Webflow + Claude MCP connector can also complement this workflow by allowing the AI to act directly on certain site elements after validation.

‍

Common Core Web Vitals mistakes

The first mistake is ignoring Core Web Vitals on the assumption that only content matters for SEO. Content remains the most important factor, but when content quality is equal, a site with good Core Web Vitals will be favored by Google. Ignoring performance means leaving a competitive advantage to competitors who optimize it.

The second mistake is only measuring in the lab (Lighthouse) without looking at field data (Search Console). Lighthouse scores are useful for technical diagnosis, but they do not reflect the real user experience. Search Console field data shows what actual visitors experience, with real devices, on real networks. This is the data Google bases its ranking decisions on.

The third mistake is optimizing for desktop while neglecting mobile. Scores are often lowest on mobile, because network connections are slower and processors less powerful. Google uses mobile-first indexing, which means mobile scores carry more weight than desktop scores in ranking.

The fourth mistake is adding too many third-party scripts without evaluating their performance impact. A chat widget, a heatmap script, an ad tracker, a remarketing pixel, an A/B testing tool: each added script is additional JavaScript that weighs on LCP and INP. Before integrating a third-party script, you should measure its impact with Lighthouse and ask whether the benefit justifies the performance cost.

The fifth mistake is not sizing images and videos. Without width and height attributes, the browser does not reserve space for these elements, and their loading causes visual shifts that degrade CLS. It is one of the simplest fixes to apply and one of the most frequently overlooked.

The sixth mistake is using web fonts without preloading them. Late loading of a custom font causes either a flash of invisible text (FOIT) or a visible font change (FOUT), both of which impact CLS. Preloading the primary font and using font-display: swap corrects this issue.

The seventh mistake, specific to WordPress, is accumulating plugins without awareness of their cumulative impact. Each plugin adds CSS and JavaScript, and the sum of these additions can turn an initially performant site into a slow and unstable one. A regular audit of installed plugins, with deactivation of those no longer needed, is essential for maintaining good Core Web Vitals.

The eighth mistake is not monitoring regularly. A good score can degrade after an update, a feature addition, or the integration of a new script. Core Web Vitals should be checked regularly, not just once at launch.

‍

Core Web Vitals and Webflow: what the platform handles natively

Webflow offers several native advantages that contribute to good Core Web Vitals scores before any manual optimization is even performed. The integrated hosting relies on a global CDN (Fastly/AWS) with automatic SSL and GZIP/Brotli compression enabled by default, which speeds up file delivery to visitors wherever they are located. The HTML and CSS code generated by Webflow is clean and semantic, without the code bloat often seen on WordPress sites loaded with plugins. Images are automatically served in WebP format when the visitor's browser supports it, which reduces their size without visible quality loss. Lazy loading is natively available for images, and responsive design is managed with precise control over each breakpoint.

The absence of third-party plugins is a structural advantage for Core Web Vitals. On WordPress, each plugin adds its own CSS and JavaScript, and the accumulation of these files is one of the most frequent causes of poor LCP and INP scores. On Webflow, this issue does not exist because the platform integrates the features that brochure sites need (CMS, forms, animations, SEO) without a plugin layer. For a detailed comparison between the two platforms, our article on Webflow vs WordPress covers the differences in depth.

That said, Webflow does not automatically guarantee a perfect score. Several areas deserve attention. Complex animations and interactions, especially when they use custom GSAP code, can impact INP if they execute heavy JavaScript tasks on the main thread. Custom fonts must be properly preloaded to avoid text shifts (CLS). Autoplay videos and third-party embeds (YouTube, Vimeo, chat widgets, tracking scripts) should be used sparingly because they add weight and JavaScript to the page. Finally, images must be compressed before upload: Webflow optimizes automatically, but it does not compensate for a 5 MB source file.

For teams that want to monitor and optimize their bandwidth consumption on Webflow, our dedicated guide covers resource optimization best practices.

‍

Checklist: optimizing your site's Core Web Vitals

1. Measure your site's current scores with PageSpeed Insights (per page) and Google Search Console (site-wide view). Note the problematic pages and the metrics flagged.
2. Optimize images: compress before upload, use modern formats (WebP), resize to actual display size, enable lazy loading for below-the-fold images.
3. Define width and height dimensions on all images, videos, and iframes to prevent visual shifts (CLS).
4. Preload critical resources: hero image (not lazy-loaded) and primary font (preload tag).
5. Use font-display: swap for custom fonts and limit the number of font variants loaded.
6. Audit third-party scripts (analytics, chat, tracking, widgets): remove unnecessary scripts, load the rest asynchronously.
7. Defer loading of non-essential CSS and JavaScript files that block the initial render.
8. Test Core Web Vitals specifically on mobile, not just desktop. Use field data from Search Console, not just lab data.
9. Avoid dynamically injecting content (banners, notifications) above existing content without reserving space beforehand.
10. If the site uses JavaScript animations (GSAP, custom scripts), verify they do not execute long tasks that block the main thread (INP impact).
11. Schedule a monthly Core Web Vitals check in Search Console to detect regressions after updates or feature additions.
12. On WordPress: audit installed plugins and deactivate those no longer needed. Each removed plugin is less CSS and JavaScript on the page.

‍

Conclusion

Core Web Vitals are Google's official measurement framework for evaluating the technical experience of a website. The three metrics are clear: LCP for loading speed (threshold at 2.5 seconds), CLS for visual stability (threshold at 0.1), and INP for responsiveness (threshold at 200 milliseconds). The tools to measure them are free and accessible. The optimization actions are concrete: optimize images, size elements, preload critical resources, audit third-party scripts, and test on mobile. AI tools can now accelerate this process significantly by turning generic recommendations into specific, executable instructions tailored to your site and platform.

Webflow offers a solid foundation for Core Web Vitals thanks to its CDN hosting, clean code, and absence of plugins. But even on Webflow, vigilance remains necessary regarding animations, fonts, embeds, and image compression. Performance is not a one-time achievement: it is an indicator to monitor regularly.

If you want a performance audit of your site or support optimizing your Core Web Vitals as part of a redesign or optimization project, you can get in touch with us for an initial conversation. We will start from your current scores to identify the priority actions.