jQuery Plugin: Page Size Analyzer for Page Performance Monitoring


One of my senior Technical Architect asked me if i could come up with some useful widget that could help him display the page size of the current page. I thought of writing a jQuery plugin that could do this job. I am sharing it here. Do read the notes carefully before using it.

Screenshot:

Features v1.0:

  • Totally unobtrusive
  • Gives the result in KB or bytes according to the page size
  • Page Size displayed in red or green depending on the threshold value set
  • No server post done to retrieve the page size.

Known Issues:

  • Page size is an approximate value. Double-chords(“) associated with the ID, script tags are excluded in this calculation. I am working on a fix for this.

How to use?

  • Load your jquery using the script tag.

<script language=”javascript” src=”jquery-1.4.2.min.js” type=”text/javascript”></script>

  • Load this plugin using the script tag.

<script language=”javascript” src=”pagesize.js” type=”text/javascript”></script>

  • Invoke the script and set the appropriate parameters

<script language=”javascript” type=”text/javascript”>
$(document).ready(function(){
var res= $(“html”).html();
$(“html”).pagesize({pagecontrol:”mydiv”,threshold:50,decimalplace:3}); //threshold value is in KB; decimalplace is for the number of decimal places for the page size
});
</script>

  • Place a control (div or span) on the page wherein the page size should be displayed.

<span id=”mydiv”></span>

Complete source code:

<html>
<head>
<script language=”javascript” src=”jquery-1.4.2.min.js” type=”text/javascript”></script>
<script language=”javascript” src=”pagesize.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
$(document).ready(function(){
var res= $(“html”).html();
$(“html”).pagesize({pagecontrol:”mydiv”,threshold:50,decimalplace:3});
});
</script>
</head>
<body>
<span id=”mydiv”></span>
</body>
</html>

Downloads:

Demo [Remove the .pdf part from the filename]

Pagesize.js [Remove the .pdf part from the filename]

One thought on “jQuery Plugin: Page Size Analyzer for Page Performance Monitoring

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s