For years, Google has been telling site owners to “make your users happy, care about them”, and in recent years it has brought to the fore such issues as user experience, speed, and security. Google announced a new service on May 5th, Google Core Web Vitals. In fact, this tool, which existed in different ways and used by many of us before, has been integrated into Google Search Console with the new update. Although Core Web Vitals has similarities with the speed report that existed in Search Console before, it comes up with some additions and new metrics. These key metrics are Largest Content Dye (LCP), First Entry Delay (FID), and Visual Layout (CLS).
Wanting to be the best for users and making continuous improvements, Google announced that speed is one of the most important main metrics and gave a very clear message on this issue with the Web Vitals arrangement, “ Develop, stay up-to-date, speed up, make the user happy. “So what is Core Web Vitals? What do we need to know, what are the points we need to pay attention to? Let’s look for answers to these questions.
Table of Contents
What is Core Web Vitals?
The Core Web Vitals report shows how your pages are performing based on real-world usage data. This report focuses on three different aspects of the page experience: loading, interactivity, and visual stability. Each one is represented by a separate metric and displayed to the user.
Core Web Vital’s main purpose is to measure real user experience. These signals include loading performance, interactivity, and visual stability of the page.
Core Web Vitals consists of three main signals:
- Largest Content Paint (LCP)
- First Entry Delay (FID)
- Visual Stabilization (CLS)
Largest Content Paint (LCP) – Loading
Largest Contentful Paint – LCP is a metric created to evaluate how long a page load for users, ie page performance. ( Click for all the documents of Google on LCP .) In other words, LCP measures the perceived loading speed, that is, how long it takes your page to display the first items that are important to the user. It is necessary not to miss a point here. This metric does not measure the full load of the page. It measures the loading time of the largest element of the relevant page. You must understand this difference.
LCP refers to how long it takes to render the largest content on the page. Google presents the results of this test to the user in three sections; green, orange, and red. According to the metric, the site speed should be under 2.5 seconds. This was the case we know from Pagespeed and Lighthouse. However, more details are given to the user here. If the site speed is over 4 seconds, this is considered bad and editing is required. Considering the site speed is a ranking factor, you can understand that the first thing to take action is.
A web page is displayed progressively. Search engine bots start loading by checking the top of your page in the first stage, LCP is reached when the basic components are displayed.
First Input Delay – First Input Delay (FID) (Interaction)
First Login Delay – FID metric focuses on evaluating a page’s engagement. So it measures responsiveness. To make a terminological definition, “ It measures the time between when a user first interacts with your page (ie clicks a link or button) and when the browser can actually respond to that interaction. ”( Click for Google document on FID .)
When the user takes action to interact (like clicking a button) with your page, it takes less than 100 ms, you have a perfect FID.
To illustrate the point, you have entered a website, filled out a form for an order or contact. Then you clicked the “Send” button. And what’s that, you’ve waited quite a while for the process to take place. This is a negative situation. Most of us do not want and do not want to wait for this period. So a good user experience equals a perfect FID.
To give an example of the interactions covered by the FID;
- Clicking a link or button
- Entering text in an empty field
- Choose a pop-up menu
- Click the checkbox
- Html elements
The web.dev post explains this in detail:
If you want to get better than 100ms for this metric, you should achieve this result on 75 percent of your pages.
Visual Stabilization – Cumulative Layout Shift (CLS)
On some websites, a sudden visual change may occur on the page where the user is logged in. For example, the paragraph that the user is reading may suddenly disappear, the buttons may disappear. So there is indecision. Visual Stabilization, or Cumulative Layout Shift (CLS) as Google calls it, measures visual stability and how often users experience unexpected layout changes.
Although we couldn’t see it before, LCP and FID were known metrics. However, CLS is a brand new metric aimed at evaluating the visual stability of a page.
The proximity of items that cause great problems, especially in mobile devices, and the disappearance of items, exactly explain the issue of visual stabilization. When trying to click a button on a mobile site, you clicked on the ad due to visual instability. This is a negative user experience and the user will most likely leave your site.
CLS scoring is created by considering every unexpected placement changes that occurs during the time the page is live, from the point of view of the user.
To do this, the scanner checks the viewport size and the movement of unstable elements. It is important to note that this should include expected layout disadvantages, such as when the user clicks a link or button that causes page elements to move.
You need to get valid points from 75% of all your pages from this type of scoring.
What Should We Understand From These Metrics?
Of course, we will need some starting points to interpret this report. In terms of giving you a starting point;
For LCP issues :
- “How does my current resource load appear on my site? Too many spare items uploaded? “
- “Are there any render-blocking elements on my site that can be optimized?”
For FID problems :
For CLS issues :
- “What is the center of interaction on my site? What triggers the unnatural movement of items on my site? “
- “Are there any intrusive ad units that dynamically change the content on my site?”
- “What are the dimensions of my images on the site? Do I have control over the sizing of image assets on the site / are they determined via CSS? “
- “How responsive are the fonts on my site? Are they causing problems with uploading or viewing to users? ”
We hope this creates a starting point for you.
How to View the Core Web Vitals Report?
The Core Web Vitals report could be viewed on Pagespeed Insights, Web.dev , Chrome Lighthouse ( click for the plug-in ). However, with the update coming on May 5th, you can access the results automatically through Google Search Console.
When you click on the relevant report and reach the problem points, it will show you at which stage there is a problem.
In this example, we see that some improvements are needed at the CLS stage. When we click on CLS tab again;
it will give us such a result. This makes it easy for us to make improvements.
What to Do and Evaluation
Google has announced and revealed that speed is one of the most important ranking factors in previous algorithm updates. This innovation has taken users one step further in terms of progress in this field.
At the end of the day, Core Web Vitals reflects feedback from both Google and users for a better user experience on the web. Until today, the owners and we have always postponed the speed issue or did not give enough importance. However, with this move of Google, the seriousness of the situation has increased.
It is useful to add without forgetting. Google is not officially using Core Web Vitals in its search algorithm yet (who knows, maybe it does :)). These signals will be considered by Google in 2021 and the exact date is unknown.
On the other hand, of course, speed is among the most important ranking factors. However, content is still our biggest trump card. Because content is more important to the user than speed and other factors. Let’s continue to produce quality, non-aging, non-user targeting content. At the same time, let’s fulfill these factors. That’s when everything will be beautiful.
In addition, such enhancements are highly complex and require technical knowledge to solve. A wrong move can cost you all your labor. Taking and developing early measures against Core Web Vitals provides an advantage over your competitors while ensuring that you are a reliable and user-experienced page.