I'm tweaking this bookmarklet/favlet that calculates page size and weight, along with probable download times.
Paste this into your address bar when viewing a graphics heavy local page (on your local drive):
code:
javascript:void((function(){var element=document.createElement('script');element.setAttribute('src','http://dev.runningwolf.com/code/javascript/page_size_weight/page_size_weight.js');document.body.appendChild(ele ment)})())
Then go to an Internet page. Notice that when viewing the local page, the kb values in parenthesis are correct. But when viewing a remote page, they are NaN.
I can't figure out why that's the case. Ideas?
Here is the contents of the page_size_weight.js file:
code:
function showPageWeight() {
var i;
var doc = document;
var filesize = parseInt(doc.fileSize);
var imagesize = 0;
var imageMap = new Object();
var message = "";
for (i = 0; i < doc.images.length; i++) {
if (!imageMap[doc.images[i].src]) {
imagesize += parseInt(doc.images[i].fileSize);
imageMap[doc.images[i].src] = true;
}
}
var pageweight = (filesize + imagesize).simpleFormat();
var pageweightkb = Math.round((pageweight/1024)*100)/100;
var docweight = filesize.simpleFormat();
var docweightkb = Math.round((docweight/1024)*100)/100;
var imagesweight = imagesize.simpleFormat();
var imagesweightkb = Math.round((imagesweight/1024)*100)/100;
message += "This page weighs " + pageweight + " bytes (" + pageweightkb + "kb):\n\n";
message += "Document: " + docweight + " bytes (" +docweightkb + "kb)\n";
message += "Images: " + imagesweight + " bytes (" + imagesweightkb + "kb)*\n";
message += "\nApproximate download times:**\n";
message += "14.4 Kb: " + filesize.toDownloadSeconds(14400).roundTo(2) + " sec.\n";
message += "28.8 Kb: " + filesize.toDownloadSeconds(28800).roundTo(2) + " sec.\n";
message += "33.6 Kb: " + filesize.toDownloadSeconds(33600).roundTo(2) + " sec.\n";
message += "56 Kb: " + filesize.toDownloadSeconds(56000).roundTo(2) + " sec.\n";
message += "64 Kb: " + filesize.toDownloadSeconds(64000).roundTo(2) + " sec.\n";
message += "128 Kb: " + filesize.toDownloadSeconds(128000).roundTo(2) + " sec.\n";
message += "1.554 Mb: " + filesize.toDownloadSeconds(1554000).roundTo(2) + " sec.\n";
message += "\n[*Does not include other resources (.css,.js,.jar,etc.) " + "or images from style sheets]";
message += "\n[**Download times may vary " + "depending on network traffic]";
alert(message);
}
Number.prototype.simpleFormat = function() {
var nstr = new String(this);
var f = 1;
for (var i = nstr.length - 1; i > 0; i--) {
if (f/3 == Math.ceil(f/3)) {
nstr = nstr.substring(0,i) + ',' +
nstr.substring(i,nstr.length);
}
f++;
}
return nstr;
}
Number.prototype.toDownloadSeconds = function(bitsPerSecond) {
if (isNaN(bitsPerSecond)) return NaN;
return this / (bitsPerSecond / 8);
}
Number.prototype.roundTo = function(places) {
if (isNaN(places)) return Math.round(this);
return (Math.round(this * Math.pow(10,places)) / Math.pow(10,places));
}
// invoke on load
showPageWeight();
For what it's worth, more info at http://www.gazingus.org/js/?id=108
I'm basically adding the kb calculations. I really like this version since it counts images only once. Other versions counted every image on the page - if a single image appeared multiple times, it got counted multiple times. Plus, this version shows more download times (for various speeds).
[This message has been edited by Pugzly (edited 07-10-2003).]