Configure Lighthouse

How to configure Lighthouse accessibility, SEO, and web-development best-practices audits against your Tugboat Previews

When Tugboat completes Google Lighthouse audits of your specified URLs, you’ll be able to view the Lighthouse reports right in the Tugboat Dashboard. For more info about what you’ll see, check out: View Lighthouse Reports.

This feature is available for Tugboat Premium plans. If you’d like to run Lighthouse audits against your Tugboat Previews, but you’re on a different tier, you’ll need to upgrade your project to Premium.

If you want to trigger Lighthouse audits for specific URLs, but turn visual diffs off for those urls, see: Turn off visual diffs.

Simple Lighthouse configuration

To configure which pages get Lighthouse accessibility, SEO, and best practices audits, specify the relative URLs of the pages in a urls key in the service definition. In this format, each URL can be a string, and you can list multiple urls.

services:
  apache:
    urls:
      # Conduct Lighthouse audits of the these URLs using the default options
      - /
      - /blog
      - /about

Use a custom Lighthouse configuration

Tugboat uses the default Lighthouse configuration, but disables some server performance metrics. If you’d like to use a custom Lighthouse configuration, to tweak audit scoring or add custom checks, you can pass a custom Lighthouse configuration object to use when generating reports.

Check out the GoogleChrome/Lighthouse blob on GitHub for more information about creating a custom Lighthouse config.

services:
  apache:
    # Specify a custom config object to use to conduct Lighthouse audits
    lighthouse:
      config:
        extends: lighthouse:default
        settings:
          onlyAudits:
            - first-meaningful-paint
            - speed-index
            - interactive
    urls:
      # Conduct Lighthouse audits of the these URLs using the custom config
      - /
      - /blog
      - /about

In addition to formatting the Lighthouse custom config object as YAML in the example above, you can also copy/paste JSON directly from the Google Lighthouse blob into your Tugboat config, since YAML is a superset of JSON. Example follows.

Specify Lighthouse settings per-URL

You can also specify lighthouse configuration options on a per url basis. For more information, see: Tugboat Configuration -> urls.

services:
  apache:
    urls:
      # Trigger a Lighthouse audit of the home page using the default options
      - url: /

      # Trigger a Lighthouse audit for /blog, but override the default config with a custom config object
      - url: /blog
        lighthouse:
          config:
            extends: lighthouse:default
            settings:
              onlyAudits:
                - first-meaningful-paint
                - speed-index
                - interactive

      # Turn off Lighthouse audits for /about, but leave the URL in the list for other Service URL activities, such as generating visual diffs
      - url: /about
        lighthouse:
          enabled: false

Group Lighthouse reports via service alias

You can also group URLs by service alias, which is convenient when aliases have different URL structures.

services:
  apache:
    aliases:
      - foo

    urls:
      # Trigger Lighthouse audits for the default alias
      :default:
        - /
        - /blog

      # Trigger Lighthouse audits for the "foo" alias
      foo:
        - /
        - /about

If you’re not running an apache service on your Preview, but you are running php, set up Lighthouse under the php service.