Hello guys. It's about time to write such an article on how to optimize the HTML code of your TGP, CJ2 or any other site so it will load much faster and save up to 30% of disk space or even more.
I'm using this technique for 2 years I think and it's doing just great. It's not only reducing the size of your HTML file, but also makes it hard to read for code thieves. OK, no more teory, let's move to practice area...

Practice area: you all know that every symbol is 1 byte... the more unnecessary symbols you have, the more disk space your HTML file takes.

1. First of all, about " and # symbols. " and # symbols are useful for java and other scripts you have on your page only. Delete all " and # symbols because the pages look perfect without them - they are ballast.
All font, image, table, alignment, href and other tags containing " symbol in them can be without the " symbol easy,

examples:

<TABLE WIDTH="100%" CELLPADDING="5" CELLSPACING="0">,
<FONT SIZE="2" COLOR="#FFFFFF" FACE="VERDANA">,
<TD WIDTH="77%" VALIGN="TOP" BGCOLOR="#FFFFFF">,
<a href="http://www.pornresource.com">,
<p align="center">,
etc.

so delete them all and the results will be:

<TABLE WIDTH=100% CELLPADDING=5 CELLSPACING=0>,
<FONT SIZE=2 COLOR=#FFFFFF FACE=VERDANA>,
<TD WIDTH=77% VALIGN=TOP BGCOLOR=#FFFFFF>,
<a href=http://www.pornresource.com>,
<p align=center>,
etc.

Note, that you can't delete the " symbols in alt tags when there are more than 1 word (example ... alt="fucking sluts") and you can't delete the " symbols in font tags when you use a few font names at the same time (example: <font face="Arial, Helvetica, sans-serif">). Also don't delete the " symbols from target options ( target="_blank" and similar ) because when this option has " symbols, it will open every link in the new page, and if it has no " symbols, it will open every clicked link in the same new window (explanation: if you click 3 links on a page and they have target="_blank" - this will open 3 new pages, if you have target=_blank - it will open all the pages in a new window, but this window will be only one - you'll get the last page you clicked the link for)

Also delete # symbols when they are used for color codes (example: COLOR="#FFFFFF", after it was modified: COLOR=FFFFFF).
So we probably saved a few kilobytes already. Some of you use ' symbols instead of " ones for the tags I described before (example: <table align='center' border='1' width='500'>). Delete ' symbols too if they are as a replacement of " symbols in your HTML code.

2. Replace color codes with color names when they are used for font, table and similar tags: why use #FFFFF when we can write white, or why use #000000 when we can write black, the same with red, green, pink, etc. - these names are shorter than color codes and this saves the disk space too.

3. Don't use the same font tags over and over again for every gallery link or text that has the same font/color properties. Make CSS (Cascading Style Sheets) file and include it into the page or simply put the CSS code on the top of the page (CSS theory was explained on http://www.pornresource.com/article.php?aid=626 and http://www.pornresource.com/article.php?aid=631 ). You probably don't even know how many cool things you can make using CSS what won't take much disk space and will faster the load time of your page for surfers!

4. Replace all <strong> and </strong> tags with <b> and </b> - the meaning of these tags is the same, but if you have lots of "bold" links on your page - it will save you space.

5. Important part! Even every gap/space between tags takes 1 byte. And as I know all of you who use HTML proggies to make pages for your sites have a lot of unnecessary spaces what probably makes it easier to read the code, but slower the load time because of bigger file size. The main thing is that we can delete only double spaces - when we have 2 spaces at the same time.
This is an example of how the standard HTML code looks like:

  <table border="0" width="700" height="782" bgcolor="#000000">
    <tr>
        <td align="center" width="130" height="21">&nbsp;</td>
        <td align="center" width="21" height="21">&nbsp;</td>
        <td align="center" width="130" height="21">&nbsp;</td>
        <td align="center" width="21" height="21">&nbsp;</td>
        <td align="center" width="130" height="21">&nbsp;</td>
        <td align="center" width="21" height="21">&nbsp;</td>
        <td align="center" width="130" height="21">&nbsp;</td>
    </tr>
  </table>

Take a look, we can delete all the spaces before the 1st tag starts, delete the " and # symbols plus replace the color code with color name too. So the edited HTML code will look this way:

<table border=0 width=700 height=782 bgcolor=black>
<tr>
<td align=center width=130 height=21>&nbsp;</td>
<td align=center width=21 height=21>&nbsp;</td>
<td align=center width=130 height=21>&nbsp;</td>
<td align=center width=21 height=21>&nbsp;</td>
<td align=center width=130 height=21>&nbsp;</td>
<td align=center width=21 height=21>&nbsp;</td>
<td align=center width=130 height=21>&nbsp;</td>
</tr>
</table>

And again, if you open it in your browser, you won't see any difference, but faster loading time.
So let's summarize how many bytes we saved just by optimizing the HTML code (I just counted the number of unnecessary spaces and other symbols and things I described above):
We saved 96 bytes. The source code had 521 characters including spaces, and the optimized code has 425 characters so we saved 18.4% of space.

6. You'll ask "How the fuck will I sit here and delete all the unnecessary characters by hand? It will take a shitload of time! No Way!"
Use any text/HTML editor having "Replace" feature: it can be WordPad, UltraEdit-32 or I especially recommend Macromedia DreamWeaver as it has multiline renamer easy to use for optimization of moved lines.
This is how to use the rename feature to optimize moved lines (don't pay attention to " symbols in this explanation as they are used only for you to know where to cut/paste the things):

a) in "Find What" field write this:
"  "
note that there's 2 spaces at the same time inside of " symbols
in "Replace with" field write this:
""
this means on the "Replace with" field should be nothing.

b ) in "Find What" field write this:
">
<"
note that there's 1 space after the > symbol
in "Replace with" field write this:
"><"

