Core web vitals: 10 tips to improve

Core Web Vitals are the 3 key performance indicators put forward by Google to evaluate the quality of the user experience. A Google study shows that when Core Web Vitals are good, Internet users are 24% less likely to abandon a web page before it finishes loading. It is therefore important to take care of the user experience with fast pages in order to encourage customers to go to the end of the conversion funnel. In this article, I explain how to improve it.

Why are core web vitals so important?

Core Web Vitals is a set of key metrics from Google that measure the real-world user experience in terms of loading performance, interactivity, and visual stability of a web page. Getting good Core Web Vitals is recommended for success in Google search because it helps ensure a user experience fast, responsive and visually stable.

The three Core Web Vitals metrics are Largest Contentful Paint (LCP) which measures loading performance, Interaction to Next Paint (INP) which tracks user interactions and measures input lag, and Cumulative Layout Shift (CLS) which measures visual stability by tracking layout changes on the page. Google uses these quality signals as part of its ranking algorithm, and improving them can help your search engine rankings.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is one of the main key performance indicators (KPIs) for measuring the user experience of a website. It measures the time it takes for the largest piece of content visible to the user to fully load. A fast LCP is essential for a good user experience.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is a performance indicator that measures the time between user interaction with the website and the visual update of the page. It is important to have a low INP to provide a smooth and responsive user experience.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a visual stability metric that measures unexpected layout changes on a web page. A low CLS ensures that elements on the page don’t move unexpectedly, providing a pleasant user experience and preventing misclicks. How Google Uses Quality Signals Google uses these quality signals, such as LCP, INP, and CLS, to assess the usability of a website and use them in its ranking algorithm.

By improving these metrics, you can increase your chances of ranking higher in search results and driving more organic traffic to your site. The first step to improving Core Web Vitals is to test them using dedicated tools and then optimize the elements that are identified as problematic. PageSpeed ​​score is also linked to these metrics.

How to measure Core Web Vitals?

There are different tools to measure the health of Core Web Vitals, both from real user data and from lab tests (simulated measurements). These tools help website owners track the performance of their Core Web Vitals and identify areas for improvement.

Google Insights PageSpeed

This online analytics tool from Google is one of the most comprehensive and widely used to assess website performance. It focuses specifically on the three key metrics of Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

The tool analyzes a specific web page and provides detailed scores for each metric, ranging from “Bad" To "Good“. These notes are accompanied by concrete recommendations to improve performance, such as optimizing images, reducing the size of JavaScript and CSS files, or improving the rendering of the main content.

PageSpeed ​​Insights relies on two types of data for its assessment: lab measurements (conducted under controlled conditions) and field measurements (based on real user interactions). This combination provides a comprehensive view of a site’s performance. The results are presented in a clear and intuitive way, with graphs and visual indicators. This makes it a very accessible tool, both for developers and non-technical website managers.

Lighthouse

Lighthouse is an open-source auditing tool developed by Google and natively integrated into Chrome DevTools. It goes beyond just Core Web Vitals by assessing many other essential aspects of performance, accessibility, web best practices, and SEO.

Unlike PageSpeed ​​Insights which analyzes a specific web page, Lighthouse can be run directly in the browser on any page. This allows for more accurate and representative results of real-world usage conditions, without the potential biases of lab measurements.

Lighthouse reports provide detailed scores for each criterion analyzed, as well as clear and practical recommendations for improving performance. This tool is particularly popular with developers, who can easily integrate it into their development and debugging workflow.

Web Vitals Chrome Extension

This Chrome extension is a real-time Core Web Vitals tracker. It continuously displays the current LCP, FID, and CLS values ​​for the web page being viewed, with a color code indicating whether the recommended thresholds are met. This tool is very useful for developers who want to monitor the impact of their changes live, without having to run full scans. It also helps to quickly detect performance issues while browsing the site.

The Web Vitals extension provides a simple and intuitive interface, with clear visual indicators. It is therefore very accessible, even for non-technical users wishing to track the performance of their site.

Google Search Console

This webmaster tool provided by Google goes beyond tracking the performance of a single page. It offers an overview of Core Web Vitals for the entire website, with historical data to track changes over time.

