Forum Moderators: open

Message Too Old, No Replies

Tips and tricks to reduce HTML file size

What are the best ways to trim the fat?

         

SkinnyJoe

10:02 am on Apr 4, 2003 (gmt 0)

10+ Year Member



What are the best ways to reduce HTML file size, without causing any problems?

For example: How much "white space" can be deleted from the HTML file? All of it?

Example 2: Is there a way to set the font for an entire page without using an external CSS file, instead of adding the long tag to all the paragraphs?
"<font face="Arial, Helvetica, sans-serif">LIKE THIS</font>"
That would be a major help.

Thanks a lot!

tedster

10:06 am on Apr 4, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is there a way to set the font for an entire page without using an external CSS file?

You can just let the user's default font take over and not worry about it. Lots of sites do that.

But, if you try to "economize" on font tags, you can run into invalid code and sporadic browser problems. A <font> tag is an inline tag, and a <p> tag is a block level tag. So this kind of tag nesting is not valid:

<font>
<p>content</p>
<p>more content</p>
</font>

[edited by: tedster at 1:29 am (utc) on April 8, 2003]

onlineleben

10:18 am on Apr 4, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi, we had lots of discussions about HTML files size etc. in threads related to bandwidth reduction. you can either use the site search or try the links provided by me in this post: [webmasterworld.com ]

ShawnR

10:36 am on Apr 4, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



But just to respond to the specific example, you could set the font for most of the page using an attribute of the <body> tag:

<body style="font-family: Arial, Helvetica, sans-serif;">

Alternatively, you could define css styles within your html document if you really don't want an external css file:

<style type="text/css">
<!--
P {font-family: Arial, Helvetica, sans-serif;}
-->
</style>

Shawn

Birdman

12:40 pm on Apr 4, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



1) Move any JavaScript to an external file

2) Do use external style sheet and lose any <font> tags.

3) Use relative linking(/blueweidgets/page.html), rather than absolute(http://www.thewidgetstore.com/blueweidgets/page.html).

That's all I can think of except the ultimate code minimizer, pure CSS layout.

gingerbreadman

12:43 pm on Apr 4, 2003 (gmt 0)

10+ Year Member



I'm with birdman on this. Unbelievable how many big sites still don't do this.

Use software to remove the whitespace too.

kiwanji

3:26 pm on Apr 7, 2003 (gmt 0)

10+ Year Member



I never knew about the font-family attribute! What a time saver! Thanks!

Filipe

12:18 am on Apr 8, 2003 (gmt 0)

10+ Year Member



Kind of as a trade off to the Pure CSS layout - which while it's becoming more practical, still has some inherent problems which can cause serious headaches - I recommend using CSS at every turn possible. You can cut down DRAMATICALLY on code size using this method.

We offer download-time reduction (mostly images and FLASH, but we do HTML too), and we can reduce a 3k file to a 1k file pretty easily by:
1. Using CSS at every turn
2. simplifying table structure
3. Getting rid of unnecessary tagsets
4. Getting rid of non-crucial whitespace
5. Moving all CSS/JS to external files
6. Shortening comments

and a few other things.

tedster

1:00 am on Apr 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Another factor - intelligent use of CSS for the default version of each element.

That is, if most of your H1 tags need a 0 margin-bottom, then make that the H1 rule, and not a special class. The goal is to have as few class attributes in your HTML markup as you can.

[edited by: tedster at 1:33 am (utc) on April 8, 2003]

buckworks

1:16 am on Apr 8, 2003 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



1) Be ruthless about not using an image where text could do the job. That might not shrink your HTML, but it can sure help your page's total loading time.

2) If you like rollover effects, learn to do them with CSS.

3) Limit bells and whistles to things that are genuinely useful, not just cute. Do you really need a javascript doodad to tell your visitors what day it is and wish them Good Morning?

grahamstewart

4:38 am on Apr 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is there a way to set the font for an entire page without using an external CSS file?

Well if you want to be 'old school' about it then I think the tag you are looking for is <basefont>.

However you should be aware that <basefont> and <font> are both deprecated. CSS is the way ahead. I would highly recommend dumping all your font tags and using an external stylesheet. You'll save on file size and your html will be a lot less cluttered.

How much "white space" can be deleted from the HTML file?

Yeah pretty much all of it.
As far as I know only the DOCTYPE tag has to be on its own line.

But if you are messing about with the file a lot I'd recommend checking it through with a decent HTML validator (try [validator.w3.org...] before publishing it.. just to make sure.

SkinnyJoe

11:41 am on Apr 8, 2003 (gmt 0)

10+ Year Member



Brilliant information!

Just this one suggestion:
<body style="font-family: Arial, Helvetica, sans-serif;">
reduced my HTML from 40K to 32K.

If everyone used a tip like that, the Internet would go 20% faster.

And that was super easy, without me knowing a thing about CSS or how to make an external Javascript file or which tags can be safely deleted.

My HTML is written in Dreamweaver 3, and it has quite a few unnecessary tags.

Thanks for some big help!
-SkinnyJoe

Sinner_G

2:11 pm on Apr 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



My HTML is written in Dreamweaver 3

In this case, here is another trick: get rid of DW 3 and get DW MX. Much better code from there, less unnecessary stuff. Only thing I noticed is when you copy/paste whole tables, DW often puts empty lines inbetween rows. But these are quite easy to spot in the code.

WibbleWobble

2:33 pm on Apr 8, 2003 (gmt 0)

10+ Year Member



That's quite an expensive trick :p