“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.
Step 1: Clone the project
1. git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
2. npm installStep 2: Generating the service account for google sheets
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
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 https://developers.google.com/web/tools/chrome-user-experience-report/api/guides/getting-started 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
SERVICE_ACCOUNT_CREDENTIALS=./key.json CRUX_APIKEY=MY_API_KEY ./awp run sheets:[MY GOOGLE SHEET ID]/Tests sheets:[MY GOOGLE SHEET ID]/Results4. Visit the sheet to see if data were populated in the results section.
Step 6: Making the 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.
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.
