Core Web Vitals – Ranking Signals For Websites Having High Organic Traffic

Google recently introduced its new ranking signals that will play a key role in defining the organic ranking of your website pages on Google SERPs. The primary aim of having core web vitals is to translate user experience into measure able metrics with the opportunity to further optimize based on data.

The key factors determining ranking signals are:

1. Is the website Loading?
2. Is website Interactive?
3. Is the website Visually Stable?
4. Is Website Mobile-Friendly?
5. Is browsing safe?
6. Does the website use HTTPs?
7. Does website have any intrusive ads?

The ranking signals consist of new metrics called Core Web Vitals(Loading, Interactivity, and Visual Stability) along with the existing page experience metrics.

The page experience signal looks at how people think about the experience of using a web page. Optimizing core web vitals makes the web more enjoyable for users across all web browsers and devices, and it helps sites meet their users’ needs and business goals.

What are Core Web Vitals?

Core Web Vitals are page experience metrics that measure key aspects of user experience like

• Is the website loading?
  • Measured using the metric LCP
• Is the website Interactive?
  • Measured with metric FID
• Is the website Visually Stable?
  • Measured with metric CLS

These metrics define the overall experience of users while interacting with a webpage. Let’s dive deeper into each metric.

1. Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) statistic measures the amount of time it takes for the largest image or text block visible within the viewport to be rendered in comparison to the time it took for the page to begin loading.

A good LCP score is < 2.5 seconds.

Elements like <img> , <image> and <video> are key contributors in determining LCP score.

2. First Input Delay(FID)

It’s important to look at First Input Delay (FID) when you’re trying to figure out how quickly web pages load because it measures how long it takes people to interact with them. A low FID makes sure that the page is usable.

FID is a measure of how long it takes for a user to interact with a page and for the browser to be able to start processing event handlers as a result.

Ideally, FID should be less than 100ms

In order to keep FID fast, cut down on third-party code that slows down the whole process. Keep the number of requests and the size of the transfers small to keep the main thread’s work as low as possible. The Requests and Transfer Size values for the Total row are computed by adding the values for the Image, Script, Font, Stylesheet, Other, Document, and Media rows.

3. Cumulative Layout Shift(CLS)

CLS is a very important metric that measures the visual stability of the web page. The metric is called “cumulative” because the score of each shift is added up over the life of a page. Long-lived web pages, like Single-Page Apps (SPAs) or infinite scroll apps, naturally build up more CLS over time. 

Ensure having CLS score of 0.1 or less.

There are some other notable metrics like First Contentful Paint (FCP) metric that tracks the time it takes from when the page first loads to when any part of the page’s content appears on the screen. Text, images (including background images), <svg> elements, and non-white <canvas> elements are all considered “content” for this metric. Sites should aim for a First Contentful Paint of 1.8 seconds or less. A reasonable threshold to measure is the 75th percentile of page loads, split by mobile and desktop devices.

To learn how to improve FCP for a specific site, run a Pagespeed Insights performance audit here and pay attention to any specific opportunities or diagnostics the audit suggests.

Tracking custom metrics or events through an Google analytics tool is generally broken down into a three-step process:

1. Defining the Custom Metric in the Analytics (Note: It’s worth mentioning that not every analytics tool mandates that custom metrics be pre-defined.)
   • This can usually be done within the administrative settings of your particular analytics provider.
2. Calculating the Metric Value on the page
   • You can leverage the web-vitals JavaScript library to accurately compute the values for each of the Core Web Vitals metrics.
3. Transmitting the Metric Value to Your Analytics
   • Make sure that the name or ID matches what you initially defined in the first step (if that step was necessary in your case).

Javascript

import {onCLS, onFID, onLCP} from 'web-vitals';

function sendToAnalytics({name, value, id}) {
  const body = JSON.stringify({name, value, id});
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

Optimize Page Experience using the Pagespeed Insights tool

Creating an optimized website experience for real-world users is much easier said than done. When multiple metrics contribute to the overall score, tracking the impact can be difficult without proper prioritization and action planning. It is important to ensure that one metric is prioritized with the highest weight in order to achieve the greatest possible output with the least amount of changes.

In order to attain the highest possible total score, it is preferable to trade-off between measurements of varying importance rather than attempting to focus solely on one particular statistic or metric set. A good starting point can be to prioritize metrics that have more weight than others.

Conclusion

While optimizing core web vitals can be a difficult and tedious process at times, since Google is already rolling new ranking signals for the desktop platform at the time of this article’s publication, publishers should anticipate some effect on their pages’ ranks. With correct prioritization and action plans, optimizing a website’s basic metrics can result in a wonderful user experience and assist in quickly achieving business goals.