Unlock the Power of Lighthouse: Boosting Website Performance and Usability

Streamlining Performance Audits with Lighthouse and GitHub Actions

Lighthouse is a game-changer for optimizing website performance and usability. By integrating it into your Continuous Integration (CI) pipeline, you can automate audits and ensure that every pull request meets your quality standards.

Building a Simple Web Application with Docusaurus

We’ll start by creating a Docusaurus site within an empty GitHub repository. This will serve as our example static site, perfect for demonstrating the power of Lighthouse.

npx docusaurus init my-docusaurus-site
cd my-docusaurus-site
git init
git add.
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/my-docusaurus-site.git
git push -u origin main

Deploying to Azure Static Web Apps

Next, we’ll set up an Azure Static Web App, leveraging its built-in staging environments and deployment previews. This allows us to deploy a fully functional version of our site with each pull request, making it easy to test and validate changes.

name: Azure Static Web Apps

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build and deploy
        uses: azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_name: "my-docusaurus-site"

Preparing for Lighthouse Integration

With our groundwork in place, we’re ready to add Lighthouse to the mix. We’ll update our GitHub Actions workflow file to include Lighthouse jobs, acquiring the necessary information along the way, such as our custom domain and resource group location.

name: Lighthouse Integration

on:
  pull_request:
    branches:
      - main

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Get Azure Static Web Apps details
        run: |
          RESOURCE_GROUP=$(az staticwebapp show --name my-docusaurus-site --resource-group my-resource-group --query 'defaultHost' -o tsv)
          CUSTOM_DOMAIN=$(az staticwebapp show --name my-docusaurus-site --resource-group my-resource-group --query 'defaultHost' -o tsv)

Plugging in Lighthouse

Now it’s time to create a new Lighthouse report job in our GitHub Actions workflow file. We’ll construct the preview URL of our static web app, wait for the site to be up and running, and then run Lighthouse using the lighthouse-ci-action GitHub Action.

      - name: Run Lighthouse
        uses: google/lighthouse-ci-action@v1
        with:
          url: ${{ steps.get-preview-url.outputs.preview_url }}
          config: lighthousesrc.json

Configuring Lighthouse

We’ll create a lighthousesrc.json file to configure our Lighthouse setup, pointing to a lighthouse-config.js file that defines the audit parameters. You can customize this configuration to suit your needs, skipping audits or adjusting settings as required.

{
  "ci": {
    "collect": {
      "staticDist": true,
      "settings": {
        "onlyCategories": ["performance", "accessibility", "best-practices"]
      }
    },
    "assert": {
      "assertions": [
        {
          "retry": 3,
          "lighthouseConfig": {
            "onlyCategories": ["performance", "accessibility", "best-practices"]
          }
        }
      ]
    }
  }
}

// lighthouse-config.js
module.exports = {
  onlyCategories: ['performance', 'accessibility', 'best-practices'],
};

Formatting Lighthouse Scores

After running Lighthouse, we’ll use the github-script GitHub Action to format the results into a readable comment, complete with emojis and Markdown. This comment will be added to our pull request, providing a concise overview of our Lighthouse scores.

// github-script action
github.issues.createComment({
  issue_number: context.pullRequest.number,
  owner: context.repo.owner,
  repo: context.repo.repo,
  body: `**Lighthouse Report** 🚀
Performance: ${lighthouseResults.performance} ⏱️
Accessibility: ${lighthouseResults.accessibility} ♿️
Best Practices: ${lighthouseResults.bestPractices} 📚`,
});

Adding Lighthouse Stats as a Comment

Finally, we’ll use the sticky-pull-request-comment GitHub Action to add the comment to our pull request. With each PR, you’ll now see a Lighthouse report attached, allowing you to identify and resolve performance regressions before they impact customers.

      - name: Add Lighthouse comment
        uses: sticky-pull-request-comment/sticky-pull-request-comment@v1
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          pr-number: ${{ github.event.pull_request.number }}
          body: |
            ${lighthouseComment}