What are Core Web Vitals, and Why They Matter?

Core Web Vitals are a group of three metrics that Google introduced in May 2020 as part of their ongoing efforts to improve the user experience on the web. They are used as a quantifiable measure of the real-world user experience of web pages.

Google began applying the results of Core Web Vitals to mobile search results in mid-2021 and then to desktops in early 2022. Using them allows site owners and developers to understand better how visitors interact with their websites and where page experience can be improved.

The three metrics of Google’s Core Web Vitals are:

• Largest Contentful Paint
• Cumulative Layout Shift
• Interaction to Next Paint

The Largest Contentful Paint (LCP) measures web page loading performance. LCP is measured as the time it takes to render the content visible in the browser window from when the visitor navigated to the webpage. To provide a good user experience, Google recommends that webpages achieve an LCP of 2.5 seconds or less.

Cumulative Layout Shift (CLS) measures the visual stability, or how much page elements unexpectedly move, during the lifespan of the web page. Some ways unexpected layout shifts can interrupt the user experience include someone losing their place when reading text or clicking on the wrong link as page elements move. Unexpected movements often occur when web page resources load asynchronously or elements are dynamically added before existing content. Google recommends that web pages achieve a CLS of 0.1 or less.

Interaction to Next Paint (INP) measures how quickly a web page responds to user interactions. INP applies to an entire web page throughout the user’s session. INP is calculated as the time taken from a user initiating an interaction on a web page until the web page visually reacts, for example, the time taken from clicking a button until the button visually changes to indicate it has been clicked. To provide a good user experience, Google recommends that web pages respond quickly to interactions and achieve an INP of less than 200ms.

Nowadays, web page experience forms an essential part of SEO, as search engines continually seek ways to improve the user experience. Google has stated that they strongly recommend websites achieve good Core Web Vitals to be successful in search results and provide a good user experience. Therefore, better-performing web pages may not only rank higher in search results but may also lead to improved customer satisfaction and sales.

Improving Core Web Vitals alone will not magically propel your site to the top position of search results: Google uses hundreds of signals when assessing web pages for ranking in search results. However, Google considers page experience part of its core ranking systems, of which Core Web Vitals is just one part.

There are many factors that can affect your LCP metrics. One of the most common is third-party scripts which may need to be managed appropriately to keep your web pages loading quickly.

While third-party scripts can be a problem, they are not the only part of a web page that can be managed to improve performance. Large media elements, such as image and video files, can place a lot of stress on a page while it is loading. Using a file converter can help reduce the overall size of media elements. Lazy loading can also be used to delay the loading of media elements until they become visible when the user scrolls down the page.

Improving LCP performance may also require using a minifying tool to reduce the complexity and size of your CSS code.

Layout shifts are often the result of how pages are designed, built, and loaded. However, following good web design practices can reduce layout shifts.

Always specify size attributes for images and video elements so the browser allocates the correct space before loading. However, manually adding size attributes is often not required when building pages with the WordPress editor and other popular page builders, as WordPress can handle this.

When using ads, embeds, or other late-loading content on a web page, layout shifts can be reduced by reserving space in the initial layout or placing them lower on the page.

Custom fonts often cause layouts to shift significantly because they require different amounts of space to system fonts used when the page initially starts loading. Preloading or hosting fonts locally can help reduce layout shifts caused by fonts. Using font:display values such as optional, fallback, auto, black and swap is also an option.

Most of an INP score relates to the time JavaScript takes to execute on your site. To reduce INP, you need to reduce the time taken for JavaScript interactions to take place. There are three main parts to this delay:

• Input delay occurs when your website waits for background tasks on the page, which prevents an event handler from running.
• The processing time required for event handlers in JavaScript.
• Presentation delay required for recalculating the page and painting the content on the screen.

You can do several things as a website owner to reduce the first and the third delays. You can keep your software updated with the latest releases, manage background processes, and minimise JavaScript files. However, to make real improvements to your INP score, a developer will need to improve the processing time of JavaScript during the second delay.

We need to keep in mind that although Google uses Core Web Vitals as a ranking signal to help determine where web pages rank in search results, they are not the be-all and end-all. Of course, Google values websites that provide a good user experience, but this also includes great emphasis on great content. Instead of becoming fixated on three metrics, we should focus on developing websites that provide a fast and smooth user experience with content your visitors will value and engage with. Core Web Vitals are just one part of the whole picture.

To start your next web project, whether it be a new website or revamping an existing site, contact us to discuss how we can help you.