Lighthouse Intro

Lighthouse is a tool best known by Developers and Digital Agency that helps improve websites and web apps. It has audits for performance, accessibility, progressive web apps, SEO and more.

From Google:

You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

The tool is set up in a way that anyone can access and use its suite of features, not just developers. This post is for those who are curious on what may be wrong with their site and want to use Lighthouse to figure out how to improve it.

How To Access/Use It

Access the online tool here: https://web.dev/measure/

Enter your site URL and hit run audit.

You'll then get a list of all the audits you need to take a look at.

However, the actual value comes from the Lighthouse report. To access it click "View Report" next to your site URL.

The report will give you immensely detailed statistics, audits, and site-specific suggestions on how to pass those that the site failed.

The remainder of this article will discuss what makes up a Lighthouse report, how to interpret the it's various aspects/ratings/recommendation.

Scores

The most important score when it comes to PageSpeed (the issue that SpeedOpp fixes) is the Performance score.

According to Google, Lighthouse returns a Performance score between 0 and 100. 100 is the best possible score which represents the 98th percentile, a top-performing site. A score of 50 represents the 75th percentile.

They get this aggregate score by individually scoring individual performance audits, weighing each one, and combining them into the Performance score.

You can learn more here:

https://developers.google.com/web/tools/lighthouse/v3/scoring

If you have a slow site, you're losing money. SpeedOpp makes your site run faster by addressing every opportunity generated by Lighthouse, boosting this score, page speed, and SEO.

Additional scores include Accessibility, Best Practices, SEO and PWA (if applicable). Let's discuss each one and why it may be helpful to a website owner or designer.

Accessibility

This score lets you know how accessible your site is. In most scenarios, you need to have a high score on this due to accessibility legislation like ADA.

If you get it wrong, you open yourself up to legal liability.

It'll run several audits and display the failed ones, as well as suggestions on how to pass it.

The tool does note that it can only detect some accessibility aspect of the website, and that it's best to have a manual audit.

This is true: you should have a reputable agency that knows the legislation surrounding accessibility make the needed changes to your website.

Depending on your businesses, you may even want to hire a lawyer to audit the site as well.

Best Practices

When designing a website there are a collection of best practices that should be followed. Formally, Google has a published list of these practices, but there are also unspoken/ individual practices that should always be included on a website.

That's why if you're serious about your web presence, you should hire a reputable design agency like us (Isotropic).

This score is an aggregate from pass/fail audits. These audits are taken from Google's best practice list. An example of some of these audits are:

• Avoids Application Cache
• Uses HTTPS
• Uses HTTP/2 for its own resources
• Uses passive listeners to improve scrolling performance
• Avoids document.write()

Like most of the other outputs, if you fail this audit, Lighthouse will give you suggestions on how to pass it. For example, if you fail the "Security Vulnerabilities", it'll tell you what made you fail this, link to the script, and tell you how to fix it.

It will also mention the severity of this vulnerability. If you're uncomfortable in fixing this yourself, you can reach out to Isotropic and we'll fix this within 6 hours of your contact.

SEO

Lighthouse runs several audits related to SEO. Some include:

• Has a tag with width or initial-scale
• Document has a
• Document has a meta description
• Page has successful HTTP status code

If the website doesn't pass an audit, it will alert you and tell you how to fix it. For example, if your site returns a failed audit titled "Page isn’t blocked from indexing", Lighthouse will tell you that "Search engines are unable to include your pages in search results if they don't have permission to crawl them." You then know that you need to fix this.

If it's able to find an explicit cause of the SEO issue (typically it is), then the report will tell you what to fix. For example, if you fail the Index audit mentioned above, the tool may tell you to fix your Robots.txt by naming this code as a "Blocking Directive Source".

<meta name="robots" content="noindex"/>Code language: HTML, XML (xml)

CLI

Lighthouse also offers devs a node based CLI that's super helpful and powerful.

You can install it using several methods, but the easiest for us is "$ Yarn Add Lighthouse". One auto install later, and you have Lighthouse installed.

We use CMD to run and generate our reports.

$ lighthouse https://www.example.com --chrome-flags="--headless" --quiet --view --output-path ...\SpeedOpp\speedopp-report.html --emulated-form-factor desktopCode language: JavaScript (javascript)

When we run that command, Lighthouse will run in the background and spit out a report in HTML format. We can either email this file to clients or screenshot important sections.

We've also set it up to upload (if you're a developer and want to test our beta online report generator, reach out) that file to a SpeedOpp client specific portal.

The report is super detailed, well designed and get its information across well. However, if you choose, you can output a JSON and generate your own custom report format from that. Here's what a section looks like:

Basically it combines all of Google's online testing tools into one, pretty report, generated from your CLI.

Using Lighthouse through the CLI gives you easy access to a stunning amount of features, for free. I've pasted all of command suggestions that Lighthouse outputs when entering "lighthouse --help"

lighthouse <url> <options>

Logging:
  --verbose  Displays verbose logging                                                                          [boolean]
  --quiet    Displays no progress, debug logs or errors                                                        [boolean]

