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:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- 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:
- Slow server response times
- Resource load times
- 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.
If you use WordPress.com, Jetpack comes integrated with our platform. Therefore, you don’t need to worry about installing a third-party tool.
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.
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
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.
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.
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:
- 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.
- 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