Measuring Scrolling Stickiness

Does your scroll bar get stuck when you scroll down to a webpage or do you see some delay while loading your images once you scroll down to the bottom of the screen? This erratic behavior that sometimes occurs while scrolling is referred to as ‘scrolling stickiness.’

Smooth scrolling is essential to a seamless user experience, but sometimes the browser requires complex processes in order to reconstruct a page which can negatively affect the user experience. Every action that’s performed on a webpage adds to the browser overhead, whether it’s clicking on an item or scrolling down the page.

The browser must repaint the page frame by frame when the user scrolls down the length of the webpage. The less time the browser takes to repaint, better the visual experience will be for an end user. When scrolling takes place, the browser spends time recalculating the layout because the DOM node is changed. All of these occurrences can result in a poor scrolling experience.

So, what causes scrolling stickiness? There are many factors at play here:

1. Invalidation of layout and styles that cause a delay in rendering
2. If image resizing is happening too often, then time to paint can increase
3. Change in the page layout, so the browser spends time recalculating it

You can read more about what causes scrolling stickiness here. In this blog, we will be discussing how we can monitor a page for scrolling stickiness and determine the cause.

Behind the scenes

According to researchers, an FPS (frames per second) value of 60 corresponds to a smooth visual experience for the human eye. This means that a frame should take no longer than 16ms (1000ms/60 FPS) to load.

To determine the impact of scrolling stickiness, you should check if the FPS value for a page is close to the value of 60. If isn’t, you should check which section of the page is contributing to the low FPS value and try to fix it.

You can use a Chrome developer tool to calculate the FPS value. Click on Timeline in the Chrome developer tool and hit the record button:

Once the recording begins, it calculates the FPS value at every instance as you scroll up or down the page.

In the screenshot below, we can see the FPS values on a timeline spanning from 2000ms to 14000ms at different intervals while scrolling through the page. In the graph, the green line shows the different FPS values with a maximum limit of 60 FPS. The red bars on the top denote longer frames which indicate stickiness. An optimized page will have a framerate within the maximum FPS limit and the ideal graph would display a consistent green line to indicate smooth scrolling.

Also, you can go to Console, select rendering, and choose FPS meter. Once you enable this, it will start calculating FPS at every instance while you interact with the page.

Instead of manually checking FPS, we can monitor stickiness on the page on a continuous basis using Catchpoint Synthetic Monitoring. To understand this better, we’ve created an approach where we open a webpage and scroll down to the bottom of that page in certain intervals/chunks. For example:

1. Let’s say total length to scroll down to the bottom of a page is 50,000 pixels. The script will allow the page to scroll down in a chunk of 100 pixels 500 times to reach the bottom of that page.
2. The FPS value is calculated at each chunk; this will allow us to determine if scrolling stickiness exists in any of the chunks.

The standard value of FPS should be close to 60. If you see a consistently low value (for example, 15-20) for most of the chunks/intervals, then you can confirm there is stickiness while scrolling your webpage.

Using our analysis module, we can see multiple values for FPS calculated at each interval to check the stickiness on a page. Let’s look at some examples to demonstrate the different components of FPS and what it indicates about the scrolling behavior on your page.

Every time a test runs, FPS value is calculated for each interval which totals 500 times (in this example). The minimum value of FPS out of those 500 values is represented by “min_fps” in our analysis module.

Below is a CDF chart calculating the minimum FPS value for each run, the X-axis shows the percentile range from 0-100. When the test ran, more than 60% of the time the minimum value of the FPS calculated dropped to ~2 (X-axis). Ideally, it should be close to 60.

Based on this value, we plotted another chart for the FPS values calculated at each interval; the values were minimum as shown below. The low FPS values at different intervals of the page (Y-axis) indicates inconsistency in FPS throughout the page.

For example, on May 8 at 14:00 the minimum FPS value was 137.

Consider another example in which we are calculating the median value of FPS (Y-axis) for each test run. At 03:00, the median FPS value was 57.36. Please note, this value is the median of all the FPS value calculated at each chunk/interval which scrolling down the page.

Continuously monitoring a page at different instances while scrolling and calculating the corresponding FPS values will help determine page stickiness. This helps you understand if the page is doing large style or if it is taking too long to recalculate the layout. Once such issues are identified, you can easily rectify it and ensure your website provides the optimum user experience.