Core Web Vitals: The Complete Guide to Web Performance Optimization

Introduction: why web performance is a strategic challenge

In 2026, 53% of mobile visitors abandon a site that takes more than 3 seconds to load. Each additional second of loading reduces conversions by 7%, increases bounce rate by 11% and drops user satisfaction by 16%. Web performance is not a technical detail: it is a determining factor of your online revenue.

Google understood this and made Core Web Vitals an official ranking signal in 2021. In 2026, with the arrival of INP (Interaction to Next Paint) replacing FID, requirements have become even stricter. Sites that offer a fast and fluid experience are rewarded in search results, while slow sites are gradually relegated.

This complete technical guide, written by the web developers at Pirabel Labs, gives you every key needed to understand, measure and optimize your Core Web Vitals. From image optimization to CDN choice, from CSS minification to server cache, every technique is detailed with concrete actions you can implement immediately.

Web performance is the invisible foundation of user experience. A beautiful but slow site is a site that nobody will visit twice.

Core Web Vitals measure the three fundamental dimensions of user experience: loading, interactivity and visual stability.

Understanding the three Core Web Vitals

Core Web Vitals are a set of three metrics that measure the most critical aspects of user experience on a web page. Each metric evaluates a specific dimension of the interaction between user and page.

LCP (Largest Contentful Paint): perceived loading speed

LCP measures the time needed for the largest visible element of the page (a hero image, a main text block, a video) to be fully rendered on screen. It is the metric most directly tied to the user's perception of speed. The target is an LCP below 2.5 seconds. Beyond 4 seconds, Google considers the experience "poor".

The most frequent causes of poor LCP are unoptimized images (format, size, compression), web fonts that block rendering, voluminous CSS and JavaScript files that delay first paint, and excessive server response times (high TTFB).

INP (Interaction to Next Paint): responsiveness to interactions

INP replaced FID (First Input Delay) in March 2024 as the official interactivity metric. Unlike FID, which only measured the first interaction, INP evaluates page responsiveness across the entire visit. It measures the time between a user interaction (click, tap, key press) and the corresponding visual update on screen. The target is an INP below 200 milliseconds.

Poor INP is generally caused by JavaScript that blocks the browser's main thread. Third-party scripts (analytics, ads, social widgets), heavy event handlers and complex client-side calculations are the usual culprits. The challenge is ensuring the browser stays responsive at all times, even during script execution.

CLS (Cumulative Layout Shift): visual stability

CLS measures the amount of unexpected shifts of visible content during page loading. You know that frustration: you are about to click a link and suddenly an image loads above, all the content shifts and you click the wrong thing. That is exactly what CLS quantifies. The target is a CLS below 0.1.

The main causes of poor CLS are images and videos without explicit dimensions (width/height), ads and embeds that insert dynamically, web fonts that cause flash of invisible text (FOIT) or unstyled text (FOUT), and content injected dynamically above existing content.

Measure your Core Web Vitals

Before optimizing, you must measure. Google offers several tools to evaluate your Core Web Vitals, each with its specifics.

Essential measurement tools

• Google PageSpeed Insights: the reference tool. It combines lab data (Lighthouse) and field data (Chrome UX Report) to give a complete view of your performance. Test every key page of your site, not just the homepage.
• Google Search Console: the "Web Essentials" report shows the state of your Core Web Vitals across your site, based on real Chrome user data. It is the most reliable source because it reflects your visitors' actual experience.
• Lighthouse (Chrome DevTools): integrated in Chrome's developer tools, Lighthouse runs a complete performance audit in a controlled environment. Ideal for debugging and identifying specific problems.
• Web Vitals Extension: a Chrome extension that displays Core Web Vitals in real time during your browsing. Useful for quickly testing pages after a change.

Measurement tools let you precisely identify the performance bottlenecks of your site.

Optimize LCP: speed up visible loading

Optimizing LCP is often the most impactful work because it is the metric users perceive most directly. Here are the most effective techniques, ordered by impact.

Optimize images: lever number one

Images represent on average 50% of a web page's weight. Their optimization is the most powerful lever to improve LCP.

• Adopt modern formats: WebP offers 25 to 35% better compression than JPEG at equivalent visual quality. AVIF, the next-generation format, pushes compression even further with 40 to 50% gains. Use the <picture> tag with multiple sources to serve the optimal format depending on the browser.
• Size correctly: never serve a 3,000-pixel-wide image for an 800-pixel display area. Use the srcset attribute to provide images adapted to each screen size.
• Smart compression: 80% quality compression is visually indistinguishable from the original for the vast majority of images. Tools like Squoosh, TinyPNG or ImageOptim automate this compression with no visible loss.
• Preload the LCP image: add a <link rel="preload"> in the <head> for the main image of each page. This tells the browser to start downloading the image even before it has parsed the CSS and HTML.

Optimize server response time (TTFB)

Time to First Byte (TTFB) is the time between the browser's request and the receipt of the first byte of server response. A high TTFB delays the entire loading chain. The target is a TTFB below 800 ms.

• Use a CDN (Content Delivery Network): a CDN like Cloudflare, Fastly or AWS CloudFront distributes your content from servers located closest to your visitors. A user in Paris reaches a Paris server, not an American server.
• Enable server cache: server-side cache (Varnish, Redis, Memcached) avoids recomputing the same page on every request. For static or semi-static content sites, cache can reduce TTFB by 90%.
• Choose high-performance hosting: shared hosting at 3 euros per month will never deliver the performance of a VPS or dedicated server. Hosting is an investment, not an expense.

Eliminate render-blocking resources

CSS and JavaScript files in the <head> block page rendering until they are fully downloaded and parsed. Each blocking file adds hundreds of milliseconds to LCP.

