• Stars
    star
    198
  • Rank 196,898 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Netlify Plugin to run Lighthouse on each build

Netlify Plugin Lighthouse

A Netlify plugin to generate a Lighthouse report for every deploy

Installation options

You can install the plugin for your site using your netlify.toml file or the Netlify UI.

For the most customization options, we recommend installing the Lighthouse plugin with a netlify.toml file.

netlify.toml file-based installation allows you to:

Install plugin through the Netlify UI

For UI-based installation, you can install this plugin from the Integrations Hub, the Plugins directory, or through this direct installation link.

Install plugin with a netlify.toml file

To install the plugin 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.audits]
    output_path = "reports/lighthouse.html"

The lighthouse scores 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: }

Lighthouse plugin configuration options

To customize how Lighthouse runs audits, you can make changes to the netlify.toml file.

By default, the plugin will serve and audit the build directory of the site, inspecting the index.html. 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 an HTML file other than index.html in the build directory
  [[plugins.inputs.audits]]
    path = "contact.html"

  # to audit an HTML file other than index.html in a sub path of the build directory
  [[plugins.inputs.audits]]
    path = "pages/contact.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

  # to serve only a sub directory of the build directory for an audit
  # pages/index.html will be audited, and files outside of this directory will not be served
  [[plugins.inputs.audits]]
    serveDir = "pages"

Run Lighthouse audits for desktop

By default, Lighthouse takes a mobile-first performance testing approach and runs audits for the mobile device experience. You can optionally run Lighthouse audits for the desktop experience by including preset = "desktop" in your netlify.toml file:

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

  [plugins.inputs.settings]
    preset = "desktop" # Optionally run Lighthouse using a desktop configuration

Updates to netlify.toml will take effect for new builds.

To return to running Lighthouse audits for the mobile experience, just remove the line preset = "desktop". New builds will run Lighthouse for the mobile experience.

Generate Lighthouse results in other languages

By default, Lighthouse results are generated in English. To return Lighthouse results in other languages, include the language code from any Lighthouse-supported locale in your netlify.toml file.

For the latest Lighthouse supported locales or language codes, check out this official Lighthouse code.

Updates to netlify.toml will take effect for new builds.

Example to generate Lighthouse results in Spanish

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

  [plugins.inputs.settings]
    locale = "es" # generates Lighthouse reports in Español

Fail Builds Based on Score Thresholds

By default, the Lighthouse plugin will report the findings in the deploy logs. To fail a build based on a specific score, specify the inputs thresholds in your netlify.toml file. Set the threshold based on performance, accessibility, best-practices, seo, or pwa.

[[plugins]]
  package = "@netlify/plugin-lighthouse"
  
  [plugins.inputs.thresholds]
    performance = 0.9

Run Lighthouse Locally

Fork and clone this repo.

Create a .env file based on the example and run

yarn install
yarn local

Preview Lighthouse results within the Netlify UI

Netlify offers an experimental feature through Netlify Labs that allows you to view Lighthouse scores for each of your builds on your site's Deploy Details page with a much richer format.

You'll need to install the Lighthouse build plugin on your site and then enable this experimental feature through Netlify Labs.

Deploy view with Lighthouse visualizations

If you have multiple audits (directories, paths, etc) defined in your build, we will display a roll-up of the average Lighthouse scores for all the current build's audits plus the results for each individual audit.

Deploy details with multiple audit Lighthouse results

Some items of note:

  • The Lighthouse Build Plugin must be installed on your site(s) in order for these score visualizations to be displayed.
  • This Labs feature is currently only enabled at the user-level, so it will need to be enabled for each individual team member that wishes to see the Lighthouse scores displayed.

Learn more in our official Labs docs.

We have a lot planned for this feature and will be adding functionality regularly, but we'd also love to hear your thoughts. Please share your feedback about this experimental feature and tell us what you think.

More Repositories

1

netlify-cms

A Git-based CMS for Static Site Generators
JavaScript
16,192
star
2

gotrue

An SWT based API for managing users and issuing SWT tokens.
Go
3,530
star
3

staticgen

StaticGen.com, A leaderboard of top open-source static site generators
JavaScript
2,471
star
4

cli

Netlify Command Line Interface
TypeScript
1,576
star
5

gocommerce

A headless e-commerce for JAMstack sites.
Go
1,465
star
6

