Learn what Google Core Web Vitals are and how they can help your website rank better.

If you haven’t added user experience to your secret sauce, it’s about time that you do. One indicator of a very successful website is being optimized for user experience. You may have noticed in recent years that Google has been vocal about the importance of user experience. In fact, Google has provided signals to help website owners identify aspects of user experience and evaluate the degree of experience the page provides.

In the first quarter of 2020, Google announced Core Web Vitals, a quantitative set of metrics that can measure user-friendly and page experience levels. By 2021, Google is rolling out page experience as part of the Google ranking factors. You still have a few months left to fix your webpages for this future ranking factor, so by the time page experience is set, your website would be ready for the changes.

This article is a primer on Core Web Vitals. As you read further this article, you’d discover the specific metrics Google uses to measure user experience. You would also learn how to tap these metrics for your website to increase or optimize your viewer’s reading experience.

What is User Experience

Without getting too technical, user experience is the person’s response to the use of a system or product such as your website. It is entirely related to the technical aspect of your website and how your visitors perceive your site as they are navigating it.

For every industry, there are different proponents to user experience; however, if you delve into Peter Boersma’s T Model, you’d realize that there are eight proponents that define the user experience for websites:

  • Interaction design
  • Information architecture
  • Marketing & communications
  • Usability engineering
  • Visual design
  • Information design
  • Copywriting
  • Computer science

But the bottom line is, why should you be bothered by all of these? The answer is straightforward: when visitors check out your website and find that they can quickly get information there, they are more likely satisfied with what you have.

Contrastingly, when the design is poorly done, and they didn’t get what they had been looking for, they’d leave unsatisfied. Visiting your website is just a waste of time. These points of view define what user experience is all about.

What You Can Get from a Great User Experience

For every visitor you have, you also have the chance to convert them to customers- and one way to hook them is to have an intuitive web design that makes them come back for more.

Customer Loyalty

Better navigation and experience from your site means greater chances of turning that customer into leads. Otherwise, instead of having customers, you are turning those visitors away.

Higher Conversion Rates

Expect to have better conversion rates when your website is already optimized. It’s a domino effect that, when your customers are happy and satisfied, you get high-quality leads.

Better Productivity

Better productivity is the result of an improved user interface. The smoother the customers can navigate your website, the higher productivity levels as your visitors would appreciate it even more that they can do more with less time.

Customer Satisfaction

If you offer solutions to your customers’ woes in a fast and secure manner, they are more like to remain loyal to your brand.

Page Experience Signals

Over the years, Google has identified metrics that help website owners improve user experience. These include:

  • Mobile-friendliness
  • Safe browsing
  • HTTPS
  • No intrusive interstitials

These are metrics to measure the level of experience the website visitor has when interacting with a webpage. Optimizing these factors means providing a better page experience to customers and visitors as the webpages evolve to shift towards mobile use.

These tools and metrics aim to simplify everything so that website owners can focus more on the Core Web Vitals, which will be rolled out by 2021. Like many Google metrics, these Core Web Vitals are not set in stone. These may change yearly, depending on the preferences of visitors have for excellent user experience.

What Are Core Web Vitals

Aside from the items on the list above, there is a subset of Web Vitals which all website owners should also focus on. There are three aspects to the Core Web Vitals, and each of these aspects is entirely measurable and can be applied across all Google tools. These Web Vitals mirror how your visitors respond to your website’s performance as Google hopes website owners build pages that visitors love checking out.

Why Should You Bother with Core Web Vitals?

When you and your competitors have equally great content, whose website would stand out? Enter the Core Web Vitals. This factor is your trump card. Having higher page experience scores indicate your visitors prefer your site more than your competitors. Take note, Core Web Vitals should not be prioritized over search intent and quality content.

That being said, if your content isn’t as great as your competitors, your Core Vital Scores can’t help you to push ahead in the rankings game.

These Core Web Vitals will be used as part of the content ranking criteria for Top Stories you see on mobile. Another part of the good news is, Google has informed us ahead of time so you can prepare for this new roll out in 2021.

Standard Tools to Use to Measure Core Web Vitals

Most of these tools are used for measuring all the Core Web Vitals, but there are also tools specific to a particular web factor, as you might notice in the list for each core web vital below. Also, note that some of these tools may not use actual field data from users; rather, some use lab data results.

You can use Google Search Console to check the bird’s eye view of your pages.

Core Web Vitals search console

Chrome DevTools and Lighthouse can be used to optimize your pages. If you need quick page appraisals, use the Web Vitals Chrome Extension and PageSpeed Insights.

CORE WEB VITALS CHART

