Introducing Pagespeed Pal: Visualising Core Web Vitals in Google Data Studio

Alex Pereira ● April 29, 2022 | Analytics, Technology

Written by Alex Pereira
April 29, 2022 | Analytics, Technology

As a full-service digital marketing agency, we wanted a way to quickly and easily gather information on Core Web Vitals for client and competitor URLs that could be visualised in a clear and concise manner.

After taking a look at the existing solutions, we quickly realised there wasn’t a tool that did exactly what we wanted.

So, we decided to build it ourselves. The best part? It’s free – built by digital marketers, for digital marketers.

Why are Core Web Vitals important?

As of June 2021, Core Web Vitals became an official ranking factor for your site. Whilst it’s not the largest contributor, it has still become increasingly important to understand how your website performs on both desktop and mobile, if you want the best chance of your site ranking highly. How can you do this? Well, you need to be able to track and monitor ranking metrics, such as First Input Delay (FID), Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP) over time to identify where issues might be and to quantify how successful your implemented solutions are.

Introducing Pagespeed Pal – a free tool developed by Semetrical, designed specifically for anyone looking to easily track, organise and visualise Core Web Vitals.

So, what is Pagespeed Pal?

Our tool uses the Pagespeed Insights API in order to pull the following field, origin and lab metrics;

FCP Ms – Field
LCP Ms – Field
CLS Ms – Field
FID Ms – Field
FCP Ms – Origin
LCP Ms – Origin
CLS Ms – Origin
FID Ms – Origin
Performance Score – Lab
FCP Ms – Lab
LCP Ms – Lab
CLS – Lab
Time To Interactive Ms – Lab
Total Blocking Time Ms – Lab
Speed Index Ms – Lab
Time To First Byte Ms – Lab
FID Ms – Lab

Now that we’ve covered the metrics that Pagespeed Pal is capable of pulling, let’s quickly cover what each metric tells us and outline the main differences between field, origin and lab data;

Metric Definitions

LCP = This measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
CLS = This measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.
FID = This measures interactivity. To provide a good user experience, pages should have an FID of less than 100 milliseconds.
FCP = This measures page loading speed, the time from when a page starts loading to when any part of that page’s content is rendered on the screen.
Time to Interactive =A lab metric that measures the time from when the page starts loading to when it’s fully interactive.
Total Blocking Time = A lab metric that measures the total time in milliseconds between First Contentful Paint (FCP) and Time To Interactive (TTI).
Speed Index = A lab metric that measures how quickly the contents of a page are visibly populated during page load.
Time to First Byte = A lab metric that measures the time between the browser requesting a page and when it receives the first byte of information from the server.

Data Type Definitions

Field data = Based on real user visits, this is the score specifically relating to the URL provided and is what Google takes into account when ranking your page.
Origin data = This is an aggregation of scores from all the URLs that can be measured on the site, which provides a useful indication of overall site performance.
Lab data = This loads a page in a controlled environment with a predefined set of network and device conditions.

We set out to pull the three of these data types to benefit from the different perspectives that each has to offer.

How many URLs can Pagespeed Pal fetch and how often do they update?

These scores are updated on a daily basis by the Pagespeed Insights API, and so our tool only fetches them once a day, running automatically to ensure things stay up to date – as the user, you are able to schedule when this occurs through the user interface shown below.

Google places limits on the number of URLs that can be run on a daily scheduled basis.

A user with a free Google account can schedule around 35 URLs before encountering errors, whereas a user with a workspace account can query around 100 URLs.

However, Google places fewer limits on the number of URLs run immediately. We have been able to successfully fetch data for 1,600+ URLs using the “Run Queries” menu with the Pagespeed Pal add-on menu.

How is the raw data presented?

For the sake of easy reporting, these scores are split out by date, device, client, page grouping and URL. See below for how this looks when populated into Google Sheets.

The main purpose of this format is to streamline data visualisation, so that powerful views can be easily created within Google Data Studio for both our own clients and competitor pages, too.

How does this look when visualised?

Using this spreadsheet as a data source linked directly to Data Studio, the data can be visualised as follows;

By adding in filters based on the relevant dimensions, such as client, page groupings or URLs, these can then be assessed with a high degree of flexibility. We like to use the reference lines feature to provide thresholds for metrics, making it easier to identify overall performance.

This is great – how can I use Pagespeed Pal for reporting?

We will be publishing Pagespeed Pal to the public via the Google Workspace Marketplace after making some final changes to the tool and will update the blog once live.

When Pagespeed Pal goes live, the tool can be easily added by going through the Google Workspace Marketplace. Once downloaded, simply navigate to Google Sheets > Extensions > Add-ons. It will prompt you to download an API key, which you can obtain by following the steps provided. Once this has been acquired, paste it in and you’re ready to start! Our short video below demonstrates how to correctly get started with the tool once installed.