I have been using a Chrome dev tool called Lighthouse for a while to audit my websites and ensure that they are of minimum standard quality. Lighthouse is an open source website auditing tool developed by Google and maintained by a community of web developers dedicated to building high quality websites.
While Lighthouse was helpful in quickly auditing websites and seeing the results, for a team who manages between 20 to 30 websites, we needed a better and more efficient way to use the tool. In addition to browser extension, Lighthouse comes as a node-based command line tool. I looked into how I can integrate this tool into a web application and thought Laravel Spark would be the perfect place to start. At the end, I wanted to do following:
- Audit and manage multiple sites from a single dashboard
- Track audit results – and scores – over period of time
- Create teams and collaborate
The first thing I looked into was how I can run command line processes from Laravel. After quick Googling, I found that I can use Symfony’s process component to run node commands from web. I created a job called ProcessAudit in Laravel and ran the Lighthouse node command from there. After some tinkering and testing, I settled with following node command and configuration:
$process = new Process(config('app.lighthouse').' --output json --output html --output-path '.$reportsPath.'/'.$rawFileName.' --max-wait-for-load 60000 --chrome-flags="--headless" '.$url);
app.lighthouse is stored in .env as path to the Lighthouse node command (/usr/local/bin/lighthouse).
When you enter URL to a website into the tool and hit the audit button, it utilizes Laravel’s queue feature to queue and kick off the job. Once the job is run, I parse the audit results in JSON and store it into database. This allowed me to work with the audit results in any way I want to. The exact steps are:
- Log into the Laravel Spark application
- Enter URL of a website and hit “run audit”
- Laravel inserts job – ProcessAudit – into queue
- Lighthouse node command runs on the server for the given URL
- The node command outputs audit results in JSON which is read into database
- Display audit results to user
The entire process takes anywhere from 30 to 45 seconds to audit one website. And because the audit results are stored in database, I can run audit multiple times – daily or weekly – and track overall progress for each audit category. Below is a sample progress tracking screen from the tool for one of websites we manage:
As an agency, we build and manage many websites for our clients. For example, one of our client is a mid-sized law firm and they have total of six websites under our management. We utilized Laravel Spark’s team features so that we can place the client’s all six websites into their own bucket and give them access to the tool. This way of separating websites into teams allows us to invite all our clients to the tool and each client can see only their audit results. Without Spark’s built-in team features, this would’ve taken a long time to build.
Using this tool, we can audit and manage many websites easily – something that we could not have done with Lighthouse as Chrome browser extension. Below is a screenshot of our dashboard showing multiple websites and their audit results in a single view:
We are also in the process of discussing with local agencies in Northern Virginia to offer this tool to them so that they can use it for their clients’ websites. Laravel Spark’s billing features made it very easy to set this up as a monthly subscription service.
What we learned from this experience is that if you can find a right use case for Laravel Spark, you can utilize its built-in features to quickly get an application up and running. As shown in this article, its team features makes Laravel Spark an attractive framework for large enterprise organizations or agencies managing multiple teams and websites.