10+ New Optimizations For Your 2024 Core Web Vitals Strategy

Core Web Vitals were released four years ago. Yeah, we were also stunned by this revelation.

Time travel shock aside, the truth about Core Web Vitals, like any other Google initiative, is that it evolves.

What do all the modifications, improvements, and updates mean to you?

New ways for optimizing Core Web Vitals.

In the following lines, we gathered a list of the more recent and lesser-known optimization strategies that will allow you to break into the 47% of origins that pass their CWV assessment. 

But before that, let’s walk you through the latest improvements in Google’s page experience metrics.
 

The Evolution of Core Web Vitals

When Google first introduced the Web Vitals initiative in 2020, they underlined the fact that they will regularly update the three metrics:

Fast-forward four years, and Google has introduced 50+ bug fixes, new features, metric definition improvements, and other optimizations. 

They even replaced the original responsiveness metric First Input Delay (FID) with a better, more comprehensive one – Interaction to Next Paint (INP). 

It’s safe to say that Core Web Vitals are constantly evolving. As a matter of fact, here are some of the most recent and notable improvements that were introduced to the three metrics:
 

Largest Contentful Paint (LCP)

Image loading prioritizations
When there is a choice between an image load task and a rendering task, Chrome will prioritize the image load task, improving the Largest Contentful Paint (LCP) by skipping the rendering of the incomplete intermediate frame.

Changes to how LCP handles videos and animated images
Previously, videos were ignored for LCP unless they had a poster image. With this update, video elements can now be LCP candidates, similar to images. The timestamp for the LCP is the moment the first video frame is displayed.

Furthermore, animated images (GIFs and PNGs) were not considered for LCP until fully loaded, which could be significantly delayed for large files. The change now considers the time the first frame of the animation is shown if the image becomes an LCP candidate.

Optimizing image load scheduling
With the release of Chrome 116, Google decided to run an experiment, increasing the priority of the first five images larger than 10,000px². The experiment aims to improve LCP by rendering the image element sooner.

Largest Contentful Paint ignores low-entropy images
LCP ignores images with very low content relative to their display size. Previously, LCP ignored full-screen background images and simple gradient backgrounds implemented through CSS. This heuristic now extends to other low-content images, defined as those with less than 0.05 bits of image data per displayed pixel. This change primarily affects large, simple backgrounds and placeholders.

• Potential LCP Increase: If low-content backgrounds or placeholders were painted early, ignoring them may increase LCP times.
• Potential LCP Improvement: If low-content backgrounds or overlays were added after other content, LCP may improve as more contentful images or text will be prioritized.

 

Cumulative Layout Shift (CLS)

Image loading prioritizations
When there is a choice between an image load task and a rendering task, the image load task is prioritized to prevent layout shifts from occurring due to an intermediate frame without the image.

Ignore layout shift while dragging or resizing elements with a mouse
For mouse drag and resize actions, the layout shift for Mousemove events after a mousedown event is buffered. When the Mouseup event is received, hadRecentInput is set to true, triggering an exclusion window that ignores the layout shift score during these actions. As a result, desktop sites utilizing mouse drag and resize actions now benefit from an input exclusion on these interactions, leading to lower CLS scores.
 

Interaction to Next Paint (INP)

Becoming an official Core Web Vitals metric
As of March 12, 2024, INP has officially replaced FID as the new responsiveness metric in the Core Web Vitals assessment. 

This swap was necessary because of the scope of FID's measurement and effectiveness. While FID gauges the responsiveness of the first interaction, INP assesses all interactions throughout the user's entire session, making it a much more comprehensive metric.

Enable EventTimingKeypressAndCompositionInteractionId by default
Keypress entries are assigned an interactionID in event timing. During composition (using IME or virtual keyboard), interactionID is also exposed to keydown and keyup events, rather than only to input events as before. Keydown events are no longer buffered and delayed until their corresponding keyup events; instead, interactionIDs for keydown events are generated upfront. This experiment was first introduced in Chrome 123.

While this change does not significantly affect the user experience of keyboard interactions, it may cause a measurement shift because INP now also measures keypresses. However, the overall site's INP is typically not impacted since INP focuses on the slower, high-percentile interaction durations, and keyboard interactions are generally fast.

Event Timing flush pointerdown & keydown on contextmenu
When a right click or keyboard menu key brings up a context menu, the pointerdown or keydown entry was initially not reported by performance event timing. This occurred because these entries were saved in a buffer and deferred until pointercancel, pointerup, or keyup events. 

