Continuous Web Performance Monitoring with Jenkins

7,452 views

Published on

Published in: Technology, Design

Continuous Web Performance Monitoring with Jenkins

  1. 1. Continuous Web Performance Monitoring with Jenkins Vienna, July 17th 2013
  2. 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. 3. to set up
  4. 4. so easy, it will make you
  5. 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. 6. How does it work?
  7. 7. Steps 1. Set up Jenkins 2. Set up YSLow and/or sitespeed.io 3. Configure Jenkins projects
  8. 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. 9. Steps 1. Set up Jenkins ✓ 2. Set up YSLow and/or sitespeed.io 3. Configure Jenkins projects
  10. 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. 11. Steps 1. Set up Jenkins ✓ 2. Set up YSLow ✓ and/or sitespeed.io 3. Configure Jenkins projects
  12. 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. 13. right?
  14. 14. Steps 1. Set up Jenkins ✓ 2. Set up YSLow or sitespeed.io ✓ 3. Configure Jenkins projects
  15. 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. 16. Sample project using YSlow Post-Build Action Plugins
  17. 17. Sample project using YSlow Post-Build Action Plugins
  18. 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. 19. How does it look like? Screenshots & Live Demo
  20. 20. TAP Results sample (YSlow)
  21. 21. Junit Results sample (sitespeed.io)
  22. 22. Time To First Byte sample graph
  23. 23. sitespeed.io HTML report (from Jenkins project workspace)
  24. 24. 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
  25. 25. References YSlow for Phantom.js Jenkins & sitespeed.io
  26. 26. Thank You! Questions?

×