Core Web Vitals: A Closer Look at Google’s New Ranking Factor

In November 2020, Google announced that Core Web Vitals would become an official ranking signal in May 2021. We're announcing that page experience ranking signals for Google...

Fiona Gurtiza
Fiona Gurtiza March 12, 2021

In November 2020, Google announced that Core Web Vitals would become an official ranking signal in May 2021.

The upcoming change will also incorporate existing UX-related signals such as mobile friendliness, safe browsing, HTTPS security, and intrusive interstitial guidelines.

At first glance, the new ranking signals may seem like a lot to take in. So let’s break it down.

In a nutshell, Core Web Vitals help ensure that websites provide good UX. And it does this by measuring the speed, responsiveness, and visual stability of a page.

By understanding how Core Web Vitals work, you can quantify your site’s UX and identify areas of improvement. After all, optimizing a website for UX is the key to long-term online success.

What are Core Web Vitals?

Core Web Vitals are a set of metrics important to a webpage’s overall UX. You can find your site’s Core Web Vitals data in the “enhancement” section when you open Google Search Console. They include the following:

By measuring these signals, you’re helping ensure that the people who visit your site receive a helpful and enjoyable experience.

Why are Web Core Vitals Important?

Paying attention to Core Web Vitals is a must because Google plans to turn page experience into an official ranking factor. Page experience include the following:

It’s safe to say that Core Web Vitals will make up a huge chunk of your page experience score so it’s good to get a head start by optimizing your Core Web Vital scores as early as now.

Improving Your Core Web Vitals Score

Now that we understand the different facets of page experience, it’s time to devise an action plan and determine how to optimize your site. We’ve prepared a simple guide below:

Speed Up On-Page Element Load Times

Remember how we said that page load times are crucial to UX? Boost site speed by making sure your above-the-fold content is immediately visible when people land on your page.

That’s where LCP, the first core metric, comes in. Here’s how you can preload your site’s elements for faster load speed:

To speed up your site’s loading time, preload critical assets like your above-the-fold content. That can help tell your browser to prioritize fetching those resources.

Minimize Long Tasks

A lot of things could happen behind the scenes, causing delays whenever a user taps or clicks a button on your page.

That’s exactly what FID, the second Core Web Vitals metric, measures. To resolve the issue, you’ll need to come up with a way to reduce waiting times between user interactions and browser responsiveness.

Sometimes, the culprit can be traced back to Javascript code which blocks the main thread. Over time, this could cause a main page to freeze and become unresponsive. Here’s how you can fix it:

On the tab, you can see how it breaks down the different activities within the task, such as parsing and compiling scripts. If you want to resolve these long tasks you can code split and serve your scripts in smaller chunks.

Reserve Image & Embed Space

The third Core Web Vitals metric, CLS, assesses how the visual layout of a page moves around while a page loads.

If you want to get a high CLS score, make sure you reserve enough space for images and embedded resources. For example, if you have a featured video on your homepage, you need to make sure that it has a reserved space on the structure of your page. Otherwise, the layout of your site could change once the video is loaded in.

Checking whether you have enough image and embed space is easy. Just click the “Performance” tab on Chrome DevTools, and check if your content has enough space to load into.

Keep Your Site Mobile-friendly

Did you know that the layout and usability on a mobile phone can make or break UX?

This means that your site’s content should be visible at all times, without people having to zoom into your page. Here’s how you can check if your site is optimized for mobile:

Address Security Issues

Your website should be safe for users to browse, no questions asked. So you have to be 100% sure that your page isn’t faced with issues such as unwanted software, deceptive content, or malware and phishing issues.

The easiest way to check is to access the Security issues report on Google Search Console. You can access this report by looking under the “Security & Manual Actions” heading.

Serve Forms & Embedded Resources Over HTTPS

As the previous point explained, security matters. If your content requires user interactions or inputs over a HTTP connection, you could be putting some of your users at risk. After all, you’ll want to keep the checkout process as secure as possible especially when users have to enter their payment details.

Run a security report on Screaming Frog to identify if your site has any of these issues. In the report, you’ll see how many forms are being served on HTTP and HTTPS URLs.

For added security, make sure your site has an up-to-date SSL certificate. You may also want to migrate your URLs and other on-page elements to HTTPS for better security.

Remove Obstructions to On-page Content

Sometimes, pop-ups or ads can be disruptive. It can be especially frustrating coming across them while browsing a website.

These intrusive interstitials could be affecting the people who view your site. So make it a point to check the Chrome DevTools feature and manually check if any of your URLs are obstructing your site’s content.

You might want to consider redesigning your pop-ups instead of completely getting rid of them. For example, you can make sure that people won’t have to manually close them to continue browsing your site.

Future-proof Your Site’s Performance

If the upcoming Google algorithm change teaches us anything, it’s that your long-term success depends on creating a positive experience for people who visit your site. If you need help optimizing your site, partner with Growth Rocket. Get in touch with us today.

More From Growth Rocket