Search Console reports make it easy to identify pages that aren’t meeting recommended thresholds for Core Web Vitals. This holistic view is especially useful for larger websites, where it’s important to have a holistic understanding of performance. Data from Search Console can also be integrated into other analytics and monitoring tools, providing a reliable and standardized source of data on Core Web Vitals.

Web Vitals API

Unlike previous tools that focus on analyzing and presenting results, the Web Vitals API is a JavaScript API for measuring Core Web Vitals directly at the client level.

This API gives developers the ability to integrate performance monitoring into their own analytics and monitoring tools. They can customize data collection and delivery based on their specific needs, whether for real-time analytics, alerts, or enriching their usage data. The Web Vitals API also provides more accurate and representative measurements of real-world usage conditions, based directly on user interactions with the page.

Article to read: Top 9 WordPress Security Plugins

Tips to improve core vitals

Once you have measured your performance, define the KPIs to improve, to achieve and not to exceed, according to your business and professional priorities. Observing your competitors is an interesting point of reference to situate yourself and evaluate the thresholds to set, because each market has its constraints and the average of the scores and performance indicators can vary greatly.

 Tips to improve Largest Contentful Paint

Largest Contentful Paint (LCP) is a key metric for website performance, measuring how long it takes for the main content of a page to be visible to the user. A fast LCP is essential to delivering a smooth and enjoyable user experience. Here are four optimizations you can make to your website to improve your LCP performance.

Improve Your Accommodation

Hosting is often a determining factor in a website's performance, so you need to choosing a good web host. If you are on shared hosting, there may be insufficient resources to handle your site's traffic and requests. Shared servers share resources between multiple users, which can slow down your site, especially during peak times.

To improve your LCP, consider upgrading to a dedicated server or VPS hosting (Virtual Private Server). These options provide you with exclusive resources, which can significantly improve your site's loading speed. Additionally, hosting services optimized for WordPress or other CMS can also ensure better performance. Look for hosts that offer servers located close to your target audience, as this reduces latency and improves loading times.

Use Appropriate Dimensions for Your Images

Images are often responsible for a large portion of the weight of a web page. Too many sites upload large images that are not optimized for the web. This can significantly slow down the loading of your main content, impacting your LCP.

To avoid this, start by setting the proper dimensions for your images. Make sure each image is resized to the dimensions needed to display it on your site. Use tools like Photoshop or online services to compress your images without sacrificing quality. Also, opt for modern image formats like WebP or JPEG 2000, which offer better compression while maintaining high image quality.

Don't forget to use the attribute srcset in your image tags to provide different image resolutions depending on the user's screen size. This allows browsers to load the most appropriate version of the image, which helps reduce load time and improves LCP. Imagify plugin allows you to convert your images to WebP and AVIF.

Take advantage of the Lazy Load feature

Lazy Load is a technique that allows images and videos to be delayed until they are visible on the screen. This means that elements that are not immediately visible to the user are not loaded initially, reducing the initial page load time.

To implement Lazy Load, you can use JavaScript libraries or HTML attributes like loading="lazy" in your image tags. This allows browsers to load images only when the user scrolls down the page. This approach is especially effective for pages with lots of images or multimedia content. By using Lazy Load, you reduce the amount of data that needs to be loaded initially, which improves LCP. It also provides a better user experience, as users can start interacting with your content without having to wait for everything to load.

Avoid Third Party Application Scripts

Using third-party applications can be beneficial, but it can also hurt your site's performance. Scripts from external services for cookie management, live chat, or visitor tracking can add extra load time that directly affects your LCP.

Evaluate the scripts you are using and determine if they are actually necessary. If you must use third-party scripts, try loading them asynchronously or in a lazy manner. This allows the browser to continue loading the main content of the page without being blocked by loading these scripts. Additionally, consider integrating solutions that combine multiple features into a single script. For example, Some live chat platforms offer integrations with tracking tools, which can reduce the total number of scripts needed on your page.

Tips to Improve First Input Delay (FID)

First Input Delay (FID) is a key performance indicator that measures how long it takes for a user to interact with a web page after it loads. A low FID is essential to delivering a smooth and enjoyable user experience. Here are three optimizations you can implement to improve your website’s FID.

1. Avoid Third Party Application Scripts

