Google's New Web Core Vitals Metric

Google's New Web Core Vitals Metric

  Lighthouse

 

Google will be making significant changes to the way it ranks pages to place a higher emphasis on site speed and user experience. These changes won’t take effect until 2021, but for many larger sites, improving site speed and user experience will take months to implement. If you want to improve your rankings or maintain your existing ones, engage a company with a proven history like CyberLancers to help you.

 

This week Google made the announcement that they would be making a major change to how their search engine rankings are determined. It was announced that they would start to place more of an emphasis on User Experience and ranking pages higher that had a good user experience. In order to determine what makes a good user experience , Google has given priority to what they call their “Core Web Vitals”. The 3 vitals that they will begin to use are: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

Largest Contentful Paint (LCP)

Largest Contentful Paint is the amount of time it takes for the largest content element to be visible within the viewport. A good time to shoot for here is under 2.5 seconds. One item to be aware of is that when measuring time, Google is using the times from a mobile device on a 4G network. So seeing that your website is under 2.5 seconds on your local network isn’t an accurate representation of your score.


Image via web.dev

There are typically four reasons why the LCP time is slow:

  • Slow Server Response Times
  • Render-blocking JavaScript and CSS
  • Slow resource loading times
  • Client-Side rendering

 

Many times, we find that the greatest performance boost can be found by improving the server response time and fixing performance issues with the backend code. With old webpages using ASP.Net or older technologies, it can take seconds in order to generate the first byte of data that is sent to the user. We recommend that companies start moving to new technology platforms such as ASP.Net core or node.js.

Other noticeable performance changes can be found by making sure images are compressed, only essential JavaScript and CSS is used, and that caching is in place. These changes will help with page performance and improving user experience.

First Input Delay (FID)

First Input Delay measures the time from when a user first interacts with a page, like clicking on a button or link, to the time the browser is actually able to respond to that interaction. The target time here is under 100ms.


Image via web.dev

Slow times here are typically caused by website elements being displayed that require on JavaScript to be loaded, but that JavaScript hasn’t been loaded yet. This becomes a bad user experience because users are trying to interact with your site, but it is unresponsive. This can also be caused by tasks being completed on the main thread that are preventing other tasks from occurring.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A good score here is under .1.


Image via web.dev

A layout shift is defined as an element moving position on the page. For example, if you have a button that moves position once you have interacted with it, that can be considered a layout shift. The reason why this can be considered a bad user experience is because the user is expecting an element to stay in its original position. If you click on a button multiple times, you expect that button to stay in the same place for subsequent clicks. This can be a fraudulent site which has a cancel button in one place, but after you click it, it shifts position and now the ok button is in its place. Users might not see the change and inadvertently click on the ok button.

What does this mean to you?

These changes won’t take effect until 2021 and Google has said that they will give 6 months notice before they start using them in their rankings. So, there is time to make changes, but many larger websites will need this time to determine what changes need to be made and being to make them. CyberLancers has helped companies to determine where their performance issues are and help fix them . We are offering a free performance check, a $1500 value, to help identify areas of your website that will be affected by these latest changes. We would love to hear from you and identify how we can help.