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
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
DXWorldEXPO LLC announced today that Dez Blanchfield joined the faculty of CloudEXPO's "10-Year Anniversary Event" which will take place on November 11-13, 2018 in New York City. Dez is a strategic leader in business and digital transformation with 25 years of experience in the IT and telecommunications industries developing strategies and implementing business initiatives. He has a breadth of expertise spanning technologies such as cloud computing, big data and analytics, cognitive computing, m...
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
DXWorldEXPO LLC announced today that Kevin Jackson joined the faculty of CloudEXPO's "10-Year Anniversary Event" which will take place on November 11-13, 2018 in New York City. Kevin L. Jackson is a globally recognized cloud computing expert and Founder/Author of the award winning "Cloud Musings" blog. Mr. Jackson has also been recognized as a "Top 100 Cybersecurity Influencer and Brand" by Onalytica (2015), a Huffington Post "Top 100 Cloud Computing Experts on Twitter" (2013) and a "Top 50 C...
There is a huge demand for responsive, real-time mobile and web experiences, but current architectural patterns do not easily accommodate applications that respond to events in real time. Common solutions using message queues or HTTP long-polling quickly lead to resiliency, scalability and development velocity challenges. In his session at 21st Cloud Expo, Ryland Degnan, a Senior Software Engineer on the Netflix Edge Platform team, will discuss how by leveraging a reactive stream-based protocol,...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
Daniel Jones is CTO of EngineerBetter, helping enterprises deliver value faster. Previously he was an IT consultant, indie video games developer, head of web development in the finance sector, and an award-winning martial artist. Continuous Delivery makes it possible to exploit findings of cognitive psychology and neuroscience to increase the productivity and happiness of our teams.
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
The standardization of container runtimes and images has sparked the creation of an almost overwhelming number of new open source projects that build on and otherwise work with these specifications. Of course, there's Kubernetes, which orchestrates and manages collections of containers. It was one of the first and best-known examples of projects that make containers truly useful for production use. However, more recently, the container ecosystem has truly exploded. A service mesh like Istio addr...
As DevOps methodologies expand their reach across the enterprise, organizations face the daunting challenge of adapting related cloud strategies to ensure optimal alignment, from managing complexity to ensuring proper governance. How can culture, automation, legacy apps and even budget be reexamined to enable this ongoing shift within the modern software factory? In her Day 2 Keynote at @DevOpsSummit at 21st Cloud Expo, Aruna Ravichandran, VP, DevOps Solutions Marketing, CA Technologies, was jo...
Predicting the future has never been more challenging - not because of the lack of data but because of the flood of ungoverned and risk laden information. Microsoft states that 2.5 exabytes of data are created every day. Expectations and reliance on data are being pushed to the limits, as demands around hybrid options continue to grow.
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
As IoT continues to increase momentum, so does the associated risk. Secure Device Lifecycle Management (DLM) is ranked as one of the most important technology areas of IoT. Driving this trend is the realization that secure support for IoT devices provides companies the ability to deliver high-quality, reliable, secure offerings faster, create new revenue streams, and reduce support costs, all while building a competitive advantage in their markets. In this session, we will use customer use cases...