Puppeteer Assets

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`