Core Web Vitals: Check out the complete guide to Google Bookmarks

SEO strategies are focused on user experience . Ok, we know that you optimize your pages to get better positions on Google, but it’s the user you should think about. After all, the search engine is also focused on offering the best search experience and values, in ranking, the pages that contribute to it.

Core Web Vitals

For the user, a good experience is finding answers to their questions, quickly accessing the content and easily accomplishing what they want. Google, on the other hand, depends on a series of signals to understand whether a page offers a good experience and to rank search results. That’s where Core Web Vitals comes in.

Core Web Vitals are fundamental metrics for evaluating the experience a page offers . They are related to the speed and stability with which a page responds to the interactions of users , who have no more time to waste and want to access the content soon — or give up on the visit in the face of any obstacle.

To better understand what Core Web Vitals is and how to use it in your digital marketing strategies , follow our article now:

What is Core Web Vitals?

Core Web Vitals is a set of signals essential for a good user experience , which Google uses in its algorithm to assess the usability of a page. This expression can be translated as “main web metrics”, which include the following indicators:

  • Largest Contentful Paint (LCP), which measures how long the page loads;
  • First Input Delay (FID), which measures how long the user can interact with the page;
  • Cumulative Layout Shift (CLS), which measures the stability of content as the page loads and the user interacts with it.

In early May 2020, Google announced the development of these metrics as a way to guide website owners in creating better experiences for their visitors. The intention was to unify the quality signal guidelines from one page, rather than dealing with multiple metrics and assessment tools.

In late May 2020, Google made a new announcement : Core Web Vitals would be incorporated into the search engine’s algorithm .

Introducing upcoming ranking signals for Google Search based on various aspects of the page experience–combining Core Web Vitals and previous UX-related signals.

Other experience metrics on the page

Google doesn’t just use these metrics to measure the experience a page offers , across all browsers and platforms. Core Web Vitals joins other ranking factors that the algorithm already considered:

  • Compatibility with mobile devices
  • safe browsing
  • Use of HTTPS protocol
  • Non-intrusive interstitials (“pop-ups”)

From the ad, all of these signals come together to evaluate the page experience, which in turn is combined with hundreds of other ranking factors that Google uses in ranking search results.

These factors have different weights. According to Google, in the Core Web Vitals ad, a good on-page experience is not a substitute for quality, relevant content . 

Therefore, it is important to know that pages with the best content, even if they have inferior aspects to the experience, can receive a better ranking. But on-page experience factors can be different when the contents are similar.

Google also announced that these metrics will also be used in the “Top News” section of mobile search, for which it is no longer necessary to create AMP pages.

Core Web Vitals

Core Web Vitals Implementation

In the 2020 announcement, Google stressed that the changes would not be implemented immediately, as the context was pandemic, and sites would need more time to adapt.

Later on, the search engine informed that it would start to implement the new algorithm, little by little, from June 2021 , with the forecast to complete the process in August of the same year.

So the changes are already taking place. Therefore, sites should pay attention to Core Web Vitals, evaluate their metrics and make the necessary changes to adapt if they don’t want to fall in the rankings. Later on, you will find out how to improve your score. 

How important is Core Web Vitals in SEO strategies?

According to Google , when a site follows the recommendations for each Core Web Vitals metric, users are 24% less likely to abandon pages .

It’s as if sites gain that same percentage in traffic just by adjusting page loads. This result already shows the importance of Core Web Vitals for your SEO strategies and your business results.

Improving page speed and stability means creating smoother, faster, and more uninterrupted journeys for users

Everyone benefits from it: users, who easily find and carry out what they want; your brand, which strengthens your relationship with your audience, gains traffic and increases conversions; and Google, which improves the web search experience. This way, your pages tend to gain better positions in the search engine.

Well, loading speed has been one of Google’s ranking factors for a long time. In 2010, Google was already announcing the use of page load times among ranking factors. In 2018, the search engine announced that speed would also be incorporated into page ranking on mobile devices.

What’s new about Core Web Vitals is that now Google doesn’t just consider the loading speed when the user accesses the page. It’s a set of metrics that measure the page access experience and encompasses how fast it loads, how fast it responds to interactions, and how stable the content is during load and interactions.

In this way, Core Web Vitals represents a more complete and efficient ranking factor, both to qualify the Google algorithm and to guide the SEO adjustments of your website or blog .

In fact, it’s important to realize that every time Google announces an algorithm update, the search engine’s intention is also to motivate sites to qualify the experience they offer. After all, Google makes thousands of algorithm updates each year without publicly notifying you. So, when there is a public announcement, the news deserves attention.

