Use Google Chrome Canary to Measure Core Web Vitals

Digital Marketing

Post Tags


As the countdown continues to Google’s Core Web Vitals becoming a ranking factor, SEO professionals and devs are measuring the performance of the three key metrics and doing everything they can to improve them.

If you haven’t given the forthcoming update much thought, now is the time.

Particularly as Google’s John Mueller has confirmed that all three metrics must be met if you want to enjoy a ranking boost and potentially earn a soon-to-be-coveted badge in the search results (if Google decides to go ahead with the idea).

There are currently six tools to measure Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS); one of which is Chrome Dev Tools.

Performance Heads-Up Display (HUD)

On January 21, Performance Heads-Up Display (HUD) was previewed for Chrome and Chrome for Android that measures Core Web Vitals in-browser, rather than relying on an extension.

Accessing the features via Chrome Canary resolves limitations found when utilizing the Core Web Vitals report via the Chrome extension, including accessing metrics on mobile devices as well as desktop.

Chrome Dev Tools tweet

What is Chrome Canary?

Chrome’s development process consists of four release channels:

Advertisement

Continue Reading Below

When you downloaded Chrome, you most likely ended up with Stable.

Canary is essentially the experimental model.

You’ll find functions that may not be implemented into the Stable version of Chrome. It is a popular browser for developers, as it comes with new and untested flags, features, and APIs.

If you are excited to measure Core Web Vitals in-browser, you’ll need to access Chrome Canary and enable the feature.

How to Enable Core Web Vitals in Chrome Canary

The function isn’t automatically enabled, so you’ll have to do this first.

Advertisement

Continue Reading Below

Right-click and open Inspect Element.

Google inspect

Click the Customize and Control DevTools icon next to the settings icon and navigate to More Tools.

From here, scroll to the Rendering section.

Rendering in Inspect

Click to enable Core Web Vitals.

Enable core web vitals

You’ll then get a pop up with the results.

Advertisement

Continue Reading Below

You won’t get the same level of information as you would in Google Search Console, which showcases how many pages require attention.

However, you can use the Canary-method on any website, making it the perfect opportunity to compare your results to your competitor’s.

One pet peeve is that you have to enable it on every domain you want to check.

A Note On Layout Shift Regions

While enabling the Core Web Vitals, we recommend also enabling the layout shift regions tool.

This will highlight any content on the page that shifts, which will help identify CLS issues.

Not only will Core Web Vitals become an essential component of SEO to be optimized and managed, but it will also assist with improving user experience, making it a worth-while project regardless of ranking signals.

Advertisement

Continue Reading Below

Citations

https://addyosmani.com/blog/performance-hud/

https://usefyi.com/chrome-canary/





Source link

Comments are closed.