@LANYONM / CRITICAL MASS, INC. D E V O P S D A Y S M I N N E A P O L I S 2 0 1 5 WEB PERFORMANCE MONITORING 

@LANYONM / CRITICAL MASS, INC. WE ARE A DIGITAL EXPERIENCE DESIGN AGENCY WITH A RELENTLESS FOCUS ON THE CUSTOMER 

@LANYONM / CRITICAL MASS, INC. THE FRONT-END DEVELOPER’S RELATIONSHIP TO PROD 

@LANYONM / CRITICAL MASS, INC. -  CSS -  Compile SASS -  Generate sprites -  Concatenate & minify css -  JavaScript -  Minify -  Bundle javascript -  Require Optimizer -  Rsync -  CDN? -  ??? EXAMPLE DEPLOY PROCESS 

@LANYONM / CRITICAL MASS, INC. WebPageTest.org By The Numbers Red – 6/28/13 •  Speed Index – 2992 •  PFA Display Time – 3.1s •  Page Load Time – 4.294s •  Page Size – 1.53 MB •  Total Number of Requests - 144 Blue – 8/16/13 •  Speed Index – 2220 •  PFA Display Time – 2.2s •  Page Load Time – 2.245s •  Page Size – 1.73 MB •  Total Number of Requests - 90 

@LANYONM / CRITICAL MASS, INC. REAL-TIME FEEDBACK? Nope, not without some more work. 

@LANYONM / CRITICAL MASS, INC. ENTER RUM: REAL USER MONITORING 

@LANYONM / CRITICAL MASS, INC. NAVIGATION TIMING 

@LANYONM / CRITICAL MASS, INC. GOLANG 

@LANYONM / CRITICAL MASS, INC. https://github.com/lanyonm/http-stats-collector http://blog.lanyonm.org/articles/2015/03/29/golang-http-stats-collector.html 

@LANYONM / CRITICAL MASS, INC. /nav-timing Navigation Timing information sent back to the server. Used to easily determine if a deploy has introduced a performance regression. /js-error Uses a global javascript error catch statement to capture errors and send them back to the server. Useful as a front-end error log. /csp-report Used to collect Content Security Policy violation reports. Useful in more advanced circumstances where you’re dialing in on the details. PRIMARY ROUTES http-stats-collector 

@LANYONM / CRITICAL MASS, INC. NAV-TIMING DATA 

@LANYONM / CRITICAL MASS, INC. JS ERROR REPORTING 

@LANYONM / CRITICAL MASS, INC. NAV-TIMING DATA: VERY COOL JS ERROR REPORTING: GAME CHANGER 

@LANYONM / CRITICAL MASS, INC. OPERATIONALIZE BEING VALUABLE ISN’T ENOUGH. IT SHOULD ALSO BE EASY. 

@LANYONM / CRITICAL MASS, INC. -  Standardization -  Reproducibility -  Scalability USE CHEF 

@LANYONM / CRITICAL MASS, INC. PROVIDE SAMPLE JAVASCRIPT -  Not dependent on any frameworks -  Can be easily integrated with most projects 

@LANYONM / CRITICAL MASS, INC. PART OF THE STANDARD STACK 

@LANYONM / CRITICAL MASS, INC. GIVE YOUR TEAMS THE TOOLS TO FORM THIS RELATIONSHIP WITH PROD 

@LANYONM / CRITICAL MASS, INC. MIKE LANYON VP OF ENGINEERING @lany onm http://b log.lanyonm .org Photo Sources: Magic - http://replygif.net/thumbnail/336.gif Nav Timing Overview - http://www.w3.org/TR/navigation-timing/timing-overview.png Gopher - https://golang.org/doc/gopher/appenginegopher.jpg