Skip to content

Measuring and monitor assets metrics using Puppeteer and Prometheus

License

Notifications You must be signed in to change notification settings

andersonba/puppeteer-assets

Repository files navigation

Puppeteer Assets npm version Build Status

Measuring your assets with metrics using Puppeteer.

Want to know which scripts are loaded in your page? This module allows you to extract and audit the metrics.

Gif CLI

Install

yarn add puppeteer-assets

Usage

Using CLI

puppeteer-assets www.google.com

Advanced usage:

puppeteer-assets www.google.com -t javascript -t css --ignore gooogle-analytics

Run puppeteer-assets --help to more options.

Using on Node.js

import assetsMetrics from 'puppeteer-assets';

await assetsMetrics('https://www.andersonba.com');
{
  assets: {
    'https://www.andersonba.com/scripts/main.js': {
      mimeType: 'javascript',
      rawMimeType: 'application/javascript',
      type: 'internal',
      gzip: 1621,
      size: 1621
    },
    'https://www.andersonba.com/scripts/vendor.js': {
      mimeType: 'javascript',
      rawMimeType: 'application/javascript',
      type: 'internal',
      gzip: 213438,
      size: 213438
    },
    'https://www.google-analytics.com/analytics.js': {
      mimeType: 'javascript',
      rawMimeType: 'text/javascript',
      type: 'external',
      gzip: 0,
      size: 44470
    }
  },
  count: {
    internal: { total: 2, javascript: 2 },
    external: { total: 1, javascript: 1 },
    total: 3
  },
  size: {
    internal: { total: 215059, javascript: 215059 },
    external: { total: 44470, javascript: 44470 },
    total: 259529
  },
  gzip: {
    internal: { total: 215059, javascript: 215059 },
    external: { total: 0, javascript: 0 },
    total: 215059
  }
}

Prometheus

Explore and monitor your assets metrics using Prometheus and Grafana.

Grafana

You need to configure a webservice to be the Prometheus target.

You can use the official built-in server.

Reference API

assetsMetrics(url, options)

Parameter Description Type Default
url Required. Page URL string
options.mimeTypes MimeTypes to be filtered in the metrics. You can use mapped mimeTypes from options.mimeTypePatterns Array<RegExp | string> ['javascript']
options.mimeTypePatterns Map the mimeTypes based on regex patterns Array<RegExp | string> { javascript: ['javascript'], css: ['css'] }
options.ignorePatterns Ignore assets based on regex patterns Array<RegExp | string> []
options.internalPatterns Mark asset as internal type based on regex patterns Array<RegExp | string> [/^(\/|.\/)/]
options.cookies Define cookies on the browser using the standard cookie format. Fields name and value are required in the string. Example: name=current_user; value=123456; domain=andersonba.com; path=/. Array<string> []
options.userAgent Define the userAgent to the browser string