However, in cases where pointerdown is followed only by a contextmenu without subsequent events, the entries got stuck in the buffer. This issue was resolved by adding a timer to flush all pointerdown, pointerup, and keydown entries upon contextmenu activation and treating it as an interaction. The timer ensures that pointerdown and pointerup with the same interactionId are matched if they follow each other within one second.

While INP duration values remain unchanged, the total measured interactions will slightly increase due to the inclusion of contextmenu interactions. This will have minimal impact on the site's INP as contextmenu interactions are typically fast and do not affect high percentile INP scores.

14 Optimizations to Add to Your Core Web Vitals Strategy

How to Improve Largest Contentful Paint

LCP is notoriously difficult to optimize, as there are many moving parts that need to be considered. That’s why only 62.1% of origins passed it as of May 2024.

However, difficult doesn’t mean impossible. 

Apart from implementing all well-known LCP optimization techniques, you should also consider implementing some, if not all, of the following strategies:

1. Use fetchpriority

When a browser parses a web page and begins to discover and download resources such as images, scripts, or CSS, it assigns them a priority so it can download them in an optimal order.

Through the Fetch Priority API and fetchpriority HTML attribute, you can hint at a resource's relative priority—high, medium, or low. 

That being said, boosting the priority of the LCP image by applying “fetchpriority=high” can cause the LCP element to load sooner. 

An example of fetchpriority:

Before implementing it, there are some caveats you need to know:

Firstly, for this strategy to be effective, the LCP img element must be included directly in the HTML source of each page. This means that the LCP element cannot be dynamically inserted via JavaScript. Additionally, techniques like setting the image URL using the data-src attribute instead of the standard src attribute are not permissible. 

Another important consideration is that this technique is most effective for sites where the LCP element (or at least the selector used to identify it) remains consistent for different visitors. If the LCP element varies significantly between users, fetchpriority would cause each visitor to overwrite the LCP data from the previous visitor, making it unlikely for the correct LCP element to be consistently identified.
 

2. Shorten request chains

A request chain refers to the sequence of network requests the browser makes to load a webpage. When a page is loaded, the browser requests various resources like HTML, CSS, JavaScript, images, and fonts. 

Each of these resources may, in turn, request additional resources, forming a chain of dependencies. Chaining occurs when one resource depends on another to be fully loaded before it can start loading itself. 

For instance, an HTML file may reference a CSS file, and the CSS file may then reference an image. This dependency creates a chain where the image load depends on the CSS file, and the CSS file load depends on the HTML file.

If the critical resources needed for rendering the LCP element are deep within a request chain, it can significantly delay the LCP. Each step in the chain adds latency, as the browser must wait for the preceding resource to load before it can fetch the next one.

To shorten the request chain and avoid chaining critical requests altogether:

1. Inline Critical CSS: Inline the critical CSS directly within the HTML to eliminate the need for an additional request.
2. Preload Important Resources: Use link rel=preload to tell the browser to fetch critical resources like fonts or images as soon as possible.
3. Minimize Dependencies: Reduce the number of dependencies by combining files or removing unnecessary ones. For example, minimize the number of CSS and JavaScript files.
4. Optimize Third-Party Scripts: Third-party scripts often add to the request chain. Ensure they are loaded asynchronously or deferred if they are not critical to the page's initial rendering.
5. Efficient Resource Prioritization: Use resource hints like fetchpriority to ensure that critical resources are prioritized over less important ones.

3. Avoid redundant server connections

If you load the document from example.com and the LCP image from image-cdn.com, the browser will need to establish a server connection to the other server before starting the image download. 

While it seems like a harmless decision, in reality, it’s a heavy three-step process:

1. DNS lookup is the first step, where the browser resolves the domain name to an IP address. 
2. This is followed by a TCP handshake, which involves a three-way exchange of packets to establish the connection. 
3. If the connection is secure (HTTPS), an SSL/TLS handshake is also required to negotiate encryption parameters. 

Each of these steps adds latency, delaying the start of the image download.

Reusing an existing server connection avoids this overhead. Once a connection is established, it can be kept open and reused for multiple requests, allowing the browser to immediately download resources without additional handshakes or lookups. This can significantly reduce load times, especially for critical resources like the LCP element.

To optimize for this, ensure that:

• Critical resources are served from the same domain
• Make use of HTTP/2, which allows multiple requests to be sent over a single connection
• Host third-party resources locally
• Eliminate third-party tools that increase DNS lookups
• Leverage DNS caching

4. Don’t lazy load LCP elements

Lazy load is one of those powerful web performance optimization techniques that should be used sparingly. 

While it does magic on JavaScript files, it could have a detrimental impact on your LCP score.

Consider a page where the main hero image (the LCP element) is lazy-loaded. When the page loads, users might see an empty space or a placeholder until they scroll, triggering the load. This delay will not only sink your LCP score but also cause users to bounce immediately. 