Third-party application scripts, such as those from social networks, analytics, or advertising, can significantly slow down your page loading. This is because these scripts are often loaded alongside your main content, and if they take too long to execute, they can block user interaction with your site.

To minimize this impact, start by identifying which third-party scripts are actually necessary for your site. Audit your code and eliminate any that aren’t essential. If you must use third-party scripts, consider loading them asynchronously or deferring them. This means your main content will load first, allowing users to interact with your site while the scripts load in the background.

Additionally, be aware of updates to the APIs or libraries you use. Sometimes, newer versions of these scripts can provide performance improvements. By being proactive in managing your dependencies, you can reduce their impact on the FID.

2. Use a Cache System

Caching is a key technique for improving your site's loading speed. When a user visits your site, the server has to process a multitude of requests to load the content. By setting up a cache system, you allow your server to store previously loaded versions of your pages. This means that on subsequent visits, the server can deliver the content faster, without having to generate it each time.

There are several types of caching, including server-side caching, client-side caching, and static content caching. For example, Server-side caching is used to store dynamically generated HTML pages, while client-side caching stores resources like images and CSS files in the user's browser.

To implement an efficient caching system, you can use tools like Varnish, Redis or even your CMS’s built-in caching features. Also, make sure to set up appropriate caching rules so that content is refreshed when needed, without penalizing loading speed.

3. Take Advantage of JavaScript Minimize and Defer Features

JavaScript is a powerful tool for creating interactive and engaging websites, but overuse or poor optimization can hurt overall performance. To improve your FID, it is crucial to minify and defer loading your JavaScript resources. Minification involves reducing the size of your JavaScript files by removing spaces, comments, and other unnecessary elements. This reduces loading time and improves execution speed. You can use tools like UglifyJS or Terser to automate this process.

Deferred, on the other hand, means that you load the JavaScript only when it is needed. By using the attribute defer in your tags <script>, you can tell the browser to load the script after the HTML content has been fully parsed. This allows the user to interact with the page without waiting for all the scripts to load.

Tips to Improve Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a critical metric that measures the visual stability of a web page. A low CLS score is crucial to delivering a smooth user experience because it reduces unpleasant surprises caused by unexpected content shifting during loading. Here are three optimizations you can implement to improve your website’s CLS.

1. Use the Right Dimensions

One of the most common causes of content shifts is when elements on your page, such as images, videos, and content blocks, don't have dimensions set. When these elements don't have dimensions specified, the browser doesn't know how much space they'll take up on the page until they're fully loaded. This can cause other elements on the page to shift, disrupting the user experience.

To avoid this, make sure to set fixed dimensions for all your media elements. For example, for images, use the attributes width et height in your tags <img>. Similarly, for videos, specify the dimensions in the embed code. By respecting your visitors' screen sizes, you will minimize content shifts while your page loads. This not only helps stabilize the layout, but also improves the user-perceived load time.

2. Set Up Your Ads Correctly

If you monetize your site with ad inserts, it’s crucial to set them up correctly to avoid them causing content shifts. When ads appear out of place or take up space in the layout that wasn’t intended, it can disrupt the browsing experience and affect your CLS score.

To remedy this, reserve a specific location for your ads in your code. HTML and CSS. This means you should set dimensions for your ad inserts and fit them into a fixed space in your layout. That way, even if one ad takes a while to load, the rest of your content won’t be affected. Also, consider using ad formats that fit better into your design without causing lag, such as responsive ads.

3. Integrate Your Elements Below the Fold

Another trick to improve CLS is to integrate some elements below the fold, i.e. outside the immediate view of the user. This strategy should be used with caution and in addition to optimizations for Largest Contentful Paint (LCP) and First Input Delay (FID). The idea is to “hide” temporarily removes content that might cause lags while loading.

By placing some non-essential or less important elements below the fold, you reduce the likelihood that their loading will affect the stability of visible elements. This could include images, videos, or sections of content that aren’t immediately necessary to the user. This approach helps maintain a stable layout while ensuring that essential content is loaded first.

Conclusion

Core Web Vitals do not have a big impact on SEO unless the site is very slow. However, they are important for the user experience. Improvements can allow more data in Analytics and increase conversions. It is recommended to work with developers, experts in speed optimization. In the future, optimization will be more and more automatic thanks to new technologies and platform features.