total size of all assets in a webpage

Question

I am running a Google Sites New based website. This website's pages may contain images and iframes to other web pages. By using performance.timing API, I have been able to see how long it takes for a page to render:

window.performance.timing.responseEnd - window.performance.timing.navigationStart;
window.performance.timing.loadEventStart - window.performance.timing.domLoading;

I have saved these as bookmarklets so I can press the bookmarklet on any webpage.

Using performance.memory I would like to know the size of all assets downloaded on any particular webpage. How do I do this?

Answer 1

I believe using PerformanceResourceTiming is your best bet here. Per the docs:

The PerformanceResourceTiming interface enables retrieval and analysis of detailed network timing data regarding the loading of an application's resources.

So summing all these artifacts' data will yield the total size of assets on the site:

var res = performance.getEntriesByType('resource');
var totalSize = res.reduce((size, item) => {
  size += item.decodedBodySize;
  return size;
}, 0);

This will get all the entries for PerformanceResourceTiming and will sum the decodedBodySize property.