Table of contents
Imagine this situation: you click on a search result, full of hope to find what you’re looking for. But instead of an instantly loaded page, you stare at a spinning wheel and a blank screen. Seconds pass, frustration grows, and finally you press the „back” button. Annoying, right? Now think about your website doing the same to potential customers.
Today, nearly half of users expect a page to load in less than 2 seconds – your site’s performance can determine success or failure. Core Web Vitals are not random technical slogans, but specific metrics by which Google evaluates how your site is perceived by real people. They focus on 3 aspects:
- load speed: how quickly the user sees the content,
- responsiveness: how quickly the page responds to clicks or other actions,
- visual stability: whether the elements on the page do not move in an annoying way while loading.
What are Core Web Vitals?
Core Web Vitals are a set of metrics created by Google to measure the quality of user experience on websites. These metrics mainly focus on the loading speed, interactivity and visual stability of sites.
The Core Web Vitals consist of three core metrics:
- LCP (Largest Contentful Paint): measures page load speed,
- CLS (Cumulative Layout Shift): examines the visual stability of elements,
- INP (Interaction to Next Paint): examines responsive interaction.
Why are they important? Because:
- they are an official element of Google’s algorithm affecting page positioning,
- they provide concrete data about actual site usage,
- sites that meet the standards achieve a 24% lower rejection rate.
Regular tracking and improvement of these metrics translates into tangible results – better search engine visibility, higher visitor satisfaction, and higher conversion rates with a decrease in page abandonment.
What role do Core Web Vitals play in SEO?
Core Web Vitals are important indicators of site quality that directly affect positioning in Google search results. Sites that meet the high standards of these metrics enjoy better visibility in the results.
The impact of Core Web Vitals on SEO manifests itself in several aspects:
- particular importance for mobile versions of sites,
- direct impact on conversion rate,
- reduction of rejection rate,
- increase in organic traffic.
These metrics are part of the broader Page Experience factor, which Google uses to holistically evaluate the quality of a user’s interaction with a page.
How Core Web Vitals Impact User Experience?
Today’s users have high expectations – nearly half assume a page will load in less than 2 seconds. The same study indicates that 2 out of 5 users will leave a page if it doesn’t load in 3 seconds. This is especially important when browsing on mobile devices.
Core Web Vitals significantly impact the user experience through 3 key performance metrics.
- load speed: pages that load in less than 2.5 seconds minimize the risk of user abandonment,
- visual stability: a low CLS score (less than 0.1) can increase conversions by eliminating skipping elements,
- interface responsiveness: response times of less than 200 ms (as measured by INP) encourage greater interaction with the site.
Optimizing these parameters translates into measurable business benefits:
- extended time spent on the site,
- increased conversion rate,
- improved user satisfaction,
- reduced rejection rate, especially on mobile devices.
What are the main Core Web Vitals metrics?
Core Web Vitals creates 3 metrics: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS), which measure the performance and quality of a website.
- Largest Contentful Paint (LCP): measures the loading speed of the main elements of a website, such as graphics, videos and text areas. An optimal score is under 2.5 seconds,
- Interaction to Next Paint (INP): evaluates the responsiveness of a site to user interactions, including clicks, touches and key presses. A good score is less than 200 ms,
- Cumulative Layout Shift (CLS): determines the visual stability of a page, measuring unexpected shifts of elements during loading.
What does Largest Contentful Paint (LCP) measure?
Largest Contentful Paint (LCP) measures the rendering time of the largest visual element visible in the user’s screen area. This can be a large image, a piece of text, a video, a banner or even a background defined in a CSS stylesheet.
This indicator focuses on the loading speed of a site’s main content, accurately indicating when the largest component is fully rendered and available to the visitor.
- a time of less than 2.5 seconds indicates good optimization,
- values between 2.5 and 4 seconds signal the need for improvements,
- exceeding 4 seconds indicates significant loading speed issues.
Compared to previous metrics such as First Contentful Paint or First Meaningful Paint, LCP more accurately captures the actual user experience while the site is loading. Interestingly, an element measured by LCP can change dynamically during the loading of a site – the final measurement takes into account the rendering time of the component that was ultimately found to be the largest.
How does Cumulative Layout Shift (CLS) work?
Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a website during loading, focusing on unwanted shifts of elements. This parameter takes into account both the size of the area affected by the changes and the distance the components move.
To accurately measure layout stability, the system analyzes all unstable elements, their area and the distance they travel. The calculation is based on a simple formula, where CLS is the product of the changed viewport area and the displacement length, with the final value having no unit.
- dynamically loaded ads: cause abrupt changes in page layout,
- inadequately defined graphic dimensions: lack of specified dimensions causes jumps during loading,
- loading external fonts: can cause text to shift during rendering.
The CLS is monitored in real time while the site is loading. The system only tracks offsets unrelated to user interaction, collecting data from the entire browsing session.
- score below 0.1: well-optimized site,
- values of 0.1-0.25: improvements needed,
- above 0.25: serious performance problems.
Why Interaction to Next Paint (INP) will replace FID?
INP will replace FID in Core Web Vitals because it provides a more accurate and comprehensive measurement of actual user interactions with the site.
- monitors all interactions during the entire visit, not just the user’s first response,
- takes into account the total time from the user’s action to the display of the next frame,
- records a wider range of interactions, including clicks, touch gestures and key presses.
INP also excels at better reflecting users’ actual browsing experience. Rather than focusing only on the initial phase of the visit, this metric provides reliable data on fluency throughout the interaction.
- under 200 ms: optimal site performance,
- 200-500 ms: site needs refinement,
- over 500 ms: significant performance issues.
How to measure and when to monitor Core Web Vitals?
Core Web Vitals can be measured in 2 ways: through tools that collect real user data and lab tests under controlled conditions.
- real data-based tools: Google Search Console based on Chrome User Experience Report, CrUX for Chrome user data, PageSpeed Insights combining real-world and lab data,
- laboratory tests: Lighthouse for precise analysis, Chrome DevTools for ongoing monitoring, WebPageTest for testing from different locations,
- regular monitoring: monthly analysis in Search Console, testing after page changes, CrUX trend tracking.
To effectively monitor Core Web Vitals, it is essential to regularly check data in Search Console on a monthly basis. It is also a good idea to run lab tests after making significant changes to the site. It is also important to monitor trends in CrUX reports and analyze results by mobile and desktop. Particular attention should be paid to URLs in need of optimization.
The most reliable conclusions can be drawn by analyzing data from different sources simultaneously. This comprehensive approach allows you to quickly identify and address potential site performance issues.
What tools are used to measure Core Web Vitals?
First and foremost, Google’s official tools are used to measure Core Web Vitals: PageSpeed Insights, Google Search Console and Chrome DevTools.
- PageSpeed Insights: provides a detailed site performance assessment with lab data and actual traffic from the past month,
- Google Search Console: offers a Core Web Vitals report grouping sites with similar performance challenges,
- Chrome DevTools: includes a Performance Insights panel to visualize LCP, CLS and INP metrics,
- Lighthouse: performs automated analysis of pages and provides specific optimization suggestions,
- Web Vitals Extension: provides an instant preview of metrics as you browse pages,
- Chrome UX Report (CrUX): collects real-world site performance data from Chrome users.
Additional tools supporting Core Web Vitals measurement include the web-vitals.js library for custom measurements, WebPageTest for advanced performance diagnostics, and Google Analytics 4 for real-time monitoring of metrics.
How to interpret measurement results?
Core Web Vitals is interpreted by analyzing 3 baseline metrics, where each has specific performance thresholds for ratings of „good,” „needs improvement,” and „poor”. Below is a detailed table.
It is worth focusing primarily on data from actual traffic, as it best shows the actual experience of visitors. Lab tests are mainly used to detect and fix specific faults.
Effective analysis requires categorizing results by URL type and monitoring changes over time. Only a positive score for all, three metrics confirms that a site fully meets Google’s quality standards.
What are the optimal values for each metric?
Optimal values for Core Web Vitals are:
- LCP (Largest Contentful Paint): less than 2.5 seconds for fast loading of the main content,
- INP (Interaction to Next Paint): under 200 milliseconds for optimal responsiveness,
- CLS (Cumulative Layout Shift): under 0.1 for visual stability.
The speed of loading the main content, as measured by Largest Contentful Paint (LCP), should close in 2.5 seconds to merit a positive rating. Exceeding this time, but staying below 4 seconds, signals the need for optimization. Longer loading times are considered unacceptable.
Site responsiveness, as determined by Interaction to Next Paint (INP), is considered optimal with response times of up to 200 milliseconds. Delays between 200 and 500 milliseconds suggest the need for improvements, while longer response times indicate serious performance problems.
For visual stability, as measured by Cumulative Layout Shift (CLS), the best score should not exceed 0.1. Values up to 0.25 indicate room for improvement, while higher numbers indicate significant deficiencies in the site’s design.
These standards apply equally on all devices, whether we’re talking about smartphones or computers. The system uses actual traffic data from the past 28 days, analyzing each URL separately, allowing for an accurate assessment of the entire domain. Meeting the requirements of Core Web Vitals requires achieving good results in all three categories.
How to Improve Core Web Vitals Performance?
Key actions for improving Core Web Vitals include optimizing the server, effectively managing the site’s resources, and improving the JavaScript code. For more detailed tips, see below.
- optimize the server through fast hosting and efficient cache,
- deploy the CDN for a response time of less than 200ms,
- compress the CSS and JavaScript files,
- eliminate unnecessary code from the site,
- use lazy loading for images,
- use the WebP format for graphics,
- adjust the dimensions of images to actual needs.
When it comes to JavaScript code, it is important to limit external scripting to the minimum necessary. It is worth deferring the loading of elements that are not critical to the initial display of the page, as well as optimizing long tasks and limiting the number of libraries used.
Stability of the template will be achieved through thoughtful space planning for dynamic elements, including ads and images. Avoiding sudden content shifts and limiting pop-ups will definitely improve the user experience.
- prioritize the loading of key resources,
- use preload technology for the most important elements,
- enable progressive image loading,
- optimize the Critical Rendering Path.
Consistent application of these solutions leads to noticeable improvements in LCP, CLS and INP metrics.
How to Optimize Largest Contentful Paint?
Optimizing Largest Contentful Paint requires a comprehensive effort at the server, resource and rendering levels. Here are the key areas requiring optimization:
- server optimization: implementation of caching mechanisms, use of CDN, database configuration and application caching,
- resource reduction: removal of redundant CSS/JavaScript code, implementation of critical CSS, GZIP/Brotli compression,
- element prioritization: use of fetchpriority=”high”, preload and preconnect tags for key resources,
- graphics optimization: use of WebP/AVIF formats, auto-scaling, lazy loading of out-of-view elements,
- rendering enhancement: reduce blocking JavaScript, optimize rendering path, Server-Side Rendering implementation.
How to Reduce Cumulative Layout Shift?
To reduce Cumulative Layout Shift (CLS), prevent unwanted shifting of elements during page loading by properly managing component dimensions.
- correctly size graphics: give images a specific width and height, maintaining proportions in responsive versions,
- manage ads: define fixed dimensions for ad containers in advance and use caps during loading,
- font optimization: use font-display: optional or swap, preload the most important typefaces,
- dynamic content: avoid adding new elements over existing ones, use transforms,
- iframes: define specific dimensions and use temporary caps,
- banners and notifications: reserve space before loading, use skeleton screens,
- animations: use transform properties instead of left/top, use will-change for fluidity.
When managing dynamic content, try not to add new elements over existing ones. It is better to use transformations instead of modifying the position, and enrich any layout changes with smooth transitions.
Banners and notifications require special attention – reserve space for them before loading, use skeleton screens and avoid automatic page scrolling. Notifications are best displayed in fixed locations with fixed positioning.
How to Optimize Interaction to Next Paint?
The key to optimizing Interaction to Next Paint (INP) is to effectively manage JavaScript code through fragmentation and asynchronous loading.
- fragment and remove unused JavaScript code,
- implement event delegation instead of multiple individual listens,
- apply debouncing and throttling mechanisms for frequent interactions,
- transferring complex calculations to Web Workers,
- using requestAnimationFrame for smooth animations,
- reducing frequent DOM structure changes,
- using simple CSS selectors.
Special attention should be paid to the most important user interaction points. Streamlining the main interactions and speeding up the response time of the system will significantly affect the user experience of the application.
When it comes to background tasks, long operations can be divided into smaller parts, and less urgent ones can be postponed. The rendering process needs to be optimized by taking advantage of the capabilities of the virtual DOM and efficient CSS transformations.
Most important technical elements affecting Core Web Vitals
The foundation of Core Web Vitals is server performance and proper technical optimization of the site.
- optimized source code through CSS and JavaScript minification and GZIP compression, which reduces data volume by up to 90%,
- optimized graphics through compression and conversion to WebP format and lazy loading implementation,
- proper use of browser cache by properly setting cache-control headers,
- optimal resource loading order with the most important CSS styles in the head section,
- fast and reliable hosting with fast response time and low TTFB,
- use of CDNs for faster delivery of static content.
Optimized source code is crucial. It’s worth getting rid of unnecessary JavaScript, which will make the browser run more efficiently. Precisely defining the size of images eliminates unwanted content shifts during page loading.
JavaScript scripts are worth loading asynchronously or with the defer attribute, which allows for smoother page rendering. Using a CDN further speeds up the delivery of static content to users, regardless of their geographic location.
What impact does hosting and infrastructure have?
Hosting and infrastructure have a major impact on Core Web Vitals by ensuring fast and stable communication between the user and the website.
- Server responsiveness: should not exceed 200 ms (TTFB), which directly affects LCP,
- technical parameters: an efficient processor and adequate RAM ensure smooth handling of multiple sessions,
- CDN network: speeds up content delivery and reduces load on the main server,
- server configuration: includes file compression, cache settings and efficient HTTP protocols,
- reliable connectivity: eliminates downtime and impacts INP and CLS metrics.
The technical parameters of the hosting environment must meet high standards. An efficient processor handles incoming requests in no time, while an adequate supply of RAM allows smooth handling of multiple simultaneous sessions. Modern SSDs significantly speed up data reading and writing operations.
An invaluable role is played by the CDN, which not only speeds up the delivery of content to users, but also reduces the load on the main server by effectively caching static resources. Equally important is the proper configuration of the server itself – from compressing files using GZIP or Brotli methods, to proper cache settings, to using efficient HTTP/2 or HTTP/3 protocols.
An unreliable Internet connection has a major impact on INP and CLS metrics, eliminating downtime and ensuring harmonious loading of all site elements. That’s why careful choice of hosting provider and thoughtful technical optimization are the foundation of Core Web Vitals’ excellent performance.
How to optimize images and multimedia?
To effectively optimize images and multimedia for Core Web Vitals, use modern compression formats, implement lazy loading and distribute files via CDN.
- use WebP and AVIF formats instead of JPEG or PNG – they offer better compression while maintaining quality,
- limit the size of a single file to a maximum of 300 KB,
- use a CDN to automatically convert and distribute images,
- precisely specify image dimensions via width and height attributes,
- implement srcset tags for different screen sizes,
- prepare separate versions of graphics for mobile devices.
Implement lazy loading significantly speeds up site loading. Add the loading=”lazy” attribute to non-first-screen images, while key elements should have loading=”eager” set. Older browsers may require dedicated libraries for lazy loading.
For video media, MP4 format with H.264 codec is the best choice. Instead of loading full video right away, start with thumbnails. Hosting video content is best entrusted to CDN platforms.
- distribute images via CDN for faster delivery,
- configure proper caching in the browser,
- use preload for key image assets.
How to optimize JavaScript code?
Key techniques for optimizing JavaScript code include loading scripts intelligently, breaking applications into smaller parts, and moving demanding calculations to Web Workers.
- using async and defer attributes to control the order in which resources are loaded,
- using dynamic module imports for better performance,
- implementing lazy loading and loading components on demand,
- implementing tree shaking to eliminate unused code,
- compressing files using tools like Terser,
- transfer of demanding tasks to Web Workers,
- use of requestAnimationFrame for smooth animations,
- regular cleaning of inactive event listeners,
- proper management of component lifecycle,
- implementation of virtual DOM,
- application of throttling and debouncing techniques for user events,
- use of Service Workers and caching strategies.
Systematic monitoring of application performance using the Performance API and User Timing API allows you to keep track of the effects of the optimizations you implement. All these practices directly improve Core Web Vitals metrics, especially INP (Interaction to Next Paint) and LCP (Largest Contentful Paint).
Was the article helpful?
Rate our article, it means a lot to us!
Let's talk!
Hello! My name is Piotr Starzynski and it's a pleasure to meet you in the SEO industry. I have been officially working in SEO since 2006, while I have been working in analytics for several years. I have about 400 analytics implementations for client websites, hundreds of SEO projects and dozens of analytics projects for mobile applications. At Up&More, I am responsible for the Search Engine Optimization and Web Analytics team. If you feel like working with me, I invite you to contact me!