How can I get all resources loaded sizes in a page or the total page size?

[Roel Magdaleno]

Hi,

I've been trying to get the total page size of an url, for example: https://google.com, if I analyze the page in GTMetrix the total page size is like 32KB.

I have my Chrome Extension that get some performance details like TTFB and more but I can't get the page size of the current URL, is there a way to do it?

I tried to use WebRequest API by using onResponseStarted callback and in the response I get the Content-Length and I sum all responses, but the result is innacurate compared to GTMetrix result.

Also tried to use:

window.performance.getEntriesByType("resource");

Then loop on each and sum the decodedBodySize or encodedBodySize but the same, the result is innacurate.

The only Chrome API that works perfectly is the debugger API, but opens a bar at the top of the browser window which won't fit on my UI specifications.

Does anyone alredy achieved this?

Thanks!

[wOxxOm]

AFAIK, you've listed all the available solutions.

[Simeon Vincent]

Content-Length isn't necessarily reliable as a server may deliver more or less content than expected. Here's a fun article from Eric Lawerence on just that subject. The performance API isn't reliable either as it doesn't include all resources requested by the page. See the spec for details on what is included. Ignoring debugger for the moment, the only other option that comes to mind is to use the devtools API to collect this data, but this would require DevTools to be open.

// In your devtools script…
const stats = {
  transferred: 0,
  size: 0
};

chrome.devtools.network.onRequestFinished.addListener(request => {
  stats.transferred +=  request.response._transferSize;
  stats.size += request.response.content.size;
});

Finally, the good old debugger API. I don't quite follow the hesitation with the bar as it only appears for the duration of debugging session. It should be possible to construct a UI where the user chooses to initiate a capture, you call chrome.debugger.attach (bar appears), observe the events you care about, then call chrome.debugger.detach (bar disappears). I'm happy to workshop UX ideas if you like.

Simeon - @dotproto

Extensions Developer Advocate

[Roel Magdaleno]

I agree with you, the Content-Length and performance API are not reliable. Sometimes I get the real values and other times don't.

DevTools API is not an alternative due to the user should open the devtools panel so I'm testing the debugger API for now but attaching the debugger when the chrome.tabs.onUpdated initializes but I think it will look weird for the user, like they will feel that something bad is happening. So maybe I'll make a button to get exclusively the page size using the debugger API.

But maybe there are another solutions:

1. Use Puppeteer inside of the Chrome Extension (already tried this using Browserify but the WS connection failed with my Chrome instance).
2. Make an API request to GTMetrix/WebPageTest/PageInsights to get the result from there, but that implies another request and wait to the response (using Promises could be the better choice for this).

Thank you!

[wOxxOm]

If your users are fine with editing Chrome's shortcut, it should be possible to hide the debugger notification by specifying --silent-debugger-extension-api in the command line.

As for Puppeteer, it is a standalone tool so it an't be used "inside" extensions. Extensions can use nativeMessaging API to call a previously registered shell script that runs Puppeteer, however to control an existing browser the users would have to edit the command line anyway to add --remote-debugging-port