• Inline critical CSS: identify the CSS needed to render content above the fold and integrate it directly in HTML with a <style> tag. The rest of the CSS can be loaded asynchronously.
• Defer non-critical JavaScript: add the defer or async attribute to all scripts that are not essential to first render. Defer is generally preferable because it guarantees execution order.
• Minify CSS and JavaScript: minification removes spaces, comments and unnecessary characters. It typically reduces file size by 20 to 40% with no functional change.

Optimize INP: make your site responsive

INP is the most technical metric to optimize because it requires a fine understanding of how the browser's main thread and JavaScript event loop work.

Break up long tasks

The browser uses a single main thread to execute JavaScript, calculate styles, lay out the page and paint pixels. When a JavaScript task takes more than 50 ms, it blocks the main thread and prevents the browser from responding to user interactions. This is the number-one cause of poor INP scores.

The solution is to split long tasks into shorter sub-tasks using techniques like requestAnimationFrame, setTimeout(fn, 0) or the scheduler.yield() API available in modern browsers. The idea is to return control to the browser between each sub-task so it can handle pending interactions.

Reduce the impact of third-party scripts

Third-party scripts (Google Analytics, ad pixels, chat widgets, social integrations) are often the biggest consumers of main-thread time. Every third-party script you add to your site has a performance cost.

• Audit your third-party scripts regularly: remove those no longer used or whose value doesn't justify the performance cost.
• Load third-party scripts deferred: no third-party script needs to be loaded immediately. Use defer, async or conditional loading (load the chat widget only when the user scrolls or clicks).
• Use facades: for heavy embeds like YouTube videos or Google Maps, display a static image and only load the real embed on click. This technique can save hundreds of kilobytes of JavaScript.

A responsive and high-performing site offers a user experience that retains visitors and boosts conversions.

Optimize CLS: stabilize the display

CLS is often the simplest metric to fix because the causes are well identified and the solutions are mostly HTML/CSS best practices.

Always define media dimensions

The number-one cause of CLS is images and videos without width and height attributes. When the browser encounters an image without dimensions, it allocates 0-pixel space and then resizes the layout when the image loads, causing visible shift. The solution is trivial: always add width and height attributes to your <img> and <video> tags. The browser will use the ratio of these dimensions to reserve the correct space before loading.

Reserve space for dynamic content

Ads, third-party embeds and dynamically loaded content are frequent sources of CLS. The solution is to reserve fixed space for these elements with CSS, even before they load. Use min-height, aspect-ratio or fixed-size containers to guarantee that content insertion doesn't shift the rest of the page.

Handle web fonts correctly

Web fonts can cause CLS if text changes size or spacing when the custom font replaces the system fallback font. The CSS property font-display: swap is recommended to immediately display text with a system font, then switch to the custom font once loaded. To minimize visual shift, choose system fallback fonts whose metrics are close to your custom font.

Lazy loading: load smartly

Lazy loading means only loading resources (images, videos, iframes) when they are about to enter the visible viewport. This technique drastically reduces initial load time and saves bandwidth for content the user may never see.

Native browser lazy loading

The loading="lazy" attribute is now supported by all modern browsers. Just add it to <img> and <iframe> tags to enable native lazy loading without additional JavaScript. This is the recommended method for its simplicity and performance.

Critical warning: never put loading="lazy" on images visible above the fold, and especially not on the LCP image. Lazy loading would delay their loading and degrade your LCP score. Reserve lazy loading for images located below the first visible screen.

Cache strategy: serve instantly

A well-configured cache lets you serve pages in a few milliseconds instead of hundreds of milliseconds. It is the optimization with the best effort/impact ratio for returning visitors.

Browser cache (HTTP headers)

Configure appropriate Cache-Control headers for each resource type. Static resources that never change (images, fonts, versioned CSS/JS) should have a one-year cache (max-age=31536000) with a hash in the file name for invalidation. HTML pages should have short cache (max-age=0, must-revalidate) to guarantee visitors always see up-to-date content.

CDN cache

The CDN adds an additional cache layer between your server and visitors. When a visitor in Lyon requests your page, the CDN serves it from its Lyon point of presence without ever contacting your origin server. Configure distinct CDN cache rules for static resources (long cache) and dynamic pages (short cache with automatic invalidation on updates).

Performance checklist: priority actions

Here is a synthetic optimization checklist to implement, ranked by impact and ease of implementation.

1. Compress and resize all images in WebP or AVIF with dimensions adapted to display containers.
2. Add width and height to all <img> and <video> tags to eliminate CLS.
3. Set up a CDN (Cloudflare offers a high-performance free plan) to reduce global TTFB.
4. Minify CSS and JavaScript files with tools like Terser, cssnano or esbuild.
5. Defer all non-critical scripts with the defer or async attribute.
6. Enable lazy loading on all images below the fold.
7. Preload the LCP image and critical web fonts.
8. Configure cache headers with appropriate durations for each resource type.
9. Audit and reduce third-party scripts by removing useless ones and deferring others.
10. Enable Gzip or Brotli compression server-side to reduce transfer size by 60 to 80%.

Conclusion: performance as culture, not as project

Core Web Vitals optimization is not a one-off project to check off a list. It is a culture of performance that must permeate every technical and editorial decision. Each new image added, each new script integrated, each new feature deployed impacts your site's performance. The challenge is to maintain a constant level of excellence over time.

The benefits of a high-performing site go far beyond SEO. A fast site improves conversion rate, reduces hosting costs (less bandwidth consumed), improves accessibility for users on slow connections and reinforces the perception of professionalism of your brand. Every millisecond gained translates into a better experience for your visitors and a better return on investment for your business.

The Pirabel Labs technical team carries out complete performance audits and supports businesses in optimizing their Core Web Vitals. Contact us for a free performance audit and discover how an ultra-fast site can transform your online results.