How to get current page size in KB using just javascript?

javascript html widget

17,288

Solution 1

Unless your page has size in megabytes, the result will be meaningless.

This is because time needed to connect, send request, and wait for server to send reply back is quite large compared to time required to download the page, and in addition to that TCP/IP has slow start.

You also have to take into account caches, proxies and number of parallel connections that browser will make (e.g. may prioritize download of scripts and styles, making page download time appear slow).

Solution 2

if you mean just the html then you can use jQuery to do get the number of characters (bytes in most cases, depending on the encoding)

$(document).ready(
    function()
    {
        var pagebytes = $('html').html().length;
        var kbytes = pagebytes / 1024;
    }
);

this basically counts number of characters contained within (including) tag. that will exclude any Doctype specified, but since that would be static always you can add length of doctype to pagebytes.

//Edit

looks like doctype in the end may not be static. but without it, it still should be accurate enough.

Solution 3

I think grabbing a known data file via Ajax would be a better solution than measuring the current page. It's easier to time the start and completion of an Ajax call.

Solution 4

There is a non-standard property available only for IE - document.fileSize ^MDN ^MSDN. It returns the size of the html page in bytes.

Or you can get the content-length header

var request = new XMLHttpRequest();
request.open('GET', document.location, false);
request.send();
var size = request.getAllResponseHeaders().toLowerCase().match(/content-length: \d+/);
document.getElementById("size").innerHTML = size + " bytes";

Solution 5

To get the file size of pages on the web I built a javascript bookmarklet to do the trick. It alerts the size of the page you're on in kb's. Not sure if it can help with connection speed though.

Change the alert to a prompt if you want to copy the filesize.

Here's the bookmarklet code for the alert.

<a href="javascript:a=document.getElementsByTagName('HTML')[0].outerHTML;b=a.length/1024;c=Math.round(b);alert(c+' kb');">Doc Size</a>

Here's the bookmarklet code for the prompt.

<a href="javascript:a=document.getElementsByTagName('HTML')[0].outerHTML;b=a.length/1024;c=Math.round(b);prompt('Page Size',c+' kb');">Doc Size</a>

See it in action at http://bookmarklets.to.g0.to/filesize.php

View more solutions

17,288

Author by

Amr Elgarhy

Updated on July 27, 2022

Comments

Amr Elgarhy almost 2 years

Referring to this question , how can i get the current page size in kb, this size i will use to know the connection speed for this page.
- Christian about 12 years
  
  What stops you from using a fix-size file? To limit caching, just pass a random GET parameter: 'file.dat?nc='+Math.random()
Amr Elgarhy about 15 years

I am going to make this as a widget where other users can put on their website, and want to calculate speed their browsers not on the server
annakata about 15 years

I've done exactly what you're trying to do and you HAVE to use a file of a known size - typically an image.
Amr Elgarhy about 15 years

ah, ok, so the widget will contain for example a fixed size image and will calculate comparing to it.
Allen Rice about 15 years

Combine this answer with Diodeus's answer and there you go!
Bergi over 9 years

This seems to fail horribly on <html><script>for(var i=0; i<10000; i++)document.write(i)</script></html>
Nadir Novruzov over 9 years

And it will not take into consideration gzipping by the server.
malifa over 8 years

thanks. This helped answer my question at stackoverflow.com/questions/33351977/…
andre487 over 7 years

Unfortunately this method is ASCII-only. If you use unicode there is no clear match between length and bytes.
data almost 6 years

cleaner: (document.documentElement.outerHTML.length/1024).toFixed(0)