c) in "Find What" field write this:
">
<"
note that there are no spaces after the > symbol
in "Replace with" field write this:
"><"

d) in "Find What" field write this:
">
"
this means that no symbols or spaces are in the 2nd line and there are no spaces after the > symbol
in "Replace with" field write this:
">"

e) in "Find What" field write this:
"
"
this means that no symbols or spaces are in the 2nd line and there's only 1 space in 1st line. Looks funny, but it will delete moved lines for you.
in "Replace with" field write this:
" "
(1 space)

7. No need to put full URL to your links if it is the same everywhere (if all your links to galleries are like this: http://www.granny-post.com/cgi-bin/ucj/c.cgi?p=85&link=70&url=http://www.galleryurl.com and so on, with different gallery URL at the end) Save your space by writing a base tag on the top of your HTML code right after <HEAD> tag. The base tag will look like this: <base href=http://www.granny-post.com/cgi-bin/ucj/> so now for your gallery listings you need to use only this kind of linking: c.cgi?p=85&link=70&url=http://www.galleryurl.com - you see how much it is shorter. NOTE: that because of base href tag you'll need to write full path to the images you use on your page and to other links which do not start with URL written in base href tag!

8. No need to put target="_blank" (or any other target option) for every link on your site. Just put an extra option in base tag (described in 7.) so it will look like this: <base href=http://www.granny-post.com/cgi-bin/ucj/ target="_blank">. Now you can delete target options listed in base tag from all the links on your site, just keep the target options that are different!

9. Deeper optimization could be done if you have a lot of tables on your page, and you set widths and heights for every row/column. As I know from my own practice, no need to write <td width=60> or so for every cell in the table. If you have, let's say, a table with 10 rows and 5 columns and every column has its own width... You don't need to set widths for the columns on every row, put the widths for the top row only and it will do the job for all the other ones.

After you optimized few pages using the ways I tried to explain here, you'll be a pro of HTML optimization and it will take only a few minutes to optimize a page of easypic.com size :)

If you know any more things I forgot to mention or you have questions/suggestions - feel free to email me at [email protected] and we'll discuss about that. By the way, all clients of Orchid Designs get the sites I design for them optimized for free if you ask me.

This Article was written by SpyCam - web designer of Orchid Designs ( http://www.orchiddesigns.com