Automated Site Monitoring With Lighthouse in Branch
Introduction
Lighthouse makes it easy to check the quality of your website. With Branch, you can now run it automatically before you deploy changes.
Contents
What is Lighthouse?
Lighthouse is an automated quality assurance tool for websites. It rates your website in terms of search engine optimization (SEO), performance and other categories. It’s open-source and maintained by Google.
Lighthouse is run against individual pages of a website. After Lighthouse has been run a report is generated.
Lighthouse runs tests for each category. In each category, it runs a series of audits. An example is the ‘Properly sized images’ audit in the ‘Performance’ category.
Scores
Lighthouse has developed a scoring system to determine which categories can be optimized on your website.
Each audit receives a score and a weight. All scores are combined into a score for the category. This will be a value between 0 and 100.
100 is the highest possible score. It means that your page is in the 98th percentile. A score of 50 means your page is in the 75th percentile.
Running Lighthouse
There are several ways to run Lighthouse. You can try it out in Chrome by doing the following: Open Chrome > Go to a page > Press cmd+option+j > Go to the ‘Audits’ tab.
Here you can generate a report for the page you are currently visiting.
Additionally, Google has created an online tool where you can generate a report.
You can also run Lighthouse automatically using Branch.
Categories
There are 5 categories in a report. The categories are:
- SEO
- Performance
- Accessibility
- Best practices
- PWA
SEO
This category contains audits that are relevant for SEO. It checks whether the page has a title tag, a meta description and other SEO best practices.
Performance
This category monitors the performance of the page. Focus is on how fast the page loads and how quickly the user can interact with the page.
Accessibility
This category is focused on how usable the page is for visually impaired users and keyboard users. The audits check the use of HTML attributes, that help screen readers understand the contents of the page, color contrasts, and font sizes.
Best practices
This category is a mixed bag of audits that checks various security and usability features. An example is that it checks whether you are using deprecated browser APIs.
Progressive Web App (PWA)
This category checks whether the page is compliant with ‘progressive web app’ standards. This category is not relevant for most WordPress sites.
Lighthouse in Branch
In Branch, you can automatically run Lighthouse using the Lighthouse recipe. You can specify which URL’s to test and what scores you expect to see.
You should have a deployment step before the Lighthouse step so that there is a URL to run tests on.
Running Lighthouse on a staging site
The recommended way is to deploy to a staging site. Then you add a Lighthouse step to run tests against the staging site’s URL. After that, you can have a deployment step to your production server. This ensures that you won’t deploy to production if the Lighthouse tests fail.
Running Lighthouse post-deployment
An alternative way is to deploy to your production server and then run Lighthouse after that. If you have this setup it’s important to know that if the Lighthouse step fails you will still have deployed. You should consider if it’s possible to run Lighthouse on a staging site first.
URL’s
The Lighthouse recipe supports running Lighthouse against multiple URLs at a time. We recommend picking the 3-5 most important pages and run tests against them. Examples of pages to test could be:
- Home page
- Blog page
- An article page
Thresholds
You can specify a minimum score for each category. If the report has a score lower than that, the build will fail. We recommend you generate a report manually first and check what the scores are on your site. You should also consider whether some categories are more important than others.
Reports
A Lighthouse report is generated for each of the URL’s you have specified.
If a build fails because of score that’s too low you have access to view the full Lighthouse report. Here you can investigate individual audits that cause the score to be lowered.
You can find links to the reports in the output log of a build.
Sign up to Branch
Signing up for a Branch account is free and easy. Just head over to branchci.com and sign up with GitHub, Bitbucket or GitLab.
With a free account, you get 20 builds every month. If you need more than that you can upgrade to a paid account.
Need Help?
We hope this guide has been helpful, but if you still have any questions or feedback, or if you just want to chat about CI/CD, please reach out by clicking the chat icon or by email at hi@branchci.com. Don’t be a stranger!