Simulating real users in the lab to debug CLS issues
Tags: webdev, webperf, webvitals
Published: 2021-07-16 16:46:29

---
title: Simulating real users in the lab to debug CLS issues
published: true
description: A walkthrough of using WebPageTest to scroll a page and incur layout shifts that would otherwise be missed by lab tools.
tags: webdev, webperf, webvitals
//cover_image: https://direct_url_to_image.jpg
---

A developer on Stack Overflow posted [this question](https://stackoverflow.com/q/68403871/1022333) and it went something like this:

_Search Console is telling me that one of my pages has poor Cumulative Layout Shift (CLS). When I visit PageSpeed Insights to debug the issue, the lab data from Lighthouse is reporting a perfect CLS score of 0.0. I'm frustrated. What do I do?_

Here was my response.

----

CLS can be a difficult metric to debug using lab tools like Lighthouse because they only evaluate the initial viewport by default. In other words, they don't behave like a real user. When a real user lands on a page, they scroll around and click on things.

So when trying to debug Core Web Vitals issues, especially for CLS, I'd recommend visiting the page yourself with a diagnostic tool like the [Web Vitals extension for Chrome][1] enabled.

I visited the page and after just a second of using it I was able to incur a substantial layout shift (0.484) by scrolling the page down:

[![enter image description here][2]][2]

It seems like what's happening is that the ad below "category : humour" is injected into the page, and all of the contents below it shift down.

[![enter image description here][3]][3]

To reproduce this, I used WebPageTest to simulate the real-user behavior of scrolling the page down.

1. Go to [webpagetest.org][4]
2. Enter your URL
3. Go to the "Advanced" tab of the Advanced Settings section
4. Under "Inject Script", enter this code to scroll the page by 500px:
    ```js
  window.addEventListener('DOMContentLoaded', function() {
      window.scrollBy(0, 500);
  });
    ```
5. Start the test

You can see the [results here][5].

[![enter image description here][6]][6]

[![enter image description here][7]][7]

[![GIF of the page load][9]][9]

The filmstrip view above and [video][8] demonstrate the problem. After the page partially loads and is scrolled down at the 8 second mark, we can see that the ad asynchronously loads and pushes the content below it down, incurring a layout shift with a score of 0.409, enough to cause the page experience to be evaluated as "poor".

If most of your users behave like this by scrolling down shortly after the page loads, that could be why your 75th percentile CLS score is in the "poor" category.

To fix these kinds of layout shifts caused by ads, refer to the suggestions at https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions:

> Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performance/revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can lead to a suboptimal user experience due to ads pushing visible content you're viewing down the page.


  [1]: https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en
  [2]: https://i.stack.imgur.com/ooLWE.png
  [3]: https://i.stack.imgur.com/xn9wU.png
  [4]: https://www.webpagetest.org/
  [5]: https://www.webpagetest.org/video/compare.php?tests=210716_AiDcCE_b4ccb93cf09820aa422371691cd4aa3d-r%3A2-c%3A0&highlightCLS=1&thumbSize=200&ival=1000&end=doc
  [6]: https://i.stack.imgur.com/rhot7.png
  [7]: https://i.stack.imgur.com/fPhkJ.png
  [8]: https://www.webpagetest.org/video/view.php?tests=210716_AiDcCE_b4ccb93cf09820aa422371691cd4aa3d-r:2-c:0
  [9]: https://www.webpagetest.org/video/video.php?tests=210716_AiDcCE_b4ccb93cf09820aa422371691cd4aa3d-r:2-c:0&format=gif