Core Web Vitals 2024: The Key Metrics for Web Performance

The Core Web Vitals report switched to the new INP measure from FID in March 2024. INP is included in the Core Web Vitals report by the Search Console team to help site owners and developers with the transition. With the replacement of FID by INP, Search Console reports will no longer feature FID metrics and will now rely on INP to evaluate responsiveness.

What differences will site owners experience?

It is highly advised that website owners monitor their Core Web Vitals ratings frequently. This not only improves your search rankings but also affects the usability of your pages. Nonetheless, it is vital to recognize that Core Web Vitals are only one aspect of page usability. Getting high scores in Core Web Vitals reports from platforms like Search Console is important, but it doesn’t guarantee top search positions.

At SmartApp, our goal is to help you improve your website for the new INP metric. Our skills guarantee that your website stays quick and easy to use, allowing you to maintain your edge in the competitive online world. Read more in the article and get in touch today to discover how we can assist with your efforts to optimize your website.

The Main Core Web Vitals

The Largest Contentful Paint (LCP) metric tracks how long it takes for the largest content piece on a webpage to become visible to viewers. This element is an image, video, or block-level text element. LCP is important since it influences a user’s perception of how soon a page loads and becomes useful. A fast largest contentful paint (LCP) ensures that users can start interacting with the main information on the page immediately, leading to a positive user experience.

To ensure users have a positive experience, the website should load within 2.5 seconds, specifically the LCP (Largest Contentful Paint) component. Pages that meet these requirements are considered to provide a fast and efficient user experience. Google’s classification of LCP is as follows:

• Good: <= 2.5 seconds
• Needs Improvement: 2.5 to 4.0 seconds
• Poor: > 4.0 seconds

Several factors can affect LCP, including server response times, render-blocking JavaScript and CSS, resource load times, and client-side rendering delays. A slower LCP can result from large image and video files that need to be optimized, poor server responses, and intensive JavaScript execution. Optimizing server performance, compressing pictures, and reducing JavaScript can all help improve LCP.

Interaction to Next Paint (INP) is a new statistic for measuring a webpage’s overall responsiveness. It measures the delay between user activities (such as clicks, taps, or key presses) and the next paint of the screen. INP offers a more comprehensive perspective of a page’s interactivity than First Input Delay (FID), which simply counts the time before the first user contact. INP is significant because it reflects the ongoing user experience more accurately, ensuring seamless and responsive interactions throughout the page’s lifecycle.

To offer a good user experience, pages should strive for an INP of less than 100 milliseconds. This ensures that interactions feel immediate and natural. Google’s classification for INP is:

• Good: <= 200 milliseconds
• Needs Improvement: 100 to 500 milliseconds
• Poor: > 500 milliseconds

INP is impacted by several factors, including excessive JavaScript execution, long tasks that block the main thread, and inefficient event handling. Minimizing JavaScript, splitting up large activities, and minimizing event listeners can all help improve INP. Гsing modern web technologies and techniques such as asynchronous loading and code splitting might aid in maintaining fluid interactivity.

Cumulative Layout Shift (CLS) analyzes a webpage’s visual stability by calculating the number of unexpected layout adjustments that occur during its lifespan. A layout shift happens each time a visible element moves from one frame to the next. CLS is important because sudden shifts can create a terrible user experience by causing users to forget their place on the page or click on the wrong element.

To provide a good user experience, a page should maintain a CLS score of less than 0.1. Google categorizes CLS:

• Good: <= 0.1
• Needs Improvement: 0.1 to 0.25
• Poor: > 0.25

CLS can be impacted by injected material, graphics, and advertising without dimensions, online fonts that cause FOIT/FOUT (Flash of Invisible/Unstyled Text), and actions that wait for a network response before updating DOM components. Ensuring that pictures and advertising have size properties, preloading important fonts, and avoiding rapid content changes can all help preserve visual stability. CSS can also be used for a lot of space for components that will load later, which can help to minimize unexpected layout adjustments. 

Why Core Web Vitals Matter in 2024

Google’s search algorithm prioritizes Core Web Vitals, giving them important ranking signals. Websites with poor performance metrics may experience a drop in rankings, reducing visibility and visitors. By integrating these upgraded metrics, search engines hope to promote websites that provide excellent user experiences. This shift motivates developers to focus on user-centric design and performance optimization.

Google Webmaster Trends Analyst John Mueller emphasizes the importance of Core Web Vitals, highlighting their role not only in search engine rankings but also in enhancing user experience once visitors are on the site:

“It is a ranking factor, and it’s more than a tie-breaker, but it also doesn’t replace relevance. Depending on the sites you work on, you might notice it more, or you might notice it less…

The other thing to keep in mind with core web vitals is that it’s more than a random ranking factor, it’s also something that affects your site’s usability after it ranks (when people actually visit).”

John Mueller

Calculating Core Web Vital metrics has changed in 2024. For LCP, the new measurement now considers the loading time of the largest visible content element within the viewport, including loaded components after the first page load. This modification requires developers to ensure that content loads and optimize the loading method for loaded elements to increase LCP scores.

INP, a key development in online performance measurement, provides a more comprehensive assessment of a page’s responsiveness by monitoring the time between when a user first interacts with a page and when the following frame is rendered. The calculation now considers the entire user interaction lifetime, including long tasks and event handlers that may cause rendering delays. As a result, websites must prioritize maintaining seamless and responsive interactions throughout the page’s lifecycle, which causes JavaScript execution optimizations, reducing long activities, and implementing effective event handlers.

The new CLS now takes into consideration layout shifts that occur throughout the session, rather than during the initial load. This includes changes induced by advertisements, pictures without dimensions, and injected information. Developers must maintain layout stability by establishing size attributes for every media, avoiding placing content over existing content, and controlling ads to avoid unexpected layout shifts.

How important are Google’s Core Web Vitals for SEO?

Google promotes sites that provide a seamless, fast, and stable experience since these criteria increase user engagement and happiness.  

Improved search rankings and organic traffic

A site with good search rankings and a positive user experience is more likely to rank higher. For example, if your website has a fast LCP, users will access your primary content more quickly, decreasing annoyance and bounce rates. This interaction shows Google that your website is user-friendly and valuable, which improves its ranking in search results.

Impact on user behavior

Sites that succeed in Core Web Vitals have higher user retention rates. Users are more likely to stay, explore, and engage with the material on a site that loads (high LCP), responds to interactions (excellent INP), and maintains visual stability (good CLS). This greater stay time and lower bounce rate send significant positive signals to Google, showing that your site serves the needs of its users.

Mobile optimization

Our team prioritizes mobile optimization because a significant percentage of visitors access websites through mobile devices. Mobile optimization affects your site’s search engine rankings. With Google’s mobile-first indexing, the mobile version of your website is the primary basis for ranking. This means that if your mobile site is slow or unstable, your overall rankings will suffer, regardless of how well your desktop site performs. Core Web Vitals are integral to this mobile performance.

Tips on How to Measure Core Web Vitals

At SmartApp, we understand how important Core Web Vitals (CWV) are for your website’s performance and SEO. Our experts are committed to ensuring that your site not only meets but passes these parameters to create a user experience and achieve top search rankings.

Our process begins by determining the most important pages on your website. This includes your homepage, landing pages, and visited content pages. Using Google Analytics, our professionals determine which pages generate the most traffic and conversions. Pages with high bounce rates receive special attention because they suggest underlying performance concerns that must be addressed.

To measure Core Web Vitals, our team uses several types of specialized techniques. Each tool offers benefits that help us ensure your site meets and exceeds the highest standards for Core Web Vitals.

In PageSpeed Insights, we focus on the Opportunities section, which offers suggestions such as optimizing images and reducing JavaScript, and the Diagnostics section, which indicates issues such as extended task durations and the influence of third-party scripts.

With Google Search Console we review the Core Web Vitals report to evaluate page performance. Pages marked “Needs Improvement” or “Poor” are our top priority. The Enhancements section provides useful insights into mobile usability and AMP concerns, while the Coverage report assists us in identifying and resolving indexing issues that may impact your site’s performance metrics.

We customize our optimization methods based on a thorough analysis of your website. Before we make any modifications, we do a thorough review to understand your site’s unique issues and performance difficulties. This enables us to select the most effective solutions that will improve your site’s performance. We depend on PageSpeed reports, but our recommendations are always tailored to your website’s individual requirements and conditions.If you want to check Core Web Vitals on your site and get expert advice on optimization, contact us at SmartApp. Our team  will help you enhance your site’s performance, ensuring it meets Google’s standards and provides an exceptional user experience.

How to Optimize Core Web Vitals

Optimizing Largest Contentful Paint 

Slow server response times

To address slow server response times, using a Content Delivery Network (CDN) is essential. A CDN stores copies of your site’s static assets across multiple locations worldwide. When a user visits your site, the CDN contains the nearest server, reducing latency. For example, implementing a CDN like Cloudflare can reduce load times, especially for users far from your primary server.

Steps:

