Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Michael Lanyon

July 08, 2015
Tweet

More Decks by Michael Lanyon

Other Decks in Technology

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. @LANYONM / CRITICAL MASS, INC.
    GOLANG

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide