continuous web performance monitoring with jenkins

Continuous WebPerformance

Monitoring withJenkins

Vienna, July 17th 2013

Web Performance is seriousThe correlation between web performance and conversionis a Measuring performance provides a lever for Fun & ProfitMeasuring it continuously helps to identify issues early…and the best part about that, it is

fact

to set up

so easy, it will make you

Jenkins, YSlow, sitespeed.ioThere is a number of different tools to integrate into Jenkins forweb performance monitoringTwo of them are: YSlow and sitespeed.ioDifferent tools, different approaches:

Track one or many URLs with one jobWhich metrics to apply

How does itwork?

Steps1. Set up Jenkins2. Set up YSLow and/or sitespeed.io3. Configure Jenkins projects

Setting up JenkinsPackaged for a number OS and distributionsE.g.

Often, the Jenkins package shipped with the OS is out-of-dateInstall additional plugins via the Jenkins UI:

TAP pluginPlot plugin

apt-get install jenkins

Steps1. Set up Jenkins ✓2. Set up YSLow and/or sitespeed.io3. Configure Jenkins projects

YSlow & JenkinsBuilt on PhantomJSSample install on a Debian (sid) box

apt-get install phantomjs unzipmkdir -p ~/apps/yslow.js &&\curl http://yslow.org/yslow-phantomjs-3.1.5.zip | funzip > ~/apps/yslow.js/yslow.js

Steps1. Set up Jenkins ✓2. Set up YSLow ✓ and/or sitespeed.io3. Configure Jenkins projects

sitespeed.io & JenkinsBuilt on PhantomJS (>=1.9)Sample install on a Debian (sid) box

apt-get install phantomjs xsltproc gitmkdir ~/apps/ && cd ~/apps &&\git clone https://github.com/soulgalore/sitespeed.io.git

right?

Steps1. Set up Jenkins ✓2. Set up YSLow or sitespeed.io ✓3. Configure Jenkins projects

Sample project using YSlowShell commands

# Create TAP result with the YSLow grade resultsphantomjs $pathto/yslow.js -i grade \ -t '{"overall": "C", "ycdn": "F"}' \ -f tap http://xims.info/ > yslow.tap# Create component metrics result for plottingphantomjs $pathto/yslow.js -i comps \ -f xml http://xims.info/ > yslow.xml

Sample project using YSlowPost-Build Action Plugins

Sample project using YSlowPost-Build Action Plugins

Sample project usingsitespeed.io

Shell commands

# Create an HTML report$pathto/sitespeed.io \ -r "$WORKSPACE/sitespeed-result/" \ -u http://xims.info/# Create Junit outputmkdir -p "$WORKSPACE/sitespeed-junit"/home/pepl/apps/sitespeed.io/sitespeed-junit.io \ -r "$WORKSPACE/sitespeed-result/" \ -o "$WORKSPACE/sitespeed-junit" -l 85 -a 85

How does it look like?Screenshots & Live Demo

TAP Results sample (YSlow)

Junit Results sample(sitespeed.io)

Time To First Byte sample graph

sitespeed.io HTML report (from Jenkins project

workspace)

Why not just use GA instead?Question is wrong, use GA in addition!Still: Via Jenkins you'll get

Checks and Alerts directly after commit or deploymentGA can not be that specificGA might not have performance stats for your domain

ReferencesYSlow for Phantom.jsJenkins & sitespeed.io

Thank You! Questions?