Instead, you should try loading your LCP element as quickly as possible, using hints like link rel=preload or fetchpriority. 

5. Be careful with progressive JPEGs

Progressive JPEGs are a type of image format that loads gradually. Initially, a low-quality version of the image is displayed, which progressively improves in clarity as more data is downloaded. This creates an impression of a faster load time, as users can see a blurry version of the image almost immediately.

This sounds like the perfect strategy if you want to improve the perceived performance of your website. 

However, it may be problematic when it comes to improving LCP.

Since LCP measures the time it takes for the largest visible content element to load completely, the incremental loading of progressive JPEGs can delay the completion of the high-quality image, negatively affecting your score.

Source: DebugBear

That said, use progressive JPEGs selectively, considering the context and specific needs of your website. For critical images that impact the LCP, a standard JPEG might be more effective.

6. Use 103 Early Hints

Early Hints (HTTP status code 103) is a mechanism that allows a web server to send hints to the browser about critical resources before the main response is fully prepared. 

This HTTP status code takes advantage of “server think-time” to asynchronously send instructions to the browser to begin loading critical sub-resources or establish a connection with origins that are likely to be used on the page while the server is compiling the full response. 

Without Early Hints implemented

Essentially, it gives the browser a "heads-up" about resources that will soon be needed, allowing it to begin loading them in advance.

With Early Hints enabled

When it comes to improving Core Web Vitals, Early Hints allows the browser to make better use of idle time by starting the fetch process for key resources while the server completes the main response. This parallel processing helps reduce the overall load time and enhance performance metrics like LCP.

7. URL parameters can slow down your load times

URL parameters, such as UTM parameters, are frequently utilized in marketing campaigns to track their effectiveness. However, these parameters can diminish caching efficiency on your infrastructure, as each URL may be treated as a unique page despite serving the same content. 

To ensure marketing campaigns benefit from cached pages, consult with your CDN provider or infrastructure teams to configure the caching system to ignore these URL parameters. This will enhance caching performance and deliver faster load times for users accessing pages with UTM parameters.

Ignore UTM parameters automatically with NitroPack. Install today →

8. Speculation Rules API

All the abovementioned techniques focus on enabling the browser to load the LCP element as soon as possible. However, the Speculation Rules API loads your entire page in advance. 

Speculation Rules API, designed by the Chrome team, is a technology that enhances the performance of future page navigations. Building on existing resource hints like link rel=prefetch and link rel=prerender, this JSON-defined API offers a more flexible way for developers to specify which documents to prefetch or pretender.

You can define speculative loading types (prefetch or prerender) within inline elements or external text files referenced by the Speculation-Rules response header:

• URL Patterns: Define eligible URLs for prefetch or prerender.
• Eagerness Levels: Control when speculations trigger:
  • Eager: Fires as soon as observed.
  • Moderate: Fires after hovering over a link for 200 milliseconds.
  • Conservative: Fires on pointer or touch down.

 

How to Improve Cumulative Layout Shift

According to Deloitte:

One of the most frustrating things that will immediately make visitors bounce is misclicking due to a layout shift.\

Well, here are a couple of strategies to add to your CLS optimization toolbox:

1. Fine-tune the fallback font

To further reduce unexpected layout shifts, you can use font face descriptors to make the fallback font better match the web font.

This can be done by using the size-adjust, ascent-override, descent-override:

• size-adjust scales the fallback font to better match the x-height of the web font, helping to reduce visual discrepancies when switching between the two.
• ascent-override allows you to specify a custom ascent metric for the fallback font, aligning its height more closely with that of the web font to minimize layout shifts.
• descent-override sets a custom descent metric for the fallback font, ensuring its descent aligns more accurately with the web font's descent to further reduce layout shifts.

2. Don’t lazy load above-the-fold CSS

A typical pattern in some themes is to break up some of the CSS into section-specific files, then, within the section, add the CSS link. 

This results in browsers treating the CSS as render-blocking, which in turn causes flashes that are unstyled or semi-styled. As you may guess, this usually causes a layout shift as well.

To deal with it, analyze and simplify your code using a tool like WebPageTest. 

 

3. Reserve space for lazy-loaded images

Lazy loading off-screen images is one of the best ways to massively boost your page's actual and perceived performance. 

However, to strike the right balance between fast initial loading and seamless user experience, you need to reserve enough space for all lazy loaded images.

Why?

Generally, visitors skim through pages, quickly scrolling down through your content. 

If a user scrolls very fast before the image gets a chance to load, the content around it might shift.
 

How to Improve Interaction to Next Paint

