Optimizing Core Web Vitals to speed up your site

Have you been trying to speed up your website to boost your Google rankings? Then you’ve probably come across the advice to improve your Core Web Vitals. 

But what exactly are Core Web Vitals? And how does improving them speed up your site? 

In this article, we’ll give you the run-down on what Core Web Vitals are, how they work, and how you can improve them. 

What are Core Web Vitals? 

Essentially, Core Web Vitals are specific site characteristics that are important to Google in evaluating a website’s user experience. 

These three metrics are what Google calls a website’s “cumulative layout shift,” its “largest contentful paint,” and its “first input delay”.

Sounds complicated? 

It is — a little bit. Below, we’ll walk you through what each of these metrics actually means. For now, it’s enough to know that they’re a measure of page speed and user interaction. They characterize a page’s loading speed, visual stability, and time until it becomes interactive. If you want to take a look at what your own site’s Core Web Vitals look like, you can do so in Google Search Console. 

Why are they important in the first place? 

Core Web Vitals have an impact on your site speed and user experience. And consequently on your Google rankings. 

In fact, Google has explicitly made “page experience” an official ranking factor. Apart from Core Web Vitals, page experience also involves aspects like mobile-friendliness, connection security, and passing the safe browsing check, which means ensuring that your website is free of spam. 

According to Google, page performance has a massive effect on bounce rates, which measure how many people leave your site after only viewing one page. For example, if your page load time is three seconds instead of one second, your bounce rate increases by 32%. If it’s six seconds, your bounce rate will be 106% higher. 

To keep this from happening, here is the scoop on what the three Core Web Vitals actually measure — and what you can do to improve them.

Elements shifting around during page load

Think about a visitor who comes to your site for the first time. They spot an interesting link while it’s loading, but before they can click it, it abruptly vanishes. This user won’t thank you for having to go hunt for it.

That’s the problem the first Core Web Vital, cumulative layout shift (CLS), deals with. It measures how much elements shift around as the page loads. If they move a lot, your page has a high CLS score.

And that hurts the user experience. 

To fix this, that movement has to be minimized. Especially on mobile, though, achieving layout stability can be tricky.

Fortunately, there are a few tried and tested strategies that you can follow. 

1. Set size attributes and dimensions for any media elements on your page. This includes images, GIFs, videos and the like. This lets browsers assign the right place and space to each, which means they don’t have to adjust the layout later on.
2. Elements that load later should be below the fold. This way, they won’t displace content that’s already being displayed above it.
3. If you run ads on your site, make sure to assign them their proper space, too. If you fail to do that, they might suddenly pop up and scramble the content layout all over again. 

Load time for the biggest piece of content

Usually, you don’t have to wait until the entire page has loaded to see its main piece of content. That might be the body of a blog post, or a video.

The time between someone clicking on a link to your page and seeing this main content is very important for user experience. And that’s exactly what the next Core Web Vital measures.

The largest contentful paint (LCP) is defined as the largest image, video, or block of text on your page. Your LCP score is how long it takes to appear on the screen.

In Google’s book, LCP speeds under two seconds are “good”. Speeds between 2 – 4 seconds “need improvement”. Anything longer than that counts as “poor”.

For a direct look at your LCP, you can use Google PageSpeed Insights. This is a fantastic tool since it uses real-world performance data from Google’s Chrome browser. 

Alternatively, if you want that data for your entire site, you’ll find it in your Search Console account. This lets you spot the best targets for LCP improvements.

But what influences LCP? 

In general, websites with many high-resolution images and interactive elements have longer loading speeds. Getting their LCP to an acceptable level can be a real challenge. Still, it’s possible. 

Examine which large page elements are really necessary, then remove the rest. Also get rid of any unnecessary third-party scripts. In addition, you can minify your CSS and set up lazy loading.

Plus, you can consider changing your web host. The best hosting services have significantly faster load speeds than other options.  

All this ensures that your main content starts loading sooner, and is done loading faster. 

Time until the user can interact with the page 

Finally, there’s first input delay (FID) as the third Core Web Vital. This one measures how soon users can interact with your page.

Interactive elements include menus, navigation links, forms, and accordion text. If you don’t have anything like that, scrolling up and down or zooming in and out also count as interactions. 

As soon as you choose an item from a menu or enter your email into a newsletter sign-up form, you’re giving the site input. The time it takes until that’s actually possible is that webpage’s FID. 

As with LCP, Google has standards for FID. If it takes less than 100 milliseconds until you can interact with a website, you’re in the clear. FIDs between 100 and 300 milliseconds “need improvement” — anything above that is “poor”. 

For many pages, such as blog posts, FID is not a big problem. However, for login pages, quizzes, or sign-up pages, FID can be a massive issue. 

So what can you do to minimize FID for interactive pages? 

One way to go is to use a browser cache. Another strategy is to minimize JavaScript. Finally, you can remove unnecessary third-party scripts, as with LCP.

The Bottom Line 

Your website’s Core Web Vitals are an essential part in ensuring a fantastic user experience. And, by extension, better Google rankings. 

Checking in on your CLS, LCP, and FID should be a key part of your website maintenance. They’re also great starting points if you’re setting out to improve your page speed. 

Optimizing your Core Web Vitals can be tricky, depending on what kind of site you have. But ultimately it’s well-worth the effort — one that will be paid in an amazing user experience and happy website visitors.