How To Optimize Core Web Vitals in Google Search Console

Google recently announced that upcoming changes to its search rankings by incorporating Core Web Vitals as a ranking signal. But don’t worry right this second. Due to the timing with COVID-19,  Google claims it will give publishers 6 months’ notice before rollout out this change into search rankings. That being said, some publishers still might be wondering: how can I optimize Core Web Vitals in Google Search Console?

What was previously the “Speed Report” is now the Core Web Vitals tab. These new metrics can be found in Google Search Console.  The data is pulled from the Chrome UX report (also known as CrUX).

Today, we are going to show you how to optimize Core Web Vital metrics to be prepared when this update does roll out.

What are Core Web Vital metrics?

The Core Web Vitals are a set of metrics related to speed, responsiveness, and visual stability, to help site owners measure user experience on the web. They were introduced by the Chrome Team at Google.

The three factors that make up the Core Web Vitals are Loading, Interactivity, and Visual Stability. But which metrics comprise these factors?

Loading: Largest Contentful Paint (LCP)

Interactivity: First Input Delay (FID)

Visual Stability: Cumulative Layout Shift (CLS)

Some of these UX metrics are common to publishers, like First Input Delay (FID). We cover this metric in our article on the average page speed statistics for 2020.

However, metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) aren’t as widely known. Knowing the significance of all three of these metrics will likely prove to be important when Google rolls these changes out.

Important: What’s important to remember is these Core Web Vitals are metrics that were made up by Google. The introduction of these metrics seems to be swapping out in place of their former emphasis on just speed alone. The Core Web Vitals is a new method for measuring a user’s experience on the web, and it’s far more nuanced than just “fast or slow.”

What is CLS (Cumulative Layout Shift)?

CLS (Cumulative Layout Shift is a user experience metric for measuring visual stability. It aims to quantify how often users experience unexpected layout shifts.

Below is an example of a page that likely has a high CLS. The user places there cursor over the “No, go back” selection, and just before they click, the layout shifts, and “Yes, place my order” is accidentally chosen. This makes for poor user experience.

Unexpected movement of page content usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content. —Web.Dev

Things that might cause a high CLS:

One of the big issues is that a website might look and behave differently for users than for developers. Images and other elements are often already in the developer’s browser cache, and API calls that run locally are often so fast that the delay or shifts aren’t noticeable.

So, in the eyes of Google, a low CLS helps ensure that the page functions properly for users. The ideal range is less than .1.

What is FID First Input Delay?

First input delay (FID) measures the time between when a user first interacts with your site (i.e., when they click on something) to the time the browser is able to respond to the interaction.

To be classified in the “good” range, publishers should strive to have an FID of less than 100 milliseconds.

If you’re a WordPress site, FID increases are probably coming from your plugins. If you’re used to adding stuff in the “head” of your website, and if the items in the head make a lot of external Javascript calls, you might be slowing down FID significantly.

This word of advice also holds true even for speed optimization plugins. Some publishers use not only one but multiple optimization plugins at the same exact time. These plugins often make external calls that may have the opposite effect and increase FID and slow your website down.

What is LCP (Largest Contentful Paint)?

LCP is measuring the “perceived” load speed. It used to be calculated with the DOM metric, but now Google is looking at this instead.

Most of the stuff that is causing this metric to fall into the “poor” category are above the fold images, video players, etc,

These need to load quickly and initially. So Google wants to ensure that everything a user is going to see when they land on the site (above the fold) is visible quickly and doesn’t jump around.

If you have media widgets or anything that’s “floating” on the page, that kind of stuff can negatively impact this metric significantly.

How is LCP Different from FCP (First Contentful Paint)?

LCP = Takes into account things like media/video. When does the user see what the actual page is going to look like? Even if it’s going to load other things still in the background.

FCP = When is the first chance that the user actual sees your content? Doesn’t load menu, doesn’t see blank content but what’s the first instance of a user seeing your content.

On Google PageSpeed Insights, if you run a URL through it you will see an example of both the FID and LCP. You can see a blank white space of the image below, which means the content will not jump around when the image loads fully.

How To Speed Up CLS

The best way to speed up CLS is to lazy load images and ads. But when you do, you want to make sure the “pixels” for the location of those items are set.

For example: As the content loads in the GIF below, all the places for ads and images are already defined. If an image hasn’t loaded yet because we scroll really fast, it doesn’t move around. It would just be a white, blank space until you’re ultimately able to load the image.

Now what you don’t want is to have these images, ads, or videos, loading after the fact. So if you are lazy loading, make sure you have the space available, so your content doesn’t jump around.

There’s a full guide online with multiple CSS and Javascript codes to help you format your images and other content correctly so it provides a smooth load when the user scrolls.

Here is a JavaScript code that you can wrap your images with enough padding to prevent jumping:

.wrapper {
position: relative;
height: 0;
/* Formula is: (height / width * 100%) */
padding-top: calc(360 / 360 * 100%);
}

.wrapper__img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}

