Tags:

Google Lighthouse Integration in Bitbucket Pipelines

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.

Chris / / last updated on / 2 comments

Update on 2021-02-17: changed lighthouserc.json to new config format for Lighthouse v7.0
Update on 2023-02-06: updated to latest version of node and lhci

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+).

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:16

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.10.0"
            - lhci healthcheck
            - lhci collect
            - lhci assert
          artifacts:
            - .lighthouseci/**

Keep in mind that the Bitbucket Pipelines caches are only filled on successful builds, which means you should aim for building a pipeline that runs successfully most of the time. Also the caches expire after 1 week so this custom check should be run regularly within 1 week time.

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

{
    "ci": {
        "collect": {
            "url": ["https://www.vianetz.com/de/", "https://www.vianetz.com/en/magento-extensions/magento-1/", "https://www.vianetz.com/de/magento-extensions/magento-2/advancedinvoicelayout-magento-2/"],
            "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.

Going Beyond

If you want to verify which version of Google Lighthouse was used, check the "Artefacts" tab in Bitbucket Pipelines and download the resulting zip file. This contains an HTML version of each Lighthouse run as well as some .json files that contains all the details about the run, e.g. "lighthouseVersion": "8.0.0".
Please note that the lhci tool uses semver versioning but within the 0.x.x which means you need to manually increase the version in the bitbucket-pipelines.yml file.

A documentation of all Google Lighthouse checks can be found here.

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 website ;-) may score worse in the future if you do not keep improving all the time. That's what I build this CI pipeline for!


Post Comments to "Google Lighthouse Integration in Bitbucket Pipelines"

Submit Comment

With the use of this comment form you agree to the saving and processing of your data by this website. More information about the processing of your data can be found in our privacy statement.
Your data will be transmitted securely via SSL.

Meine Magento Extension Bestseller