webquality-dashboard

Dashboard to monitor the quality of your website in realtime.

It consists of 3 parts. A Firebase instance, a webpage and a script for collecting the data.

The script validates your html at validator.w3.org/nu/, checks the accessibility status via AChecker and finally runs Google's PageSpeed Insights for mobile speed, desktop speed and mobile ux. It returns fail or pass for every test. Which results in a red (fail) og green (pass) status in the dashboard.

Scoring

Here are the limits to pass the test for the different areas.

html - 0 errors

wcag - PASS or CONDITIONAL PASS the wcag 2 AA standard

mobile UX - 85 or above

mobile speed - 85 or above

desktop speed - 85 or above

Prerequisites

You will need to have Node.js/IO.js and npm installed.

In addition you will need a Firebase account, an AChecker API-key and an API-key for Googles PageSpeed Insight you obtain this from the Google Developer Console

Installation

Clone from GitHub.

$ git clone git@github.com:zrrrzzt/webquality-dashboard.git

cd into the directory and run the setup script

$ npm run setup

Configuration

Open config/index.js in your editor of choice and update it with your settings.

FIREBASE_URL The url to your Firebase instance,

FIREBASE_DB Your Firebase db

ACHECKER_ID Your API-key from AChecker

GOOGLE_API_KEY Your API-key for Google's PageSpeed Insight

SITES An array of objects for sites you want to track

Example of SITES

SITES: [
    {
      'id' : 'osl',
      'name': 'Oslo kommune',
      'url': 'https://www.oslo.kommune.no/'
    },
    {
      'id' : 'tfk',
      'name': 'Telemark',
      'url': 'http://www.telemark.no'
    }
]

SCORE How you'll score the different parts of the test

These are the defaults

  SCORE: {
    'html': 10,
    'wcag': 40,
    'mobileSpeed': 10,
    'mobileUX': 20,
    'desktopSpeed': 20
  }

Build/Deployment

After your configuration is correct you run the build script.

$ npm run build

After the build is finished you can serve the contents of the distfolder from a server of your own choice.

Collect data

To run the tests and update Firebase just run the collector.

$ npm run collector

Development

If you want to do some changes in the dashboard you can spin up a development server.

$ npm run dev