Screen Shot 2020-09-21 at 11.40.41 am

Core Web Vitals – How the latest Google ranking factor will affect you

Matt Keats
21 Sep, 2020

Core Web Vitals are the latest factors Google will be looking at to rank sites in search. The update is Google’s newest way of encouraging a better internet. In addition to its own business needs, Google wants websites that are easier to use and information that is easier to access. 

Core Web Vitals fall under the broader umbrella of page experience, something which has been of importance to Google for a long time now. When it comes to page experience, most SEO’s and marketers will be aware of the importance of things like page speed and mobile friendliness. Core Web Vitals, on the other hand, looks at three specific areas with the aim of measuring page speed and user interactivity.

What are the Core Web Vitals?

The Core Web Vitals measure three aspects of the user experience – loading, interactivity, and visual stability. These 3 aspects are measured respectively with Largest Contentful Paint, First Input Delay and Cumulative Layout Shift.

Google defines the three: 

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

These metrics, which can be measured both in “the field” (real world data) and “the lab” (data from a simulated environment), each represent a unique aspect of the user experience and have real world implications.

How Will Core Web Vitals Affect You?

For Google to come out with a new set of measurements, with their own name, Core Web Vitals will obviously play an important role in the future of SEO. At the same time, Google points out that “while all of the components of page experience are important, we will prioritize pages with the best information overall, even if some aspects of page experience are subpar. A good page experience doesn’t override having great, relevant content”.

Furthermore, Google explains that they are “combining the signals derived from Core Web Vitals with our existing Search signals for page experience, including mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines, to provide a holistic picture of page experience.”

From this we can deduce that while important, Core Web Vitals aren’t all there is to page experience, and will likely play more of a role when Google has trouble distinguishing what website has the best content. 

It is also important to point out that Google has stated they won’t roll this out until early 2021 and will give at least 6 months notice before doing so. 

Now is the time to get your head around Core Web Vitals and learn how you can optimise your site.

How to Measure and Optimise Core Web Vitals

Measuring Core Web Vitals can be done in Google Search Console, Page Speed Insights, Lighthouse, Chrome DevTools and CRUX.

The best starting place to find your sites data is under the enhancements section in Google Search Console.

Here’s how you can identify areas for improvement and optimise your website for better Web Core Vital scores.

Largest Contentful Paint (LCP)

Largest Contentful Paint is a metric designed to assess how well a page loads for users. The metric refers to how long it takes for the largest piece of content on the page to render.

Unlike other speed measurements, such as TTFB, LCP is user-centric, in that it measures the load speed of the largest, usually most important, element on a page.

Google states that you want to ensure that at least 75% of your loading pages meet the 2.5 second criteria to be assessed as “good”.

To check how your site fairs in terms of LCP, head to your Google Search Console. Under the Core Web Vitals section, you will see how your site performs on both mobile and desktop.

Google Search Console groups URLs with similar issues, making it easy to identify issues at scale. 

Once you have identified a group of URLs you want to improve, take one of these URLs and put it into Page Speed Insights. Under “diagnostics” the element affecting the LCP should be identified. 

Getting your page’s LCP to load under 2.5 seconds can be a challenge, but achieving this can definitely be worthwhile.

Here are some of the most common causes of a poor LCP, and how you might be able to improve it:

  • Slow server response times

Server response times can be improved by removing any unnecessary or unused third party scripts. Take stock of your plugins and themes and see if you can find faster solutions. 

Slow server response times can also be improved by upgrading your web host, which will result in faster load times overall. 

  • Slow resource load times

Slow loading resources are one of the most common causes of a poor LCP. There are many ways resource load times can be improved including compressing images, minifying CSS and JS and setting up lazy loading, so elements on a page load only when they are needed. 

Alternatively, you may consider simply removing large page elements that are slowing down your LCP.

  • Render-blocking JavaScript and CSS

JavaScript and CSS can sometimes keep your page from loading as fast as possible. Render-blocking JavaScript and CSS, that isn’t critical to the initial page load should be deferred and loaded only when it’s required. 

First Input Delay (FID): 

First Input Delay is a measure of interactivity. FID looks to measure the level of responsiveness of a page when a user first tries to interact with it. We all know how annoying a webpage is that seems to load, yet doesn’t respond. Again, this is a very user-centric measurement.

To provide a good user experience, pages should have a FID of less than 100 milliseconds.

Tools like Lighthouse and the lab data from Page Speed Insights load pages in a simulated environment. As there’s no user input to measure, they cannot measure FID. However, the Total Blocking Time (TBT) metric is lab-measurable and is an excellent proxy for FID. Performance optimizations that improve TBT in the lab should improve FID in the field. Nonetheless, if your site gets enough traffic, Search Console and PageSpeed Insights should have real world “field” data for FID measurement. 

For many pages, FID won’t be a huge deal. Content pages typically don’t require any interactivity beyond scrolling so FID score’s shouldn’t be impacted. In fact, we are yet to see an FID report within Search Console. PageSpeed Insights will give you a score and recommendations which will potentially improve your FID.

Here are some ways to improve your sites FID score:

  • Avoid chaining critical requests

While your page is loading, your site can’t respond to user interactions, and so there will be an input delay. Critical requests should be minimised, or deferred, in order to give your site a chance to respond to user inputs as soon as possible.

  • Remove any non-critical third-party scripts

In the same way third-party scripts can impact on your LCP, they can slow down your FID. Removing any that are not being used can improve your site’s speed.

  • Use browser caching

A browser cache and expire headers can help your website load faster for returning visitors. Faster loading means less input delay and a better FID score.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures visual stability, again a user-centric measurement. To provide a good user experience, pages should maintain a CLS of less than 0.1.

To measure this, the browser looks at the viewport size and the movement of any unstable elements. The score is measured by the sum of the impact that shift has, and the distance of the shift itself.

It is important to note that this is not intended to include expected layout shifts, such as when a user clicks on a link or button that cause the elements of the page to move.

Once again, Search Console reports on how your pages are performing in regards to CLS, and PageSpeed Insights will give you the elements on a specific page that are causing large layout shifts. 

CLS can be improved by:

  • Setting dimensions for media

For any form of media, be it images, videos or GIFs, you should use set attribute dimensions. This tells the browser exactly how much space the media will take up, and the rest of the page can load around the media, without shifting it around while it loads.

  • Have designated space for ads

Similar to your own media, ads can cause unexpected layout shifts, which are a huge pain point for users. Giving ads reserved space will prevent this.

  • Load new UI elements below the fold

When new elements are loaded below the fold, content above the fold will stay where the user expects, and so they won’t experience a layout shift.

At the surface, Core Web Vitals look to be a way of quantifying and measuring page speed factors. However, the three measurements LCP, FID and CLS have a strong, user-centric focus on page experience, something which Google is clearly emphasising more and more.

The Core Web Vitals overlap, in that improving one area will likely have a positive impact on the others. Regardless of the weighting Google will put on these measurements, SEO’s should be looking to create and optimise sites that are fast and user friendly. 

Matt Keats