electerious / Ackee

Self-hosted, Node.js based analytics tool for those who care about privacy.
https://ackee.electerious.com
MIT License
4.3k stars 360 forks source link

Add page speed/loading/web-vitals metrics #207

Open BetaHuhn opened 3 years ago

BetaHuhn commented 3 years ago

🐣 Is your feature request related to a problem? Please describe.

It would be nice to track the load times of different pages. This would allow you to see what pages take longer and might need to be improved or how the load times vary by load/usage or after a new version is deployed.

💡 Describe the solution you'd like

Using the ackee-tracker you could get the time it took to load the page like this:

const loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;

And then just send it along with all the other data to the server.

Ackee could display it similarly to other metrics like pages. Here's a quick mockup:

image

Or even better show you the loading times of different pages over time, similarly to how durations are displayed.

📋 Additional context

Here's how Kindmetrics displays this. They also show you page speeds grouped by country which I think is very useful too, but as you mentioned in #103 this can't be easily integrated with Ackee.

electerious commented 3 years ago

That's definitely something I will take a look at and there has already been an issue for it which suggests using web-vitals: https://github.com/electerious/Ackee/issues/136

I would like to see this in Ackee by default, but it's possible to use the event API of Ackee v3 (not released, yet) to report web-vitals. I just need to add an event type that shows the average value in charts and lists. It might be a good and easy solution until it's a part of Ackee (I might add the average event types after v3).

Will close the other issue in favour of this one.

electerious commented 3 years ago

I've added new options to the events that allow to show average data (either as a chart or list). Could be worth a try! (It's now on the develop branch)