Mattermost recipe: Using Google Lighthouse and ChatOps for website auditing and performance tracking

Problem

Every web developer wants to build a website that adheres to the almost mythical “best practices” so that it is light and performant.

But how exactly are developers supposed to measure performance? And what is considered to be a best practice when it comes to developing for the web?

Find out how to integrate Lighthouse, Google’s website auditing platform, with Mattermost to automatically route key website metrics to specific Mattermost channels to make sure your website is working optimally.

Solution

To solve the problems outlined above, Google created Lighthouse, a toolset that audits a site of your choice for a number of key metrics that relate to five different categories:

1. Performance
2. Accessibility
3. Best Practices
4. Search Engine Optimization
5. Progressive Web App 

This allows developers working on a new site to quickly test how their website performs against each metric, and Google provides a detailed report with customized tips for how to improve the metrics of your particular site.

Lighthouse checks as many as 80 different metrics for the five available categories and leaves you with a clear gameplan of how you’d be able to improve each one.

Limitations

One of the leading reasons why a tool as good as Lighthouse has struggled to gain significant popularity is because of how hard it is to integrate it into the regular workflow of developers. The easiest way to currently use it requires you to remember to visit the Audit tab of the Chrome dev tools and manually run an audit.

But even when running it on the Audit tab, the performance metrics may wildly vary depending on your internet connection or the processes running in the background of your computer.

The only valid alternative that doesn’t run into the first two problems is setting a CI/CD pipeline to run periodic audits against your website. But this method requires you to have prior knowledge in setting up CI/CD pipelines, and it also makes it difficult to view past reports or track their performance over time.

Introducing ChatOps to Lighthouse auditing with Mattermost

Creating a containerized Mattermost chatbot server offers the same benefits as running CI/CD pipelines with regards to getting consistent performance results, with the added benefit of giving you full control of how and when your audits are run.

Some of this chatbot’s main features are as follows.

1. Running ad-hoc audits on websites or scheduling periodic runs and viewing the results directly on a Mattermost channel of your choice

2. Testing pages hidden behind an authentication screen by injecting a script for your login session that can be as simple as this:

(() => {
 document.querySelector('#loginId').value = 'username';
 document.querySelector('#loginPassword').value = 'password';
 document.querySelector('#loginButton').click();
})();

3. Having audit results persisted on MongoDB allows you to have complete access to the history of past audits, which is easily accessible by clicking the `View full report here` button on any in-channel report.

4. Viewing trend charts of how the latest audit compares to past results on each of the five audit categories after running at least two audits on a given URL.

Discussion

With the Mattermost Lighthouse Auditing Bot, it’s easier to audit website metrics, track them over time, and share the results with the rest of the team.

This bot was created as part of the Mattermost Bot Hackfest. For more information, read the initial hackfest proposal and check out the GitHub repository.

For more information on the original project and instructions for setup, go here.