How to Improve Your Core Web Vitals Score

What are Core Web Vitals

Core Web Vitals are a set of metrics Google uses to measure user experience on web pages. Since 2021, these metrics are a ranking factor in Google search, meaning a site with better Core Web Vitals has an advantage in search results over a site with poorer scores. Google has made it clear with this move that user experience isn't just a design matter but a measurable technical parameter affecting search visibility.

The three main metrics are Largest Contentful Paint measuring loading speed, Interaction to Next Paint measuring responsiveness to user actions, and Cumulative Layout Shift measuring page visual stability. Each metric has defined thresholds for good, needs improvement, and poor scores. The goal is for 75 percent of page visits to have good scores for all three metrics. Understanding each metric and techniques for optimization is the key to achieving high scores.

Largest Contentful Paint (LCP)

What LCP measures

LCP measures the time required for the largest visible element on the page to load in the viewport. This element is typically a hero image, large headline, or video poster. A good score is LCP under 2.5 seconds, between 2.5 and 4 seconds requires improvement, and above 4 seconds is a poor score. LCP is the most important metric for speed perception because users consider a page loaded when they see the main content regardless of whether all elements have finished loading.

Image optimization

Images are the most common cause of poor LCP because they're usually the largest element on the page. Use modern formats like WebP or AVIF, which provide the same image quality with 25 to 50 percent smaller file size compared to JPEG. Set image dimensions to the exact size being displayed instead of sending a 4000-pixel image for display at 800 pixels. Responsive images with the srcset attribute enable the browser to choose the optimal size for each device.

Preload hint for the LCP image tells the browser to start downloading the image as soon as possible without waiting for the parser to reach the img tag. Add link rel preload as image href path-to-image in the head section of the page. For above-the-fold hero images, use the fetchpriority high attribute giving priority to download over other resources. Avoid lazy loading for the LCP image because it delays its loading.

Server response time

Time to First Byte directly affects LCP because content can't start loading until the server responds. TTFB under 200 milliseconds is the goal for optimal performance. Use a CDN to distribute content from a server geographically closest to the visitor. Server-side caching with Redis or Memcached eliminates the need for regenerating the page for each request. At BeoHosting, our servers with SSD drives and optimized configuration provide low TTFB throughout Serbia.

Interaction to Next Paint (INP)

What INP measures

INP replaced First Input Delay in March 2024 as the responsiveness metric. While FID measured only the first click delay, INP measures responsiveness of all interactions during the entire page visit and considers the worst interaction. A good score is INP under 200 milliseconds. INP measures time from user action like click, tap, or key press to next visual screen update, which includes event handler processing, layout calculation, and rendering.

JavaScript optimization

Long JavaScript tasks block the main thread and prevent the browser from responding to user interactions. Split long tasks into smaller parts using techniques like yielding with scheduler.yield or setTimeout. Code splitting with dynamic import loads only the JavaScript needed for the current page instead of the entire bundle. Tree shaking eliminates unused code from the final bundle, reducing size and parsing time.

Third-party scripts like analytics, chat widgets, and advertising code are a common cause of poor INP because they execute on the main thread and block user interactions. Load them asynchronously with async or defer attributes and delay their initialization until the user interacts with the page. Web Workers enable executing computationally intensive operations off the main thread, freeing it for user interactions.

Debouncing and throttling

Event handlers that execute on every key press, mouse movement, or scroll event can significantly degrade INP. Debouncing delays function execution until the user stops the action, for example 300 milliseconds after the last character in a search field. Throttling limits execution frequency, for example once every 100 milliseconds for a scroll handler. Both techniques reduce the number of event handler executions and free the main thread for processing user interactions.

Cumulative Layout Shift (CLS)

What CLS measures

CLS measures page visual stability by quantifying how much elements unexpectedly shift during loading. A good score is CLS under 0.1. Layout shift happens when a visible element changes its position from one rendered frame to another without user action. Typical causes are images without defined dimensions, fonts loading late, dynamically inserted content above visible area, and ads loading with delay.

Dimensions for images and video

Always define width and height attributes on img and video elements. This enables the browser to reserve space before the resource loads, preventing content shift below. The CSS aspect-ratio property is a modern alternative that automatically calculates dimensions based on the defined ratio. For responsive images, use CSS max-width 100 percent and height auto along with defined HTML attributes for width and height that ensure exact aspect ratio.

Font loading strategy

Web fonts that load late can cause FOIT or FOUT effects that shift content. Font-display swap displays fallback font immediately and replaces it with the web font when loaded, but this replacement can cause layout shift if fonts differ significantly in dimensions. Preload hint for critical fonts speeds up their loading. The size-adjust descriptor in the font-face declaration aligns fallback font dimensions with the web font, minimizing shift on replacement.

Dynamic content

Ads, cookie banners, notifications, and dynamically inserted content are common causes of CLS because they take up space that shifts the rest of the page. Reserve space for ads with the min-height CSS property even before the ad code loads. Place the cookie banner at the top or bottom of the screen with fixed position so it doesn't shift content below. For asynchronously loaded content like sliders or infinite scroll, use skeleton placeholders that take up the same space as the final content.

Measurement tools

Lab data

Google Lighthouse in Chrome DevTools provides lab measurement of Core Web Vitals on your computer. PageSpeed Insights combines lab and field data and gives concrete optimization recommendations. WebPageTest provides deeper insight with waterfall diagrams, filmstrip loading display, and ability to test from different locations and devices. Lighthouse CI enables automatic performance measurement at every deploy as part of the CI/CD pipeline.

Field data

Chrome User Experience Report provides real data on Core Web Vitals from actual Chrome browser users. Google Search Console displays a Core Web Vitals report for your site with identification of URLs needing improvement. Web Vitals JavaScript library from Google enables collecting metrics from your visitors and sending them to an analytics system. Field data is more important than lab data because it reflects real user experience on different devices and networks.

Hosting impact on Core Web Vitals

Server performance

Hosting quality directly affects TTFB and consequently LCP. Shared hosting with overloaded servers can result in TTFB over a second, which practically makes achieving good LCP impossible. SSD drives, sufficient RAM, and optimized server configuration are the minimum for good performance. PHP version 8.2 or newer with OPcache significantly speeds up PHP code execution compared to older versions.

At BeoHosting, our optimized hosting packages are tuned for Core Web Vitals with NVMe SSD drives, HTTP/2 and HTTP/3 support, Brotli compression, and server-level caching. LiteSpeed web server we use provides superior performance compared to Apache especially for WordPress sites with the LiteSpeed Cache plugin. Our infrastructure in Serbia ensures low latency for local visitors, directly improving TTFB and LCP metrics.

Conclusion

Core Web Vitals optimization requires a systematic approach with focus on images and server for LCP, JavaScript optimization for INP, and visual stability for CLS. Use measurement tools to identify problematic pages and track progress after each optimization. The combination of quality hosting, optimized code, and properly configured caching can significantly improve all three metrics and ensure better positions in Google search.