Earlier this year, Google introduced Core Web Vitals, a new metric that combines existing UX signals to provide a view of the user's overall experience for any page on the web. Google will use page experience as one of Google's ranking factors. These factors will be measured by a set of indicators called Core Web Vitals.
Most importantly, at least for SEO the impact of Core Web Vitals on ranking position won't take effect until 2021, but this doesn't mean that you and your team can ignore it now. Of course, page experience has always been Google's primary measure of how a website serves its users, so this is nothing new.
Therefore you need to learn all about Core Web Vitals so that your website ranking gets better or at least doesn't decrease.
What is Core Web Vitals and How do you Fix it?
Google's initial ranking factors and algorithms were almost always semantic. However, since the last update, they have started to prioritize user experience. After applying various criteria, such as page speed and mobile-friendliness, Google announced Core Web Vitals in May 2020.
Core Web Vitals (Core Web Vitals) provides guidance regarding website quality. Website owners can use it to evaluate their website and web experience, and find out which parts need to be improved based on certain threshold values.
Core Web Vitals are a set of specific factors that Google deems important in the overall user experience of web pages. Core Web Vitals previously consisted of:
- Mobile Friendly
- Safe Browsing
- HTTPS
- No Intrusive Interstitial
These 4 things that Google used before to determine website ranking. But now there are 3 additions, namely:
- Site Speed (Loading Speed)
- Interactivity (Response of Website Elements)
- Visual Stability
In short, Core Web Vitals is a subset of factors that will become part of Google's “Page Experience” score. Basically, how Google measures the overall UX of your page.
What are the Core Web Vitals metrics?
Google has defined Core Web Vitals and here are the 3 indicators used according to these core web vitals.
1. LCP (Largest Contentful Paint)
This metric evaluates loading performance, specifically page loading speed and how users view and interact with the page. Google recommends that for a good user experience, LCP should occur within 2.5 seconds of the first page loading.
.jpg)
LCP is the time it takes for the largest element on the page to load. However, please note that the biggest elements are not just images or videos. Even long letters can be considered as LCP.
In addition, this LCP only calculates the time that the largest size element appears the first time when the website page is accessed, so the elements below it do not include LCP even though they are large too.
This metric was set by Google replacing the previous metric, namely FCP (First Contentful Paint). This FCP is the element that appears first when it is loaded even though its size is small.
Examples like the image below.
In the image above the title, paragraph and logo can be said to be FCP because they are loaded for the first time even though they are small. But right now according to Google, it doesn't give the impression that the page loads fast.
While the illustration on the right, the featured image can be said to be LCP even though it doesn't appear for the first time. But with the presence of web pages it seems that they load faster. Therefore it is important to optimize images or other visual content to improve your LCP score.
2. FID (First Input Delay)
This metric evaluates a user's ability to interact effectively with a given page. Google defines a good user experience with pages that have an FID of less than 100 milliseconds.
.jpg)
FID or First Input Delay is the time it takes for a website to respond to a visitor's first interaction. This interaction can be a click or an input and not a scroll or zoom. Even though this FID is measured from the interaction of website visitors after several web page elements have been loaded, this indicator is not perfect.
This interaction can occur at any time depending on the visitor, so if the visitor does not immediately click or input when the page is loaded, your FID score may not be good.
So one of the things that can be done so that the FID score gets a good score is by optimizing the JavaScript file or minimizing its use.
3. CLS (Cumulative Layout Shift)
This metric looks at the visual stability and impact of shifting of various web page elements when loading a font, image, or button. In terms of numbers to aim for, Google advises that a CLS of less than 0.1 provides a good user experience.
.jpg)
So far, there has been clarification as to which Core Web Vitals will have the greatest impact on ranking factors so it was critical for the team to consider each of these new metrics (as well as existing UX fundamentals) to provide the best possible user experience.
So you can say that CLS is an indicator to measure changes in the layout of any website page that occurs when it is loaded.
A case in point of a poor CLS score is for example you are loading a web page, the web page is not fully loaded. But when you want to press the button, the button suddenly shifts to the left or right. This happens because there are other elements that appear late when loaded.
Another example is for example placing an advertising banner or promo on the blog. When you read a paragraph, suddenly the paragraph you see slides down because an advertising banner or promo appears.
These things make your CLS score not good. Came back again because the user experience was compromised. But please note for the drop down menu, these changes will not reduce the CLS score.
How to Check Web Vitals Score
To find out the core web vitals score, you need to use tools. Now there are several tools that we know, namely:
- PageSpeed Insights
- GoogleSearchConsole
- Chrome UX Reports
- Chrome Web Vitals Extension
But you don't get confused and use all of these tools. We recommend just 2 tools that you can use, namely Google Search Console and PageSpeed Insights.
The difference between these 2 tools is that if you use Google Search Console, you can view web vitals data in an outline, and for PageSpeed Insights you can identify elements that need optimization. You can use these two tools together.
1. GoogleSearchConsole
To see vital web scores on Google Search Console, enter as usual to the search console page. After that, click the Core Web Vital menu in the sidebar.
If you have clicked, a graphic display will appear.
2. PageSpeed Insights
To view vital core web data i.e., access the PageSpeed Insights site and then enter your website or page URL.
Later you will find Field Data to see the results of the three Core Web Vitals indicators that we discussed earlier plus the FCP as below.
How do I Optimize my Web Vitals?
Here are some things you can do to optimize your web vitals score.
1. LCP Optimization
Your website can be categorized as having a good LCP score, that is, with an element loading speed of less than 2.5 seconds like the previous image. Now to optimize the score, you need to use PageSpeed Insights.
On the PageSpeed Insights analysis results page, scroll down until you find the Diagnostics section. Then, click the Largest Contentful Paint element tab. This tab will show the tags of the LCP elements. Scroll down select Diagnostics and select the Largest Contentful Paint tab.
After that, anything that needs to be optimized will appear. That way, you can immediately optimize these elements so that your LCP score increases. The following are ways to optimize the LCP score, namely:
- Optimize Large Size Files: Compress images and files. Use a lazy load plugin.
- Simplify JavaScript and CSS Files: Reduce the size or fix render-blocking JavaScript and CSS.
- Increase website speed: You can use a CDN or cache plugin to make elements load faster.
- Fix Browser-Side Rendering Issues: Make sure you only use JavaScript for what really matters.
2. FID optimization
The website's FID score is considered good, namely when the first interaction on your website occurs before 100 milliseconds. The easiest way to get a good FID score is to speed up your website. But this time instead of compressing images but optimizing Javascript.
Now the optimization method is to simplify your JavaScript files or minimize the use of Javascript code. You can help the developer to do this.
If so, later your website will load faster when loading or loading pages. Apart from that, you can also use the PageSpeed Insight tools as usual.
3. CLS optimization
To get a good CLS result, your CLS score should be at least 0.1. You can use PageSpeed Insight again and enter Diagnostics. There will appear several elements that reduce your CLS score. To overcome this, if the banner appears too late, you can use the Lazy Load plugin.
You can also ensure the size and layout of the image using javascript. For example, as shown below.
.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;}
You only need to change the value above according to what you want or your needs.
What are the 3 Pillars of Core Web Vitals?
Well, by now, you know that Core Web Vitals are important ranking factors related to page experience in Google search results.
Core Web Vitals also helps increase engagement and reduce bounce rates by ensuring a good user experience.
There are 3 main Core Web Vitals metrics, namely:
- Largest Contentful paint – calculates the amount of time it takes for the website to display the largest content on the screen.
- First input delay – measures the time it takes from when a user first interacts with a website until the browser responds to that interaction.
- Cumulative layout shift – checks the visual stability of page loading.
If you already have a website, check your website's Core Web Vitals score as this is an important user experience signal.
There are 3 tools from Google to measure this metric, namely PageSpeed Insights, Lighthouse, and Search Console. This tool will display your Core Web Vitals scores and provide tips for improving them.
Do Core Web Vitals Impact SEO?
Core Web Vitals are part of the page experience signals that tell you the extent to which a website can be accessed in a mobile-friendly manner, safe for browsing, and without annoying interstitials.
Since August 2021, page experience metrics have become an important ranking consideration for mobile devices. Google even finalized this ranking system for desktop in March 2022.
Google's page experience update also shows that they are still prioritizing pages with the most relevant content. However, page experience can only increase visibility if multiple pages have the same level of relevance.
So, we can conclude that Core Web Vitals play an important role in search engine optimization (SEO) ranking factors. Core Web Vitals also helps you ensure that your website provides fast and stable performance, thereby increasing conversion and engagement rates.
In fact, more than 50% of mobile device users will immediately close a page if it takes more than 3 seconds to load. If it is just 1 to 3 seconds longer, this can increase the bounce rate by up to 32%.
Conclusion
So, that was the discussion about what Core Web Vital is and how to optimize it more or less. Hopefully our article is useful for you, especially if you really want to do website optimization (SEO)...
Hopefully this article can help you understand the concept of Core Web Vitals, achieve good page experience values, and help optimize your website. Any question? Please convey it via the comments column below, OK?