Core Web Vitals – Optimizing Page Experience

Photo by Kai Wenzel on Unsplash

2021 is a big year for updates. We’ve got Apple shaking up digital advertising with their iOS 14.5 update, and Google about to phase out third party cookies

But if you’re an SEO, Google updates are a very, very frequent occurrence. And the cause of a fair amount of stress! 

Though Google makes thousands of algorithm updates every year, it’s rare that they announce one ahead of its roll out

The Google Core Web Vitals update arrives in May 2021. And it’s main focus is improving user experience. 

Google ranking factors are a mystery. But the Core Web Vitals update has something of a checklist you can work on. So what’s it all about? How can you prepare for it? 

We’ll tell you what you (and your design and technical teams) need to know…

Image showing speeding cars which relates to core web vitals
Photo by Guillaume Jaillet on Unsplash

Core Web Vitals – The Checklist

The Core Web Vitals update focuses on a number of specific technical factors that affect user experience on a mobile site.

While it’s unlikely that from May onwards sites that have a great web vitals report will shoot up the rankings, those sites will be better for users. They will be quicker and more pleasant to use and probably have a much higher conversion rate.

So even if you are not concerned with rankings, looking at the following factors will improve your user experience.

To assess your website to see where you currently stand, download a “Web Vitals” plugin for Chrome or run a Lighthouse audit by clicking on your Chrome settings, then “more tools” and then “developer tools” and then “generate report”.

Largest Contentful Paint (LCP)

The Largest Contentful Paint metric shows the render time of the largest content element from your website visible within the viewport. This should be quick for any kind of commerce site as any delay has a huge impact on conversion rate.

How to improve Largest Contentful Paint:

  • Optimize your servers
  • Cache assets
  • Establish third-party connections early
  • Consider using a Content Delivery Network (CDN), preferably one that’s physically closer to you 
  • Serve HTML pages cache first

Cumulative Layout Shift

One of the things that’s most annoying to users is when a page shifts around while they are trying to click something. Cumulative Layout Shift is a metric that shows how often that is happening on your website.

Lots of weird layout shifts are terrible for users and for your conversion rate. 

How to improve Cumulative Layout Shift:

  • Include dimensions with your images
  • Include dimensions with any ads, iframes or embeds on your site
  • Avoid dynamically inserting content above existing content, unless the user has requested it via an interaction (data protection notices and newsletter prompts commonly cause problems here)

First Contentful Paint

First Contentful Paint is a metric that illustrates when the user can first see something from your page. It’s the first signal that a user has arrived. The FCP “score” you are given is a comparison of your pages FCP time and FCP times for other real websites.

How to improve First Contentful Paint:

  • Avoid script based elements above the fold
  • Ensure text remains visible during webfont load (by temporarily showing a system font)

Time To Interactive

Time to Interactive measures when users can actually do something on your website. It measures how long it takes for a page to become fully interactive. A page is considered fully interactive when it displays useful content (measured by FCP) and the page responds to user interactions within 50 milliseconds.

How to improve Time To Interactive:

  • Again, take a look at optimizing your JavaScript. Especially third party JavaScript
  • Reduce JavaScript payloads with code splitting

Total Blocking Time

The Total Blocking Time metric measures how big the gap in time is between First Contentful Paint and Time to Interactive. It’s closely related to the Time To Interactive metric. 

How to improve Total Blocking Time:

  • Break up long tasks. If a task is “long” enough the user notices the delay and perceives the page as sluggish. And they will go elsewhere

Time To First Byte

Time To First Byte is a metric that reflects the time between HTTP client request and the first web page byte coming back. The flow between your servers and your site should be flawless if you want to give users a great experience.

How to improve Time To First Byte:

  • Reduce HTTP requests
  • Consider a Respond First, Process Later (RFPL) cache
  • Again, consider using a CDN that’s close to you so your requests aren’t going around the world!

Why worry about this?

Any Google ranking improvement from the update in May should be considered as a bonus. In fact it’s quite likely that good page experience signals will be something of a “tiebreaker” factor. For example, if two pages have virtually the same content quality, then the one with better a user experience will likely rank higher.

But the main reason for optimizing page experience is to make a better product for your users and customers. In eCommerce a fast site that’s great to use is a site that converts.

Contact us via hello@maqe.com.

How MAQE can help

Our UX specialists, designers and developers can help you optimize your page experience so it delights users and Google. Get in touch via [email protected] to find out more.