Putting web page on a diet

[palmpal]

Hello,

There was some discussion on the boards about reducing file sizes of web pages and "Frontpage" bloat. I used Frontpage when doing my website (my first!) and ended up taking out alot of what Frontpage put in in order to get things to validate. Is there something specific to look for in the code that will reduce the file size?

My pages are table based with graphics in each cell. I successfully reduced the file size about 15-20% and things do load quicker. I just wondered what short-term things I could do to reduce the size and also what I should be looking at doing long term (when I get up enough guts to revise my site) to reduce my file size. I have Dreamweaver 4 that I could install and try to learn. What about learning a different type of HTML?

Also, I saw a site that seemed to load graphics from a CGI-BIN. Does this keep the page sizes down?

Thanks for any advice.

Palmpal

[johnhamman]

dreamweaver has a command that removes unwanted code which would take out junk from frontpage. If you have dreamweaver i would recomend learning it over using frontpage. Another simple solution is to remove all the white space between tags. For example if you had tags like </td> </tr> make it </td></tr>. White space for those who don't know is the blank space between characters.
anyways thats my 2 cents.
john

[tedster]

Some of the sites I've inherited were simply amazing when it came to unneeded code. The important thing is to know enough HTML that you recognize when code is doing nothing at all, or going at the end result in a too complicated way.

Have you ever seen font tags opened with color, size, font-family...the whole nine yards...only to close after a single &nbsp; -- all that was needed was perhaps <br> or two.

Or how about layout tables where every <td> has width and height attributes? The entire row can only have one height, after all, and the entire table column only one width.

The biggest problems I've seen with code bloat come from two areas:

1. Thinking of HTML as a layout program and then sticking in whatever you want, and wherever you want, just to get your browser to give you the look you want.

2. Trying too hard to control what the browser is going to do, down to the pixel.

HTML isn't about the look or the visual structure, it's about the content and the logical structure. The look should be handled mostly with CSS. Once you catch CSS fever, you start to get much clearer about how to use HTML in the manner it was planned. And code bloat starts to scream at you.

[MWpro]

You want the best solution for unneeded code? Use pure html, not an editor! It is really not that hard, and once you get the hang of it you will realize that you no longer need to use the programs and can make more efficent web pages on your own. I mean, why use a wheelchair when you can walk?

To reduce the size of table images, you need to break them up. Like say you want the top part of your document to have a top border that is 700px wide with rounded edges. Instead of making the whole graphic 700 px, you just break it up into three separate sections (td's), (left, middle, and right). In the left cell would be a rounded corner, in the middle would just be the background color and nothing more, and in the right cell would be another rounded corner. You've just reduced an image that would have been a whole 700px wide image into maybe say two 50-80 pixel wide images, saving tons of loading time and file size, and you get the same effect.

Now I know this was an easy example, but maybe if you post a link to your site we can see what configuration of tables you have and how to break up the images so they load faster.

<!--"The look should be handled mostly with CSS. Once you catch CSS fever, you start to get much clearer about how to use HTML in the manner it was planned. And code bloat starts to scream at you."-->

I agree, CSS is amazing for organizing your site and making it easier to code. The only thing I disagree with using CSS for is tables, since you are really only complicating yourself with trying to do it the "easier" way while you are overlooking the most efficent way of doing it. CSS is great for everything else though :)

[palmpal]

Thanks Tedster and MWPro. My site is located in my profile. I do have the background sliced in a table. The only sections I don't want to reduce too far on the background is the name/logo sections.

I'll take a look again at my code to see if I can spot any extras not needed.

Palmpal

[andreasfriedrich]

why use a wheelchair when you can walk?

Since on an even surface you are way faster in a wheelchair. True enough walking is more flexible but not nearly as fast as a wheelchair in standard situations.

Andreas

[MWpro]

-->Since on an even surface you are way faster in a wheelchair. True enough walking is more flexible but not nearly as fast as a wheelchair in standard situations.

Web design is something that should be thought about and planned out, not just made fast by clicking on some buttons... When something goes wrong with the program or it doesn't give you the effect you want, then you won't really know what to do because you are too dependent. Given, I could make 10 decent web pages in a short period of time with an editor, but I would rather make one extremely well done web page that is thought out and planned out well in that same time period. And also when you do it by hand, you develop your own style, so if anything goes wrong you can read and find out what went wrong, instead of going through the source clueless about what is happening and trying to decipher unfamilar code when you use an editor.

[palmpal]

I guess I took the walking approach when designing and putting together my website. I had no clue what HTML was all about. I found that the best way for me to learn was to try do things manually. Even though I used Frontpage, I still found myself going in and changing things around. All in all it took about 3 1/2 months to do (working on it in my spare time.)

Palmpal

[WibbleWobble]

Since on an even surface you are way faster in a wheelchair. True enough walking is more flexible but not nearly as fast as a wheelchair in standard situations.

What if I walk fast, and wheelchair really slowly?
:p

(Why is wheelchair not a verb?)

[andreasfriedrich]

Then you´re waisting energy since you could have gone equally fast wheelchairing needing less energy ;)

Web design is something that should be thought about and planned out

So far I was under the impression that wheelchairs do not prevent you from thinking and planning.

Andreas

[brotherhood of LAN]

>>>Why is wheelchair not a verb?)

You can touch it ;)

>>>>I just wondered what short-term things I could do to reduce the size

If you are using FP and FP by default, you might want to tinker aroundw with that before it contributes any more unncessary code into the mix.

I just opened FP 2002 and "drew" a table

<div align="left">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="360" height="157" id="AutoNumber1">
<tr>
<td width="360" height="157">&nbsp;</td>
</tr>
</table>
</div>

Obviously that code is fat, and you dont want to have to keep editing it.

I'd make yourself some code templates that you can cut and paste into your pages so you dont have to keep working against code bloat.

Then when you find out more about the mystical advances of CSS and the like, and your templates still have "extra" code, you can strip down the templates quickly using CSS and keep the code lean and easy to access when needed.

The topic has came up a few times over a couple of weeks, you mentioned reading one of em, you might have missed one :) They were both pretty comprehensive.