See Current Core Web Vitals with Chrome
Tags: chrome, corewebvitals, webperf, webdev
Published: 2022-06-28 14:02:06

---
title: See Current Core Web Vitals with Chrome
published: true
date: 2022-06-28 08:00:00 UTC
tags: chrome, corewebvitals, webperf, webdev
canonical_url: https://requestmetrics.com/web-performance/core-web-vitals-overlay
cover_image: https://requestmetrics.com/assets/images/webperf/overlay/overlay-teaser-2000.min.png
---

Google is using [Core Web Vitals](https://web.dev/vitals/) as a factor in [search results rankings](https://www.searchenginejournal.com/google-core-web-vitals-ranking-factor/415533/). They’ve also found that improving Core Web Vitals can lead to [increased traffic, sales and ultimately conversions](https://web.dev/vitals-business-impact/). But how can you see your Core Web Vitals easily?

<!--more-->

Request Metrics is the best solution for monitoring Core Web Vitals across your entire site, but if you just want a quick way to see the Core Web Vitals directly from your browser - check this out.

## The Core Web Vitals Overlay

Baked in to Chrome is a handy overlay that shows the Core Web Vitals of any page you visit.

![The Core Web Vitals Overlay](https://requestmetrics.com/assets/images/webperf/overlay/overlay.min.png)

As you navigate from page to page, it will automatically update itself.

### Enabling the Overlay

The Core Web Vitals overlay can be enabled through Chrome DevTools. It’s a bit hidden, so here’s a step-by-step guide to enabling it!

First you’ll want to open Chrome DevTools. On Windows this can be done with **Shift + CTRL + J** , and on Mac with **Option + ⌘ + J**.

In the upper right corner you’ll see a little icon with three dots next to the gear. Click on the three dots, then navigate to the **More Tools** sub-menu.

![Accessing the More Tools menu](https://requestmetrics.com/assets/images/webperf/overlay/more-tools.min.png)

Another flyout menu will appear. From that menu, select **Rendering** from the list.

![Open the Rendering Tab](https://requestmetrics.com/assets/images/webperf/overlay/rendering.min.png)

This will open a new tab at the bottom of Chrome DevTools. From there you’ll see a series of checkboxes to enable various features.

![The checkbox, at last!](https://requestmetrics.com/assets/images/webperf/overlay/cwv.min.png)

There’s a few Core Web Vital related features, but the overlay can be enabled by clicking the Core Web Vitals entry.

Once you’ve selected it, you’ll see a nice overlay.

### Desktop

The overlay appears in the upper right corner on Desktop

![Desktop Overlay](https://requestmetrics.com/assets/images/webperf/overlay/desktop-overlay.min.png)

### Mobile

On mobile the overlay takes up the entire top of the viewport. It will also use the correct CLS calculation based on the viewport size.

![Mobile Overlay](https://requestmetrics.com/assets/images/webperf/overlay/mobile-overlay.min.png)

### One Data Point Is Not Enough

The Core Web Vitals overlay is a great way to quickly measure web vitals metrics for a single user (you) on a single browser on a single page load. However, the Core Web Vitals change every time you load a page, and every one of your users will get different measurements. It’s important to measure _every_ user’s web vitals for _every_ page load in order to know how visitors are really experiencing your site.

[Sign up for Request Metrics](https://app.requestmetrics.com/signup) to get full insight in to how your visitors are experiencing your site.