In addition, the Core Web Vitals ad already comes with lots of guidance on how to measure these metrics and improve your score. So understand that this update will certainly have an impact on search results , both on mobile and desktop.

What metrics does Core Web Vitals analyze?

The quality of the experience on the page depends on a number of factors. But Core Web Vitals brings together the main elements of a page loading experience while the user accesses and interacts with its elements.

Let’s now better understand each Core Web Vitals metric:

Largest Contentful Paint (LCP)

Largest Contentful Paint or LCP is the metric that measures the speed at which the page completely loads its content to the user. 

Largest Contentful Paint can be translated as “printing the greatest content”. This metric replaces other indicators used so far, such as First Contentful Paint (FCP), which measures only the loading of the first page element, and First Meaningful Paint (FMP), which focuses on the main page element, but tends to be inaccurate.

Then, LCP measures load speed by rendering time, until the moment when its biggest element — image, video, or text — appears on the screen to the user, assuming that content is the main content of the page. This can be influenced by server time, CSS, JavaScript and other factors.

Google recommends that Largest Contentful Paint be kept below 2.5 seconds , which is considered a plausible limit for websites and capable of providing a satisfactory user experience. Between 2.5s and 4s, the site needs adjustments. Above 4s it is a sign that you may be losing a lot of visitors.

First Input Delay (FID)

First Input Delay or FID is the metric that measures the speed of response to the user’s first interaction with the page , such as a click or a JavaScript control.

First Input Delay can be translated as “first input delay”. This means that the FID measures the time from the user interacting for the first time until the site is able to process a response to that interaction, which happens in milliseconds. This input delay or latency can be caused by other processes such as loading a large JavaScript file in parallel.

Google understands that a user’s impression of the site is not only determined by content loading, but also by response time. Therefore, it is important to combine the assessment of the LCP and the FID, not just one or the other.

The recommendation is that this time not exceed 100 milliseconds , so that the user has a quick response and does not leave the page. Between 100ms and 300ms, it is a warning sign for adjustment. Above 300s, it’s a bad experience.

Core Web Vitals

Cumulative Layout Shift (CLS)

Cumulative Layout Shift or CLS is the metric that measures the frequency and severity of unexpected page layout changes . This expression can be translated as “cumulative layout change”.

These unexpected changes happen when an element on the page changes places while the user interacts with the page. This happens, for example, when you go to click on a button, but an element loads and changes the position of that button, causing you to click where you don’t want to. This can irritate a lot and even create problems for the user…

Core Web Vitals

This is usually because page elements load asynchronously or have some dynamic configuration to adapt to context. Thus, heavier elements, images with no defined size, or automatically resized ads can cause sudden movements that disrupt the experience on the page .

To measure this, Google sets a layout change score. The score is the result of multiplying the Impact Fraction, which measures how the unstable element impacts the view, and the Distance Fraction, which measures how much the element has moved in the layout.

Google recommends that pages’ CLS score be below 0.1 . Between 0.1 and 0.25, you need to make improvements. Above 0.25, it means the user is having a bad experience with sudden page changes.

Core Web Vitals

How to measure Core Web Vitals?

With the announcement of Core Web Vitals, Google also said it was tweaking its SEO tools to incorporate the metrics. Next, we will show you the main possibilities of analysis tools.

It is important to know that Core Web Vitals metrics can be measured in the lab (lab data) or in the field (field data) .

But what does it mean? Saying that metrics are measured in the lab means that the analysis uses tools that simulate the loading of a page in a controlled environment. In the field, the analysis considers the interactions of real users and captures nuances that the laboratory does not capture. It’s what Google uses in its algorithm.

FID is a metric that can only be measured in the field, for example, as it requires a user to interact with the page. In this case, the tools can use another metric (Total Blocking Time or TBT) to approximate FID. On the other hand, LCP and CLS can be measured both in the field and in the laboratory.

Each tool can use a different method and thus generate different results. Therefore, it is important to know how each tool works and combine laboratory and field results to have a complete diagnosis. Let’s see this now:

Chrome User Experience Report (CrUX)

The Chrome User Experience Report uses field data to analyze the Core Web Vitals metrics, as well as other diagnostic metrics of the page. You can access Chrome UX Report data in four ways:

  • CrUX Dashboard , a customizable dashboard for your website in Google Data Studio;
  • PageSpeed ​​Insights , which pulls data from CrUX;
  • CrUX on BigQuery , which requires SQL knowledge to do advanced analytics;
  • CrUX API , to integrate with data from other applications and customize analytics.

