Monitor the performance of page load/render. For now you will need to implement your own backend. I am still working on a backend for this.
Checkout and installation:
git checkout git@github.com:byrichardpowell/page-performance-monitor.git- cd
page-performance-monitor npm install
Developing:
npm run watch- Open a browser at
http://localhost:4000/watch/index.html - Edit the files in the src folder
Building:
npm run build- The built JS can be found at
build/bundle.js - You can load the file in browser by running
npm run build && npm run watchthen opening a browser tohttp://localhost:4000/build/index.html
You should then include the JavaScript inside the <head>, along with some configuration:
<script>
PagePerf = {
endpoint: '[1]'
};
</script>
<script src="[2]"></script>
- [1]: The endpoint for your own custom monitoring solution.
- [2]: The location of
build/bundle.json your server.
npm run build creates a JavaScript file that is less than 3KB. Having said that, performance will be affected in a tiny way because the JavaScript is not loaded asynchronously. I should be able to support asynchronous loading in future, but for now you should do your own tests (or submit a PR adding asynchronous loading).
I’ve tried to reduce the number of stats to those that I deem useful, specifically:
- unloadEnd
- redirectEnd
- requestStart
- responseEnd
- domLoading
- domInteractive
- domContentLoadedEnd
- domComplete
- loadEnd
Performance is reported with a sessionId so you should be able to track the same session to multiple page loads.
To store this data you will need to implement your own backend. This would be an API endpoint which accepts post requests and passes the data in the following format.
Encoded:
http://yourendpoint.com/?sessionId=55967c62-0b6a-4aaf-adb6-c8cf1bd7b34e&events={%22unit%22:%22ms%22,%22tag%22:%22load%22,%22x%22:1472464023528,%22y%22:{%22unloadEnd%22:16,%22redirectEnd%22:0,%22requestStart%22:9,%22responseEnd%22:16,%22domLoading%22:23,%22domInteractive%22:242,%22domContentLoadedEnd%22:243,%22domComplete%22:270,%22loadEnd%22:274}}
Decoded:
http://yourendpoint.com/?sessionId=55967c62-0b6a-4aaf-adb6-c8cf1bd7b34e&events={"unit":"ms","tag":"load","x":1472464023528,"y":{"unloadEnd":16,"redirectEnd":0,"requestStart":9,"responseEnd":16,"domLoading":23,"domInteractive":242,"domContentLoadedEnd":243,"domComplete":270,"loadEnd":274}}
This code has learnt a lot from: http://githubengineering.com/browser-monitoring-for-github-com/
- Report standard meta data such as the URL, the browser, the OS etc
- Allow custom meta data to be reported
- Provide a generic API for generic performance reporting (mostly done)
- Add plugins for reporting other common performance concerns (e.g: AJAX, React, Angular, Ember, Backbone)
- Support Asynchronous loading
- Implement the backend for this