HTML

warning: Creating default object from empty value in /home1/seocactu/public_html/csharptocsharp/modules/taxonomy/taxonomy.module on line 1388.

Here are my favorite Firefox add-ons

Web Developer tool bar (gotta love Ctrl+Shift+f)

Firebug (the best javascript debugger and more)

Html Validator (great for seeing all your awesome htmlz c0dez)

Sqlite Manager (the version for Firefox 3.5 is much improved)

Greasemonkey (custom scripts)

Modify Headers (I use to test other user agents)

Live Page Rank (get google page rank for the site you're on)

Search Status (lots of SEO goodies)

Add n Edit Cookies (easily add and/or modify cookies)

Remove Cookies for Site (removes cookies only for the site you're on)

ColorZilla (eyedropper tool to get any color on a web page, in an image, or html)

refspoof (change the referring url)

YSlow (figure out why your site is slow :( )

Hackbar (test your site with various sql injection strings)

If you're like me, and make all of your data-related html bits yourself because you want full control of its output or you enjoy micro optimization... read on.

You're doing your loop thing with your StringBuilder thing because your specs say all the data needs to be on the same page (no paging, more-data-as-you-scroll (or other ajax) [bad specs, eh? Or you're just doing it wrong].

You finally got your page finished, loaded and hot DAMN it's 950kb. That's CRAZY! You gotta do something about that! You'll definitely want to optimize the html that is created during the looping operation. You know, it looks something like this...

StringBuilder sb = new StringBuilder();
sb.Append("<table>");
for(int i=0; i<aZillion; i++) {
sb.Append(@"<tr class=""oddTableDataRow""><td align=""center"" valign=""middle"">blah</td>
<td class=""bottomBorderDarkest""><strong>zonk</strong></td></tr>");
}
sb.Append("</table>");

Ok, so that was very simple. Obviously most cases are much more complicated, but still, it can be optimized. Some of these are general, others are very specific... some might not even be 100% html standards compliant. But hey, no one likes a slow loading page?

here we go:

· Make sure all css classes are actually used, and necessary.

· NO, I repeat, NO inline styles or style-like attributes. Everything should be done in your style sheet(s).

sb.Append(@"<tr><td width=""500"" align=""left"" valign=""top"">...);


· Use the smallest possible names for css classes, css ids, and javascript function names

Instead of id="header" use id=hdr
Instead of class="topBorderNew" use class=tbn
Instead of SomeJsFunctionThatIsPairedWithEachRow(); use s();

· If you have to make words 'stand out,' use <b> instead of <strong>, it's shorter

<b>a</b> = 8 characters.
<strong>a</strong> = 18 characters.

We're on an html diet, so sorry semantics!

· use <i> instead of <em>
(same logic as above)

· Use the innerHTML of a dropdown (<select>, rather than its value) (unless innerHTML and value are wildly different). <select> boxes are notorious for using up lots of Kbs.

· don't use double quotes (or any quotes for that matter).

<img src=image.jpg /> rather than <img src="image.jpg" />
<td class=blah> instead of <td class="blah">

· if you have lots of line breaks, use <br> instead of <br />

google does it all the time.

· limit the use of <span> tags

Use a parent container/selector to modify a would-be span-wrapped item.

· Don't use an 'odd' and an 'even' class for row highlighting.
Use one of them. You pick. (You could argue that this can easily be done client-side, but with large datasets you will notice the striping applied after the page is loaded.)

With some of these strategies, I turned a 950kb dynamically-generated page into 603kb page. That's a 36% savings! You could argue that, it's still pretty hefty, or most of this now can be done client-side, or hey "use a templating language" dumbo... but it isn't always an option.


$$cha-ching!$$


cha-ching!


If you tried any of these and they worked for you, let me know how many kbs you saved! Or please give any of your own.

About Brian


profile for bluevoodoo1 on Stack Exchange, a network of free, community-driven Q&A sites

Brian Canzanella brings you nifty tips and tricks for most things .NET. read more...

Readers / Stuff