1. Continuous Web
Performance
Monitoring with
Jenkins
Vienna, July 17th 2013

2. Web Performance is serious
The correlation between web performance and conversion
is a
Measuring performance provides a lever for Fun & Profit
Measuring it continuously helps to identify issues early
…and the best part about that, it is
fact

3. to set up

4. so easy, it will make you

5. Jenkins, YSlow, sitespeed.io
There is a number of different tools to integrate into Jenkins for
web performance monitoring
Two of them are: YSlow and sitespeed.io
Different tools, different approaches:
Track one or many URLs with one job
Which metrics to apply

6. How does it
work?

7. Steps
1. Set up Jenkins
2. Set up YSLow and/or sitespeed.io
3. Configure Jenkins projects

8. Setting up Jenkins
Packaged for a number OS and distributions
E.g.
Often, the Jenkins package shipped with the OS is out-of-date
Install additional plugins via the Jenkins UI:
TAP plugin
Plot plugin
apt-get install jenkins

9. Steps
1. Set up Jenkins ✓
2. Set up YSLow and/or sitespeed.io
3. Configure Jenkins projects

10. YSlow & Jenkins
Built on PhantomJS
Sample install on a Debian (sid) box
apt-get install phantomjs unzip
mkdir -p ~/apps/yslow.js &&
curl http://yslow.org/yslow-phantomjs-3.1.5.zip | funzip > ~/apps/yslow.js/yslow.js

11. Steps
1. Set up Jenkins ✓
2. Set up YSLow ✓ and/or sitespeed.io
3. Configure Jenkins projects

12. sitespeed.io & Jenkins
Built on PhantomJS (>=1.9)
Sample install on a Debian (sid) box
apt-get install phantomjs xsltproc git
mkdir ~/apps/ && cd ~/apps &&
git clone https://github.com/soulgalore/sitespeed.io.git

13. right?

14. Steps
1. Set up Jenkins ✓
2. Set up YSLow or sitespeed.io ✓
3. Configure Jenkins projects

15. Sample project using YSlow
Shell commands
# Create TAP result with the YSLow grade results
phantomjs $pathto/yslow.js -i grade
-t '{"overall": "C", "ycdn": "F"}'
-f tap http://xims.info/ > yslow.tap
# Create component metrics result for plotting
phantomjs $pathto/yslow.js -i comps
-f xml http://xims.info/ > yslow.xml

16. Sample project using YSlow
Post-Build Action Plugins

17. Sample project using YSlow
Post-Build Action Plugins

18. Sample project using
sitespeed.io
Shell commands
# Create an HTML report
$pathto/sitespeed.io
-r "$WORKSPACE/sitespeed-result/"
-u http://xims.info/
# Create Junit output
mkdir -p "$WORKSPACE/sitespeed-junit"
/home/pepl/apps/sitespeed.io/sitespeed-junit.io
-r "$WORKSPACE/sitespeed-result/"
-o "$WORKSPACE/sitespeed-junit" -l 85 -a 85

19. How does it look like?
Screenshots & Live Demo

20. TAP Results sample (YSlow)

21. Junit Results sample
(sitespeed.io)

22. Time To First Byte
sample graph

23. sitespeed.io HTML report
(from Jenkins project
workspace)

25. 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 deployment
GA can not be that specific
GA might not have performance stats for your domain

26. References
YSlow for Phantom.js
Jenkins & sitespeed.io

27. Thank You!
Questions?