Core Web Vitals: Complete Definition and Guide

What are Core Web Vitals?

Core Web Vitals (CWV) are a set of web performance metrics defined by Google in 2020 to measure the quality of real user experience on a website. Unlike traditional technical metrics (server response time, DOM size), Core Web Vitals measure the experience as perceived by the user: how quickly the main content appears, how responsive the page is to interactions and how visually stable the layout is.

In June 2021, Google officially made Core Web Vitals a ranking factor in its search algorithm. This means that two pages with equivalent content will be differentiated by the quality of their user experience as measured by these metrics. Core Web Vitals have thus become a concrete, measurable SEO concern.

At Kern-IT, the KERNWEB division pays close attention to Core Web Vitals in every web project. The chosen technical architecture (Django/Wagtail for the back-end, Tailwind CSS for the front-end, Nginx/Gunicorn for the server) is optimised to achieve excellent scores on these metrics, directly contributing to the SEO performance of delivered sites.

Why Core Web Vitals matter

Core Web Vitals have transformed web performance from a purely technical topic into a measurable strategic issue with a direct impact on SEO ranking and conversion rates.

• Google ranking factor: Core Web Vitals are part of Google's "Page Experience" signals. Sites with good scores benefit from a ranking advantage, particularly on mobile where competition is fierce.
• Impact on conversions: according to Google's studies, a 0.1-second improvement in LCP can increase conversion rates by 8 %. Conversely, a high CLS (page that "jumps") causes frustration and accidental clicks.
• Measurable user experience: CWV provide objective metrics for evaluating and comparing user experience, eliminating subjective debates about performance.
• Real-world field data: Core Web Vitals are measured from real user data (via the Chrome User Experience Report), not just in the lab. This reflects actual experience across different devices and connections.
• Competitive advantage: according to Google data, only around 40 % of websites achieve the "good" threshold on all three metrics. Reaching this target therefore provides a measurable advantage over competitors.

How it works

Core Web Vitals comprise three main metrics, each measuring a specific aspect of user experience.

Largest Contentful Paint (LCP) measures the time required to render the largest visible element in the viewport (typically a hero image or main text block). It is the indicator of perceived loading speed. A good LCP is under 2.5 seconds. Optimising LCP requires addressing server response time (optimised Nginx/Gunicorn), resource size (WebP-compressed images, minified CSS/JS) and loading priority (preloading critical resources).

Interaction to Next Paint (INP) replaced First Input Delay (FID) in March 2024. It measures overall page responsiveness by evaluating the latency of all user interactions (clicks, taps, keyboard input) throughout the entire visit. A good INP is under 200 milliseconds. Optimisation involves reducing blocking JavaScript, using code-splitting, debouncing event handlers and optimising DOM re-renders.

Cumulative Layout Shift (CLS) measures visual stability by quantifying unexpected layout shifts during loading. We have all started reading a paragraph that suddenly "jumps" downward because an image or advertisement loaded late. A good CLS is under 0.1. Optimising it requires specifying image and iframe dimensions, reserving space for dynamically loaded content and avoiding inserting content above existing content.

Concrete example

The KERNWEB team at Kern-IT takes on the Core Web Vitals optimisation of a Belgian e-commerce site built on Wagtail CMS. Initial scores are alarming: LCP of 5.2 seconds, INP of 380 milliseconds and CLS of 0.35. The site fails on all three metrics.

For LCP, the team optimises hero images by converting them to WebP format using Wagtail's rendition system, adds preload for the critical LCP image, enables Gzip/Brotli compression on Nginx and sets up server caching for the most visited pages. LCP drops to 1.8 seconds.

For INP, the team identifies a product carousel with a heavy JavaScript handler. The code is refactored with debouncing, non-critical JavaScript is loaded with defer, and CSS animations are preferred over JavaScript animations. INP drops to 150 milliseconds.

For CLS, the team adds width and height attributes to all images, reserves space for advertising blocks with fixed-dimension containers and uses the CSS aspect-ratio property for embedded media. CLS drops to 0.05.

Result: the site achieves "good" status on all three Core Web Vitals, gains an average of 12 positions on main keywords and sees its conversion rate increase by 15 % within two months.

Implementation steps

1. Measure the current state: use Google Search Console (Core Web Vitals report), PageSpeed Insights and Lighthouse to establish a precise diagnosis of all three metrics on both desktop and mobile.
2. Optimise LCP: compress images (WebP/AVIF), configure native lazy loading, preload critical resources, optimise server response time and enable Brotli/Gzip compression.
3. Optimise INP: reduce blocking JavaScript, implement code-splitting, use requestAnimationFrame for animations, apply debouncing to event handlers and minimise DOM re-renders.
4. Optimise CLS: specify dimensions for all images and iframes, reserve space for dynamic content, avoid inserting content above the fold and use the CSS contain property.
5. Test under real conditions: Lighthouse tests are useful but do not replace field data. Monitor real Core Web Vitals via Google Search Console and Chrome User Experience Report.
6. Automate checks: integrate performance tests into the CI/CD pipeline to catch regressions before production deployment.

Related technologies and tools

• Lighthouse: a Google tool built into Chrome for measuring Core Web Vitals in the lab and identifying possible optimisations.
• PageSpeed Insights: a Google tool combining field data (CrUX) and lab data (Lighthouse) for a comprehensive diagnosis.
• Wagtail CMS: the Django CMS used by Kern-IT, whose image rendition system automatically generates optimised versions (size, format) for each display context.
• Tailwind CSS: a utility-first CSS framework that produces minimal, optimised CSS with automatic purging of unused classes to reduce CSS file size.
• Nginx + Gunicorn: the server stack used by Kern-IT, configured for Brotli compression, HTTP caching and optimal response times.

Conclusion

Core Web Vitals have made web performance measurable, comparable and directly linked to SEO ranking. Achieving good scores on all three metrics (LCP, INP, CLS) is not merely a technical exercise: it is an investment that translates into better ranking, higher conversion rates and a superior user experience. At Kern-IT, the KERNWEB division optimises Core Web Vitals for every site from the architectural design stage, leveraging a proven technical stack (Wagtail, Tailwind CSS, Nginx/Gunicorn) to guarantee exemplary performance.