Configuration:
  --save-assets                  Save the trace contents & devtools logs to disk                               [boolean]
  --list-all-audits              Prints a list of all available audits and exits                               [boolean]
  --list-trace-categories        Prints a list of all required trace categories and exits                      [boolean]
  --print-config                 Print the normalized config for the given config and options, then exit.      [boolean]
  --additional-trace-categories  Additional categories to capture with the trace (comma-delimited).
  --config-path                  The path to the config JSON.
                                 An example config file: lighthouse-core/config/lr-desktop-config.js
  --preset                       Use a built-in configuration.
                                 WARNING: If the --config-path flag is provided, this preset will be ignored.
                                                                              [choices: "full", "perf", "mixed-content"]
  --chrome-flags                 Custom flags to pass to Chrome (space-delimited). For a full list of flags, see
                                 https://bit.ly/chrome-flags
                                 Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary.
                                 Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or
                                 Chrome stable will be used.                                               [default: ""]
  --port                         The port to use for the debugging protocol. Use 0 for a random port        [default: 0]
  --hostname                     The hostname to use for the debugging protocol.                  [default: "localhost"]
  --emulated-form-factor         Controls the emulated device form factor (mobile vs. desktop) if not disabled
                                                                                  [choices: "mobile", "desktop", "none"]
  --max-wait-for-load            The timeout (in milliseconds) to wait before the page is considered done loading and
                                 the run should continue. WARNING: Very high values can lead to large traces and
                                 instability
  --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting
                                 will do the opposite. More: https://git.io/vFFTO
  --gather-mode, -G              Collect artifacts from a connected browser and save to disk. (Artifacts folder path may
                                 optionally be provided). If audit-mode is not also enabled, the run will quit early.
  --audit-mode, -A               Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise
                                 defaults to ./latest-run/)
  --only-audits                  Only run the specified audits
  --only-categories              Only run the specified categories. Available categories: accessibility, best-practices,
                                 performance, pwa, seo
  --skip-audits                  Run everything except these audits
  --budget-path                  The path to the budget.json file for LightWallet.

Output:
  --output       Reporter for the results, supports multiple values
                                                            [array] [choices: "json", "html", "csv"] [default: ["html"]]
  --output-path  The file path to output the results. Use 'stdout' to write to stdout.
                 If using JSON output, default is stdout.
                 If using HTML or CSV output, default is a file in the working directory with a name based on the test
                 URL and date.
                 If using multiple outputs, --output-path is appended with the standard extension for each output type.
                 "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc.
                 Example: --output-path=./lighthouse-results.html
  --view         Open HTML report in your browser                                                              [boolean]

Options:
  --help                               Show help                                                               [boolean]
  --version                            Show version number                                                     [boolean]
  --cli-flags-path                     The path to a JSON file that contains the desired CLI flags to apply. Flags
                                       specified at the command line will still override the file-based ones.
  --locale                             The locale/language the report should be formatted in
  --blocked-url-patterns               Block any network requests to the specified URL patterns
  --disable-storage-reset              Disable clearing the browser cache and other storage APIs before a run  [boolean]
  --throttling-method                  Controls throttling method          [choices: "devtools", "provided", "simulate"]
  --throttling.rttMs                   Controls simulated network RTT (TCP layer)
  --throttling.throughputKbps          Controls simulated network download throughput
  --throttling.requestLatencyMs        Controls emulated network RTT (HTTP layer)
  --throttling.downloadThroughputKbps  Controls emulated network download throughput
  --throttling.uploadThroughputKbps    Controls emulated network upload throughput
  --throttling.cpuSlowdownMultiplier   Controls simulated + emulated CPU throttling
  --extra-headers                      Set extra HTTP Headers to pass with request
  --precomputed-lantern-data-path      Path to the file where lantern simulation data should be read from, overwriting
                                       the lantern observed estimates for RTT and server latency.
  --lantern-data-output-path           Path to the file where lantern simulation data should be written to, can be used
                                       in a future run with the `precomputed-lantern-data-path` flag.
  --plugins                            Run the specified plugins                                                 [array]
  --channel                                                                                    [string] [default: "cli"]

Examples:
  lighthouse <url> --view                                       Opens the HTML report in a browser after the run
                                                                completes
  lighthouse <url> --config-path=./myconfig.js                  Runs Lighthouse with your own configuration: custom
                                                                audits, report generation, etc.
  lighthouse <url> --output=json --output-path=./report.json    Save trace, screenshots, and named JSON report.
  --save-assets
  lighthouse <url> --emulated-form-factor=none                  Disable device emulation and all throttling
  --throttling-method=provided
  lighthouse <url> --chrome-flags="--window-size=412,660"       Launch Chrome with a specific window size
  lighthouse <url> --quiet --chrome-flags="--headless"          Launch Headless Chrome, turn off logging
  lighthouse <url> --extra-headers                              Stringify'd JSON HTTP Header key/value pairs to send in
  "{\"Cookie\":\"monster=blue\", \"x-men\":\"wolverine\"}"      requests
  lighthouse <url> --extra-headers=./path/to/file.json          Path to JSON file of HTTP Header key/value pairs to send
                                                                in requests
  lighthouse <url> --only-categories=performance,pwa            Only run the specified categories. Available categories:
                                                                accessibility, best-practices, performance, pwa, seoCode language: HTML, XML (xml)

For more information on Lighthouse and the CLI, see https://developers.google.com/web/tools/lighthouse/.

This post should have given you a good overview about Lighthouse, how to read one of the reports, and the super powerful CLI that we (Isotropic & SpeedOpp) leverage to benefit our clients.

If you need to boost your performance score, which directly correlates with conversions, rankings, SEO and speed, reach out to SeedOpp -- its what we do (Score ???? or your money back). If you need assistance with any of the other categories, connect with Isotropic for a free 15-min phone consultation.