How to Create a Pagespeed Insights Competitor Dashboard in Data Studio

Google’s Pagespeed Insights and Data Studio are awesome free resources. Pagespeed Insights is a must have resource for conversion rate optimisation because we know there is a proven link between page load speed and conversion. The problem I had was how do I create a Google Pagespeed Insights competitor dashboard in Data Studio? I couldn’t find Google Pagespeed Insights as a data source in Data Studio and nor were there any community visualisations that I could find.

Fortunately for me I asked my network of Data Studio experts and within seconds I had an answer. Go to Bit.ly/crux-report was the response. This was amazing, here was a ready-made report for pagespeed insights dashboard. The report is for a single website, but I will show you how to turn it into a competitor dashboard in a few simple steps.

My thanks must go the contributors who developed the Chrome User Experience Report (CrUX). This is an amazing resource and I want to share this with readers and other Data Studio users. Below is a short guide on how to create a Pagespeed Insights competitor dashboard in Data Studio so that you too can benefit from the great work of CrUX.

Before starting this process, I’ve assumed you have a Google Data Studio account. If you don’t, go and register here. It’s a free data visualisation platform that can transform how you present insights from various sources, including Google Analytics, Search Console and many other data sources. Data Studio allows you to automate the reporting process so that you can spend more time on doing more complex analysis.

1. Go the Chrome UX Report Dashboard:

Type bit.ly/crux-report into your browser and will take you to the Chrome UX report dashboard. This provides some background to the report and contact details if you have any issues with the report. Click on the link where it says “Go try it out” or click on this link.

2. Open the CrUX report:

This takes you to a screen where you need to enter your default URL (without the https://). This is your client or company URL – whichever site you want to benchmark. Also check the box to Allow “Enter origin URL” – to be modified in reports. Now click ‘CONNECT’.

3. Allow Parameter Sharing:

To allow you as a report editor to be able to modify the parameter values you have to ‘Allow parameter sharing?” by clicking on ‘ALLOW’.

4. Report Dimensions:

This will open the page with the report dimensions displayed and descriptions of each. Click on ‘CREATE REPORT’ .

5. Add Data Source to Data Studio:

You will immediately be asked to confirm adding the data source to Google Data Studio and so click ‘CREATE REPORT’ on the pop-up.

6. Create Pagespeed Insights Report:

This will open the Chrome UX report in Data Studio in edit mode. Change the report title by clicking into it and give it an appropriate name, such as Competitor Pagespeed Insights Dashboard.

To turn this single domain report into a competitor report following the steps below. Go to a page with a metric you wish to benchmark against your competitors and select the chart.

You need to consider how many competitors you wish to include on a page and how many months to display within the chart. This will allow you to resize the chart accordingly. In my template I’ve allowed for 6 websites per metric and 5 months of data, but you may have different requirements. You may also want to retain the Scorecards above each chart or remove them to save space. To retain the scorecards, you will need to edit the font size as required.

7. Adjust Number of Bars:

Select the ‘STYLE’ tab on the right of the page and change the number of ‘Bars’ to what you require.

8. Axis and Label Font Size:

Next, scroll down the ‘STYLE’ tab and adjust the ‘Axis Font Size’ and ‘Label Font Size’ to 8px or your preferred option.

9. Change Legend Font Size and Position:

After considering the space needed for 6 charts, I decided to remove the Scorecards at this point. Change the Legend font size to 8px and set the legend position to ‘Top’ – above the chart. The latter allows you to resize the chart within its window to utilise the maximum amount of space available.

10. Copy and Paste Charts:

Once you have adjusted the size of the default chart to allow for the number of competitors you want to display, go to ‘Edit’ in the top menu and select ‘Copy’. Paste the chart into the report and move it into position opposite the default chart. You can now add a text box and type in the URL of your first competitor.

To configure your first competitor chart, select ‘DATA’ from the tab on the right-hand side of the screen. Scroll down to ‘Parameters’ and enter the competitor’s URL with www in front of it. You can now select both charts, EDIT copy, paste and move into position below the top two charts. If you want six charts per page, simply repeat this process for a second time. Remember to add the URL for each competitor to the Parameters in field in the DATA tab.

11. Add Client Logo:

You may want to add your client’s logo or your company logo to the top of each page as shown below. You can repeat this process for each metric you want to compare your client company against, or you can use my template for the Pagespeed Insights Competitor Dashboard here.

At the time of writing this blog the Notification Permissions page is displaying no data. I have notified the team at Chrome UX Report and so hopefully this will be resolved shortly.

12. Tailor the Template:

You can now tailor the design of the report as you wish, by adding explanations or borders around charts. If you have any websites with low traffic volumes, you may find the report won’t work for them. Google needs to have a reasonable amount of traffic for this report to work and so check the URL first before promising to include a website in the report.

To change the origin URL in the text above the first chart you have to go to the ‘DATA’ tab and scroll down to ‘Parameters’ and enter your new URL. This will change the origin URL text on every page of the template. Be aware that if you move the position of the origin URL text on the first page this also changes its position on every other page. It does, however, not change the origin URL for the chart, you still need to change this separately.

I’ve retained the full report in my template and so it’s easy for you to go back to the original report and edit if you need to.