netlify-identity-widget

A zero config, framework free Netlify Identity widget
JavaScript
735
star
7

next-on-netlify

Build and deploy Next.js applications with Server-Side Rendering on Netlify!
JavaScript
720
star
8

headlesscms.org

Source for headlesscms.org
JavaScript
628
star
9

netlify-lambda

Helps building and serving lambda functions locally and in CI environments
JavaScript
601
star
10

next-runtime

The Next.js Runtime allows Next.js to run on Netlify with zero configuration
TypeScript
575
star
11

functions.netlify.com

Tutorials, examples, workshops and a playground for serverless with Netlify Functions
SCSS
515
star
12

build-image

This is the build image used for running automated builds
Shell
498
star
13

gotrue-js

JavaScript client library for GoTrue
JavaScript
457
star
14

create-react-app-lambda

JavaScript
414
star
15

netlify-faunadb-example

Using FaunaDB with netlify functions
JavaScript
388
star
16

actions

Shell
360
star
17

git-gateway

A Gateway to Git APIs
Go
355
star
18

zip-it-and-ship-it

Intelligently prepare Node.js Lambda functions for deployment
JavaScript
305
star
19

gotell

Netlify Comments is an API and build tool for handling large amounts of comments for JAMstack products
Go
276
star
20

explorers

JavaScript
262
star
21

million-devs

Microsite for the 1 Million Developers announcement.
Vue
250
star
22

netlify-statuskit

Netlify StatusKit is a template to deploy your own Status pages on Netlify.
HTML
237
star
23

open-api

Open API specification of Netlify's API
Go
234
star
24

build

Netlify Build (node process) runs the build command, Build Plugins and bundles Netlify Functions. Can be run in Buildbot or locally using Netlify CLI
JavaScript
216
star
25

js-client

A Open-API derived JS + Node.js API client for Netlify
JavaScript
214
star
26

netlifyctl

Go
178
star
27

netlify-dev-plugin

Local dev server with functions, rules engine and add-on support
JavaScript
176
star
28

framework-info

Framework detection utility
JavaScript
137
star
29

jekyll-srcset

Dead simple responsive images for jekyll
Ruby
136
star
30

gocommerce-js

A gocommerce client library
JavaScript
130
star
31

jekyll-gdrive

Access a Google Drive Spreadsheet from your Jekyll templates
Ruby
116
star
32

plugins

Netlify plugins directory.
JavaScript
95
star
33

prerender

Automatically rendering JS-driven pages for crawlers and social sharing
JavaScript
94
star
34

netlify-playground

89
star
35

netlify-plugin-gatsby

A build plugin to integrate Gatsby seamlessly with Netlify
TypeScript
88
star
36

code-examples

Code snippets for customers
HTML
87
star
37

labs

Documentation and samples for Netlify Labs features.
76
star
38

templates

This is board to showcase templates and boilerplates https://templates.netlify.com
Nunjucks
76
star
39

vue-cli-plugin-netlify-lambda

Netlify Lambda plugin for Vue CLI
JavaScript
76
star
40

remix-template

Deploy your Remix site to Netlify Edge Functions
JavaScript
73
star
41

netlify-cms-widget-starter

A boilerplate for creating Netlify CMS widgets.
JavaScript
73
star
42

classnames-template-literals

Small utility to format long classnames with template literals
JavaScript
70
star
43

edge-functions-examples

Explore a library of reference examples for learning about Edge Functions on Netlify.
JavaScript
70
star
44

gotiator

A tiny JWT based API gateway
Go
70
star
45

matterday.netlify.com

A site that asks us what we could do with more time.
CSS
70
star
46

react-server-components-demo

Minimal implementation on server components via Netlify functions
JavaScript
67
star
47

binrc

Binrc is a command line application to manage different versions of binaries stored on GitHub releases.
Makefile
52
star
48

next-on-netlify-demo

Demo of a Next.js app with Server-Side Rendering on Netlify
JavaScript
52
star
49

go-functions-example

Go
49
star
50

petsofnetlify

pets of netlifiers
Nunjucks
47
star
51

full-react-server-demo

JavaScript
45
star
52

rust-functions-example

Deploy Rust lambda functions on Netlify
Rust
45
star
53

gojoin

Mini API wrapping Stripes Subscriptions for Single Page Aps and JAMstack sites
Go
41
star
54

