Core Web Vitals For Better User Experience

27 Oct 2020 By Juan Pineda

TABLE OF CONTENTS:

It is a fact that users prefer websites with a great page experience.

Over the years, Google has added UX factors as criteria for its search engine to build ranking results. Some of these are the performance and mobile compatibility of websites.

In May 2020, Google announced that the search engine would include Core Web Vitals as a basis for evaluating the page experience. The page experience update was rolled out to all users globally by the end of August 2021. Therefore, optimizing the quality of the user experience is now key to the long-term success of any website.

We will introduce a new signal that combines Core Web Vitals with our existing signals for page experience to provide a holistic picture of the quality of a user’s experience on a web page.

As part of this update, we’ll also incorporate the page experience metrics into our ranking criteria for the Top Stories feature in Search on mobile, and remove the AMP requirement from Top Stories eligibility.

Google: Evaluating page experience for a better web

What Are Google’s New Core Web Vitals?

Web Vitals is an initiative by Google to provide a unified guide to quality signals that are essential to providing a great user experience on the web.

Core Web Vitals is the subset of Web Vitals that applies to all web pages. They are metrics related to speed, responsiveness, and visual stability, to help site owners measure user experience on the web.

According to Google:

“Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience. They measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads (so you don’t accidentally tap that button when it shifts under your finger – how annoying!).”

Core web vitals contribution to search signals for page experience
Source: Blogspot.com

The metrics used by the Core Web Vital signal will evolve over time. But as of September 2021 they are:

Largest Contentful Paint (LCP)

It measures the perceived loading speed and marks the point on the page loading timeline when the main content of the page is likely to have loaded. A quick LCP helps assure the user that the page is useful.

To provide a good user experience, LCP should occur within 2.5 seconds of the page first starting to load.

First Input Delay (FID)

It measures responsiveness and quantifies the experience users feel when they first try to interact with the page. A low FID helps ensure that the page is usable.

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

Cumulative Layout Shift (CLS)

It measures visual stability and quantifies the amount of unexpected design change in visible page content. A low CLS helps ensure a pleasant experience.

To provide a good user experience, pages should maintain a CLS of less than 0.1.

Good and bad values for LCP, FID and CLS
Source: googleusercontent.com

How to measure Core Web Vitals for my website

All of Google’s popular tools for web developers now support measurement of Core Web Vitals, helping you more easily diagnose and fix user experience issues. This includes Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, the Web Vitals Chrome extension and a new Chrome UX Report API.

With the Google Measure tool, you can keep a history of your page performance records.

Workflow to improve your user-experience with Core Web Vitals

As recommended by Google, follow this workflow to identify your website bottlenecks and improve your CWV:

  1. On your Google Search Console (GSC) go to the Core Web Vitals report to identify groups of pages that require attention for improvement.
  2. For each page that needs attention, use Google PageSpeed Insights (PSI) to identify issues around the metrics “Largest Contentful Paint”, “Total Blocking Time” (it correlates with FID) and “Cumulative Layout Shift”.
  3. Work locally on the recommendations provided by PSI using the Lighthouse dev tool to measure Core Web Vitals and get actionable guidance on exactly what to fix. 
    • To access Lighthouse, click F12 on your Chrome browser and you will see the tool as a tab of the developer tools. 
    • You can then run a performance report.
    • You can also install the Web Vitals Chrome extension to get a real-time view of metrics on desktop.
  4. Deploy your changes and analyse the improvements with PSI then enjoy the better metrics reported by GSC.

Optimize Largest Contentful Paint (LCP)

LCP measures when the largest content item becomes visible in the viewport.

This is usually associated with the main image of the page, but there are other factors involved, both from your website and externally.

Key things to look at:

  • Your hosting: Faster response from the server will improve the LCP. If you run your website on WordPress, we recommend that you use Pantheon as your hosting provider. They provide a fast hosting infrastructure, along with effective caching mechanisms, a content delivery network (CDN), and SSL certificates.
  • Website cache: Adding a caching mechanism to your website will help you serve your content from its cached version, minimizing the number of times your web server needs to get the data from your database server. Autoptimize is a great WordPress cache plugin that will help you compress and optimize your assets and pages as well as pre-connect some external domains for faster rendering. Pantheon maintains the WP Redis plugin, which seamlessly integrates with its Redis cache system.
  • Website code: CSS and JS should be minified and deferred if not critical. Commercial themes usually take care of this if they follow good practices. If you are creating a custom theme, make sure you use the best practices recommended by WordPress
  • Images: Optimize and compress images. If you don’t have any image optimization tool at your disposal, you can use the online tool Iloveimg to convert your images to the right format and size, and compress them to an optimal resolution. Additionally use an image CDN like Cloudimage for even better performance.