Additionally, if you use Ezoic’s Ad Tester, the ads that appear on your website are already padded correctly to where your site’s content won’t jump around for the user once they’re scrolling.

Remember: The better the user experience, the better your Core Web Vitals will be.

How To Improve LCP

One helpful strategy to improve LCP outside of just lazy loading is to try to load thumbnail previews of videos instead of full videos on your page.

If you use WPRocket in WordPress, it allows you to load Youtube iframes as a “preview” image and the user has to click to load, instead of the video loading upon page load.

Making sure images are small file sizes and compressed. A good rule of thumb is to make sure you’re optimizing the images. Image sizes less than 100KB is ideal.

Additionally, having all the images on your website in NextGen formats is another big benefit to website optimization.

How To Stop JavaScript From Increasing FID Time

The easiest way to stop JavaScript from increasing FID time is to use the fewest number of plugins as possible on your website

As many plugins as you can turn off or fully remove from your website, the better. And if you can lower your FID, that will be one more improved metric contributing to better Core Web Vitals.

How Important Are Core Web Vitals To Rankings?

Realistically, the most important thing to Google is that you (the searcher) get a good search result. Google is probably ranking the top result the highest because it’s the best result for a specific search.

Google will use this data most likely when they are trying to determine whether one result is better than the other. If all other things are equal in terms of content, which of the two websites performs better for the Core Web Vitals.

You can think about it as a tiebreaker. Which is better: result #7 or 8? It is most likely in these types of situations where Google might apply the Core Web Vitals to shift around search results ranking.

Will Improving Core Web Vitals Help SEO?

Google claims some of the ways to improve Core Web Vitals are:

We’ve seen mixed results revenue-wise for publishers using Google AMP. But it’s interesting that Google is touting their own creation, AMP, as a solution to a new set of metrics they themselves created.

Here’s the truth: Don’t overly focus on these metrics. That being said, try to trim as much fat as possible from your website. If you use one plugin for CSS modification, another for image compression, and another for website speed, try to find one that does it all, like Ezoic’s Site Speed Accelerator.

The biggest thing is to focus on building a better website and delivering a better experience to the user.  That will trump everything else you’re working on to improve these metrics.

Remember: Focus on your content. If you’re going to spend more time on these Core Web Vitals than your content, you’re going to be wasting your time and probably do more harm than good.

Do you have any questions on Google’s Core Web Vitals and how to optimize them? Let me know in the comments.

( Senior Content Writer, Ezoic )

Allen is a published author and accomplished digital marketer. The author of two separate novels, Allen is a developing marketer with a deep understanding of the online publishing landscape. Allen currently serves as Ezoic’s head of content and works directly with publishers and industry partners to bring emerging news and stories to Ezoic publishers.

This content was originally published here.

Pin It on Pinterest

Share This

Share this post with your friends!

Scroll to Top
×

Hello!

Are you looking for expert advice or help with SEO?

Have an SEO question? Interested in a campaign? Lets have a chat on WhatsApp

× How can I help you?