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.

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.

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 |