More information: https://web.dev/optimize-lcp/ 

Optimize First Input Delay (FID)

FID measures the time from when a user first interacts with a page (actions like clicks, key presses and entering text in fields) to the time when the browser is actually able to respond to that interaction.

FID requires a real user interaction in order to measure the response delay, so it cannot be simulated at the lab. Google recommends to look at the Total Blocking Time (TBT), a metric that, when improved, has a direct impact in the improvement of the FID.

A poor FID is usually associated with heavy JavaScript execution, therefore optimising your JavaScript will reduce FID.

Key things to look at:

  • Break down large JavaScript files and only load the necessary ones for the page.
  • Minify and compress your JavaScript files.
  • Defer non priority JavaScript files.
  • Review the 3rd party scripts that you are using and make sure that they are coming from a CDN and are minified.
  • Review 3rd party widgets that you are using (social media widgets for example) and try to include as few as possible.

More information: https://web.dev/optimize-fid/ 

Optimize Cumulative Layout Shift (CLS)

CLS measures how much content on the page moves about during the load.

This is usually caused by unstructured images, dynamic ads, embeds, and web fonts.

Key things to look at:

  • Add width and height attributes to your images and video elements.
  • If you have 3rd party ADS on your page, you are probably setting their placeholders dynamically to allow these slots to expand or collapse depending on the AD. You could try to predefine the AD slot area or move them down the middle or the bottom of the page, so they shift less elements than if they were at the very top of the page.
  • Review embeddable widgets  and iframes that can cause content shifting when loading (maps, social media posts, etc). Try to define the height of your embeds to minimize the amount of content that will be shifted down when the page loads.
  • If you use a custom web font, use the preload attribute to get the browser to load the font early in the page lifecycle. This will increase performance and will reduce CLS.

More information: https://web.dev/optimize-cls/ 

Wrapping It Up

With Google giving priority to the Mobile Index and incorporating Core Web Vitals as an important user experience signal, optimizing for quality of user experience is a must in your SEO strategy for 2021.

LCP Core Web Vitals Metric and how to improve it

LCP Status Metrics

LCP should occur within 2.5 seconds of when the page first starts loading.
How to fix LCP issues: Get a quality server to host your website. Choose a CDN to server your images. Review your code for quality. Minify and defer your CSS/JS when possible. Add cache components at different levels (Varnish, Redis, Cloudflare, cache plugins and so on).

FID Core Web Vitals Metric and how to improve it

FID Status Metrics

Pages should have a FID of less than 100 milliseconds.
How to fix FID issues: Break down large JS files and load only the ones needed for the page, defering their load when possible. Review carefully the 3rd party scripts and widgets that you use.

CLS Core Web Vitals Metric and how to improve it

CLS Status Metrics

Pages should maintain a CLS of less than 0.1.
How to fix CLS issues: Define the areas that your images, iframes and ADS take on your page, setting the appropriate dimensions (width and height) so the screen doesn’t jump when the page is loading. Preload your fonts when possible.

References & Credits

https://web.dev/vitals/

https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

https://developers.google.com/web/tools/chrome-user-experience-report

Are you struggling with Core Web Vitals?

As SEO experts, we get a lot of questions about Core Web Vitals and its importance for ranking on Google. Google stated that initially this page experience signal will only apply to mobile search, but we all know that Google wants your website to provide a great user experience, so the more you can work to improve your website as a whole (UX, speed, friendliness, accessibility) the better it will perform and rank.

Improving these metrics for your website requires web development knowledge. If you have been unable to improve the CWV for your website do not hesitate to contact us!

Juan Pineda Juan Pineda

With an Engineering degree in Business Computing and a passion for travelling, I've been fortunate enough to gain international experience working and living in the US, France, England and Spain. My skill set ranges from technical abilities (Programming, Databases, APIs, Architecture, Consulting) to management/business capabilities (Project Management, Strategy, Finance, Lean Startup).