How To Analyze A Website With Lighthouse

Authored By: James LePage
Published On: May 1, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

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"/>

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 desktop

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, seo

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.

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.