Topic: Optimizing JavaScript Ad Sizes

An ad will be served up via a script tag

<script type="text/javascript" src="[site]/ad.php"></script>

The code from ad.php will generate a block of HTML that will be output to the browser via a document.write call from inside the ad.php javascript file.

The ad that is being generated is a simple header and footer with a number of links in the middle.

Originally the html was

<table border='1' with='120' height='600' bordercolor='#000000' cellspacing='0' cellpadding='5'><tr><td valign='top'>
<center><font face=Verdana size=2 color=black><b>[Site Name]</b></font></center><br>
<a href="[ad link]"><font face=Verdana size=1>[link title]</font></a><br>
...
<p><center><b><a href='[Parent Site Link']><font face=verdana size=1 color=red>[Parent Site Name]</font></a></b></center></p>
</td></tr></table>

I have made the code a bit more compliant

<div style="border:1px solid black;width:110px;height:590px;padding:5px;font-size:x-small;font-family:verdana;">
<h1 style="margin:0;padding:0;font-size:13px;text-align:center;margin-bottom:20px;">[Site Name]</h1>
<ul style="list-style:none;margin:0;padding:0;">
  <li><a href="[ad link]">[link title]</a></li>
  ...
</ul>
<p><a href="[Parent Site Link]" style="color:red;font-weight:bold;">[Parent Site Name]</a></p>
</div>

With the updated code I get about a 2k saving per ad set served, which is pretty good, but is still ugly. I am wondering if there might be a better way to do this?

Dan @ Code Town

(Edited by WarMage on 01-18-2007 17:52)

Well there's not much you can do if you want to keep the markup 'standard compliant'. Use shorthand CSS properties to set the font-size and font-family at once, replace black by #000. But you'll save like 10-15 bytes this way. Not more.

Since the markup is dumped into the page in JS, it doesn't really need to be valid or semantically correct. You'd probably gain quite a few bytes by replacing the UL by a DIV with style='white-space:pre' thus gaining 9 bytes per link.

Hope that helps,

[edit] disabling Slimies [/edit]



(Edited by poi on 01-18-2007 19:38)

Gotta love IE and quirks mode.

In quirks mode IE ignores the white-space: pre declaration and treats it as white-space: normal

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/whitespace.asp

However, actually using the <pre> tag with a style="font: 10.5px verdana" displays things as I would like it displayed in FF/IE/Opera.

The shorthand tip was a good one. I was able to cut down my properties to a far more manageable size.

I do feel like I am cheating a bit, but I think the cost benefit of the smaller sizes will be worth it.

Dan @ Code Town

duh!
Oh well, using a PRE with a not-monospace font is fair enough.

One more thing, if there is no white space in the value of style attribute, for instance in the H1, you can get rid of the " symbols surounding the value.

OTOH, I wonder if this is really worth it compared to gzipping the JS.

Anyway, glad that helped.