A Guide To Understanding and Improving Core Web Vitals

When managing a website, it’s essential to optimize it with the User Experience (UX) in mind. Otherwise, you’ll likely deal with high bounce rates, poor engagement, and low conversions. 

One way you can enhance the experience of your website is by improving your Core Web Vitals scores. Google uses these metrics to assess the overall UX of your site. By understanding each one and optimizing it, you can significantly boost how well your website performs in search engine rankings.

In this post, we’ll discuss what the Core Web Vitals are and why you should care about them. Then we’ll explain what each metric is, how you can measure it, and how to improve it. Let’s jump in!

What the Google Core Web Vitals Are

Google is continuously making algorithm updates to improve the way it crawls and ranks websites. One of its latest updates is the ‘page experience’ metric.

Google’s new rollout includes the Core Web Vitals. These three ranking signals measure and assess the speed, visual stability, and responsiveness of websites. You can find them in a report in your Google Search Console:

In other words, the Core Web Vitals contribute to Search Engine Optimization (SEO). Therefore, if you want to improve your site’s search visibility, it’s essential to pay attention to how it measures against these ranking signals. You should also consider which actions you can take to optimize and enhance them.

Three specific measurements make up the Core Web Vitals:

  1. Largest Contentful Paint (LCP)
  2. First Input Delay (FID)
  3. Cumulative Layout Shift (CLS)

These aren’t the only factors that Google considers as part of the ‘page experience’. It also analyzes HTTPS, mobile-friendliness, lack of interstitial pop-ups, and safe browsing. However, in this post, we’ll focus on the Core Web Vitals.

A Breakdown of the Core Web Vitals

In the following sections, we’ll break down each of the Core Web Vitals. We’ll explain what each one means, how it’s measured, and how to improve it.

An Overview of Largest Contentful Paint (LCP)

If you’re familiar with SEO, it’s probably no surprise that loading times play a significant role in the UX and, therefore, ranking of your site. The longer it takes for a page to load, the more likely a visitor will choose to abandon the website.

LCP measures how long it takes a page to load, from the time a user clicks on a link to when they can see the majority of the content on the page. However, it does not consider how long it takes to load the entire page. Therefore, LCP should not be confused with page speed.

In contrast, LCP enables you to time how long it takes to load significant elements, such as images and graphics. Let’s say that you have a page that consists of text, headings, and a large picture. The time it takes for the image to load on the screen fully would be considered the LCP. 

How to Measure LCP

Ideally, LCP should be 2.5 seconds or less for Google to consider it acceptable. If it falls between the 2.5 and 4.0 seconds range, it needs improvement. Furthermore, if LCP is more than 4.0 seconds, it’s deemed to be poor:

You can check your LCP from your Google Search Console report. You can also do it using Google PageSpeed Insights:

Simply enter your web page URL, then click on the Analyze button. When the program finishes rendering your results, it will give your site an overall score. Google will also include a breakdown of some important metrics.

You can find the LCP under the Lab Data section:

As you can see in the above example, this metric falls outside what’s considered “good”. It has an orange icon indicating there’s room for improvement. Now, that next step is figuring out how to enhance the score. 

How to Improve LCP

Four main factors primarily affect LCP. They are:

  1. Slow server response times
  2. Render-blocking JavaScript and CSS
  3. Resource load times
  4. Client-side rendering

That said, there are a handful of strategies that you can use to improve LCP. One method is to use a Content Delivery Network (CDN). Doing this can help limit delays in loading content by leveraging distributed servers across various physical locations worldwide.

There are a handful of options you can use for this. Two popular programs are Cloudflare and Jetpack:

If you use WordPress.com, Jetpack comes integrated with our platform. Therefore, you don’t need to worry about installing a third-party tool. 

Additionally, you can also improve LCP by minifying CSS and reducing unused JavaScript. Finally, you can compress and optimize your images. There are a handful of ways that you can do this. However, the simplest is to use a tool such as TinyPNG.

An Overview of First Input Delay (FID)

FID is the metric that tracks interactivity. In other words, it measures the time it takes for your website to respond to a visitor interaction. FID is considered a Key Performance Indicator (KPI) because it indicates how fast a site loads and how functional and responsive it is.

If LCP measures how fast the content on the page loads, FID considers how quickly users can interact with that content. For example, this could be selecting a menu item, clicking on a link, or entering an email address into a text field. This interactivity is a vital part of a website’s UX, so FID is considered a Core Web Vital.

When input delay, also known as ‘input latency’, occurs, it usually means that something has caused the browser’s main thread to be busy. For example, it may be executing a large JavaScript file. 

