Web Performance Monitoring

Web Performance Monitoring

Monitoring isn't just for ops people and application developers. Front-end developers need just as much visibility into their work as anyone else. How is the front-end developer's relationship to production formed?

When thinking about the things we monitor with our configuration-managed monitoring pipelines, we rarely include the front-end development team or consider their needs from the outset. As the statistics that browser APIs can collect have become more robust, it is becoming easier to standardize the collection of WebPerf stats.

Inspired by the UK GDS team's event-store project, the team at Critical Mass created a Go program that can collects Navigation Timing API data, Javascript Error Reports, and CSP Reports. The application became the focus of one of our monitoring recipes, and has since become standard on any node serving web pages to end-users. Our front-end developers have developed drop-in javascript functions to interact with this service and thus made WebPerf monitoring relatively turnkey.

In this ignite, I talk about the conversations and brainstorming that lead to this initiative, about some of the mechanics of collecting the data, and how it has changed the way front-end developers relate to the production applications and monitoring dashboards used by the team. I focus on the cultural aspects of the experience and outcomes, but the code and architecture is discussed here: http://blog.lanyonm.org/articles/2015/03/29/golang-http-stats-collector.html.

3fad7a142a3bbdc966db36d03a853c6c?s=128

Michael Lanyon

July 08, 2015
Tweet

Transcript

  1. @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
  2. @LANYONM / CRITICAL MASS, INC. WE ARE A DIGITAL EXPERIENCE

    DESIGN AGENCY WITH A RELENTLESS FOCUS ON THE CUSTOMER
  3. @LANYONM / CRITICAL MASS, INC. THE FRONT-END DEVELOPER’S RELATIONSHIP TO

    PROD
  4. @LANYONM / CRITICAL MASS, INC. -  CSS -  Compile SASS

    -  Generate sprites -  Concatenate & minify css -  JavaScript -  Minify -  Bundle javascript -  Require Optimizer -  Rsync -  CDN? -  ??? EXAMPLE DEPLOY PROCESS
  5. @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
  6. @LANYONM / CRITICAL MASS, INC. REAL-TIME FEEDBACK? Nope, not without

    some more work.
  7. @LANYONM / CRITICAL MASS, INC. ENTER RUM: REAL USER MONITORING

  8. @LANYONM / CRITICAL MASS, INC. NAVIGATION TIMING

  9. @LANYONM / CRITICAL MASS, INC. GOLANG

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

  11. @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
  12. @LANYONM / CRITICAL MASS, INC. NAV-TIMING DATA

  13. @LANYONM / CRITICAL MASS, INC. JS ERROR REPORTING

  14. @LANYONM / CRITICAL MASS, INC. NAV-TIMING DATA: VERY COOL JS

    ERROR REPORTING: GAME CHANGER
  15. @LANYONM / CRITICAL MASS, INC. OPERATIONALIZE BEING VALUABLE ISN’T ENOUGH.

    IT SHOULD ALSO BE EASY.
  16. @LANYONM / CRITICAL MASS, INC. -  Standardization -  Reproducibility - 

    Scalability USE CHEF
  17. @LANYONM / CRITICAL MASS, INC. PROVIDE SAMPLE JAVASCRIPT -  Not

    dependent on any frameworks -  Can be easily integrated with most projects
  18. @LANYONM / CRITICAL MASS, INC. PART OF THE STANDARD STACK

  19. @LANYONM / CRITICAL MASS, INC. GIVE YOUR TEAMS THE TOOLS

    TO FORM THIS RELATIONSHIP WITH PROD
  20. @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