Skip to content

boosef/netlify-plugin-lighthouse

 
 

Repository files navigation

Netlify Plugin Lighthouse......

A Netlify plugin to generate a lighthouse report for every deploy

Usage

You can install this plugin in the Netlify UI from this direct in-app installation link or from the Plugins directory.

You can also install it manually:

From your project's base directory, use npm, yarn, or any other Node.js package manager to add the plugin to devDependencies in package.json.

npm install -D @netlify/plugin-lighthouse

Then add the plugin to your netlify.toml configuration file:

[[plugins]]
  package = "@netlify/plugin-lighthouse"

  # optional, fails build when a category is below a threshold
  [plugins.inputs.thresholds]
    performance = 0.9
    accessibility = 0.9
    best-practices = 0.9
    seo = 0.9
    pwa = 0.9

  # optional, deploy the lighthouse report to a path under your site
  [plugins.inputs]
    output_path = "reports/lighthouse.html"

By default, the plugin will serve and audit the build directory of the site. You can customize the behavior via the audits input:

[[plugins]]
  package = "@netlify/plugin-lighthouse"

  [plugins.inputs.thresholds]
    performance = 0.9

  # to audit a sub path of the build directory
  # route1 audit will use the top level thresholds
  [[plugins.inputs.audits]]
    path = "route1"

    # you can specify output_path per audit, relative to the path
    output_path = "reports/route1.html"

  # to audit a specific absolute url
  [[plugins.inputs.audits]]
    url = "https://www.example.com"

    # you can specify thresholds per audit
    [plugins.inputs.audits.thresholds]
      performance = 0.8

The lighthouse report results are automatically printed to the Deploy log in the Netlify UI. For example:

2:35:07 PM: ────────────────────────────────────────────────────────────────
2:35:07 PM:   2. onPostBuild command from @netlify/plugin-lighthouse        
2:35:07 PM: ────────────────────────────────────────────────────────────────
2:35:07 PM: ​
2:35:07 PM: Serving and scanning site from directory dist

...

2:35:17 PM: {
2:35:17 PM:   results: [
2:35:17 PM:     { title: 'Performance', score: 0.91, id: 'performance' },
2:35:17 PM:     { title: 'Accessibility', score: 0.93, id: 'accessibility' },
2:35:17 PM:     { title: 'Best Practices', score: 0.93, id: 'best-practices' },
2:35:17 PM:     { title: 'SEO', score: 0.81, id: 'seo' },
2:35:17 PM:     { title: 'Progressive Web App', score: 0.4, id: 'pwa' }
2:35:17 PM:   ]
2:35:17 PM: }

Running Locally

Fork and clone this repo.

Create a .env file based on the example and run

yarn install
yarn local

About

Netlify Plugin to run Lighthouse on each build

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 95.9%
  • HTML 2.2%
  • Shell 1.9%