Google's Core Web Vitals - Ranking higher by focusing on user experience

Google is making Core Web Vitals a major part of its ranking factor in 2021. This means that your website will be judged according to 3 primary metrics, and your search ranking affected accordingly. In short, Core Web Vitals are a new set of performance metrics that highlight aspects of web page development that affect user experience (UX); these include page loading, interactivity and visual stability. These metrics will also be the main measure to appear in “Google top stories”, a carousel of top results that appear at the beginning of a Google search result.

In order to deal with this change, we are going to dive into what these metrics are, how they will affect your website, and the impact it has on your SEO strategy.

LCP – Largest Contentful Paint

LCP is how long it takes a page to load from the point of view of an actual user. In other words: it’s the time from clicking on a link to seeing the majority of the content on-screen. Here are some things you can do to improve your site’s LCP:

• Remove any unnecessarily third-party scripts
• Upgrade your web host: Better hosting=faster load times overall (including LCP)
• Set up lazy loading: Lazy loading makes it so images only load when someone scrolls down your page. This means that you can achieve LCP significantly faster
• Remove large page elements: Google PageSpeed Insights will tell you if your page has an element that’s slowing down your page’s LCP
• Minify your CSS: Bulky CSS can significantly delay LCP times
• Caching: The storing of heavy parts of a website so that it may be loaded quicker. This can be done client-side, server-side or in the browser, to enhance loading speeds and user experience

FID – First Input Delay

FID measures the time it takes for a user to actually interact with your page. Examples of interactions include:

• Choosing an option from a menu
• Clicking on a link in the site’s navigation
• Entering your email into a field
• Opening up “accordion text” on mobile devices

Google considers FID important because it takes into account how real-life users interact with websites. And like LCP, they have specific criteria for what constitutes an acceptable FID.

FID technically measures how long it takes something to happen on a page. So in that sense it’s a page speed score. But it goes one step beyond that and measures the time it takes for users to actually do something on your page.

Here are some things you can do to improve your site’s FID scores.

Minimize (or defer) JavaScript: It’s almost impossible for users to interact with a page while the browser is loading up JS. So minimizing or deferring JS on your page is key for FID.

• Remove any non-critical third-party scripts: Just like with LCP, third-party scripts (like Google Analytics, heatmaps etc.) can negatively impact FID.
• Use a browser cache: This helps load content on your page faster. Which helps your user’s browser blast through JS loading tasks even faster.

CLS – Cumulative Layout Shift

Cumulative Layout Shift (CLS) is how stable a page is as it loads (aka “visual stability”).

In other words: if elements on your page move around as the page loads, then you’ve got a high CLS. Which is bad. Instead, you want your page elements to be fairly stable as it loads up. That way, users don’t have to re-learn where links, images and fields are located when the page is fully loaded. Or click on something by mistake.

<Nerd alert>

Google uses a metric called “Layout Shift Score”. This score is calculated by multiplying 2 main factors:

• Impact Fraction: measures how unstable elements impact the viewport area between two frames: the result is shown as a
• Distance Fraction: The distance fraction is the greatest distance any unstable element has moved in the frame (either horizontally or vertically) divided by the viewport’s largest dimension (width or height, whichever is greater); this is also shown as a %

So, Layout Shift Score = Impact Fraction * Distance Fraction. For example; if your IF was 75% and your DF was 25% then your Layout Shift score is: 0.75 * 0.25 = 0.1875

</Nerd alert>

Here are some simple things you can do to minimize CLS:

• Use set size attribute dimensions for any media (video, images, GIFs, infographics etc.): That way, the user’s browser knows exactly how much space that element will take up on that page. And won’t change it on the fly as the page fully loads.
• Make sure ads elements have a reserved space: Otherwise they can suddenly appear on the page, pushing content down, up or to the side.
• Add new UI elements below the fold: That way, they don’t push content down that the user “expects” to stay where it is.

Tools For Testing

PageSpeed Insights

Your first stop measuring Web Vitals should be PageSpeed Insights. You get both lab data and field data (when available) in one report. You also get several other metrics largely related to improving failing pages, particularly findings that affect the speed of a page and downloading its assets.

Check out PageSpeed Insights

Web Vitals Chrome Extension

Using the Chrome extension you can access Web Vitals on page load, and as discussed, you can interact with the page to troubleshoot in case you have First Input Delay and or Content Layout Shift problems. It’s also available to you page-to-page as you browse websites.

Check out Web Vitals Chrome Extention

WebPageTest

With this independent testing tool, you can configure your approach with a variety of conditions. Built by Google engineers who are part of the Chromium team, the information is as authoritative as anything you get from Google itself and makes RESTful APIs available.

Check out WebPageTest

Google Search Console

If you haven’t already verified ownership of your website to use Google Search Console, then you should go and do so for help drilling down into problem areas with pages that are failing out in the field — assuming you are showing in CrUX. You can drill down to locate groups of pages with similar problems. Ultimately it links you to PageSpeed Insights.

Check out Google Search Console

Web Vitals JavaScript APIs

Use JavaScript to access the metrics directly from the browser and transmit them to a repository of your choice. Alternatively, you can introduce the test to your development process and ensure that changes you make aren’t going to negatively affect your scores after you push to production.

Check out Web Vitals Javascript API

Chrome Dev Tools

Chrome itself provides the ultimate set of tools for discovering or tracing back problems using the highly detailed information available in reports and page load recordings in the Performance tab. The extensive array of tools and endless switches and options are ideal for the most exacting optimization work.

Check out Chrome Dev Tools

How does this affect your website?

There are certain guidelines and metrics traditionally used in web development to provide performance optimization and SEO ranking. These are going to significantly change; If you are a 1st page Google search website now, that may not be the case once Google implements their Core Web Vitals metrics in May 2021. Google’s “top stories” will also be based on these same metrics; increasing the emphasis on how important it is to be prepared for these metrics.

In order to prepare for this change in playing field, we recommend getting a Core Web Vitals audit in order to assess your current score and identify which areas need improvement. Once these areas have been identified, it’s time to start improving those scores!

For more information on Core Web Vitals, how it will affect your website, or if you would like to enquire about getting an audit, contact us below.