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

Question

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.

Answer 1

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";

1. Example with text only;
2. Example geting the size of image;
3. Example with content-length

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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