Since June of this year, Google has added Core Web Vitals to its set of metrics that determine the ranking of websites in its search results. This means that now your site performance impacts your SEO directly (and your business).

So, what are Core Web Vitals and what can you do to improve your website’s scores?

Core Web Vitals

In short, Core Web Vitals are a set of metrics that measure part of the user experience. Each of the three components that make up Core Web Vitals represent a distinct aspect of the user experience: loading, interactivity, and visual stability.

Largest Contentful Paint

The Largest Contentful Paint (LCP) metric measures the rendering time of the largest element visible within the viewport (the size of the users' screen). The types of elements considered are:

• <img>

• <image> elements inside an <svg>

• <video>

• An element with a background image loaded via the url() function

• Block-level elements containing text nodes or other inline-level text elements’ children.

The size of the elements is typically the size that’s visible to the user within the viewport. For image elements that have been resized from their intrinsic size — the size their would be based on their content without external factors — the size reported is the smallest between their visible size and its intrinsic size.

First Input Delay

The First Input Delay (FID) metric measures the time from when a user first interacts with a page, like when clicking a link, to the time when the browser is able to process and respond to that interaction.

Large input delays happen when the browser’s main thread is busy performing other tasks and is unable to respond to the user’s interactions. If this happens, it’s possible that the user will get frustrated and choose more responsive alternatives. According to Google, you should aim for an FID below 100ms.

Cumulative Layout Shift

The Cumulative Layout Shift (CLS) metric measures your site’s overall layout stability. Have you ever been about to click a link and then the content shifts and you end up clicking on a not-suspicious-at-all “Free iPad” banner? Well, you’re not alone.

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that happens during the entire lifespan of a page. To avoid these unexpected layout shifts, try the following:

• Avoid adding DOM elements dynamically to the page

• Avoid having elements like images and videos with unknown dimensions

• Use fallback fonts with a similar size to your primary font

According to Google, you should aim for a CLS less than 0.1.

Measuring your website’s Core Web Vitals

Google has several tools to measure how your site is performing:

• Google Lighthouse and Page Speed Insights will help you audit your site in five key areas: performance, best practices, accessibility, SEO, and PWA (Progressive Web Apps).

• The Chrome user experience report collects anonymized, real user data for each Core Web Vital. Once a month you’ll get a report of how your users are really experiencing your website.

Also if you use Vercel to host and deploy your projects, you can use their (awesome) Analytics Dashboard and get real user data in real-time to see how your website is performing. Shoutout to our friends at Vercel ♥️

Improving your Core Web Vitals scores

Once you’ve measured and identified areas for improvement, you can start working on getting those Core Web Vitals scores up, which will help you rank higher than your competitors.

Some recommendations for optimizing your site for each Core Web Vital are:

• Render as much content as possible in the server: by rendering HTML in the server rather than doing it in the client your site will show users meaningful content fast, thus impacting your LCP score positively. Also, Google will be able to crawl and index your pages faster, improving your SEO score as well.

• Optimize your images: there are several ways to optimize your images to improve your site’s Core Web Vitals scores, like lazy-load images as they are visible to the user, use modern image formats (AVIF, WebP), and correctly sized images for different viewport sizes, and provide blur-up placeholders.

• Make third-party requests early: if you’re using third-party libraries to display critical content, a slow server response can also impact your LCP score. Use rel="preconnect" to inform the browser that the page needs to download that resource as soon as possible.

• Split Long Tasks into smaller, asynchronous tasks when possible: Long Tasks are JavaScript execution periods where users may find the UI unresponsive and thus hurt your FID score (and annoy users as well). Splitting up long tasks can reduce input delay on your site.

• Include dimensions on your images and avoid injecting content dynamically:

  images without dimensions and dynamically added content can cause layout shifts when the resource is loaded, thus affecting your CLS score.

Here at Indicius, we take a performance-first approach while developing projects, and we constantly measure our scores to keep improving the experience of our users. We also work with tools like GatsbyJS and NextJS, that help us create blazing-fast websites. If you need help optimizing your site, get in touch with us. We’ll be more than happy to help you.

For more technical and in-depth information about Core Web Vitals please refer to Google’s official documentation.