How we measure our Core Web Vitals — adding a p75 time series chart in DataStudio
TL:DR using custom fields for p75 we were able to visualise however we want in our dashboard so it looks like this
Why DataStudio?
We have all the data in Google Sheets at this point. It is possible to calculate the 75th percentile in there BUT I found building the dashboards in Google Sheets difficult and hard to edit.
I found DataStudio much easier to use.
How we add the Time Series Chart
- When you create a new report you’ll be prompted to add your data source. Choose the google sheet you have setup with your data. Make sure you set the correct range if its not the default top row headers.
2. Next I create the time series chart.
Insert > Timer series chart from the main menu.
By default this will give you a basic Record Count chart.
3. Add the p75 field. So everything with Core Web Vitals is based off the 75th percentile so we need to add a p75 field. Click on the report and the data options come up on the right. Click on “Add a Field” at the very bottom.
I add the Field Name p75 and the formula is
PERCENTILE(Event Value, 75)
4. Make the p75 field the metric for the Data. Click on Record Count under Metric and choose p75 instead
This gives us
5. Some tweaking to the chart.
To force the Y-Axis to start at 0 instead of whatever is the lowest number Click on the Style tab next to Data on the right hand side and scroll down to the Left Y-Axis section and set it to 0.
To add a reference line of the goal in the style section add a reference line
And add a line at the relevant goal. In this case its for LCP so its 2500 goal (2.5s). We can also set the colour however we like it too.
And there you go we’ve got our time series chart!