It’s important to note that FID doesn’t measure the time it takes to process the entirety of the interaction. Instead, it measures the time of the delay in event processing.

How to Measure FID

The ideal FID is 100 milliseconds or less. A website with this score is considered “good”. However, if it falls between 100 and 300 milliseconds, it needs improvement. Any measurement over 300 milliseconds is categorized as “poor”:

As with the other Web Vitals, there are a few different ways that you can measure FID. For example, you can use the Google Chrome User Experience Report or Google Search Console. 

However, keep in mind that your Search Console may not even report FID if no actions are happening on a specific page. Therefore, you may need to monitor your performance over time after several interactions. 

How to Improve FID

As we mentioned, long input delays can often happen because of too much JavaScript loading. It can be challenging for browsers to load too many things at once. 

Therefore, one of the most effective steps you can take to optimize FID is to reduce JavaScript execution time. You can do this by removing or minimizing unnecessary JavaScript files.

You can use the Coverage tab in DevTools to find unnecessary JavaScript files. Moreover, you can use the same method for eliminating non-critical third-party scripts that are slowing down your site.

An Overview of Cumulative Layout Shift (CLS)

The third Core Web Vital to pay attention to is the CLS metric, which measures the visual stability of a page. It evaluates this by assessing how many times certain elements, such as images, copy, and video, jump while they load. 

In other words, visual stability refers to when content moves around on a page. For example, perhaps you arrive on a website and try to click on a button. However, you are unable to complete the action due to an image blocking the element.

Naturally, this error can negatively affect the UX of your site. It can also hamper user engagement and Click-Through Rates (CTRs)

Measuring CLS consists of calculating how unstable elements are displayed between two frames while loading the page. It also looks at how the different parts move with the size of the screen. 

A layout shift happens whenever a visible element moves positions from one rendered frame to another. It can commonly occur when there are many advertisements on the page. 

How to Measure CLS

As you might expect, the faster a website layout stabilizes, the better. A “good” CLS score is anything that is 0.1 seconds or less. If it falls between 0.1 and 0.25 seconds, it needs improvement. Anything above 0.25 seconds is considered “poor”:

You can use a handful of methods to measure CLS. They include checking your Google Search Console’s Web Vitals Report and the Chrome User Experience Report. 

You can also measure CLS using PageSpeed Insights. As with LCP, you can find this metric listed under the Lab Data section of the results page:

As you can see in the above example, the score is “0”, which is considered “good”. It also has a green icon to show the suitability of the grade. However, if it reached above 0.25 seconds, there would be room for improvement. 

How to Improve CLS

One of the leading causes behind a poor CLS score is images on the page without predefined dimensions. Therefore, it’s important to make sure that you set the appropriate sizes for media on your site. 

You may like to consider the dimensions for images, videos, graphics, and other visual content.

Similarly, your ads should also come with predefined dimensions. 

You can also minimize layout shifts by reserving space for ad elements. Otherwise, you risk embedded advertisements pushing other content to areas where it doesn’t belong. 

Another factor affecting CLS is downloading and using certain web fonts that use Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT). Unfortunately, both of these can cause layout shifts. To avoid these movements, we recommend only using fonts that Google recommends.

Finally, one of the best ways to improve CLS is to avoid using too much JavaScript. As we’ve seen with other Web Vitals, these scripts can bog down your site and result in a poor UX. 

Conclusion

As a website owner, making sure you provide a high-quality UX for your visitors should be a priority. Not only can this factor affect customers’ impressions of your business, but it can also influence your search engine rankings. Fortunately, you can enhance your site’s SEO and UX by optimizing it for the Core Web Vitals. 

As we discussed in this post, there are three Core Web Vitals to focus on:

  1. Largest Contentful Paint (LCP): This measures the time it takes to load the largest element on the page, such as an image. You can improve it by using a CDN and minifying CSS.
  2. First Input Delay (FID): This metric tracks interactivity. You can enhance it by reducing JavaScript execution times. 
  3. Cumulative Layout Shift (CLS): It is the measurement of visual stability when a page loads. One of the best ways to improve it is to make sure images on your website have predefined dimensions. 

Do you have any questions about the Core Web Vitals? Let us know in the comments section below!

Let our experts build your custom WordPress.com website.

Whether you need a landing page or a full ecommerce site, an online learning academy or an interactive informational site for your business, we can build it for you.

Apply now

ABOUT THE AUTHOR

The WordPress.com Team

At WordPress.com, our mission is to democratize publishing one website at a time. Create a free website or build a blog with ease on WordPress.com. Dozens of free, customizable, mobile-ready designs and themes.

More by The WordPress.com Team

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: