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
1. git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
2. npm install
1. Visit: https://console.cloud.google.com/iam-admin/serviceaccounts 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
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.
1. Visit https://developers.google.com/web/tools/chrome-user-experience-report/api/guides/getting-started to get a keu for the CrUX API.
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
SERVICE_ACCOUNT_CREDENTIALS=./key.json CRUX_APIKEY=MY_API_KEY ./awp run sheets:[MY GOOGLE SHEET ID]/Tests sheets:[MY GOOGLE SHEET ID]/Results
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".
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.

ALL DONE.

PS: The blog is heavily inspired by https://github.com/GoogleChromeLabs/AutoWebPerf. 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.

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