byte-weight-breakdown

byte-weight-breakdown

Custom audit for Google Lighthouse to provide a byte weight breakdown by resource type.

I think it nicely complements the total-byte-weight audit (i.e. the one with the UI message: 'Avoids enormous network payloads').

Usage

You have to use a custom Lighthouse configuration:

npm install lighthouse byte-weight-breakdown
ligthouse --config-path=config.js https://www.google.com

You can either extend the default (see examples/extends.js) or you can run this audit only (see examples/standalone.js).

Example output

JSON

  //...
  "audits": {
    "byte-weight-breakdown": {
      "id": "byte-weight-breakdown",
      //...
      "details": {
        "type": "table",
        "headings": [
          //...
        ],
        "items": [
          {
            "type": "Script",
            "count": 3,
            "totalBytes": 211215
          },
          {
            "type": "Document",
            "count": 1,
            "totalBytes": 44613
          },
          //...

HTML

See also

csabapalfi/page-weight if you also want to interact with your page with Puppeteer.