Welcome!

Web Performance is a Journey, Not a Destination

Mehdi Daoudi

Subscribe to Mehdi Daoudi: eMailAlertsEmail Alerts
Get Mehdi Daoudi via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Blog Feed Post

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:

http://blog.catchpoint.com/wp-content/uploads/2017/08/fps1-300x267.png 300w" sizes="(max-width: 574px) 100vw, 574px" />

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.

http://blog.catchpoint.com/wp-content/uploads/2017/08/fps2-300x84.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps2-768x215.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps2-1024x287.png 1024w" sizes="(max-width: 1536px) 100vw, 1536px" />

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.

http://blog.catchpoint.com/wp-content/uploads/2017/08/fps3-300x65.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps3-768x166.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps3-1024x221.png 1024w" sizes="(max-width: 1168px) 100vw, 1168px" />

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.

http://blog.catchpoint.com/wp-content/uploads/2017/08/fps4-300x82.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps4-768x210.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps4-1024x280.png 1024w" sizes="(max-width: 1332px) 100vw, 1332px" />

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.

http://blog.catchpoint.com/wp-content/uploads/2017/08/fps5-300x79.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps5-768x203.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps5-1024x271.png 1024w" sizes="(max-width: 1325px) 100vw, 1325px" />

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

http://blog.catchpoint.com/wp-content/uploads/2017/08/fps6-300x101.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps6-768x258.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps6-1024x344.png 1024w" sizes="(max-width: 1287px) 100vw, 1287px" />

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.

http://blog.catchpoint.com/wp-content/uploads/2017/08/fps7-300x75.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps7-768x192.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/fps7-1024x256.png 1024w" sizes="(max-width: 1373px) 100vw, 1373px" />

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.

The post Measuring Scrolling Stickiness appeared first on Catchpoint's Blog - Web Performance Monitoring.

Read the original blog entry...

More Stories By Mehdi Daoudi

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.