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.

Latest Stories
SYS-CON Events announced today that Daiya Industry will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Daiya Industry specializes in orthotic support systems and assistive devices with pneumatic artificial muscles in order to contribute to an extended healthy life expectancy. For more information, please visit https://www.daiyak...
SYS-CON Events announced today that Nihon Micron will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Nihon Micron Co., Ltd. strives for technological innovation to establish high-density, high-precision processing technology for providing printed circuit board and metal mount RFID tags used for communication devices. For more inf...
SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
SYS-CON Events announced today that Suzuki Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Suzuki Inc. is a semiconductor-related business, including sales of consuming parts, parts repair, and maintenance for semiconductor manufacturing machines, etc. It is also a health care business providing experimental research for...
"Our strategy is to focus on the hyperscale providers - AWS, Azure, and Google. Over the last year we saw that a lot of developers need to learn how to do their job in the cloud and we see this DevOps movement that we are catering to with our content," stated Alessandro Fasan, Head of Global Sales at Cloud Academy, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Enterprises are moving to the cloud faster than most of us in security expected. CIOs are going from 0 to 100 in cloud adoption and leaving security teams in the dust. Once cloud is part of an enterprise stack, it’s unclear who has responsibility for the protection of applications, services, and data. When cloud breaches occur, whether active compromise or a publicly accessible database, the blame must fall on both service providers and users. In his session at 21st Cloud Expo, Ben Johnson, C...
21st International Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Me...
Many organizations adopt DevOps to reduce cycle times and deliver software faster; some take on DevOps to drive higher quality and better end-user experience; others look to DevOps for a clearer line-of-sight to customers to drive better business impacts. In truth, these three foundations go together. In this power panel at @DevOpsSummit 21st Cloud Expo, moderated by DevOps Conference Co-Chair Andi Mann, industry experts will discuss how leading organizations build application success from all...
SYS-CON Events announced today that mruby Forum will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. mruby is the lightweight implementation of the Ruby language. We introduce mruby and the mruby IoT framework that enhances development productivity. For more information, visit http://forum.mruby.org/.
Cloud-based disaster recovery is critical to any production environment and is a high priority for many enterprise organizations today. Nearly 40% of organizations have had to execute their BCDR plan due to a service disruption in the past two years. Zerto on IBM Cloud offer VMware and Microsoft customers simple, automated recovery of on-premise VMware and Microsoft workloads to IBM Cloud data centers.
Why Federal cloud? What is in Federal Clouds and integrations? This session will identify the process and the FedRAMP initiative. But is it sufficient? What is the remedy for keeping abreast of cutting-edge technology? In his session at 21st Cloud Expo, Rasananda Behera will examine the proposed solutions: Private or public or hybrid cloud Responsible governing bodies How can we accomplish?
Today traditional IT approaches leverage well-architected compute/networking domains to control what applications can access what data, and how. DevOps includes rapid application development/deployment leveraging concepts like containerization, third-party sourced applications and databases. Such applications need access to production data for its test and iteration cycles. Data Security? That sounds like a roadblock to DevOps vs. protecting the crown jewels to those in IT.
SYS-CON Events announced today that Cedexis will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Cedexis is the leader in data-driven enterprise global traffic management. Whether optimizing traffic through datacenters, clouds, CDNs, or any combination, Cedexis solutions drive quality and cost-effectiveness.
Elon Musk is among the notable industry figures who worries about the power of AI to destroy rather than help society. Mark Zuckerberg, on the other hand, embraces all that is going on. AI is most powerful when deployed across the vast networks being built for Internets of Things in the manufacturing, transportation and logistics, retail, healthcare, government and other sectors. Is AI transforming IoT for the good or the bad? Do we need to worry about its potential destructive power? Or will we...
The last two years has seen discussions about cloud computing evolve from the public / private / hybrid split to the reality that most enterprises will be creating a complex, multi-cloud strategy. Companies are wary of committing all of their resources to a single cloud, and instead are choosing to spread the risk – and the benefits – of cloud computing across multiple providers and internal infrastructures, as they follow their business needs. Will this approach be successful? How large is the ...