Velocity Conf 2013 Workshop: Avoiding Web Performance Regression

16,008 views
15,498 views

Published on

Published in: Technology
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,008
On SlideShare
0
From Embeds
0
Number of Embeds
6,678
Actions
Shares
0
Downloads
49
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

Velocity Conf 2013 Workshop: Avoiding Web Performance Regression

  1. @marcelduranAvoidingPerformanceRegressionWebemail@marcelduran.com
  2. about me
  3. twitter: web-coreFlight
  4. web-perf
  5. not covered todaybackend cdn / infra mobile
  6. life before twitter
  7. THE PROBLEMnewfeaturebugfixomg!new release
  8. easiest solutionnew release2.5s 2.3syay!#kidding
  9. typicaldev cyclebuildusersdeploytestmonitorreactive
  10. branches * (new features + bugfixes)
  11. rumnew release
  12. case: +100mspreviousdiffnew
  13. HANDS ONcuzillion.com
  14. yslowyslow.org
  15. har{"log": {"version": "1.1","pages": [{"startedDateTime": "2012-08-16T18:27:29.000+00:00","id": "page_1_0","pageTimings": {"onLoad": 13701,. . .
  16. generating har
  17. webpagetest.org
  18. $ npm install yslow -g
  19. showslow.com
  20. + +
  21. case: Yahoo! Profilecontinuous deploymentacceptanceregressionsmokeintegrationunitninjachuck norris
  22. butperformance
  23. before after
  24. before after
  25. phantomjsvar page = require(webpage).create(),url = http://www.phantomjs.org/,start = new Date();page.open(url, function(status) {console.log(new Date() - start);phantom.exit();});
  26. yslow + phantomjs$ phantomjs yslow.js http://yslow.org
  27. new test output formats-f, --format <format>( json | xml | plain | tap | junit )
  28. test specs-t, --threshold <score>( [0-100] | [A-F] | {json} )default: 80
  29. test specs examples-t B-t 75-t {"overall": "C", "ycdn": "F"}-t {"ycdn": "F", "yexpires": 75}
  30. browser impersonation-u, --ua "<user agent>"e.g: -u "Mozilla/5.0 (iPhone; ...)"-vp, --viewport <WxH>e.g: -vp 320x480
  31. authentication-ch, --headers <JSON>e.g: -ch {"Cookie": "auth_token=foo"}
  32. jenkins
  33. +wpobuild testdeploymonitoruserswpoproactive
  34. buildtestdeploymonitoruserswpoproactive
  35. high performanceA A A A ...
  36. whats your metric?page loaddomReadyTTFBstart renderTTFspeed indexAFTfoobar
  37. TTFTTTFT
  38. RESTful APIXMLJSON
  39. marcelduran.com/webpagetest-api
  40. webpagetest-api wrapper overviewhttp://webpagetest.org/testStatus.php?test=121119_DJ_J0Rvar WebPageTest = require(webpagetest);var wpt = new WebPageTest(webpagetest.org, API_key);wpt.getTestStatus(121119_DJ_J0R, function(err, data) {console.log(err || data);});$ webpagetest status 121119_DJ_J0Rhttp://webpagetest.aws.af.cm/status/121119_DJ_J0R
  41. commandsstatusresultslocationstesterstestcancelharpagespeedutilizationrequesttimelinenetlogconsoletestinfowaterfallscreenshot
  42. optionsserveraftbodiesfirstfullignoresslkeepuanetlognoadsnoheadersnoimagesnooptnoscriptonloadprivatesensitivestandardstimelinevideoauthtypeblockbwdowntcpdumpbwupconnectionsconnectivitydomdurationjpegkeylabellatencylocationloginnotifypasswordpingbackplrrequestrunsspof
  43. build testdeploymonitorwpoperfusersproactive+perfperegrine
  44. geococcyx californianuswhy peregrine?peregrine falconover 200mphroadrunner
  45. overview123456789custom deploymedian of n timesscript test
  46. dev? staging? prod? perf?same locationPerfBoxWPTagent(vm)twitter.comcdn assets
  47. screenshots
  48. opensourcecoming soon!
  49. whats keeping us busyfoobarbazmastervs+ ?mspass/no-pass
  50. questions?
  51. @JoinTheFlock
  52. image creditsJava logo: aha-soft.comGauge: WebIconSet.comNetwork: Everaldo.comIphone: pierocksmysocks.deviantart.comYahoo logo: YOOtheme.comFlower: linux.softpedia.com/developer/Oliver-Scholtz-93.htmlBandaid: nahas-pro.deviantart.comNeedle: business2community.com/social-media/4-tips-for-converting-social-media-leads-0144554Ninja: Iconka.comFalcon1: vt.audubon.org/events/peregrine-falcon-recovery-lectureFalcon2: mendobrew.com/blog/476_the-peregrine-falconFork: fortawesome.github.io/Font-Awesome

×