Core Web Vitals are Google's metrics for evaluating important aspects of the user experience, including loading performance, responsiveness, and visual stability.
The three metrics are:
Metric
What it measures
Good performance
Largest Contentful Paint (LCP)
How quickly the main visible content loads
2.5 seconds or less
Interaction to Next Paint (INP)
How quickly the page responds visually to user interactions
200 milliseconds or less
Cumulative Layout Shift (CLS)
How much unexpected layout movement occurs
0.1 or less
These thresholds are evaluated at the 75th percentile of page visits, separately for mobile and desktop.
For example, a page may display its main heading quickly but still have poor INP if clicking a menu causes a noticeable delay. Similarly, advertisements or images without reserved space can cause unexpected layout shifts and increase CLS.
How to Check Page Speed
You can evaluate page speed using several performance testing tools.
1. Google PageSpeed Insights
Google PageSpeed Insights provides performance data for mobile and desktop devices. It combines real-user field data from the Chrome User Experience Report, when available, with diagnostic information from laboratory tests.
Use it to identify Core Web Vitals issues, render-blocking resources, oversized images, and JavaScript execution problems.
2. Google Search Console
The Core Web Vitals report in Google Search Console groups URLs according to their performance status using available real-user data.
It helps SEO professionals identify groups of pages that require attention instead of analyzing every URL individually.
3. Lighthouse
Lighthouse runs laboratory tests that evaluate performance and other aspects of page quality. It provides diagnostics for resource loading, JavaScript execution, accessibility, and related issues.
Laboratory results are useful for debugging, but they do not always reflect the experience of real visitors.
How to Improve Page Speed
Optimize Images
Large image files can increase page loading time, especially on mobile devices. Compress images, use suitable dimensions, and consider modern formats such as WebP or AVIF.
Use responsive images where appropriate and avoid lazy-loading the main above-the-fold image when it is the LCP element. Lazy-loading is generally more suitable for images farther down the page.
Reduce Unnecessary JavaScript and CSS
Excessive JavaScript and CSS can delay rendering and user interactions.
To improve performance:
- Remove unused scripts and stylesheets.
- Minify CSS and JavaScript where appropriate.
- Defer non-critical JavaScript.
- Reduce unnecessary third-party scripts.
- Split large JavaScript bundles when suitable.
Test changes carefully to ensure that navigation, forms, tracking, and other essential features continue working correctly.
Improve Server Response Time
A slow server can delay the delivery of HTML and other resources. Review hosting performance, caching configuration, database queries, and backend processing.
Browser caching and a content delivery network (CDN) can also reduce repeat-loading times and deliver static resources more efficiently.
Fix Render-Blocking Resources
Some CSS and JavaScript resources prevent the browser from displaying content promptly. Identify critical resources through performance diagnostics, inline only necessary critical CSS when appropriate, and defer non-critical resources.
Avoid delaying essential styles or scripts in ways that create broken layouts or unusable page elements.
Improve Mobile Performance
Test pages on mobile devices because limited processing power, network variability, and large resources can affect loading and responsiveness.
Prioritize the main visible content, simplify resource-heavy components, and check whether mobile-specific scripts or layouts introduce performance problems.