page-weight

page-weight

🏋 Measure page weight with puppeteer

install

npm i -g page-weight

usage

page-weight --device 'iPhone X' https://www.google.com

example output

{
  "url": "https://www.google.com",
  "summary": {
    "Document": {
      "firstParty": "41.1 kB",
      "thirdParty": "0 B",
      "total": "41.1 kB"
    },
    "Image": {
      "firstParty": "93.9 kB",
      "thirdParty": "3.7 kB",
      "total": "97.6 kB"
    },
    ...
}

command line arguments

• <url> (anywhere in the arguments list)
• -d <deviceName> --device <deviceName> device to emulate (See complete device list here)
• -f <domain1,domain2> --firstPartyDomains <domain1,domain2> specify additional firstparty domains (by default only the tested URL secondary domain is considered firstparty e.g. www.google.com -> google.com)
• -v output all requests and device data
• -vv output raw network events, all requests and device data

caveats / known issues

• sizes include HTTP headers
• failed requests are simply ignored when summing up sizes

ideas

• nicer terminal output
• allow writing report to JSON file
• diff two URLs
• testing a repeat view
• allow running custom interactions via puppeteer
• excluding requests
• group output by domain
• verbose mode grouped by type/domain
• report embedded sizes (<script>, <style> maybe even <svg>) somehow
• build tree based on initiator/parent of each request
• rebuild Request Map (that uses WebPageTest) on top of puppeteer
• show or at least allow filtering render-blocking styles (using isLinkPreload field)
• highlight parser blocking (non async or defer) scripts

why not just build a HAR file?

This module just focuses on page weight and not the ordering or timing of resources therefore avoids any complexity around these.

Especially when using CDP Network events with puppeteer there are some known ordering/timing issues that make it tricky to build HAR files with puppeteer.

To confirm the chrome-har module works perfectly fine with a trace log directly from Chrome and this seems to be limited to how puppeteer is set up.