Largest Contentful Paint (LCP)

  • It refers to the loading performance.
  • It measures how fast the loading performance is at the initial loading.
  • Subsequent loading would not generate a new LCP for the same page.
  • The size of the element matters. Usually, the size of the element that’s only visible to the reader or user gets measured
  • When the image element is resized, the measurement is derived from the visible image size or the intrinsic size of the image. As the rule of thumb, the smaller size is the one being assessed
  • For texts, Google measures the text node size.
  • All other elements applied using CSS except the ones listed below are not measured.
  • When an element is taken off from the page, that is no longer considered for LCP even if that element was previously reported.
  • Reports will automatically stop when the user stops interacting with the page, such as tapping or scrolling the page.

LCP Parameters

  • An excellent loading performance within 2.5 seconds upon loading
  • A website needs to improve its loading performance if it loads between 2.5 seconds to 4.0 seconds
  • A website has poor LCP when it takes more than 4 seconds to load.

Elements Being Considered in LCP

As of the moment, only a few elements are being considered in the Largest Contentful Paint; however, some more elements are expected to be added in the future.

  • <img> elements
  • <image> element within an <svg> element
  • <video> elements
  • A background image loaded using the url(.). Function
  • Block-level elements

On Measuring LCP

There are several ways to measure LCP:

Factors That Affect LCP

Several factors can affect the loading performance. The major ones are listed below:

  • Server response
  • CSS and javascript that blocks rendering
  • Resource load
  • Client-side rendering

How to Optimize LCP

We have listed how you can improve your LCP scores below:

  • Check your Time to First Byte (TTFB) for the response time
  • Analyze your server-side code and optimize it
  • Ensure that your Content Delivery Network (CDN) server is located near the majority of your readers and customers
  • Cache your server-side
  • Use rel=” preconnect” to signal your browser that your page needs to connect with another page early on
  • Make your HTML pages cache-first
  • Reduce blocking time for JavaScript
  • Optimize images and images
  • Compress images
  • Fetch critical CSS early on

First Input Delay (FID)

  • It refers to interactivity, the user’s first impression, and responsiveness to your website.
  • As a user experience parameter, this factor measures the time the user interacts with the page up to the time the page reacts to the click or tap of the user’s button.
  • It’s natural not to have FID since not all users and visitors interact with your page.
  • FID follows the Response aspect of the RAIL performance model
  • FID is user-metric, so it cannot be replicated in the lab. This is the only metric in the Core Web Vitals that can only be done in the field as user actions are needed to measure it
  • FID does not score continuous actions such as scrolling or zooming

Actions that fall under the FID parameters

  • Clicking
  • Toggling
  • Tapping
  • Key presses
  • Inputting

FID Parameters

  • A site with good FID should have less than 100 milliseconds FID
  • A site that needs improvement has an FID scale between 100 milliseconds to 300 milliseconds
  • A site that is performing poorly in the FID aspect has more than 300 millisecond

Measuring FID

You can measure FID using the following tools:

On Improving FID

  • Do a Lighthouse performance audit
  • Optimize your Javascript performance because this is often where poor FID comes from
  • Reduce the time for browser execution on your page by limiting how much Javascript is on your page. You can either
  • Minify and compress
  • Removed the unused Javascript codes
  • Minimize unused polyfills
  • Cut longer codes to smaller ones
  • Minimize data cascading fetches

Cumulative Layout Shift (CLS)

  • This measures visual stability
  • CLS totals all the individual scores of the element changes against the individual unexpected layout shift across the entire webpage lifespan
  • To calculate layout shift scores, you have to follow this equation:

Layout shift score = impact fraction x distance fraction

Impact fraction is the measurement of the instability of the elements between two frames.

Distance fraction is the greatest distance the unstable elements have moved in relation to the frame.

Causes of Layout Instability

Often, layout instability is caused by the asynchronous resource loading or DOM elements being added on top of already-existing content. You must avoid:

  • Adding images and videos without indicating the dimensions
  • Use a font that has instable rendering
  • Widget or a third-party app that resizes itself

Parameters for CLS

  • If the CLS is is less than 0.1, then, your website is providing a great user experience
  • If the CLS is between 0.1 to 0.25, your website needs to improve how your website looks
  • If the CLS is more than 0.25, you have to assess your website as this indicates it has a poor CLS score

Measuring CLS

CLS can be measured both in the lab and in the real world. You can use the first three tools to calculate CLS in the real world, and the last three, in the lab:

On Improving CLS

  • Include the size attributes for your videos and images; otherwise, include CSS aspect ratio boxes
  • To ensure there aren’t any layout shifts, don’t add more content on top of the existing content
  • Use transform animations instead of animations of properties

In Conclusion

Before Google rolls out these new ranking factors, be sure to understand what the Core Web Vitals are. Make sure that you optimize your webpages for these three factors so that when Google officially announces these ranking factors, your website is ready to take on the new challenge. ITDwebdesign.com is ready to assist you through the changes.