---
title: "Measuring Scroll Jank"
slug: "measuring-scroll-jank"
updated: 2023-01-06T15:49:20Z
published: 2023-01-06T15:49:19Z
canonical: "docs.catchpoint.com/measuring-scroll-jank"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.catchpoint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Measuring Scroll Jank

Transaction Tests support measuring **jank**, which is defined as a low frame rate when scrolling a webpage that can negatively impact the user experience. It is measured in Frames Per Second (FPS).

The transaction script below will visit the provided page and use the **Jank Meter** JavaScript to calculate the median FPS and scroll time (ms).

```
open(http://www.catchpoint.com/)

//get timestamp just before scrolling (javascript execution in "runScript" verbs happens after onload)
runScript(var beforeScroll = Date.now();)

//scroll to bottom of page and measure median FPS along the way
runScript(!function(a){function b(){for(var a=document.getElementsByClassName("fpser-lay"),b=a.length-1,c=b;c>=0;c--)try{document.body.removeChild(a[c])}catch(a){continue}var d=document.getElementById("fpser");d&&d.parentNode.removeChild(d)}function c(){if(b(),a.scrollTo(0,0),count=0,sh=Math.max(document.documentElement.clientHeight,a.innerHeight||0),h=Math.max(document.body.offsetHeight,document.body.scrollHeight)-sh,chunk=100,h-100<0)throw alert("I need to scroll, please reduce your browser height or choose a longer page!"),"Too short";fA=[],a.requestAnimationFrame(e),ll=!1}function e(){return ll?(a.scrollBy(0,chunk),tl=performance.now(),fA.push(parseInt(1e3/(tl-ll))),ll=tl,count+=chunk,void(count>=h?(a.scrollTo(0,0),j(fA)):a.requestAnimationFrame(e))):(ll=performance.now(),void a.requestAnimationFrame(e))}function f(a){d=g(a,100);var b=350,c=1,e=Math.max(parseInt(b/a.length-c),2),f="https://chart.googleapis.com/chart?chbh="+e+","+c+"&cht=bvs&chxt=y&chf=bg,s,00000000&chs=350x60&chm=D,FF0000,1,0,2,1&chd="+d;return console.log(f.length),f.substr(0,f.length-1)}function g(a,b){var c="e:";for(i=0,len=a.length;i<len;i++){var d=new Number(a[i]),e=Math.floor(l*l*d/b);if(e>l*l-1)c+="..";else if(0>e)c+="__";else{var f=Math.floor(e/l),g=e-l*f;c+=k.charAt(f)+k.charAt(g)}}return c}function j(a){var b=a.slice(0);a.sort(function(a,b){return a-b});var c=Math.floor(a.length/2);if(a.length%2)var d=a[c];else var d=(a[c-1]+a[c])/2;for(var h=(a[0],a[a.length-1],0),i=0;i<a.length;i++)h+=a[i];parseInt(h/a.length),f(b);window.fps=d}var k="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.",l=k.length;c(),a.FPS={},a.FPS.cl=b}(window);)

//give time to load or render page and add additional pause time if necessary 
pause("5000")

//get timestamp after scrolling
runScript(var afterScroll = Date.now();)

//calculate time to scroll
runScript(var scrollTime = afterScroll - beforeScroll)

//convert js variables to CP script variables
storeScriptVariable(fps, fps)
storeScriptVariable(scrollTime, scrollTime)

//show the value in the google querystring
open(https://www.google.com/?q=${var(fps)})
open(https://www.google.com/?q=${var(scrollTime)})
```

Example result:

![Pic_16.png](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/4402390203277-Pic_16.png)