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.

However, web performance is something more than a simple speed loading concept. We can split it into many factors e.g.:

As you can see, these factors are a bit different from speed loading concept, but they are also important for the final score.

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:

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.

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.

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:

As the last step, although not required, we can group tests by their names. We will get a beautiful view if we use it.

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:

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.

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:

Last two parameters are not required, but if we use them, then we get a response from API much faster.

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.

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.

The script will consist of several parts. I will explain how to write it step by step.

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.

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:

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.

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.

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.

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.

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.

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.

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.

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.

Related posts:

We recently built a unified videoconferencing center in one of the country’s regions, which covered all municipalities, city administrations, and state institutions. Before that, each separate…

This is Part 1 of an 8-Part research project aiming to better understand the nuances of our global nutrition. It explores this topic through the utilisation of data visualisation and data science…

Unbelievable to think we are well into April already, isn’t it? While 2020 crawled along like a wounded animal to the new year, this year seems to be the opposite. We’re bounding ahead on the…