PageSpeed ​​Insights

The PageSpeed Insights is a traditional tool used by sites to measure the speed of the page. Now, it also informs the Core Web Vitals metrics, divided between desktop and mobile, as well as suggestions for improvements. It is available on the web and as an API.

The tool reports the Chrome UX Report field data. However, it also has lab data and an overall speed score that is based on Lighthouse analytics, another tool we’ll look at later.

Core Web Vitals

Reporting in Google Search Console

Google Search Console, an essential tool for any SEO strategy, offers a specific report on Core Web Vitals . It also uses actual site usage data.

Report results are grouped by status (Bad, Improvement Needed, and Good), which allow you to identify which pages need adjustment. This tool provides historical performance data that PageSpeed ​​Insights does not provide.

JavaScript library

You can also use a Core Web Vitals open source JavaScript library, which can be used with any analytics provider that supports custom metrics. In this case, you must have mastery of programming. Here you can see a walkthrough for using the web-vitals library .

Web Vitals (Google Chrome Extension)

The Web Vitals extension for Google Chrome brings lab data for a particular page being accessed by the user. The intent is to bring real-time performance feedback to developers as they make code changes.

lighthouse

Lighthouse is also already a popular tool for measuring the speed of a website, but also other elements of the on-page experience. In the reports, you can check LCP, FID and CLS data. PageSpeed ​​Insights itself uses Lighthouse’s lab data in its reports.

Core Web Vitals

WebPageTest

WebPageTest is yet another page experience analysis tool. Uses lab data to inform Core Web Vitals metrics. Allows you to analyze individual pages and provides guidance to improve performance.

How to improve your Core Web Vitals score?

If you’ve used the tools above to test your site and found it doesn’t perform well in Core Web Vitals, it’s time to tweak it.

However, you will find that the tool’s recommendations are quite technical . So, if you’re not proficient in programming and technical SEO , you’ll likely need a professional to make these adjustments.

Here, we bring the main guidelines that the tools bring to improve Core Web Vitals metrics and achieve the values ​​recommended by Google. Check out:

Improve server response time

The longer the browser takes to receive content from the server, the longer it takes to process the elements on the screen . This delay affects all load metrics including LCP and FID.

That’s why it’s important to improve this response time, and you can take some actions for that:

  • Optimize the server (avoid shared servers);
  • Direct users to a CDN next to them;
  • Cache part or all of the HTML page content;
  • Serve cached HTML pages first;
  • Anticipate third-party connections.

Minify and defer JavaScript and CSS 

Scripts and style sheets are features that can slow down the Largest Contentful Paint (LCP). Before rendering any content, the browser needs to parse the page’s HTML. And these elements can cause you to pause that analysis and delay content loading.

So, to avoid the delay, you can minify the codes, which means eliminating unnecessary characters to reduce files , and defer loading scripts and stylesheets that aren’t critical to the page.

Reduce loading time for slow resources

Some elements are critical for page loading and affect LCP. You can take a few steps to speed up this loading:

  • Optimize and compress images;
  • Preload important resources;
  • Compress text files;
  • Deliver different assets based on network connection (adaptive service);
  • Enable caching with a service worker.

Divide heavy Javascript into smaller, asynchronous tasks

While the browser runs JavaScript, it cannot respond to user interactions. Therefore, heavy scripts can delay the site’s response , ie, the First Input Delay (FID).

To fix this, break long JavaScript tasks into smaller asynchronous tasks. These long tasks block main activity for 50 milliseconds or more and are a sign that JavaScript is performing more than the user currently needs. Thus, the division into smaller tasks tends to reduce the page entry delay.

Use a web worker

A web worker makes it possible for JavaScript, which delays the response to users, to run in the background .

Operations not related to the UI are moved to a worker thread, while the browser can perform the tasks that the user requested. In this way, it is possible to improve the FID.

Use a font loading API 

Loading web fonts can also delay loading and cause sudden layout changes that disrupt the experience.

While they don’t load, the browser can use an invisible font (Flash of Invisible Text or FOIT) or a generic font (Flash of Unstyled Text or FOUT), which can misconfigure the layout. Then, when the original font loads, the layout suddenly changes.

To prevent this from happening, you can use a font loading API, which ensures that your text fonts are preloaded .

Include width and height attributes for images and videos

Always include size attributes in content images and videos. The absence of this setting is one of the main reasons for poor performance in CLS, as these elements can take a long time to load and cause sudden layout changes.

On the other hand, when you define the width (width) and height (height) measurements, the browser already knows the correct space it needs to allocate for that content.

Leave a Comment