Core Web Vitals: LCP, INP & CLS Explained + How to Improve Them
Core Web Vitals are performance metrics designed to measure important parts of a real user's page experience, including loading performance, responsiveness, and visual stability.
Quick answer: The three Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). For a good experience, aim for LCP of 2.5 seconds or less, INP of 200 milliseconds or less, and CLS of 0.1 or less, evaluated at the 75th percentile of page visits.
Core Web Vitals can reveal performance problems that directly affect how a website feels to real visitors. A page may look attractive after it finishes loading while still providing a frustrating experience because its main content appears slowly, interactions respond late, or elements unexpectedly move around the screen.
This guide explains each Core Web Vital, the common causes of poor results, how measurement works, and practical areas to investigate when improving WordPress, Elementor, ecommerce, and other websites.
What Are Core Web Vitals?
Core Web Vitals are a set of metrics focused on key aspects of user experience. The current metrics are:
| Metric | Measures | Good Threshold |
|---|---|---|
| LCP | Loading performance | ≤ 2.5 seconds |
| INP | Interaction responsiveness | ≤ 200 milliseconds |
| CLS | Visual stability | ≤ 0.1 |
Do Core Web Vitals Affect SEO?
Core Web Vitals are relevant to Google's page-experience systems, but they should not be treated as a shortcut to rankings.
A technically fast page is not automatically more useful or relevant than another result. Core Web Vitals should therefore be improved as part of a broader strategy that also includes useful content, search intent, technical accessibility, and a strong overall user experience.
Trying to achieve a perfect performance score while ignoring content quality or user needs is the wrong optimization objective.
Understanding the Three Core Web Vitals
Largest Contentful Paint
Largest Contentful Paint measures loading performance. In practical terms, it evaluates how long it takes for the largest relevant content element in the viewport to render.
Depending on the page, the LCP element might be a hero image, a large heading, a prominent content image, or another large block of visible content.
What Is a Good LCP Score?
| LCP | Assessment |
|---|---|
| 2.5 seconds or less | Good |
| More than 2.5 to 4 seconds | Needs Improvement |
| More than 4 seconds | Poor |
What Can Cause Poor LCP?
How to Improve LCP
Optimize the LCP Image
If the LCP element is an image, make sure it is appropriately sized, compressed, and delivered in a suitable format.
An oversized hero image can become one of the largest performance costs on a landing page.
Do Not Unnecessarily Delay the Main Image
Lazy loading is useful for many below-the-fold images, but an image required immediately in the initial viewport should be evaluated separately.
Improve Server Response
Caching, hosting configuration, database efficiency, application processing, and content delivery can all influence how quickly the browser begins receiving useful page content.
Reduce Render-Blocking Work
Review critical CSS, unnecessary stylesheets, third-party scripts, fonts, and JavaScript that delay initial rendering.
Interaction to Next Paint
Interaction to Next Paint measures page responsiveness by observing the latency of user interactions during a page visit.
Interactions can include actions such as clicking, tapping, or using the keyboard. A poor INP can make a website feel sluggish even when its initial visual content appears quickly.
What Is a Good INP Score?
| INP | Assessment |
|---|---|
| 200 ms or less | Good |
| More than 200 to 500 ms | Needs Improvement |
| More than 500 ms | Poor |
What Can Cause Poor INP?
How to Improve INP
Reduce Long Main-Thread Tasks
Large blocks of JavaScript can prevent the browser from responding promptly. Break up or eliminate unnecessary work where possible.
Remove Unnecessary JavaScript
Audit plugins, tracking scripts, widgets, animations, and third-party integrations. Every script should have a clear purpose.
Keep Interaction Handlers Efficient
Buttons, menus, filters, forms, and interactive components should avoid triggering excessive synchronous processing.
Review DOM Complexity
Deeply nested layouts and excessive elements can increase browser work, particularly on complex page-builder websites.
Cumulative Layout Shift
Cumulative Layout Shift measures unexpected visual movement while a page is being used.
For example, a visitor may be preparing to click a button when an image, advertisement, banner, or other element suddenly loads above it and pushes the button elsewhere.
What Is a Good CLS Score?
| CLS | Assessment |
|---|---|
| 0.1 or less | Good |
| More than 0.1 to 0.25 | Needs Improvement |
| More than 0.25 | Poor |
What Causes Layout Shifts?
How to Improve CLS
Reserve Space for Images
Provide appropriate width and height information or otherwise preserve the image's aspect ratio so the browser can reserve space before it loads.
Reserve Space for Ads and Embeds
If an advertisement or embedded element will appear in a known location, design the layout so its space is accounted for rather than pushing existing content unexpectedly.
Be Careful With Dynamic Content
Cookie notices, promotional bars, forms, recommendations, and other dynamic elements should not unexpectedly move content that a visitor is already viewing or interacting with.
Core Web Vitals Thresholds at a Glance
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2.5 s | > 2.5 s to 4 s | > 4 s |
| INP | ≤ 200 ms | > 200 ms to 500 ms | > 500 ms |
| CLS | ≤ 0.1 | > 0.1 to 0.25 | > 0.25 |
Fast Loading + Responsive Interaction + Stable Layout = Better Page Experience
Why the 75th Percentile Matters
Core Web Vitals are not intended to describe only one ideal test performed from one fast computer.
For field assessment, the commonly used target is to provide a good experience at the 75th percentile of page loads, segmented by device category where applicable.
This is one reason real-user data is important: visitors use different devices, networks, browsers, and geographic connections.
Field Data vs Lab Data
One of the most important concepts in performance testing is the difference between measurements from real visitors and measurements produced in a controlled test.
| Data Type | What It Represents | Best Use |
|---|---|---|
| Field Data | Real-user experiences collected over time | Understanding actual user performance |
| Lab Data | Controlled performance test | Diagnosing and reproducing performance problems |
The two can differ without either necessarily being incorrect. A laboratory test represents a specific simulated environment, while field data reflects a distribution of real-world experiences.
How to Test Core Web Vitals
PageSpeed Insights
PageSpeed Insights can provide performance information for a URL and can surface both real-user information when sufficient data is available and diagnostic Lighthouse data.
Google Search Console
The Core Web Vitals report in Search Console can help site owners identify groups of URLs experiencing similar real-user performance issues.
Chrome DevTools and Lighthouse
Development tools can help investigate individual pages, inspect resources, analyze loading behavior, and diagnose specific performance bottlenecks.
Why PageSpeed Scores Can Change
A performance test is not necessarily identical every time it runs. Network conditions, server behavior, third-party resources, test environment, and other factors can affect individual lab results.
Do not make major technical decisions from one isolated test alone. Look for repeatable patterns and identify the underlying bottleneck.
Core Web Vitals for WordPress
WordPress itself is not automatically slow. Performance depends on the complete implementation, including hosting, theme, plugins, page design, media, scripts, fonts, database behavior, caching, and third-party services.
Core Web Vitals for Elementor Websites
Elementor provides substantial design flexibility, but complex layouts can also create unnecessary browser work when pages contain excessive containers, widgets, effects, scripts, images, or add-ons.
Reduce Unnecessary Widgets
Every visual component should serve a purpose. Avoid creating multiple nested elements simply to achieve basic spacing or styling.
Review Motion Effects
Animations, entrance effects, parallax sections, and other motion features should be used intentionally rather than applied across every section.
Review Elementor Add-ons
Third-party widget packs may load additional CSS and JavaScript. Keep only the functionality that the website genuinely requires.
Optimize Hero Sections
Large hero images, video backgrounds, sliders, animations, and multiple fonts can make the initial viewport unnecessarily expensive to render.
Images and Core Web Vitals
Images can influence both loading performance and visual stability.
| Image Problem | Potential Effect |
|---|---|
| Oversized hero image | Can contribute to slow LCP |
| Missing dimensions | Can contribute to CLS |
| Lazy-loaded critical image | Can delay important visible content |
| Excessive image file size | Increases resource transfer |
JavaScript and Core Web Vitals
JavaScript is essential for many interactive websites, but excessive or poorly scheduled JavaScript can create performance problems.
Review:
The objective is not to eliminate JavaScript. It is to avoid making visitors' devices execute work that provides little or no value.
CSS and Rendering Performance
Large or unnecessary stylesheets can increase the work required to render a page.
Web Fonts and Performance
Custom fonts contribute to branding, but unnecessary font families and weights can increase resource requests and affect rendering.
A website rarely needs every available weight of several font families. Use the fonts and weights actually required by the design.
Third-Party Scripts
Analytics, advertising, chat widgets, social embeds, tracking pixels, video embeds, review widgets, and marketing tools can all add browser work.
Before adding another third-party script, ask: Does the business value of this script justify its performance cost?
Mobile Core Web Vitals
Mobile performance deserves particular attention because visitors may use less powerful devices or slower network connections than the computer used to build the website.
Common Core Web Vitals Mistakes
Chasing a Perfect 100 Score
A perfect laboratory performance score is not the primary business or SEO objective. Focus on meaningful improvements to real user experience.
Testing Only the Homepage
A website contains multiple templates. Test important service pages, articles, product pages, category pages, landing pages, and other major page types.
Testing Only Desktop
Desktop results do not automatically represent the mobile experience.
Installing Multiple Optimization Plugins
Several overlapping optimization tools can create conflicts or make performance behavior harder to understand. Use a deliberate configuration.
Compressing Images but Ignoring JavaScript
Images are only one part of page performance. A site can have optimized images while still suffering from excessive script execution.
Removing Functionality Without Testing
Aggressive optimization can break menus, checkout functionality, forms, tracking, styling, or interactive components. Test important functionality after technical changes.
Assuming Core Web Vitals Guarantee Rankings
Good Core Web Vitals support page experience, but they do not replace relevance, useful content, search intent, authority, or other aspects of search performance.
Core Web Vitals Optimization Checklist
Performance Is Only One Part of On-Page SEO
Once your page experience is improving, make sure your search result also communicates the page topic clearly. A relevant SEO title and meta description can help users understand what your page offers.
Try the Free SEO Title & Meta Description GeneratorFrequently Asked Questions About Core Web Vitals
What are the three Core Web Vitals?
The three Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). They focus on loading performance, responsiveness, and visual stability.
What is a good LCP score?
A good LCP is 2.5 seconds or less at the recommended assessment threshold.
What is a good INP score?
A good INP is 200 milliseconds or less at the recommended assessment threshold.
What is a good CLS score?
A good CLS score is 0.1 or less at the recommended assessment threshold.
Do Core Web Vitals affect Google rankings?
Core Web Vitals are used by Google's ranking systems as part of page experience considerations. Good scores do not guarantee high rankings, because relevance, content quality, and many other signals also matter.
Why is PageSpeed Insights different each time?
Individual lab tests can vary because the test environment, network behavior, server response, third-party resources, and other conditions are not always identical. Look for consistent patterns rather than relying on one run.
What is the difference between field data and lab data?
Field data represents real-user experiences collected over time, while lab data comes from a controlled test environment and is particularly useful for diagnosing performance problems.
Can WordPress achieve good Core Web Vitals?
Yes. WordPress performance depends on the full implementation, including hosting, theme, plugins, page design, media, scripts, caching, fonts, and third-party services.
Can Elementor affect Core Web Vitals?
An Elementor site can perform well, but excessive widgets, nested layouts, large media, animations, add-ons, and scripts can increase browser work. A leaner implementation is generally easier to optimize.
Final Thoughts
Core Web Vitals provide a useful framework for understanding whether pages load their important content promptly, respond to interactions efficiently, and remain visually stable.
Core Web Vitals framework:
Measure → Identify Bottleneck → Optimize LCP → Improve Responsiveness →
Stabilize Layout → Test Mobile → Review Real-User Data → Monitor
Treat performance optimization as an ongoing engineering and user-experience process rather than a one-time attempt to achieve a perfect score.
After improving performance, continue strengthening the rest of the page: search intent, useful content, internal linking, images, titles, descriptions, and overall usability all work together.
