A website can have useful content, a clean design, and a strong search strategy but still provide a frustrating experience if its pages load slowly, respond late to clicks, or shift unexpectedly while visitors are reading.
These problems affect how people interact with a website. A page may technically load, but visitors can still struggle to use it if the main content takes too long to appear or buttons do not respond promptly.
This is why Google Core Web Vitals are an important part of technical SEO and website performance optimization.
Core Web Vitals are a set of user-experience metrics that measure loading performance, interactivity, and visual stability. They help website owners understand how real visitors experience their pages and identify performance problems that need attention.
This guide explains the three Core Web Vitals, their recommended thresholds, how to measure them, and practical ways to improve them on WordPress and other websites.
What Are Google Core Web Vitals?
Google Core Web Vitals are specific performance metrics used to evaluate important aspects of a webpage’s user experience.
The three current Core Web Vitals are:
- Largest Contentful Paint (LCP): Measures loading performance.
- Interaction to Next Paint (INP): Measures responsiveness to user interactions.
- Cumulative Layout Shift (CLS): Measures visual stability.
Each metric focuses on a different part of the visitor experience.
For example, a visitor may open a blog post and wait several seconds before the main heading and featured image appear. That is primarily a loading-performance concern.
If the page loads but the menu button takes too long to respond, the problem relates to responsiveness.
If the page content moves while the visitor is about to click a link, that is a visual-stability problem.
Core Web Vitals help website owners identify these separate issues instead of treating website speed as one general measurement.
What Are the Core Web Vitals Thresholds?
Google defines recommended thresholds for each Core Web Vital. A page needs to meet the good threshold at the 75th percentile of page visits to receive a good assessment for that metric.
| Metric | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP | 2.5 seconds or less | More than 2.5 to 4 seconds | More than 4 seconds |
| INP | 200 milliseconds or less | More than 200 to 500 milliseconds | More than 500 milliseconds |
| CLS | 0.1 or less | More than 0.1 to 0.25 | More than 0.25 |
The 75th-percentile measurement means that at least 75% of recorded page visits should fall within the good range for the metric.
Google evaluates mobile and desktop experiences separately. A website can perform well on desktop but still have problems on mobile devices.
The thresholds are useful because they give website owners specific targets instead of relying on vague statements such as “the website should load faster.”
1. Largest Contentful Paint (LCP)
Largest Contentful Paint measures how long it takes for the largest qualifying content element in the visible part of a webpage to appear.
This element may be:
- A large featured image.
- A main heading.
- A prominent text block.
- A background image or other eligible visual element.
LCP focuses on when the main content becomes visible to the visitor. It does not measure the time required for every image, script, or resource on the entire page to finish loading.
What Causes a Poor LCP Score?
Several technical problems can delay the largest content element.
Slow server response: If the server takes too long to deliver the initial HTML, the browser cannot begin processing the page promptly.
Unoptimized images: Large image files can take longer to download, particularly on mobile connections.
Render-blocking resources: Some CSS and JavaScript files can delay the browser from displaying important content.
Poor resource prioritization: The browser may not discover or prioritize the main image early enough.
Slow loading fonts: A page that depends on external fonts may experience additional delays before its main text is displayed.
How to Improve LCP
Start by identifying the actual LCP element using PageSpeed Insights or Chrome DevTools.
Then investigate the resource responsible for delaying it.
Practical improvements include:
- Compress large images without noticeably reducing visual quality.
- Serve images in modern formats such as WebP or AVIF where supported.
- Use appropriately sized images for the rendered display.
- Avoid lazy-loading the main above-the-fold LCP image.
- Consider using
fetchpriority="high"for an important image when appropriate. - Improve server response time through suitable hosting and caching.
- Reduce unnecessary render-blocking CSS and JavaScript.
- Preload critical resources only when testing shows that doing so helps.
Do not apply every optimization automatically. For example, preloading multiple images can compete for bandwidth and make the actual LCP resource load more slowly.
The goal is to help the browser discover and display the most important visible content as early as possible.
2. Interaction to Next Paint (INP)
Interaction to Next Paint measures how responsive a webpage feels when visitors interact with it.
It considers the delay between a user interaction and the next visual update shown by the browser.
Examples of interactions include:
- Clicking a navigation menu.
- Selecting an option from a dropdown.
- Pressing an interactive button.
- Opening an accordion.
- Typing into a search field.
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024.
Unlike FID, which focused on the delay before the browser began processing the first interaction, INP evaluates responsiveness across interactions during a page visit.
What Causes a Poor INP Score?
JavaScript execution is a common source of interaction delays.
When the browser is busy processing long tasks, it may not respond quickly to a visitor’s action.
Other possible causes include:
- Excessive JavaScript execution.
- Large third-party scripts.
- Unnecessary event handlers.
- Expensive layout calculations.
- Complex page components.
- Heavy tracking and advertising scripts.
- Main-thread tasks that block browser updates.
For example, a website may load its main content quickly but still feel slow when visitors open a menu or submit a form. This can indicate an interaction-performance problem rather than an image-loading problem.
How to Improve INP
Start by identifying which interactions are slow and what the browser is doing when they occur.
Useful optimization techniques include:
Reduce unnecessary JavaScript: Remove scripts and features that do not contribute to the website’s essential functionality.
Break up long tasks: Divide large JavaScript operations into smaller tasks so the browser has more opportunities to respond to user input.
Reduce third-party scripts: Review analytics, advertising, chat widgets, and other external scripts. Remove unnecessary services and load nonessential scripts more carefully.
Optimize event handlers: Keep click and input event handlers efficient. Avoid performing expensive calculations immediately when a user interacts with a control.
Avoid unnecessary DOM updates: Large or repeated changes to the page structure can create additional browser work.
Use browser performance tools: Chrome DevTools can help identify long tasks and JavaScript functions that contribute to slow interactions.
Remember that reducing the number of scripts is not the only solution. A small script can still cause problems if it performs expensive operations at the wrong time.
3. Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures unexpected movement of visible page elements during a visitor’s experience.
A layout shift occurs when an element changes its position without a user interaction that explains the movement.
For example, a visitor may begin reading a paragraph, but an advertisement loads above it and pushes the text downward. The visitor loses their place and may accidentally click something else.
CLS measures the visual instability caused by unexpected layout shifts.
What Causes a Poor CLS Score?
Common causes include:
- Images without reserved dimensions.
- Advertisements that load without allocated space.
- Embeds that change their size after loading.
- Web fonts that cause text to reflow.
- Dynamically inserted content.
- Late-loading banners and promotional sections.
These problems are especially noticeable on mobile devices, where the available screen space is limited.
How to Improve CLS
The most effective approach is to reserve space for elements before they load.
Set image dimensions: Add appropriate width and height attributes to images so the browser can calculate their space in advance.
Reserve advertisement space: Allocate a suitable container for ads rather than allowing them to push existing content down when they appear.
Set dimensions for embeds: Videos, maps, and other embedded content should have a defined aspect ratio or reserved container.
Avoid inserting content above existing content: If a banner or notification appears after the page loads, it should not unexpectedly move the main content.
Optimize font loading: Use appropriate font-display settings and consider fallback fonts with similar dimensions to reduce layout changes.
Check dynamic elements: Review popups, consent banners, recommendation widgets, and other components that may change the page layout.
CLS is not simply a measurement of how much a page moves. It focuses on unexpected layout shifts and their impact on the visible experience.
How to Measure Google Core Web Vitals
You need reliable measurement tools before making performance changes. Different tools provide different types of information, so use them together when diagnosing a problem.
1. Google PageSpeed Insights
PageSpeed Insights is one of the most useful starting points for checking Core Web Vitals.
It provides two important types of information:
- Field data, when available, based on real Chrome user experiences.
- Lab data generated through a controlled Lighthouse test.
The report includes performance diagnostics and recommendations that can help identify issues related to loading, responsiveness, and visual stability.
Visit Google PageSpeed Insights and enter the URL you want to test.
Review mobile and desktop results separately. A page that performs well on a desktop test may still have significant mobile performance problems.
2. Google Search Console Core Web Vitals Report
Google Search Console provides a Core Web Vitals report that groups URLs according to their performance status.
It can help identify groups of pages that have:
- Poor URLs.
- URLs needing improvement.
- URLs with good performance.
The report is useful when you want to identify site-wide patterns rather than inspect one page at a time.
For example, if several blog posts share the same theme or template, a common layout or script may be affecting all of them.
You can access the report through the Google Search Console interface.
3. Chrome DevTools
Chrome DevTools provides detailed technical information for diagnosing performance problems.
Its Performance panel can help you inspect:
- Long JavaScript tasks.
- Main-thread activity.
- Layout calculations.
- Rendering delays.
- Interaction-related performance issues.
The panel is particularly useful when PageSpeed Insights identifies a problem but you need to understand what is causing it.
4. Lighthouse
Lighthouse runs performance tests in a controlled environment and provides diagnostic information about page loading and other quality aspects.
It can help identify problems such as large images, unused JavaScript, render-blocking resources, and inefficient resource loading.
However, Lighthouse lab tests do not directly measure real-user INP. Total Blocking Time (TBT) can help diagnose main-thread blocking in a lab environment, but it is not a replacement for field INP data.
Field Data vs. Lab Data: What Is the Difference?
Understanding the difference between field and lab data is essential when reviewing Core Web Vitals.
| Feature | Field data | Lab data |
|---|---|---|
| Source | Real user experiences | Controlled test environment |
| Conditions | Vary by device and network | Simulated conditions |
| Best use | Understanding actual visitor experience | Diagnosing performance problems |
| INP measurement | Can reflect real interactions | Lighthouse does not directly measure field INP |
| Results | Can vary across users | More controlled and repeatable |
Field data helps you understand how real visitors experience your website. Lab data helps you investigate potential causes and test improvements.
A page can receive a strong Lighthouse score while still having poor field performance. This can happen because real visitors use different devices, browsers, networks, and interaction patterns.
Likewise, a single lab test may not reveal every issue affecting visitors.
For this reason, do not rely on one PageSpeed score as the complete measure of website performance.
How to Improve Core Web Vitals on WordPress
WordPress websites can experience performance problems because of themes, plugins, images, scripts, hosting configurations, and page-building tools.
A practical optimization process should focus on the problems shown in the measurements rather than installing multiple speed plugins without a clear plan.
Optimize Images
Large images are a common reason for poor loading performance.
Use appropriately sized images, compress them, and serve modern formats where suitable.
For important above-the-fold images, check whether lazy loading is delaying the LCP element. Below-the-fold images can generally be lazy-loaded to avoid downloading resources before they are needed.
Review Plugins
Every plugin adds functionality, but some can also introduce additional scripts, stylesheets, database operations, or external requests.
Review installed plugins and remove those that are no longer necessary.
Do not deactivate essential functionality simply to reduce plugin count. Instead, identify which plugins are actually affecting page performance.
Use Caching Carefully
Caching can reduce repeated server work and help deliver pages more efficiently.
Depending on your hosting environment, useful options may include:
- Page caching.
- Browser caching.
- Object caching.
- Server-level caching.
- Content delivery network caching.
Test changes individually. Aggressive caching or optimization settings can sometimes break layouts, forms, menus, and other website features.
Reduce Unnecessary JavaScript
Third-party scripts, analytics tools, sliders, popups, and interactive widgets can affect responsiveness.
Review which scripts are essential and whether noncritical resources can be delayed or loaded only when needed.
For a deeper technical review of JavaScript rendering, crawling, and page accessibility, see our guide to conducting a JavaScript SEO audit.
Improve Hosting and Server Response
A slow server can delay the delivery of the initial HTML and affect the browser’s ability to begin rendering the page.
Review hosting performance, server response time, database efficiency, and caching configuration.
Upgrading hosting may help when the existing server is consistently overloaded, but it is not a substitute for fixing oversized images, inefficient scripts, or poor page design.
Prevent Layout Shifts
Check image dimensions, video containers, advertisements, and dynamically loaded sections.
Make sure important page elements have reserved space before their content appears.
This is especially important for blog layouts with featured images, advertisements, embedded videos, and related-content sections.
Are Core Web Vitals a Google Ranking Factor?
Core Web Vitals are part of Google’s page experience considerations and are used to assess important aspects of real-world user experience.
However, passing all three metrics does not guarantee higher rankings.
Google’s ranking systems consider many signals, and relevance remains essential. A technically fast page that does not answer the searcher’s question is unlikely to become the best result simply because its performance metrics are strong.
Similarly, a page that narrowly misses one threshold is not automatically excluded from search results.
Website owners should treat Core Web Vitals as part of a broader technical SEO and user-experience strategy. Improve performance because it helps visitors use the website, not just to chase a particular score.
Common Core Web Vitals Optimization Mistakes
Chasing a Perfect PageSpeed Score
A perfect Lighthouse score is not the same as consistently good real-user performance.
Focus on meaningful improvements to LCP, INP, and CLS rather than making changes solely to increase a lab score.
Optimizing Desktop Only
Mobile users often have slower connections and less powerful devices.
Always review mobile performance separately. A desktop result should not be used as proof that the mobile experience is healthy.
Lazy-Loading the Main Image
Lazy loading is useful for images that appear farther down the page. However, applying it to the main LCP image can delay the largest visible content element.
Identify the LCP resource before changing image-loading behavior.
Installing Too Many Optimization Plugins
Multiple performance plugins can create overlapping settings, duplicate optimizations, or compatibility issues.
Choose a suitable configuration, test it carefully, and avoid enabling every optimization option without checking the result.
Ignoring Field Data
Lab tests are useful for diagnosis, but they cannot fully represent every visitor’s experience.
Use field data where available to understand how your website performs for real users.
Core Web Vitals Audit Checklist
Use this checklist when reviewing a website:
- Check LCP, INP, and CLS separately.
- Review mobile and desktop performance.
- Inspect field data when available.
- Identify the actual LCP element.
- Check server response and image-loading behavior.
- Investigate long JavaScript tasks.
- Review third-party scripts and plugins.
- Reserve space for images, ads, and embeds.
- Test changes with PageSpeed Insights and Chrome DevTools.
- Review the Search Console Core Web Vitals report.
- Recheck performance after major theme, plugin, or design changes.
Frequently Asked Questions
What are the three Google Core Web Vitals?
The three current Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). They measure loading performance, responsiveness, and visual stability.
What is a good Core Web Vitals score?
A good assessment requires LCP of 2.5 seconds or less, INP of 200 milliseconds or less, and CLS of 0.1 or less. These thresholds are evaluated at the 75th percentile of page visits.
Does Google Core Web Vitals affect SEO?
Core Web Vitals are part of Google’s page experience considerations. They can contribute to the overall search experience, but they do not guarantee higher rankings. Relevant and useful content remains important.
How often should I check Core Web Vitals?
Check performance after significant website changes, such as installing a theme, adding plugins, changing page layouts, or introducing new scripts. Review Search Console regularly to monitor field performance over time.
Is Lighthouse the same as PageSpeed Insights?
No. Lighthouse is an auditing tool that can run lab tests. PageSpeed Insights uses Lighthouse lab data and can also display real-user field data when sufficient data is available.
Can a website pass Lighthouse but fail Core Web Vitals?
Yes. Lighthouse uses controlled lab conditions, while field Core Web Vitals reflect real user experiences. Differences in devices, networks, and interactions can produce different results.
What is the difference between INP and FID?
FID measured the delay before the browser began processing a visitor’s first interaction. INP evaluates responsiveness across interactions during a page visit and replaced FID as a Core Web Vital in March 2024.
Final Thoughts
Google Core Web Vitals provide a practical way to understand how visitors experience a website. LCP highlights loading delays, INP helps identify slow interactions, and CLS reveals unexpected layout movement.
Improving these metrics requires more than installing a caching plugin or compressing a few images. Website owners need to identify the actual performance problems, test changes carefully, and compare lab results with real-user data.
Start with the pages that matter most to your visitors. Fix the largest performance issues first, monitor the results, and continue improving the experience across mobile and desktop devices.