npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

siteaudit

v2.1.1

Published

Siteaudit will analize your site and generate Google Page Speed and Lighthouse report.

Downloads

11

Readme

📈 Siteaudit: Generate audit benchmark for your site 📈

Siteaudit will analyze your site and generate audit for:

  • Pagespeed
  • Lighthouse
  • A11y

Installation

Use nodejs

You can use siteaudit from your terminal using the npm package and run it as a binary

npm -g i siteaudit

siteaudit --url https://canellariccardo.it

or you can use siteadit inside your node application

const SiteAudit = require('siteaudit/lib/node');

SiteAudit.start('https://canellariccardo.it', {
  pagespeed: true,
  lighthouse: false,
  a11y: true,
  outputFolder: '/output',
  customAppenName: `-${Date.now()}`,
});

Use docker

You can also use the docker image to generate the reports

Passing no configuration

docker run -t \
-v "$(pwd)/.testoutput":"/app/output" \
thecreazy/siteaudit:latest \
--url https://canellariccardo.it \
--headless

Passing configuration

docker run -t \
-v "$(pwd)/.testoutput":"/app/output" \
-v "$(pwd)/.siteaudit.json":"/.siteaudit.json"
thecreazy/siteaudit:latest \
--url https://canellariccardo.it \
--no-lighthouse \
--config /.siteaudit.json \
--headless

Runtime options

  • --url specify the base url to test
  • --output specify the output directory (where your assets will be generated)
  • --config specify a JSON file containing an extension to the configuration
  • --no-pagespeed no pagespeed audit will be generated
  • --no-lighthouse no lighthouse audit will be generated
  • --no-a11y start without a11y audit
  • --headless use chrome headless

Using ENV

You can also use environments for passing the options

  • SITEAUDIT_NOLIGHTHOUSE no lighthouse audit will be generated
  • SITEAUDIT_NOPAGESPEED no pagespeed audit will be generated
  • SITEAUDIT_CONFIG specify a JSON file containing an extension to the configuration
  • SITEAUDIT_URL pass the url for running the audit
  • SITEAUDIT_A11Y no a11y audit will be generated
  • SITEAUDIT_HEADLESS use chrome headless
  • SITEAUDIT_USINGENV force the use of the environments

Configuration

If you pass to siteaudit an additional JSON file, it will be merged with initial config.

siteaudit --url https://canellariccardo.it --config ./config.json

Example:

{
  "pagespeed": {
    "pages": ["/", "/404"]
  }
}

config.son

You can also pass a custom config json, there are some examples:

  • pagespeed
{
  "pagespeed":{
    "strategy" :  [ "mobile", "desktop"], // Strategy to use when analyzing the page. this is the base settings, you can only use mobile | desktop
    "locale": "en_US", // Locale results should be generated in.
    "threshold": "70", // Threshold score to pass the PageSpeed test. Useful for setting a performance budget.
    "pages": ["/"]. //Array of relative pages to analyze, default is only / (please, use relative path)
  }
}
  • lighthouse

For full list of settings options see here.

{
  "lighthouse":{
    "extends" :  [ "lighthouse:default" ], // (string|boolean|undefined) The extends property controls if your configuration should inherit from the default Lighthouse configuration.
    "settings": {
      "onlyCategories": ["performance"],
      "onlyAudits": ["works-offline"],
    }, // (Object|undefined) The settings property controls various aspects of running Lighthouse such as CPU/network throttling and audit whitelisting/blacklisting.
    "audits": [
      "first-meaningful-paint",
      "first-interactive",
      "byte-efficiency/uses-optimized-images",
    ] // (string[]) The audits property controls which audits to run and include with your Lighthouse report.
  }
}

Using in gitlab-ci

You can also use siteaudit in your gitlabci.yml

stages:
  - audit

audit:
  image:
    name: thecreazy/siteaudit:latest
    entrypoint: ['']
  stage: audit
  variables:
    SITEAUDIT_URL: 'https://canellaricardo.it'
  script:
    - echo "started siteaudit"
    - /usr/local/bin/siteaudit --url=${SITEAUDIT_URL} --headless
  artifacts:
    paths:
      - output

Output

siteaudit will generate this output:

  • lighthouse-audit.html: contains the classic html result of lighthouse
  • pagespeed-audit.md: a markdown format result of the pagespeed api
  • a11y-audit.md: a markdown format result of the a11y api

Output examples

Contributing

Reporting bugs

  • Open a GitHub issue

Contributing with patches and bug fixes

  • Open a new GitHub pull request with the patch.
  • Ensure the PR description clearly describes the problem and solution.

Contributors

License

MIT