Monitoring PageSpeed and CrUX scores across builds

Automating web audits with AutoWebPerf

“Today we’re announcing that the page experience signals in ranking will roll out in May 2021. The new page experience signals combine Core Web Vitals with our existing search signals including mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines.” Said a blog published on November 10, 2020. That’s when the world started taking page speed scores seriously.

Previously our team would go measure the scores of our website on PageSpeed Insights. Repeat the experiment multiple times and average out the result to get a clear picture of the score. This consumed a significant time in our ship cycle.

Introducing Autowebperf, the tool enables automatic gathering of performance data from multiple sources Chrome UX Report, PageSpeed Insights, or WebPageTest and can be set to continuously monitor the site performance in one place.

Let’s begin the setup

Step 1: Clone the project

1. git clone
2. npm install

Step 2: Generating the service account for google sheets

1. Visit: and create a new service account2. Add a key for the newly created service account and download it. BEWARE the key cannot be downloaded again so keep it safe.3. Copy the email address given in the service account details.4. Enable Sheet API for the project

Step 3: Generating the data dump sheet

1. Create a new google sheet with 2 pages, Tests and Results. 2. The Tests sheet should have the following headers. 
- url
- label
- gatherer
- cruxapi.settings.urlType
- cruxapi.settings.formFactor
Where gatherer says the tool you want to collect the metric from (we are using cruxapi). Hence urlType says if the URL is a PAGE or ORIGIN. and formFactor specifies if the device used should be a DESKTOP, PHONE or a TABLET.
3. Add the email id copied as an editor to your project.

Step 4: Creating CrUX API key

1. Visit to get a keu for the CrUX API.

Step 5: Test Run

1. Coming back to the terminal. cd into the project.2. Paste the service account key in the project at key.json3. Run the following command
4. Visit the sheet to see if data were populated in the results section.

Step 6: Making the dashboard

Data gathering dashboard
1. Click on the "Use Template" button on the top left of the DataStudio template.2. Click on the "New Data Source" Dropdown and select "Create New Data Source".3. Select the "Google Shets" Google Connector.4. Look for your Google Sheets file, select the "Results" Tab and click on "Connect".

Step 7: Scheduling Cronjobs for automated monitoring

1. Run crontab –e to open the editor2. Add the following entry
0 12 * * * SERVICE_ACCOUNT_CREDENTIALS=./key.json CRUX_APIKEY=MY_API_KEY cd ~/workspace/awp && ./awp run sheets:[MY GOOGLE SHEET ID]/Tests sheets:[MY GOOGLE SHEET ID]/Results
This will schedule a cron job to run daily at 12.00 noon.


PS: The blog is heavily inspired by Do give it a look to dive into deeper implementation and use-cases.




Sometimes it is the people no one can imagine anything of, do the things no one can imagine.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Continuous Integration & Meteor

Making sense of Redshift performance

photo of a person at the end of a mysterious data-center corridor

Provision a Single-node Kubernetes Cluster using Ansible on Ubuntu 20.04

Golang: It’s a Global Problem

Understanding Generic functions and Types in Swift 4

10 Admirable Attributes of a Great Technical Lead

How to Choose the Best Reseller Hosting?

Stacktrace review: ‘Scala: not just a village in Italy’

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Sometimes it is the people no one can imagine anything of, do the things no one can imagine.

More from Medium

Implementation of a Scalable Web Application using the services of AWS Elastic Beanstalk, DynamoDB…

Starting new web service business from IT point of view — ChatPilot case study

Making Simple Object Schema Validation even Simpler with React Custom Hooks and YUP!

Using a CloudFront API Proxy to Invalidate a Single-Page Application Without Polling