Continued Magento 1 Support ⋅ 7-Day Money-back guarantee ⋅ Implemented by a Magento Certified Developer


Google Lighthouse Integration in Bitbucket Pipelines

I'm available for Magento, PHP, Shopware or ReactJS projects.

I am a big fan of the possibilities that CI pipelines like Bitbucket Pipelines offer and I have already wrote an article about integrating Hugo with Bitbucket Pipelines .
In this post today I will create a Bitbucket Pipeline for Google Lighthouse checks to continuously monitor the important Google Lighthouse Score to improve performance and search results.

Update on 2021-02-17: changed lighthouserc.json to new config format for Lighthouse v7.0

Why is the Google Lighthouse Score important?

I am not a big fan of Google, especially in terms of its tracking abilities (also see my privacy checklist ). But the Lighthouse tool from Google is a really excellent Open-Source tool for us as developers to improve our websites in many different areas and also track performance over time.

The Google Lighthouse score helps you to determine certain areas of your website or shop that needs improvements. It focuses on performance, accessibility, best practices and SEO.
For each of these areas a score will be calculated that shows how you excel in this topic: ranging from bad (0-49), average (50-89) and good (90+).

Google Lighthouse Score of blog.vianetz.com

The score can be determined either manually via the Chrome browser extension or automatically via the Google Lighthouse CI , which of course we are interested in this article. The instructions for the CI tool reference using the Github Actions which is an alternative for Bitbucket Pipelines on Github.

So why should you aim to optimize the scores? Well, I think the importance of search engine optimization (SEO) is not in question. Accessibility improves your website for your readers with disabilities, which should also be on your todo list and best practices can also be followed in general.
But performance is probably the most important topic here. You want to offer a fast and smooth experience to your website readers and that means fast loading times.

Google recently also announced the Core Web Vitals which is another attempt to more easily measure the performance of websites with reproducible indicators. Of course this is also the preparation to use these performance results then to improve their search results.

You see it is in general a very good idea to at least try to avoid the bad scores (0-49) in the Google Lighthouse areas.

How to check Google Lighthouse score automatically?

So now we come to the point how you can use Bitbucket Pipelines to run Google Lighthouse checks automatically.
Therefore we simply need to create a new pipeline in our repository within the file bitbucket-pipeline.yml:

image: node:latest

pipelines:
  custom:
    lighthouse-checks:
      - step:
          name: Lighthouse Checks
          caches:
            - node
          script:
            - apt-get update && apt-get install apt-transport-https -y
            - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
            - sh -c 'echo "deb [arch=amd64] https://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
            - apt-get update && apt-get install google-chrome-stable -y
            - npm i -g @lhci/cli@"^0.7.0"
            - lhci healthcheck
            - lhci collect --url $LIGHTHOUSE_URL
            - lhci assert
            - mv .lighthouseci lighthouse-results
          artifacts:
            - lighthouse-results/**

Additionally we have to create a new Repository Variable in Bitbucket with the name LIGHTHOUSE_URL and the website url to check as value (including https://).

For the configuration of the Google Lighthouse CI tool we need to add a file called .lighthousrc.json to the root folder in our repository, that e.g. looks like this:

{
    "ci": {
        "collect": {
            "settings": {
                "chromeFlags": "--no-sandbox",
                "preset": "desktop"
            }
        },
        "assert": {
            "preset": "lighthouse:no-pwa",
            "assertions": {
                "categories:performance": ["alert", { "minScore": 0.9 }],
                "categories:accessibility": ["alert", { "minScore": 0.9 }],
                "categories:best-practices": ["alert", { "minScore": 0.9 }],
                "categories:seo": ["alert", { "minScore": 0.9 }]
            }
        }
    }
}

There are plenty of configuration options available which you can find in the documentation .

Finally you can test that pipeline by running it manually or create a schedule to run the pipeline regularly in the Bitbucket web interface.

Of course your aim score for the different categories in the configuration file above is up to you. Also keep in mind that Google regularly updates the checks, so websites that currently have a score of 100 in every area (like my blog ;-) may score worse in the future if you do not keep improving all the time.