Nearly 600,000 websites went from passed to failed Core Web Vitals when INP officially replaced FID in March 2024. 

That was a clear sign that the new responsiveness metric requires both site owners and web developers to fine-tune their web performance optimizations. 

This leads us to the final three Core Web Vitals strategies:

1. Reduce DOM Size

DOM size refers to the number of elements in the DOM tree. A large DOM size can negatively impact web performance because the browser has to process, render, and update a more complex structure. 

Reducing your website’s DOM size is one of the fundamental INP optimization techniques. 

However, the following three methods expand on some of the strategies that we’ve already mentioned on our blog:

• Use document fragments when appending multiple elements

Instead of adding each new element to the DOM one by one, use a document fragment as a temporary container. This method allows you to group multiple changes and then add them to the DOM all at once. Doing this reduces the number of times the page has to re-render, making the process faster and more efficient.

Example of document fragment
 

• Reduce CSS selector complexity by simplifying and limiting selectors

Complex CSS selectors can significantly slow down the rendering process because the browser must evaluate each selector against every element in the DOM. By simplifying selectors and limiting their depth and specificity, the browser can match styles to elements more quickly. 

This complexity reduction speeds up rendering and makes the CSS easier to maintain and debug.
 

• Utilize content-visibility for off-screen elements to reduce rendering work

The content-visibility property in CSS allows developers to specify that certain off-screen elements should not be rendered until they come into the viewport. 

When applied, content-visibility: auto allows the browser to optimize the rendering workload. By deferring the rendering of non-visible content, content-visibility significantly diminishes the initial load time and reduces the workload on the main thread, leading to faster rendering speeds and improved webpage responsiveness.

For example, on a blog with multiple comments or a long-scrolling news site, using content-visibility: auto for individual comments or news articles that are not immediately visible ensures that the browser stays responsive to user actions and quickly loads the content that is in view.

2. Remove unused plugins

Flipping through our content, you will immediately notice that removing unused plugins is one of the most common optimization strategies we recommend. 

So simple yet impactful, regularly clearing your tech stack will not only improve your site’s interactivity and INP score, but it will also boost your overall performance and Core Web Vitals.
 

3. Consider the number of ads

Many businesses decide to run ads on their websites as part of their monetization strategy. However, ads can be a complex and resource-intensive resource. 

The more ads a page has, the more demanding it becomes on resources, potentially affecting page speed. This issue massively affects mobile devices, where processing power and memory are typically more limited compared to desktops.

We don’t say you should remove ads entirely from your website, but as Barry Pollard noted:

 

Measuring The Impact of Your Optimizations

Neglecting your Core Web Vitals can be as bad for your business as blindly applying a list of optimizations. 

That’s why it’s important to run performance tests after every website optimization, change, or update. 

There are tons of options out there:
 

• Google’s PageSpeed Insights

PageSpeed Insights is a free tool provided by Google that analyzes the content of a web page and generates suggestions to make that page faster. It provides a detailed report on the performance of a page and its Core Web Vitals, including scores for both mobile and desktop versions.

 

• Web Vitals Chrome Extension

The Web Vitals Chrome Extension is a browser extension developed by Google that provides real-time feedback on web page performance based on Core Web Vitals metrics. It tracks LCP, INP, and CLS as you browse.

 

• GTMetrix

GTMetrix is a web performance optimization tool that provides detailed reports on a website's speed and performance. It combines data from Lighthouse, as well as other proprietary analysis, to give a comprehensive overview.

Ace all performance reports on autopilot. Install NitroPack today →

FAQs

What are Core Web Vitals and why are they important?

Core Web Vitals are a set of metrics defined by Google that measure key aspects of user experience on the web. They include Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). These metrics are crucial for understanding and improving the loading performance, visual stability, and interactivity of web pages, which directly impact user satisfaction, search engine rankings, and conversion rates.
 

What recent changes have been made to Core Web Vitals?

Recent updates to Core Web Vitals include the replacement of the First Input Delay (FID) metric with Interaction to Next Paint (INP) to provide a more comprehensive measure of responsiveness. Additionally, there have been improvements in how Largest Contentful Paint (LCP) handles videos and animated images, and changes to image loading prioritizations to reduce layout shifts (CLS).
 

What are Core Web Vitals' thresholds?

Core Web Vitals have specific thresholds for a good user experience:

• LCP should be within 2.5 seconds; between 2.5 and 4.0 seconds needs improvement, and over 4.0 seconds is poor. 
• CLS should be less than 0.1; between 0.1 and 0.25 needs improvement, and above 0.25 is poor. 
• INP should be under 200 milliseconds; between 200 and 500 milliseconds needs improvement, and over 500 milliseconds is poor.