Skip to content

Lighthouse

Lighthouse is an open-source tool that can be used to test webpages. Lighthouse can be run manually using Google Chrome's built-in Developer Tools, from the commandline or using CI/CD. We will go over each of these methods in this documentation.

Learn by example

Check out our example Lighthouse repository.

Generating a Report

In this guide we will be using the spriteCloud home page as our example webpage.

  • Browse to the webpage you would like to test using Google's Chrome browser.
  • Press F12 to open the Developer Tools menu. Select the Lighthouse tab.

Info

If you do not see Lighthouse, click the » icon on the right side of the visible tabs to show all the other options hidden in the overflow menu.

  • Configure any necessary Lighthouse settings and click Generate Report.
  • Click the three dots in the upper right-hand corner and click Save as JSON.
  • Upload the report you downloaded to view your report.
  • Make sure you have NodeJS installed.
  • Open up your terminal and run node -v and npm -v. Both should return some version number when correctly installed.
  • Run npm i -g lighthouse to install the Lighthouse CLI globally.
  • Run lighthouse --version to make sure Lighthouse is also successfully installed.
  • Generate a report using the command lighthouse https://www.spritecloud.com/ --output=json --output-path=./report.json. Adjust the URL and output path to your needs.
  • Upload the report.json file that generated in the directory where you ran the command Calliope to view your report.
  • Login to Calliope and create a group and profile for your Lighthouse results.
  • Login to your Gitlab environment click your profile then click Access Token and generate a token with API access.
  • In Calliope click your profile, click Integrations and copy your URL and Token in the GitLab section.
  • Create a new repository with a CI/CD file and copy the lighthouse configuration below.
  • Adjust the API key, profile ID and URL variables in the YML file to your needs.
  • Return to the profile where you want your Lighthouse CI to run and click GitLab Integration. Choose the repository, branch, and job that you just created.
  • Click ► and the report will be generated.

Info

Optionally you can set a cron schedule to run your script at set moments or intervals.

.gitlab-ci.yml

lhci:
image: cypress/browsers:node14.15.0-chrome86-ff82
variables:
    API_KEY: <YOUR_API_KEY>
    PROFILE_ID: <YOUR_PROFILE_ID>
    URL: https://www.spritecloud.com/
before_script:
    - npm i -g @lhci/cli
script:
    - lhci autorun --collect.url=$URL
after_script:
    - curl -X POST -H "x-api-key:$API_KEY" -H "Content-Type:multipart/form-data" -F "file[]=@report.json" "https://test.calliope.pro/api/v2/profile/$PROFILE_ID/import/lighthouse"

.lighthouserc.json

{
    "ci": {
        "collect": {
            "numberOfRuns": 1,
            "settings": {
                "chromeFlags": "--no-sandbox"
            }
        },
        "upload": {
            "target": "filesystem",
            "reportFilenamePattern": "report.%%EXTENSION%%"
        }
    }
}