README
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.