Google’s Core Web Vitals: What You Need to Know

As we discussed earlier this month, Google has updated Pagespeed Insights (PSI) to incorporate Lighthouse 6.

Lighthouse is Google’s open-source tool for improving the quality of web pages. Its latest version brings a number of key changes, among them the newly-launched Core Web Vitals incorporated into Google Search Console.

What are Web Vitals?

There is almost nothing that Google loves more than performance metrics and associated acronyms, so it’s little surprise that they’ve introduced some new ones and rolled them into a new grouping called Web Vitals.

Web Vitals is a group comprised of three important metrics:

1. Largest Contentful Paint (LCP): A measure of load performance, generally gauging whether your largest content load happens with 2.5 seconds.
2. First Input Delay (FID): A measure of interactivity, or the idea that when a user taps on something, the browser should respond nearly instantly.
3. Cumulative Layout Shift (CLS): A measure of visual stability, or the concept that items in the browser window shouldn’t move as a page loads.

Below, we’ll break down all three in a bit more detail — beginning with the old standbys and ending with the newer CLS — and what you can do to improve results to achieve optimal pagespeed.

Largest Contentful Paint (LCP)

Despite its word salad of a name, Largest Contentful Paint is a fairly simple concept and if you’re reading this, you’re likely already taking a lot of steps to improve it. Bettering LCP scores requires a lot of traditional page load advice.

By that, we mean steps like using a CDN and/or caching plugin, pre-loading or pre-connecting to third-party scripts and images, minifying or reducing CSS, thinking critically about what plugins you’re running, and making sure your host is using http/2 and gzip.

Other measures you can take to improve LCP include making sure your images are optimized with modern formats and not loading unnecessarily large images. Also, try to avoid using large, edge-to-edge background images.

If you do have larger assets you need in the content, try to avoid using them in the first couple of screen views. Let lazy loading do what it’s designed to do and reap the benefits of higher pagespeed scores.

First Input Delay (FID)

First input delay is another metric that has a been around for awhile. It measures how long before a page becomes “interactive” and can receive input events, such as scrolling the page, clicking links or typing in forms.

As you’ve probably heard before, it pays dividends to make sure any JavaScript on your pages is minified and deferred if possible. As always, think critically about the plugins and tools you’re loading on your pages.

Try to keep only the things that provide the most value.

Cumulative Layout Shift (CLS)

The first two items aren’t particularly new and, for the most part, folks aren’t seeing major new items in these values. However, the advent of CLS has been a bit of a surprise and caused a little bit of concern.

It is important to remember when considering Cumulative Layout Shift is that it’s calculated based on visual changes to the page, when those changes take place inside the viewport or browser window.

This means that well-managed, lazy-loaded content should not impact your CLS score in most cases.

If the content is loaded and finishes rendering to the page before it comes into view, it should not impact your CLS score. That said, there are steps you can take to help reduce your chances of CLS issues:

• Make sure what you use for lazy-loaded images or iframes uses a match size placeholder or includes height and width attributes.
• Ensure web fonts are being loaded as early as possible. Here’s a link with helpful details on advanced font strategies.
• On our end, Mediavine is working on additional CLS optimizations to improve our ad load performance as well.

The Web Vitals description of CLS reads like it might make lazy loading a bad thing, but in reality, it prioritizes using lazy loading effectively.

Additionally, even if your CLS number is a little low, removing lazy loading from pages will likely impact your score even more than having a imperfect CLS number, so remember the big picture and don’t panic.

The guidance provided by these tools generally dovetails with Mediavine pagespeed resources and advice you’ve heard a lot over the years. As always, we’re here to help navigate these changes and make your sites lighter and faster, however we can.