In early May, the Chrome team at Google announced Core Web Vitals, a group of metrics designed to work the Google Search Console and to expand how Google quantifies website speed performance.

These new metrics relate to responsiveness, visual stability, and speed to help website owners measure the quality of user experience provided by their websites.

According to Google, these metrics are essential to all web experiences, and now site owners can measure them hassle-free. Google will monitor this new group of metrics for six months before they will use them as a section of search rankings in 2021.

In this article, we’ll dive deeper into the different aspects of Core Web Vitals in Google Console and how it will improve your website.

Measuring Core Web Vitals in Search Console

Google rolled out the Core Web Vitals report in the Search Console to replace the old Speed report. This replacement of the Speed report with Core Web Vitals  shows how Google evolved regarding user experience.

Delivering the best user’s experience is more than just having a website that loads faster.  Google says a site needs to attain certain expectations for visual stability, loading, and interactivity.

What are Core Web Vital Metrics?

Core Web Vitals are a new group of metrics that Google believes it’s crucial in determining users’ overall experience when they visit a web page. 

Core Web Vitals consist of three specific metrics, namely Cumulative Layout Shift (CLS) and the Largest Contentful Paint (LCP) and First Input Delay (FID).

To locate Core Web Vitals, head to Google Search Console, then to the “Enhancements” section.

What is LCP – Largest Contentful Paint?

LCP metric measures the load speed of a web page from a visitor’s point of view.  Although load speed is still calculated by looking at DOM interactive, Google is trying to look at this interaction differently.

Basically, this metric measures the time from clicking a URL to viewing most content of the web page.  

LCP is mostly influenced by above-the-fold images, video players, among other media that take time to load before the major portion of the page the visitors’ views and interact with is available.  

Google wants to ensure that everything on the page loads quickly and uniformly so that visitors can see everything on the web page once they open it.

If your web page has any media like videos or widgets floating on the page, they could negatively affect your web page LCP.

What to do to improve your website LCP:

  • Get rid of non-essential third-party scripts.
  • Update your web host; better hosting means quicker load times and faster LCP.
  • Consider floating social media widgets and social media icons that load above the fold for article sharing.
  • Delete large page elements that might slow down your web page’s LCP.
  • Use author boxes that are automatically injected with pictures on the web page.
  • Set up lazy loading.

What is the FID – First Input Delay? 

FID looks at the time taken for a browser to execute an action triggered by a web page visitor, like clicking a button. We can also say it measures the responsiveness and quantifies a experience web user’s feel when interacting with a page.

FID is crucial for user experience since it reflects how fast the content a user cares about is accessible upon demand. Your website should have an FID of less than 100 milliseconds. An increase in FID will slow down your website.

If your website runs on WordPress, your web page high FID is most likely coming from the plugins you use. Speed optimization plugins usually make external JavaScript calls, which may have a negative effect, thus increasing FID. As a result, the website slows down.

If you’re using multiple speed optimization plugin, try to use one to slow down FID and increase your website load speed.  Speed optimization tools affect not only FID but also LPC.

How to reduce FID

  • Make use of browser cache to help content in your page load faster.
  • Get rid of non-essential third-party scripts or plugins.
  • Minimize JavaScript since it’s difficult for the user to network with a page when the browser is loading JavaScript.

What’s CLS – Cumulative Layout Shift?

CLS metric measures visual stability. It aims to calculate the amount of unpredictable layout shift on-screen during loading. 

If elements in your web page move a lot when the user loads the page, you’ve got a high CLS.

You need to make sure your web page elements are stable as the page loads. This means that your page visitors won’t have to remember where images, fields, and links are located when your page fully loads. Also, this prevents users from clicking something accidentally and having to navigate back.

What to do to reduce CLS:

  • Add new UI elements below, so they don’t push content down when the page completely loads.
  • Ensure you’ve set aside space for ads.  This will prevent them from suddenly appearing on the web page, shoving content to the side, up or down.
  • Utilize set size attributes dimension for your images, videos, and any other media so browsers can know how much space the element will occupy on the page.

Final Thoughts

Even though Core Web Vitals are yet to fully take effect, you should work on your website optimization strategy by improving the metrics we’ve mentioned above. Once again, Google has given you a sneak peek behind the curtain, so take advantage of this opportunity to improve your website and help it rank higher when these metrics are vitally important.

For Further Reading