Recommended
More Related Content
Similar to Gathering of client side metrics
Similar to Gathering of client side metrics (20)
Recently uploaded
Recently uploaded (20)
Gathering of client side metrics
- 1. Сбор и обработка клиентских метрик
- 2. I am ● Many years in IT :) ● FullStack Developer ● JavaScript, NodeJS, AngularJS, etc … ● Independent contractor/IT Expert/CTO ● Pet projects: IoT, Arduino, Hardware, etc …
- 3. Why?
- 4. What? ● DomainLookup ● TTFB ● DOMContentLoaded ● Load ● …. ● Custom metrics
- 6. Dev tools
- 7. Your Client Matters ● Browser ● Locations ● CDN ● Server loading ● etc
- 8. PerformanceTiming ● performance.timing.xxx (read-only) ● DOMHighResTimeStamp type - microseconds ● https://developer.mozilla.org/en- US/docs/Web/API/PerformanceTiming
- 10. timing.js ● helpers ● Normalizes firstPaint, etc .. ● https://github.com/addyosmani/timing.js/
- 11. Custom metrics ● performance.mark(markName) ● performance.measure(name, startMark, endMark); ● getEntries(); getEntriesByName(); getEntriesByType(); <body> <script>performance.mark(‘startNavigation’);</script> <div class=”navigationBlock”> … </div> <script>performance.mark(‘endNavigation’); performance.measure(‘navigationTime’, ‘startNavigation’, ‘endNavigation’);</script> </body>
- 12. Sending ... ● to server ● ajax, web sockets, … ● is there a standard?
- 13. etsy/statsd ● node.js ● http/udp ● Third-party backends
- 14. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type>
- 15. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c
- 16. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c ● Sampling - gorets:1|c|@0.1
- 17. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c ● Sampling - gorets:1|c|@0.1 ● Timing - glork:320|ms|@0.1
- 18. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c ● Sampling - gorets:1|c|@0.1 ● Timing - glork:320|ms|@0.1 ● Gauges - gaugor:333|g gaugor:-10|g
- 19. etsy/statsd ● node.js ● http/udp ● Third-party backends ● <metricname>:<value>|<type> ● Counting - gorets:1|c ● Sampling - gorets:1|c|@0.1 ● Timing - glork:320|ms|@0.1 ● Gauges - gaugor:333|g gaugor:-10|g ● https://github.com/etsy/statsd
- 20. Graphite ● https://graphite.readthedocs.io/en/latest/ ● Store numeric time-series data ● Render graphs of this data on demand
- 21. Graphite
- 22. Grafana ● Beautiful metric & analytic dashboards ● http://grafana.org/
- 23. Finally
- 24. Questions? ● e-mail: gleb.vinnikov@gmail.com ● blog: http://vinnikov.net ● https://www.facebook.com/gleb.vinnikov