2021 Google Algorithm Update / Get Your Core Web Vitals Ready Now

What’s Core Web Vitals?

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

Core Web Vitals are the subset of Web Vitals that apply 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!).”

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

Largest Contentful Paint (LCP)

It measures perceived load speed and marks the point in the page load timeline when the page’s main content has likely loaded. A fast LCP helps reassure the user that the page is useful.

To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay (FID)

It measures responsiveness and quantifies the experience users feel when trying to first 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 layout shift of visible page content. A low CLS helps ensure that the page is delightful.

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

How to Measure Core Web Vitals

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.

Workflow to Improve Your User-Experience With Core Web Vitals

On your Google Search Console (GSC) go to the Core Web Vitals report to identify groups of pages that require attention for improvement.

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”.

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 the desktop.

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 element in the viewport becomes visible.

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

Things to look at:

Your hosting: a faster server response will improve LCP. If you run your website on WordPress we recommend using Pantheon as your hosting provider. They provide a fast hosting infrastructure, alongside effective cache mechanisms, a CDN and SSL certificate.

Website cache: adding a cache mechanism to your website will help you serve your content from its cached version, minimising 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 optimise your assets and pages, as well as preconnect some external domains for faster rendering. Pantheon maintains the WP Redis plugin, which is seamlessly integrated with their 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 real user interaction in order to measure the response delay, so it cannot be simulated at the lab. Google recommends looking 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.

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 nonpriority 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.

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 fewer 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/

Key takeaways

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 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

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

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.

Additional Notes

You can measure the performance of your web page using PageSpeed Insights or Google Measure tool, where you can login and keep a history of your performance records.

To test the mobile-friendliness of your website you can use the Google Mobile-Friendly Test tool.