netlify-git-api

Go
41
star
55

gatsby-parallel-runner

JavaScript
38
star
56

functions

JavaScript and TypeScript utilities for Netlify Functions.
TypeScript
38
star
57

elastinats

Go
36
star
58

netlify-photo-gallery

HTML
35
star
59

gocommerce-admin

Admin UI for Netlify Commerce
JavaScript
35
star
60

addons

Netlify add-on documentation
34
star
61

ask-netlify

A place to submit questions for Netlify to answer in tutorials, podcasts and blog posts
HTML
34
star
62

netlify-auth-demo

Demo for integrating GitHub OAuth with a Netlify site
HTML
33
star
63

explorers-up-and-running-with-serverless-functions

Free resource for learning how to use serverless functions!
HTML
31
star
64

hydrogen-netlify-starter

Get started with Hydrogen on Netlify
JavaScript
31
star
65

build-plugin-template

Template repository to create new Netlify Build plugins.
JavaScript
30
star
66

twickr

Twickr lets you send tweets of interest from Twitter to Slack
Go
30
star
67

next-edge-middleware

JavaScript
29
star
68

remix-compute

Remix adapter and server runtime for Netlify
TypeScript
29
star
69

www-post-scheduler

This is a serverless function to auto publish blog posts
JavaScript
28
star
70

postcss-fout-with-a-class

Rewrite all selectors that will trigger a font load to be scoped under a class
JavaScript
28
star
71

micro-api-client

Small library for talking to micro REST APIs (not related to Netlify's main API)
JavaScript
28
star
72

vue-lambda-starter

Starter Template for Vue + AWS Lambda with Netlify
Vue
27
star
73

netlify-browser-extension

netlify-chrome-extension
JavaScript
26
star
74

make-wp-epic

Migration tool for moving from WordPress to Victor Hugo
JavaScript
26
star
75

hydrogen-platform

Hydrogen support for Netlify Edge Functions
TypeScript
26
star
76

netlify-redirect-parser

Library for parsing Netlify redirects
JavaScript
23
star
77

next-react-server-components

JavaScript
22
star
78

netlify-auth-providers

JS library to use Netlify's OAuth providers
JavaScript
22
star
79

explorers-composition-api

Learn how the Composition API works in this Jamstack Explorers mission!
Vue
20
star
80

vite-plugin-netlify-edge

Netlify Edge Function support for Vite
TypeScript
19
star
81

angular-runtime

The Angular Runtime allows Angular to run on Netlify with zero configuration
JavaScript
18
star
82

mailme

MailMe sends mails with stylish templates
Go
18
star
83

eslint-config-node

ESLint, Prettier and Editorconfig shared by Netlify's Node.js projects
JavaScript
18
star
84

slate-markdown-serializer

JavaScript
17
star
85

delta-action

A GitHub Action for capturing benchmark data and tracking its variation against a baseline
JavaScript
17
star
86

netlify-credential-helper

Git credential helper to use Netlify's API as authentication backend
Go
16
star
87

blobs

A TypeScript client for Netlify Blobs
TypeScript
16
star
88

netlify-cms-www

Former repo for netlifycms.org. Moved to the code repo at
CSS
15
star
89

go-client

Depreciated repo: home of the old go client. See netlify/open-api for the new home of the go client
Go
15
star
90

verify-okta

Small Lambda function for verifying and gating content with Okta
Go
14
star
91

netlify-oauth-example

JavaScript
14
star
92

godoc-static

Generates static HTML of documentation of Go libraries
Go
13
star
93

fauna-one-click

Moved https://github.com/netlify/netlify-faunadb-example
JavaScript
13
star
94

screenshot

Take screenshots of websites
Shell
13
star
95

netlify-comments-starter

Start project for Netlify Comments
13
star
96

node-template

Netlify's Node.js repository template
Python
13
star
97

streamer

tail files and send them to nats
Go
12
star
98

edge-bundler

Intelligently prepare Netlify Edge Functions for deployment
TypeScript
12
star
99

ruby-client

Netlify API client for Ruby
Ruby
11
star
100

gatsby-plugin-netlify

Gatsby plugin. Automatically generates a _headers file and a _redirects file at the root of the public folder to configure HTTP headers and redirects on Netlify.
TypeScript
11
star