2

There are js functions to get browser size, window width and scroll position. Is there anything that quickly allows you to interrogate the total page size or weight?

Having a google - I can't see anything obvious. Clearly, you can view this using dev tools see below - but my end application requires that I display this within the page after load.

enter image description here

Dan Lee
  • 684
  • 4
  • 15
  • 35
  • 1
    Somewhat related: https://stackoverflow.com/questions/890221/how-to-get-current-page-size-in-kb-using-just-javascript – tevemadar Jun 09 '21 at 07:16
  • Potentially useful: https://stackoverflow.com/questions/30390632/how-to-get-file-size-of-scripts-and-stylesheets-with-javascript (check the request headers using JS) – enhzflep Jun 09 '21 at 07:18
  • 1
    You could maybe use a ServiceWorker, this allows you to intercept all HTTP traffic, including fetch requests etc, you could then sum up the bytes downloaded. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API – Keith Jun 09 '21 at 07:22
  • The above 2 links are from 2012 & 2015, things have moved on somewhat, the support table for ServiceWorkers -> https://caniuse.com/serviceworkers – Keith Jun 09 '21 at 07:27
  • Thanks @Keith - your suggestion seems to be a good idea. If you point me to some tutorials on getting started in the answer below I will accept the answer. – Dan Lee Jun 09 '21 at 08:39
  • What do you expect from this number? You disabled the cache for the measurement, but actual users in everyday browsing will have it enabled for example. – tevemadar Jun 09 '21 at 09:33

1 Answers1

1

Get raw page size

document.body.innerHTML.length // 100 chars // 100/1024 kilobytes

To get total page size

document.body.innerHTML.length
+
All css file contents fetch('styles.css').then(v => v.text().length)
+
All js file contents fetch('script.js').then(v => v.text().length)
Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69