Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder Andy92's Avatar
    Join Date
    Nov 2005
    Location
    Horsham, West Sussex, UK
    Posts
    363
    Thanks
    7
    Thanked 1 Time in 1 Post

    Compress html and css documents to conserve bandwidth?

    Hi there,

    Is there any way to cut down the size of html documents and css documents, so that they have all the same code in them but they are smaller, so it can save more bandwidth from being used?

    Like instead of...

    Code:
    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 65%;
        color: #333333;
        background-color: #1F1F1F;
        margin: 0px;
        text-align: left;
    }
    Could i compress it to...

    Code:
    body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 65%;color: #333333;background-color: #1F1F1F;margin: 0px;text-align: left;}
    And can i do the same for html documents?

    Is there any website which will compress files for you?


  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Here's something that should save you a bunch: you can use just "font:" to specify all the font properties, including line-height. The scheme goes like this:
    Code:
    font: size/line-height weight fonts
    or, for example:
    Code:
    font: 65%/75% bold arial, tahoma, sans-serif;
    if you don't want to specify a line-height, just omit "/line-height" like
    Code:
    font: 65% bold arial, tahoma, sans-serif;
    .
    you could also remove all the whitespace (most css files don't need them, unless you use some certain rules like content:after), but this would save you very very very little space. you can also, in the example above, use just "background:" instead of "background-color:".
    Also, when specifying a dimension (in border, padding, margin, width...), you can use 0 as a length as well as a unit. This means instead of saying margin:0px; you can use margin:0;, since it doesn't matter what unit you use, 0 is 0.

    So you should get in the habit of using shorthand CSS properties, search the net for it (something like "shorthand css file size..." w/o the quotes.)

    As far as html goes: you could remove all unneccessary whitespace, omit the HTML and BODY tags (according to specifications, you can do it and still have a valid document. this is an advantage of using HTML doctypes: you can omit certain tags. for example, my site omits them, yet is perfectly valid HTML 4.01 Strict.

    if you have repetitive code, you could make it a variable in javascript, and then just have JS echo the variable where you need it, but I wouldn't do this since not all people have JS enabled.

    If you'd give us your whole CSS we'd be happy to compress it to the max using shorthand properties.

    BTW how are things at GTG?
    Last edited by croatiankid; 01-28-2007 at 10:40 AM.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This site is pretty good at compressing CSS.
    http://www.cdburnerxp.se/cssparse/css_optimiser.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    For what it's worth, I've found that the benefits of code readability far outweigh the few kbs saved when optimizing a file; especially since CSS is generally cached. That said I still tend to use CSS shorthand; I just don't go through all the extra trouble of stripping whitespace and formatting.

  • #5
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek View Post
    For what it's worth, I've found that the benefits of code readability far outweigh the few kbs saved when optimizing a file; especially since CSS is generally cached. That said I still tend to use CSS shorthand; I just don't go through all the extra trouble of stripping whitespace and formatting.
    I totally agree with this, so long as you optimise it as much as possible as in move from tables to DIV and use CSS correctly then that will be enough
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •