Non Programming Manager

    pagexray

    4.4.2 • Public • Published

    PageXray

    Unit tests

    Page Xray

    We love the HAR file but it's hard to actually see what the page includes only looking at the file. The PageXray converts a HAR file to a JSON format that is easier to read. We use the format internally in the coach and sitespeed.io. And with PageXray you can use it standalone in your browser.

    What do we collect?

    • The size and the number of requests per content type
    • The size and requests per domain
    • The number of requests per response code
    • The base domain and the httpVersion used for the base asset (the main HTML document)
    • All assets (responses) with the following data: type, url, size, expires (a normalized expires converting max-age/expires to just expires in seconds), status (response code), timeSinceLastModified (using the last modified field in the response header and normalizing to seconds), httpVersion and all request and response headers.
    • If you use a HAR from WebPageTest we also get SpeedIndex and other VisualMetrics.
    • If your HAR is from sitespeed.io you will also get some extra metrics like SpeedIndex.

    Install

    npm install pagexray -g

    Run

    pagexray /path/to/my.har

    Or if you want to prettify the HAR

    pagexray --pretty /path/to/my.har

    And if you want to get info per request/response:

    pagexray --includeAssets /path/to/my.har

    If you want to use it in node, use it like this:

    const fs = require("fs");
    const pagexray = require("pagexray");
    const har = JSON.parse(fs.readFileSync("/path/to/my.har"));
    
    const pages = pagexray.convert(har);
    // Or ofyou want to include the each asset information
    // const pages = pagexray.convert(har, {includeAssets: true});
    
    console.log(pages)

    Using in your browser

    Include the latest pagexray.min.js (that you find in the relases) on your page. PageXray is exposed as window.PageXray

    const pageXray = window.PageXray.convert(har);

    Output

    All sizes are in bytes. Expires and timeSinceLastModified are in seconds.

    [
      {
        "url": "https://www.sitespeed.io/",
        "meta": {
          "browser": {
            "name": "Chrome",
            "version": "60.0.3112.78"
          },
          "startedDateTime": "2017-08-24T18:26:29.077Z",
          "connectivity": "native",
          "title": "Sitespeed.io - Welcome to the wonderful world of Web Performance run 1"
        },
        "finalUrl": "https://www.sitespeed.io/",
        "baseDomain": "www.sitespeed.io",
        "documentRedirects": 0,
        "redirectChain": [],
        "transferSize": 98791,
        "contentSize": 120776,
        "headerSize": 0,
        "requests": 10,
        "missingCompression": 0,
        "httpType": "h2",
        "httpVersion": "HTTP/2.0",
        "contentTypes": {
          "html": {
            "transferSize": 8479,
            "contentSize": 28279,
            "headerSize": 0,
            "requests": 1
          },
          "css": {
            "transferSize": 0,
            "contentSize": 0,
            "headerSize": 0,
            "requests": 0
          },
          "javascript": {
            "transferSize": 0,
            "contentSize": 0,
            "headerSize": 0,
            "requests": 0
          },
          "image": {
            "transferSize": 87309,
            "contentSize": 85979,
            "headerSize": 0,
            "requests": 8
          },
          "font": {
            "transferSize": 0,
            "contentSize": 0,
            "headerSize": 0,
            "requests": 0
          },
          "favicon": {
            "transferSize": 3003,
            "contentSize": 6518,
            "headerSize": 0,
            "requests": 1
          }
        },
        "assets": [],
        "responseCodes": {
          "200": 10
        },
        "firstParty": {},
        "thirdParty": {},
        "domains": {
          "www.sitespeed.io": {
            "transferSize": 98791,
            "contentSize": 120776,
            "headerSize": -10,
            "requests": 10,
            "timings": {
              "blocked": 169,
              "dns": 0,
              "connect": 0,
              "send": 6,
              "wait": 3624,
              "receive": 104
            }
          }
        },
        "expireStats": {
          "min": 600,
          "median": 31536000,
          "max": 31536000,
          "total": 283824600,
          "values": 10
        },
        "lastModifiedStats": {
          "min": 733347,
          "median": 733444,
          "max": 733480,
          "total": 7334359,
          "values": 10
        },
        "cookieStats": {
          "min": 0,
          "median": 0,
          "max": 0,
          "total": 0,
          "values": 10
        },
        "totalDomains": 1,
        "visualMetrics": {
          "FirstVisualChange": 617,
          "SpeedIndex": 625,
          "VisualComplete85": 617,
          "LastVisualChange": 1033,
          "VisualProgress": {
            "0": 0,
            "617": 98,
            "633": 98,
            "667": 98,
            "850": 98,
            "1033": 100
          }
        }
      }
    ]
    

    Install

    npm i pagexray

    DownloadsWeekly Downloads

    1,762

    Version

    4.4.2

    License

    MIT

    Unpacked Size

    35.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • tobli
    • soulgalore
    • beenanner