Web performance is getting worse. The median loading speed of mobile sites in 2016 was 2.8 seconds. Today that has gone up to 6.4 seconds. Third-party tracking and analytics code contributes to the load speed. As developers, this is difficult for us to control.
HTTPArchive tracks the loading speed of many sites on the web. The median loading speed of mobile sites in 2016 was 2.8 seconds. Today that has gone up to 6.4 seconds.
A rise of 3.4 seconds.
But why?
We all know that page speed is important. Especially for mobile users with limited connection speed and slower devices.
Third-party tracking and analytics code contributes to the load speed. As developers, this is difficult for us to control.
So what can we do?
One way is to make sure you are tracking the page performance as part of your CI pipeline.
This is what we are going to cover today. We are going to:
- Setup Github Actions as the CI Pipeline
- Setup Zeit to create apps on every pull request (PR)
- Run a Lighthouse report on the pull request app and log the results
For more on how to improve your web performance check out this guide with 30 performance metrics.
There is a lot to cover, grab your favorite beverage let’s get started.
Set up Github Actions
Github Actions is a new addition to the Github platform that allows us to run builds and tests right in Github. It is their continuous integration solution so it’s like Jenkins or CircleCI.
The great thing about Actions is that when you create a PR on a repo it can trigger a Github Action. This allows us to create a PR app in Zeit and then run the Lighthouse performance test against it.
Let’s get started. Go to the repo where you want to set up the test and click on the Actions tab:
You will not have any workflows created so let’s create a new one by clicking the “New workflow” button.
You will see a get started screen like this:
There are lots of boilerplate actions that you can use to get started. Yet, we are going to create our own so click the “Set up a workflow yourself” button in the top right.
This will open up a “hello world” workflow example with the file name main.yml, it should look something like this:
Leave the name as main.yml and then we need to copy over the YAML configuration. Here is the script that we are going to use:
There are a few parts of this config that you should understand:
- On line 2 you can see that the script is set to run on a pull request
- On line 6 we define the steps of the job each step starts with a “name” tag
- On line 8 we are going to start a new deployment to Zeit using the now CLI tool which will create our Preview App
- On line 14 we are going to start a lighthouse audit
Each time you create a preview app in Zeit it generates a random URL so there is no way to hardcode it. So instead we have to pass the preview-url from the Zeit step to the Lighthouse step.
Each step can output a variable to the outputs object. The next step uses this output object. You can see on the above script that on line 17 we have `steps.now.outputs.preview-url`. So we are taking the URL of the preview app from the Zeit step and using that in the Lighthouse step.
You can see that we have defined the Zeit step with ID “now” on line 9. As this step outputs a variable “preview-url” we can access it with:
`steps.now.outputs.preview-url`
Here is the script below so you can copy and paste this into the edit screen. It should look something like this:
Click the start commit button and then click on the “commit new file” button.
The action is now ready and will run the next time you create a PR.
There is one more thing we need to do before this is ready.
We need to set up Zeit.
Set up Zeit
If you have not used Zeit before it is a free service that allows you to deploy web apps.
It is free to get started and perfect for running our PR apps.
So head over and login or create an account. Once In you will see a dashboard like this:
We need to do a couple of things. The first is to create a New Project and then connect your account to GitHub.
So let’s start by pressing the New Project Button. On the next screen click the connect to GitHub button:
You will need to give Zeit permission to read repos and you can select to allow all repos or only the one you want to test.
Once you have given the permission you will see a different GitHub Button which looks like this:
Click the “New Project From GitHub” button. This will allow you to select the repo:
Select it and then press “IMPORT”.
It will ask you to name the app so do this and choose “Continue”.
Then it will ask you where the app files are, leave this as the default unless you have a monorepo.
Zeit will then detect the type of app and the build command. If this is correct then you can click “Deploy”:
We now have everything set up in Zeit the last step is to add your Zeit token in Github.
Github Actions Secret
First, we need to create a token in Zeit this is under account settings token:
Click on “create” give the new token a name. I have used the same name as the repo and then choose “create token”.
Copy the new token and then head back to the repo in GitHub. Once back in Github go to the settings tab on the repo and select secrets:
Click on the “Add a new secret” link and then enter “ZEIT_TOKEN” as the name and then the token you copied from Zeit. It should look something like this:
We now have everything we need to create a PR and run the first test.
Running the First Test
Create a new branch on the repo and push the code. Once you push the code, create a PR branch to merge to master.
Click the “Compare & pull request” button. Then click “Create pull request”:
This will start the action and on the PR page you will start to see the results as the Github Action starts to run:
Once the Github Action has finished you will see the report appear on the page like this:
With the performance score directly on the PR page.
If you would like to see what this looks like check out my PR here.
If you have any questions or get stuck leave a comment or an Issue in the Github repo.