Topic: Optimizing JavaScript Ad Sizes (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=28844" title="Pages that link to Topic: Optimizing JavaScript Ad Sizes (Page 1 of 1)" rel="nofollow" >Topic: Optimizing JavaScript Ad Sizes <span class="small">(Page 1 of 1)</span>\

 
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 01-18-2007 17:51

An ad will be served up via a script tag

code:
<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

code:
<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

code:
<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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 01-18-2007 19:34

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)

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 01-18-2007 20:34

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 01-19-2007 01:55

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu