Understanding and Improving your Core Web Vitals

As you may know, Google already considers user experience to rank pages some of these signals validate whether a web page is mobile-friendly or if it’s secure.

In its mission to become more user-centric, Google has announced a new ranking factor that will be incorporated this year 2021: Core Web Vitals.

These ranking signals are meant to evaluate a page’s loading speed, interactivity, and visual stability.

Let’s go through some key topics so you can start assessing and optimizing your website for these new Core Web Vitals:

What are the Core Web Vitals?

Page experience is a set of signals measured by Google to see if a page provides a good experience when a user visits it.

Some of these page experience signals are already taken into consideration to identify a “good page experience”:

  • Mobile-friendliness: Whether your page is optimized for mobile devices.
  • Safe-browsing: Absence of any malicious or misleading content (malware or phishing).
  • HTTPS: Whether your site uses a valid SSL certificate to ensure an HTTPS connection.
  • No intrusive interstitials: The page doesn’t have elements that obstruct its main content (such as a popup covering most of the content that shows immediately after a user enters the site)
Page Experience Signals
Page Experience Signals

In addition to this, Google is adding the Core Web Vitals that measure the page experience based on loading speed, interactivity, and visual stability.

The Core Web Vitals are expected to be introduced in May 2021 in an update.

As the graph shows, three metrics will be used to measure these new page experience signals.

Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) is used to measure page loading performance i.e. how long it takes for a page to display the most important elements.

This doesn’t reflect the total loading speed of a certain page but rather the first “piece” of content that should be shown within 2.5 seconds according to Google’s standards.

To better understand this, let’s look at the loading timeline of Instagram.

Instagram Loading Timeline

 

As you can see LCP is reached once the logo is loaded but the login button and other elements are “hidden”. This is because the logo is the largest element on that page so the moment that it’s loaded it’s the “LCP point”.

First Input Delay (FID)

The First Input Delay (FID) measures the time between when a user first interacts with your website (like clicking on a button) and when the browser can respond to that interaction.

A good FID is when that interaction takes less than 100 milliseconds.

FID only measures the “delay” in event processing, it doesn’t measure the exact time it takes for that event to happen.

Scrolling and zooming are continuous actions that have completely different performance constraints so don’t get confused.

Cumulative Layout Shift (CLS)

The Cumulative Layout Shift (CLS) measures visual stability and frequency in which unexpected layout changes occur.

A visual change happens every time an element on your page changes its position unexpectedly.

I’m sure you’ve encountered with sites (mostly news sites) that when you are reading the content, an ad banner shows up in the middle of the screen. This is a great (and annoying) example of a layout shift.

However, not all layout shifts are bad. A layout shift is only bad if the user isn’t expecting it.

This means that layout shifts that happen due to interactions like clicks on a button, typing in a search box, and similar, are fine as long as the shift occurs close enough to the interaction that the relationship between the interaction and the shift is clear.

Layout Shift Example

Take a look at the previous image, the “Click Me!” button appears at the end of the gray box which causes the gray box to change its size but not its position so it can’t be considered an unstable element.

The “Click Me!” button wasn’t at the start of the DOM so its initial position didn’t change either.

However, the start position of the green box does change and it’s that element that affects your CLS score.

What happens with animations and transitions?

Many websites love the use of animations and transitions on their websites. The truth is that content that shifts abruptly and unexpectedly creates a bad user experience.

To avoid animations and transitions to negatively impact your CLS, use the CSS transform property to animate elements without triggering layout shifts.

It’s common that websites use properties like height or width to use animations and transitions. However, using transform: scale() to change the size it’s better.

Similarly, instead of using top, right, bottom, and left attributes to change the position of an element, use transform: translate() instead.

Measuring your Core Web Vitals

There are many extensions and tools out there that can help you to measure your website’s Core Web Vitals.

I will show you here some of the tools and extensions that I’ve tested myself but if you want to know more, you can check out Aleyda’s tweet in which she shares some useful free tools to do it.

Web Vitals Extension

This is an extension currently available for Chrome named Web Vitals. It’s very straightforward, you install it, open your website, execute the extension and it shows the score for each of the three metrics.

