CLS
The CLS page of RUM Monitoring shows how much pages jump for real visitors, when the shifts happen and which elements move.
The CLS page of RUM Monitoring shows how much your pages jump around while they load for real visitors. It also shows when the shifts happen and which elements move.
What CLS means
CLS (Cumulative Layout Shift) measures how much the page jumps around while it loads. An example is a button that moves just as the visitor taps it. A score of 0 means that nothing moved. CLS is one of Google's three Core Web Vitals.
CLS is a score without a unit, not a time. Layout shifts make visitors tap the wrong thing or lose their place in the text.
CLS thresholds
| Band | CLS score |
|---|---|
| Good | 0.1 or less |
| Needs improvement | 0.25 or less |
| Poor | More than 0.25 |
The headline value is the value of a typical visit: 3 out of 4 page loads shifted this much or less. Google passes CLS when at least 75% of visits are Good. See Metrics and thresholds.
Before you start
- RUM Monitoring needs the RUM script on your pages. See Install the RUM script.
- In the sidebar, open Web performance > RUM Monitoring > CLS.
- Select Phone or Desktop in the filter dock. Every card on the CLS page shows the selected device only.
You can also filter by date, URL Path, Country and Browser, and compare with an earlier period. See Filters and the device.
The CLS verdict
The verdict is one sentence at the top of the CLS page. It shows only when it says something new:
- "On Phone, CLS fails" when the typical CLS is not Good. If the score is only a little over the limit, it adds "Just over the limit."
- "On Phone, CLS passes but is close to the limit" when the typical CLS is Good, but within 10% of 0.1.
- "On Phone, CLS got 20% more unstable" or "got 20% better" when compare is on and CLS changed by 15% or more.
The verdict needs 30 visits or more. If CLS passes with room to spare, the CLS page shows no verdict.
Site Health Monitoring banner
If Site Health Monitoring found issues or opportunities about the Core Web Vitals of the selected device, a banner shows their number. Click Open in Site Health Monitoring to see them. See Site Health Monitoring.
Cumulative Layout Shift card
The Cumulative Layout Shift on Phone card (or on Desktop) has two tiles and one chart. Click a tile to show its chart.
- Cumulative Layout Shift: the typical CLS in the period, colored by its band.
- Good visits: the share of visits with a Good CLS. The tile is green at 75% or more, orange at 50% or more, and red below 50%.
A tile from fewer than 30 visits is gray, with a note such as Only 12 visits. A tile without data shows Not measured for this period.
The CLS chart
For Cumulative Layout Shift, the chart shows the typical CLS over time. Two lines mark the Good limit (0.1) and the Poor limit (0.25). With compare on, a dashed line shows the earlier period.
For Good visits, the chart shows the share of Good, Needs improvement and Poor visits over time, stacked to 100%. A line marks Passes at 75%, where Google passes CLS.
Use the Hour, Day, Week or Month control to group the chart. A note on a day of the chart tells you that VitalSentinel changed what RUM Monitoring measures, or calculated stored data again, on that day.
Google and your own visitors
The Google and your own visitors card compares your CLS with the CLS that Google publishes for your site. It has four tiles:
| Tile | What it covers |
|---|---|
| Google, Phone and Google, Desktop | Chrome visits to the whole site, last 28 days |
| Your visitors, Phone and Your visitors, Desktop | All visits in the selected period and filters |
Google rates your site from Chrome visits only. RUM Monitoring measures all of your visitors, so the two can differ. A big gap means that Chrome users have a different experience than other visitors.
Click Open CrUX Monitoring to see Google's data. If Google has not published data for your site, the card says "Google has not published data for this site yet". See CrUX Monitoring.
If CrUX Monitoring is not set up for the domain, the card shows Set up CrUX Monitoring instead. A tile without a figure says "Google has not published enough visits for this device yet." or "Too few visits measured this yet."
Where it is slow
The Where it is slow card lists your pages for the selected device. By default, the pages with the most visits that were not Good come first.
| Column | What it shows |
|---|---|
| Page | The page address. The menu opens the page in other modules. |
| Visits | The visits to the page in the period |
| Google clicks | The clicks from Google web search, from Google Search Console |
| CLS | The typical CLS of the page, with its change when compare is on |
| Good visits | The share of visits with a Good CLS |
| Visits affected | The visits on the page that had a CLS above the Good limit |
Click a header to sort. A page with fewer than 30 visits shows a dash in CLS. Owners and admins can click Watch in Page Monitoring on a row. Fix the first page in the list first.
Countries
The Countries card shows a world map for the selected device. Each country has the color of its typical CLS: Good, Needs improvement or Poor. Low sample means too few visits to rate, and No data means no visits.
Hover a country to see its visits, its figures, the change from the earlier period and the visits affected.
When shifts happen
The When shifts happen card splits CLS by the position of the visitor on the page. It has three rows:
| Row | What it counts |
|---|---|
| All layout shifts | Every shift, wherever the visitor was on the page. This is the headline CLS. |
| Before the visitor scrolled | Shifts while the first screen loads |
| After scrolling | Shifts further down the page: late images, ads and embeds |
Each row shows the typical CLS and the share of Good visits, with the change when compare is on. Google passes a Core Web Vital at 75% Good visits.
Shifts before the visitor scrolled usually come from images and ads without a fixed size. Shifts after scrolling usually come from content that loads late further down the page.
What moves
The What moves card lists the elements that shift most and the pages where they shift. It shows the selected device only.
| Column | What it shows |
|---|---|
| What moves | The kind of element in plain words, for example "An image" or "An ad", then its CSS selector |
| Share of shifts | The share of page loads with a layout shift where this element moved most |
| Page loads | The page loads where this element moved most |
| Moves most on | The pages where the element moves most |
The table shows 10 elements on each page of results. Hover a cut-off selector or page list to see all of it.
Why the What moves card can be empty
The tracking script sends the element names. If the card says "No moving elements yet", one of these is true:
- The visits came before your site loaded the updated RUM script.
- The RUM script has
data-mask-selectorsset totrue, which removes the element names. See Install the RUM script.
How to improve CLS
Give each element that moves a fixed size before it loads:
- Find the element in the What moves card.
- Open one of the pages in Moves most on.
- Set a width and height, or an aspect ratio, on the image, video or embed.
- Reserve space for ads and banners before they load.
- Do not add content above content that is already on screen.
Web fonts can also cause shifts when the text changes size. Use a fallback font with a similar size.
Troubleshooting
Why is my CLS 0?
A CLS of 0 means that nothing moved on the page in a typical visit. This is the best score.
Why does the CLS page say "No Cumulative Layout Shift data for this period"?
There were no visits on the selected device in these dates and filters. Select the other device in the dock, select a longer date range, or remove a filter.
Why does the When shifts happen card show a dash?
If fewer than 30 visits measured shifts of that kind, the card shows a dash. The note says "Fewer than 30 visits measured shifts like this." Select a longer date range.
Why do Google and RUM Monitoring show a different CLS?
Google measures Chrome visits to the whole site over 28 days. RUM Monitoring measures all visitors in your selected dates and filters. Compare the two in the Google and your own visitors card.
Related
- Overview - all Core Web Vitals, filters and page-view limits
- Page Views - the layout shift details of one visit
- Metrics and thresholds - the limits of every metric
- CrUX Monitoring - Google's own CLS for your site
- Page details in CrUX Monitoring - Google's history for one page
