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:
