Automate Web Performance Testing Using Airtable and PageSpeed API
Web performance testing is extremely important, especially when we work on improving it. It is essential to run testing performance correctly, before and after every change. We need to make sure what impact each feature has on web performance.
Unfortunately, most of the tests are only unit tests and because of that, they can be wrong. Many factors have an impact on these tests such as server issues or connection load. For that reason, each final score may vary. I called this behaviour a score fluctuation. To do the test right, we need to make a series of tests to eliminate the score fluctuation and to get an average score. Sad to say, to perform a series of tests, we need a lot of time for testing and copy scores manually into a spreadsheet or other inefficient tool like a text file. We are wasting our precious time unnecessarily because we could and should automate this process.
Sadly, I didn’t find any online tool to automate this process, so I decided to use Airtable and PageSpeed API to create one.
Web performance
Web performance refers to the speed in which web pages are downloaded and displayed on the user’s web browser. ~ Wikipedia
However, web performance is something more than a simple speed loading concept. We can split it into many factors e.g.:
- First Input Delay — time to the first user interaction with the page.
- Largest Contentful Paint — time needed to render the biggest element in a user viewport.
- Cumulative Layout Shift — sum of all unpredicted layout shifts.
As you can see, these factors are a bit different from speed loading concept, but they are also important for the final score.
If you would like to read more about the web performance I can recommend you Christophe Limpalair’s article.
Tools for testing web performance
We have access to many tools, most of which are free, half-free and online. A few of them can be launched from our computer, but this is not a good idea as the final score will depend on computer’s resources and our internet connection. My top 3 tools are:
- PageSpeed — No. 1. Online and free. Most other tools are using PageSpeed API to make performance tests, e.g. GTmetrix.
- GTmetrix — creates a more complex report compared to PageSpeed. In the paid version a user can choose a type of browser, speed connection and test location.
- WebPageTest — is more advanced than GTmetrix. Although this tool has many settings, its reports are complicated to read and for less experienced users can be hard to understand.
How to analyse web performance tests
As I mentioned before, the web performance test is built of many audits and depends on many factors. We never perform a test in perfect conditions, that’s why we need to make a series of tests and use an average score to compare them between different sequences. In that way, we can eliminate test measurement error. More tests give us a more accurate score. For that reason, we need to automate this process.
Airtable
Airtable is a spreadsheet build on a database and uses database features. That’s why this tool is something more than Excel or Google Spreadsheets. Airtable doesn’t use typical cells and instead, it gives us a few types of fields, e.g.:
- Checkbox
- Drop-down
- Attachment
- Link to another record
and of course more. Thanks to this simple difference between Airtable and other tools like Excel, we have huge flexibility and we can create a more advanced spreadsheet.
Furthermore, we are able to edit every record in a pop-up. This feature is helpful to focus more on editing a specific record. Blocks are next important element in Airtable. They have specific functionalities like charts, maps, flowcharts and more. We can easily extend the table with an advanced block and increase its usability.
Airtable doesn’t serve only as a regular spreadsheet, we can use it as a bug tracker, event planner, project tracker and more. Last but not least, we can easily integrate our base (spreadsheet) with tools like Jira or Loom.
Creating a table and defining fields
In the beginning, we create a new base and table for storing test results by clicking one button “Add a base”. The basic table has a default field called “Name”. Inside this field, our script will store an audit name. We need to create two extra fields:
- Score — to store the percentage result from an audit.
- No. —test number. We need to use it as an X-axis value.
As the last step, although not required, we can group tests by their names. We will get a beautiful view if we use it.
Create a chart
Even if in the table there are no records, we can create a chart. We need to install a block called Chart, just two clicks, and set its settings correctly to get the best view for reading the data.
Chart settings should look like this:
- Select the correct table
- Choose Grid view as a view
- Select Line as a type of chart
- Set No. as a field for the X-axis
- Change the Y-axis type as a Field
- Set Score as a field for the Y-axis
- Turn on Group by… mode
- Set Name as a field to group records
When the chart is ready, it’s waiting for data, and when it gets them, then the graph will be updated automatically. So, we don’t need to focus on that any more, and we can move forward. Now we can focus on creating a mechanism to automate web performance tests.
Test automation
Right now, we have the table and the plot ready to store and show data. Our next step is to make a test and save its audits as records. To do it, we need to use a few things:
- Google PageSpeed API
- Block Script
- Delay API
PageSpeed API
To make tests, we will use PageSpeed API. It’s free and it works on Google’s servers, so it doesn’t depend on our computer resources. The API syntax is simple. We will build our request on the API URL and three parameters to get what we need.
- The API URL:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed - URL — Encoded domain URL for testing. This parameter is required.
url=${encodeURIComponent(‘https://foo-website.com/')} - Category — Test’s category to focus on web performance only
category=PERFORMANCE - Strategy — Test’s strategy to focus on a specific type of device
strategy=DESKTOP
Last two parameters are not required, but if we use them, then we get a response from API much faster.
Block Script
Our magic will work here. Airtable gives us the block to write and execute scripts. AirScript is a language based on JavaScript, and the block Script uses it. AirScript’s syntax is easy to learn and use, but unfortunately, it doesn’t have time functions like setTimeout. To use the block Script, we need to install it first.
Delay API
As I mentioned before, AirScript doesn’t have a time function, so we need to create a workaround to provide delays between tests. Delays are essential because they will minimize the impact of the current site load on the test results. The fluctuation of the results should be smaller if we use delays between tests.
I’m using HTTPStat API to create delays.
const delay = 60 * 1000 // seconds * milliseconds
const delayAPIUrl = `https://httpstat.us/200?sleep=${delay}`;Create a script
The script will consist of several parts. I will explain how to write it step by step.
Settings declaration
To have every important variable for the function in one place, we should declare them at the beginning of our script.
Settings are simple and easy to understand, but there is one variable which can be hard to crack at the beginning, it is calledlastNo. This variable gives us the last record number in our table and it’s essential to have this. All created records from one PageSpeed API request must have the same value in the No. field. This value is like an ID for a single web performance analysis. The lastNo variable must be equal to the previous test’s number + 1. This value is crucial to display records on the chart correctly.
Function declaration
The function is easy to write and understand, but we need to remember to handle async functions. Function code must be executed line by line without any async gaps.
The function takes two variables:
- delay — is a flag to control delay for the current test.
- testNo — test number. Universal ID for all created records from the current test.
As you can see in 4th line of the code the function checks if the testNo has a different type than the number. We need to be sure about this type because this variable will increase after each successful test. That’s why the function will return 0 if the test fails or the testNo when the test will succeed. I used AirScript’s output function to print information when a single test is done. These logs will be visible inside the block Script console. The output will be helpful for us to check if everything is ok.
Handle PageSpeed API response
Next step to be closer to achieve the goal is to create a request to PageSpeed API and handle the response.
The fetch function is prepared for the situation when the response or audits don’t exist. For that occasion, it will return 0. Otherwise will return testNo.
Handling and saving audits results
In this step, the function will take from the test’s result specific data and use them to create new records. AirScript has a function createRecordsAsync to save a few records at once.
I used Object Destructuring with the future in mind, because it is very likely that someone would like to save more audits than just two. The function createRecordsAsync has a friendly API, and it is prepared to work with an empty array. That’s why we don’t check on our side if we have any records to save.
Multiple executions of the function
For this purpose, we will use a for statement, and it looks as follows:
The counter variable is counting the test number. The if statement in 6th line checks if the pageSpeedTest function is returning the correct test number.
Final script
When we combine all the pieces, we get less than 50 lines of the script that will automate web performance testing for a specific domain.
When to run the script
For sure, I can recommend running this script before and after every deploy. This method gives us the best information about what happened with web performance after deploy.
However, it isn’t a good idea to run the script many times during the day. It will consume Airtable limits very fast.
Limitation
Airtable has some limitations, and we need to deal with it. Blocks Script and Chart are available only for accounts with a PRO plan. Besides, a single base in the PRO plan can’t have more than 50.000 records, but it should be enough for the web performance test like ours. However, Airtable gives every new user access to the PRO plan for 14 days for free.
Conclusion
Airtable with PageSpeed API is an excellent tool for running a series of web performance tests. This tool tries to eliminate the test’s score fluctuation, our engagement in a process and prevent a developer from wasting their time on running the unit test and saving the results. Furthermore, this tool creates a nice graph that helps us to analyze scores. It also let us present the test results in front of a client in an understandable way.
If you are struggling with web performance and you don’t want to waste your time for running unit tests, then this solution should be perfect for you.
