The user experience is one of the fundamental aspects of organic positioning, because as we know, Google has always looked after its users and they’re increasingly taking it into account.
For this reason, in May 2020, Google announced what they call the Core Web Vitals, a series of metrics whose main goal is to help understand the user experience in an objective, clearer way and consequently, improve it in a more efficient way.
You may be wondering what exactly these metrics measure, how we detect what they’re measuring and, of course, how to improve them. Well, we’ll talk about all this below.
Table of contents
What are the Web Vitals?
We’ve already mentioned that Web Vitals are metrics that help to better understand the experience that a user gets on a given website, both for Google and for us.
The website experience must be taken into account in order to optimize it and offer the best experience to potential website visitors.
In this sense, each one of the Core Web Vitals represents a different aspect of the user experience.
According to the information we receive from Google, the Core Web Vitals are evolving as time goes by and are currently focused on 3 fundamental aspects: loading, interactivity and visual stability.
- Largest Contentful Paint (LCP)
- First input Delay (FID)
- Cumulative Layout Shift (CLS)
Next, we’ll look at each of these metrics separately: What do they mean?, how can we measure them?, how can we improve them?
Largest Contentful Paint (LCP)
The Largest Contentful Paint measures the rendering time of the largest visible content element, that is, the largest visible element within the viewport. A viewport is the first screenshot of the website when the user accesses it.
In simpler terms, it refers to the speed with which a website appears on the screen, making a specific measurement of the point at which the largest content element appears on the screen when the page is loading
For example, if you have a landing page with text, titles, captions and a large image, the largest elements of the page (possibly the image), will be considered the Largest Contentful Paint (LCP).
Sometimes optimizing the images or videos on the website to make them load faster will result in the site being optimized for Google, which will improve this metric.
The LCP is relatively easy to measure and interpret, but it’s important to understand that it doesn’t measure the time it takes to load the entire website, it only measures the time it takes for the largest content element to appear to users within the graphical window.
How do we know if we have a good LCP
Normally the loading of a website starts with the text and continues with images and videos. If any element of the website takes too long to load, it can detract from your organic ranking by not providing a good user experience.
To be considered good, the LCP should occur within 2.5 seconds of the page loading.
In any case, the measurement tools can show us 3 different scenarios.
- Good: For loads of less than 2.5 seconds.
- Needs improvement: If loading between 2.5 and 4 seconds.
- Poor: For loads greater than 4 seconds.
How to measure the LCP
LCP can be measured based on laboratory data or based on field data. The latter are closer to reality, as they take into account factors that may arise over time, while laboratory data gives an accurate measurement.
Let’s take a look at the tools to measure the LCP:
Field tools
- Google Chrome User Experience Report
- Page Speed Insights
- Google Search Console (Core Web Vitals Report)
Lab Tools
How to improve LCP
There are four factors website owners can focus on to ensure LCP best practices:
- Slow server response times
- Multiple resource load times
- End-user-side rendering
- JavaScript and CSS blocking
First input Delay (FID)
This metric refers to the speed or interactivity with which a website reacts to the input of a new user. That is, it measures the time it takes for the website to respond when a user interacts.
This is a key performance indicator, since the faster a site loads and is functional for the user, the more likely the user will stay on the page.
How do we know if we have a good FID
According to the information provided by Google, to have a good FID, this metric has to be below 100ms and like the LCP, this metric is also displayed in intervals.
- Good: Up to 100ms.
- Needs improvement: Up to 300ms.
- Poor: More than 300ms.
How to measure FID
In the case of FID, we can only measure it with tools that use field data, and we see them below.
- Firebase Performance Monitoring (Beta)
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
Reasons why we may have poor or in need of improving FIDs
There are several reasons why we can have a poor or improvable FID, let’s take a look at some of them, the most relevant ones.
Heavy JavaScript execution
If there’s an excessively heavy execution of JavaScript elements, the browser won’t be able to respond correctly to user interactions, which can cause frustration and consequently, a bad user experience.
To fix this, Google recommends compressing JavaScript files and deleting those that are not in use.
Broken Long Task
A broken or blocked long JavaScript card can cause delays of up to 50ms in the website’s response from the time the user performs the action.
We can solve this by splitting large processes into smaller ones. This will improve processing times and JavaScript execution times.
Cumulative Layout Shift (CLS)
This metric measures the sum of all changes with respect to the design that can occur on a website. That is, it determines the visual stability of the website, measuring how many times the design elements (text, images, audio files, video, etc.) appear during page load.
We see it with an example of a possible and simple case. In some pages, when the loading starts, you can see some elements in one place and when the loading is finished they appear in a different spot. The time it takes for the elements to appear in their final place, is what we know as CLS.
How do we know if we have a good CLS
According to the information provided by Google, for a website to meet the standards of Core Web Vitals in relation to the CLS, this must be less than 1.1s
As in the previous metrics, we can see the segmented results:
- Good: Up to 0.1.
- Needs improvement: Up to 0.25.
- Poor: More than 0.25.
How to measure CLS
In this case we have tools that provide us with field data and tools in which we can consult laboratory data.
Field tools
- Google Chrome User Experience Report
- Page Speed Insights
- Google Search Console (Core Web Vitals Report)
Lab tools
- Lighthouse
- Webpagetest
- Chrome DevTools
How can I improve the CLS on my website?
Here are a few things we can do to improve CLS.
- Optimize the size of images
- Size banners and ads
- Avoid using dynamic content such as sliders or pop ups
How Core Web Vital affects SEO
Since last May 2021, Google added the Core Web Vitals as one of the factors to be taken into account for ranking.
As we mentioned in this post, Google always looks out for users, and this update has the clear intention to continue in this line, more specifically for the user experience. Therefore, the Core Web Vitals have an important weight for organic positioning, ie SEO.
In addition, if we look at the panel of the tool for webmasters, Google Search Console, we’ll see that a panel has been introduced in which these metrics are displayed. This gives us an important clue or signal about the importance of these metrics for Google.
As I mentioned, it’s currently focusing on the metrics we’ve explained in this post, but new metrics can be added. In fact, Google has already given warnings in this regard, that some will be added within the idea of improving the page experience.
Conclusions
The actions or new updates that Google makes, always or in most cases, are focused on the user. In this particular case, the Core Web Vitals are intended to improve the user experience of browsing the website.
They’re an important factor to take into account in order to improve organic positioning, so it’s important to know them, interpret them, measure them and optimize them correctly.
Related Posts
Deja un comentario