2

How to get front-end metrics?

9 years ago from , Design System Lead at YouCaring

I'm looking into setting up some graphs for tracking metrics of our app for things that affect the customers. Things like: * Time to first byte * Response time * Full page load * CSS size * Count of CSS selectors Am I missing any important ones? I'm thinking I might need to track JS, but not really sure what aspects of it.

We already have internal graphing software I can hook data into, I'm just trying to figure out how to actually generate this data. Anyone know any services that'll already do this? Or is this gonna be something I need to write myself?

5 comments

  • Paul BestPaul Best, 9 years ago (edited 9 years ago )

    Even though you can't tell from the interface http://www.webpagetest.org/ is AWESOME

    You can get everything you mentiond (except maybe # of CSS selectors) and more. You can choose location and browser that will run the test.

    You can see:

    *Time to first byte

    *Entire load timeline as a waterfall (like chrome devtools),

    *A video of the loading (also screenshots)

    *Number of http requests

    *weight of the page broken down by js/css/html/images

    *more that I'm probably forgetting.

    Here is a grunt plugin for running the webpagetest via commandline: https://www.npmjs.org/package/grunt-wpt

    Here's a tool for CSS selector count (havent tested it) http://snippet.bevey.com/css/selectorCount.php

    3 points
    • Matt FeltenMatt Felten, 9 years ago

      Yeah, I was looking into that site. The site looks clunky so I initially dismissed it. Seems pretty powerful though.

      I found SpeedCurve earlier and looks pretty cool. I guess it runs using webpagetest. Just nicer designed and automated.

      0 points
      • Russ BrownRuss Brown, 9 years ago

        +1 for Speedcurve. It definitely solves the eye bleed problem for a price.

        0 points
  • Hayden DawkinsHayden Dawkins, 9 years ago

    Just wanted to say props to Dreamhost, absolutely love the service provided there and recommend to every website I build.

    1 point