By - Neal Cole

How to Create a Pagespeed Insights Competitor Dashboard in Data Studio

A template to create a Google Pagespeed Insights competitor dashboard in Data Studio

 

A Step-By-Step Guide to Create a Google Pagespeed Insights Competitor Dashboard

 

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’.

Set URL for Pagespeed Insights data studio report

 

 

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’.

 

Allow parameter sharing in Data Studio

 

4. Report Dimensions:

 

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

Import dimensions into Data Studio

 

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.

 

Add data source to Data Studio

 

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.

The Chrome UX report in Data Studio

 

 

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.

 

Resize chart and change the number of bars

 

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.

 

Change axis and label font size

 

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.

 

Change legend font size and position

 

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.

 

Copy and paste chart, add title and add URL into Parameters

 

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.

 

Copy and paste charts and add client logo

 

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.

 

Parameters - Enter origin URL

 

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.

 

Thanks for reading my blog and don’t forget to leave feedback or comments below because it helps us improve the focus of our content.

 

  • About the author:  Neal  (@northresearch) provides web analytics and CRO consultancy services and has worked in many sectors including financial services, online gaming and retail. He has helped brands such Hastings Direct, Manchester Airport Group Online and Assurant  Solutions Ltd to improve their digital marketing measurement and performance.

 

 

 

2 thoughts on “How to Create a Pagespeed Insights Competitor Dashboard in Data Studio

Ciprian 23rd September 2020 at 7:58 pm

Hi Neal,
Is this still working? I’m having trouble with step 10, pulling competitor data. i do not see the option to change the website anywhere

    Neal Cole 25th September 2020 at 5:26 pm

    Hi Ciprian, the CRUX report is working. Origins in the CrUX dataset must meet two criteria: popular and publicly crawlable. Assuming it’s a popular website, I would verify that it’s crawlable, for example by running Lighthouse SEO audits and paying special attention to the “Crawling and Indexing” group.

Comments are closed.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close