• Sign up for a CDN service like Cloudflare or Amazon CloudFront.
• Configure the CDN to cache your static assets, such as images, CSS, and JavaScript files.
• Test the CDN integration to ensure content is delivered from the nearest edge server.

Unoptimized images

Large, uncompressed images can drastically slow down the loading of your main content. Compress images using tools like ImageOptim or TinyPNG to reduce file size without compromising quality. Converting images to next-gen formats like WebP, which offer superior compression, can also help. For instance, using a tool like Squoosh to convert a 500KB JPEG image to a 250KB WebP file can significantly reduce load times. Implementing responsive images by using the srcset attribute in HTML ensures that images are appropriately sized for different devices, reducing unnecessary data load.

Example of HTML responsive image:

<img src="image-small.jpg" 

     srcset="image-large.jpg 1024w, image-medium.jpg 640w, image-small.jpg 320w" 

     sizes="(max-width: 1024px) 100vw, 1024px" 

     alt="Example Image">

JavaScript execution delays

Heavy JavaScript execution can delay interactivity and content rendering. Minimizing and deferring non-essential JavaScript can help. Identifying scripts that are not critical to initial content rendering and loading them asynchronously or after the main content ensures faster load times. Tools like Webpack can help optimize and bundle JavaScript files efficiently. Breaking up long JavaScript tasks into smaller, asynchronous tasks keeps the main thread responsive and improves the Interaction to Next Paint (INP) metric.

Visual stability and layout shifts

Unexpected shifts in page layout can degrade user experience. Ensuring dimensions are specified for all media elements can prevent this. For example, always include width and height attributes for images and video elements to reserve space in the layout. This prevents layout shifts when these elements load. Avoid inserting new content above existing content, which can push down visible content and cause a layout shift. Managing dynamic content carefully, such as pre-loading content or using CSS to create space for it, helps maintain visual stability.

Reducing Interaction to Next Paint 

Heavy JavaScript execution

JavaScript can significantly delay page interactivity, especially when large scripts block the main thread. To minimize JavaScript execution time, identify non-essential scripts and defer their loading, ensuring they do not block the rendering of critical content.

Loading non-essential JavaScript asynchronously or deferring its execution can prevent it from blocking the main thread during the initial load.
Example: 

• Use the requestIdleCallback function to schedule non-urgent work during idle periods.
• Breaking long JavaScript tasks into smaller, asynchronous tasks helps keep the main thread responsive. 

Unoptimized third-party scripts

Third-party scripts, such as ads, analytics, and social media widgets, can significantly delay page interactivity. Evaluate the necessity of these scripts and optimize their loading to minimize their impact.
Examples:

• Load third-party scripts asynchronously to prevent them from blocking the main thread.
• Delay the loading of third-party content, such as ads, until after the main content has loaded.

Preventing Cumulative Layout Shift 

Missing dimensions for images and media

When images and media elements do not have specified dimensions, they can cause layout shifts as they load. This is a common cause of CLS. Always include width and height attributes for images and videos to reserve space in the layout, preventing shifts when these elements load.

Dynamic content insertion

Inserting content dynamically, such as ads or new elements, above existing content can cause significant layout shifts.

•  Add new elements below the viewport or notify users before inserting content that might shift existing elements. If you need to insert an ad or notification, do so in a reserved space or at the bottom of the page where it will not disrupt the user’s reading experience.

Use CSS to Reserve Space for Dynamic Content:

• Allocate space in the layout for dynamic content to prevent unexpected shifts.

.ad-space {

  width: 300px;

  height: 250px;
}

<div class="ad-space">

  <img src="ad.jpg" width="300" height="250" alt="Ad">

</div>

Web fonts causing FOUT/FOIT

Web fonts can cause Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT), which leads to layout shifts as fonts load.

Animations and transitions

Poorly implemented animations and transitions can cause layout shifts if they change the size or position of elements.

• Animations that only affect transform and opacity properties do not trigger layout recalculations, thus preventing shifts.
•  Minimize animations that change the dimensions or positions of elements, which can cause reflows and layout shifts.

Addressing common issues related to Core Web Vitals is essential for enhancing user experience and optimizing your website’s performance. By focusing on improving server response times, optimizing images and videos, and minimizing render-blocking resources, you can significantly enhance LCP. Reducing JavaScript execution time, breaking up long tasks, and optimizing third-party scripts are key to improving INP. Preventing CLS involves setting size attributes for media, reserving space for ads and embeds, and avoiding content insertion above existing elements. At SmartApp, we specialize in implementing these optimizations to ensure your website meets the highest performance standards. 

Pass your Core Web Vitals. Contact SmartApp today to get started!