Slide 1

Slide 1 text

@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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

@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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@LANYONM / CRITICAL MASS, INC. NAVIGATION TIMING

Slide 9

Slide 9 text

@LANYONM / CRITICAL MASS, INC. GOLANG

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

@LANYONM / CRITICAL MASS, INC. JS ERROR REPORTING

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@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