As you can see here I have little work to do in terms of optimizing my site’s Largest Contentful Paint (LCP) to reduce the LCP score to 2.5 seconds.

Core SERP Vitals

This extension named Core SERP Vitals is a little bit more complex to set up than the previous one but nothing to worry about. After installing it, you’ll be taken to the Settings Page in which you’ll need to obtain and enter a Chrome UX Report API Key and choose the device for which the metric data will be shown.

After it’s installed and configured you can do a normal Google search (like one of your website’s most important keywords) and you will see the score of each metric in the SERP results.

However, this extension won’t show results for every page but only for pages that have existing data in the CrUX report.

But don’t worry you can use the previous extension to enter one of your competitor’s pages and measure their score.

As you can see in the image below (sorry for all the hidden text but you know how NDAs work) the extension shows the score of all three metrics but not for all of the pages ranking in the top positions. Although I could manually visit those pages and execute the previous extension.

Lighthouse

Using the Lighthouse extension you can generate a report for your website in which you can see scores for areas like SEO, Performance, Accessibility, Progressive Web Apps, and more.

The report shows in the performance section the values of different metrics including the Core Web Vitals.

Lighthouse Extension Results

PageSpeed Insights

You can also use the PageSpeed Insights tool to see, similar to how it’s displayed in Lighthouse, the different metrics with their respective values.

Both Lighthouse and PageSpeed Insights provide meaningful recommendations so you can improve your overall performance and start working on those render-blocking resources, unused CSS, etc.

PageSpeed Insights Opportunities

Core Web Vitals in Search Console

A Core Web Vitals report is also available in Google Search Console, it may not be available on your website if it’s very new or there isn’t enough data available but if your website has this report available you can easily see the affected URLs and issue that they have so they can be optimized.

Search Console Core Web Vitals

Optimizing your website’s Core Web Vitals

With the data gathered from the tools listed above the big question is “How do I fix these issues?“.

There’s no standard recipe for optimizing for these metrics because there are different factors that can affect your website’s Core Web Vitals, so the better way to approach this is to review the data and suggestions that some of these tools offer so you can know where to start fixing/optimizing.

Optimizing Largest Contentful Paint (LCP)

By reducing your server’s response you can normally ensure that your largest element is loaded sooner. However, render-blocking resources like JS and CSS can seriously impact your LCP.

Try minifying your CSS and JS files, use inline stiles whenever possible (normally with small custom tweaks in CSS but not with entire website’s CSS styles), defer the execution of <script> tags unless the script manipulates the DOM or if it depends on other scripts.

Use compressed images, limit their size to 100 MB, use lazyloading. If possible, use CDN’s so they can be loaded faster. Try to use new generation images like WebP or JPEG 2000 (keep in mind that not all browsers are compatible with those formats).

Optimizing First Input Delay (FID)

Again, minify and compress your JS files, defer any scripts that aren’t essential for the website’s main visualization.

Remove unused CSS and JS. Many WordPress websites use plugins for contact forms, sliders, etc. which are loaded on every page and most of them don’t need those resources. So it’s also important to assess if the resources loaded on the page are actually used.

TL;DR: Keep the number of requests low and transfer sizes small.

Optimizing Cumulative Layout Shift (CLS)

Instead of adjusting the size of images in your CSS, make sure that their proper dimensions are specified with the width and height attributes of the <img> tag.

If possible, use different sized images for mobile and desktop (if sizes vary in these two devices) and specify the proper image file in the srcset attribute according to the device’s width. See an example below:

img srcset code img

Test every change

It’s fundamental that every change and fix you make it’s previously tested. Maybe when deferring the load of a certain <script> an important functionality or element is not correctly displayed so you’ll have to try deferring another non-essential script.

You don’t want to publish a live version of your site that isn’t working as expected.

I’ll be sharing on Twitter any updates regarding new tools that can facilitate the implementation of these recommendations so now it’s a good opportunity to start following me on Twitter if you haven’t done so: @mxcarloscastro

Write A Comment

Your email address will not be published. Required fields are marked *