[WSG] Trimming the fat from CSS
Does everyone else on the list do this? For the sake of 11k that is cached on the first page load it seems a little drastic. I do programming work as well as markup and the indentation/formatting of the code is very important in producing readable code. If it was only me looking at the CSS then fine, but in a team situation producing CSS formatted like this could make human reading a lot harder and thus slow production time. I can understand if you use TopStyle to do this automatically but I just thought a note of caution/consideration to others reading this that may feel it's a thing all good CSS developers must do. Personally I'd prefer to leave my CSS formatted as is and shave the k's off images used, etc. Then if I need to hand the stylesheets over to someone they are more usable. Nick Anyway as for your CSS, you have a lot of fat that can be trimmed from that as well (no need to repeat the font families if ya put them in the body style) You do not need the ; after the last attribute in each style (You can remove the returns and have your list go horizontal instead of vertical) Once all done remove all spaces between the commas and the semi-colons and remove the rest of the returns and have one LONG line all of these together will trim A LOT off the size of the stylesheet mine by itself in a editing state with comments is over 18k but the version I put on line is under 7k. It dont look as pretty when it is opened and is harder to read by a human, but it is a smaller file and reads faster by a machine. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Trimming the fat from CSS
Any web server worth it's salt will gzip compress static files, which makes trimming all the whitespace a bit pointless. Ditto with any crazy-assed class naming scheme you come up with to make things smaller. I learnt most of what I know about HTML, CSS JS from viewing the source of pages that had something I thought was cool, so I think it's kinda nice to make my stuff as readable as possible for anyone doing the same these days. Also helps when I come back to make changes 6 months later wonder WTF things do :) [EMAIL PROTECTED] wrote: Does everyone else on the list do this? For the sake of 11k that is cached on the first page load it seems a little drastic. I do programming work as well as markup and the indentation/formatting of the code is very important in producing readable code. If it was only me looking at the CSS then fine, but in a team situation producing CSS formatted like this could make human reading a lot harder and thus slow production time. I can understand if you use TopStyle to do this automatically but I just thought a note of caution/consideration to others reading this that may feel it's a thing all good CSS developers must do. Personally I'd prefer to leave my CSS formatted as is and shave the k's off images used, etc. Then if I need to hand the stylesheets over to someone they are more usable. Nick -- Lindsay Evans. Developer, Red Square Productions. [p] 8596.4000 [f] 8596.4001 [w] www.redsquare.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat from CSS
Yeah pretty well what I was thinking I mean in practice CSS files are often shared and the very process of using CSS based layouts v's tables already trims a huge load off the page size anyway. It just seemed almost scarily ...thorough... to be trimming the stylesheet in this way as well. Though as I said if you have an auto trimmer/de-trimmer then fair enough. Nick Any web server worth it's salt will gzip compress static files, which makes trimming all the whitespace a bit pointless. Ditto with any crazy-assed class naming scheme you come up with to make things smaller. I learnt most of what I know about HTML, CSS JS from viewing the source of pages that had something I thought was cool, so I think it's kinda nice to make my stuff as readable as possible for anyone doing the same these days. Also helps when I come back to make changes 6 months later wonder WTF things do :) * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat from CSS
Nick You know what they say... there's anal and then there's anal ;-). I've been programming most of my life and can never figure out these guys that do this. They'll shrink every K they can find white and comments too. But they usually are the same ones that make all the syntax errors and can't remember or find what they did a month ago. Do they ever realize that machines never look at that stuff, and they do their thing at pico speeds. How many pico seconds are there in 100 or so semicolons? Besides machine code speed, then there's required block (fat32 HFS+) and packet size error correction, etc etc etc etc.. blah blah blah Oh and Nick I never do this. As a human, I like code readable. It's worth the extra 5k. Leo On Thursday, April 15, 2004, at 02:06 AM, Nick Lo wrote: Does everyone else on the list do this? For the sake of 11k that is cached on the first page load it seems a little drastic. I do programming work as well as markup and the indentation/formatting of the code is very important in producing readable code. If it was only me looking at the CSS then fine, but in a team situation producing CSS formatted like this could make human reading a lot harder and thus slow production time. I can understand if you use TopStyle to do this automatically but I just thought a note of caution/consideration to others reading this that may feel it's a thing all good CSS developers must do. Personally I'd prefer to leave my CSS formatted as is and shave the k's off images used, etc. Then if I need to hand the stylesheets over to someone they are more usable. Nick Anyway as for your CSS, you have a lot of fat that can be trimmed from that as well (no need to repeat the font families if ya put them in the body style) You do not need the ; after the last attribute in each style (You can remove the returns and have your list go horizontal instead of vertical) Once all done remove all spaces between the commas and the semi-colons and remove the rest of the returns and have one LONG line all of these together will trim A LOT off the size of the stylesheet mine by itself in a editing state with comments is over 18k but the version I put on line is under 7k. It dont look as pretty when it is opened and is harder to read by a human, but it is a smaller file and reads faster by a machine. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat from CSS
Jason An even better question is : What kind of irony is it when someone who joins an open standards group considers practicing such anti-open-standards technique? ;-) Leo On Thursday, April 15, 2004, at 02:34 AM, Jason Turnbull wrote: Nick Lo wrote: Does everyone else on the list do this? For the sake of 11k that is cached on the first page load it seems a little drastic I would agree its not going to save much, having readable code is much more important, I wonder if people who do this also remove all spaces/tabs within the html code Jason * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Trimming the fat from CSS
I happen to be one of those people and I can say that the practice is
under utilized by the programming industry as a whole. And I am neither anal
nor ANAL, it is simply the method of coding I like to use once I have a page
developed to a point I no I will only be touching it up here and there.
As I stated previously, I look at it as building a rocket to go to the moon
- you want light but solid and reliable. I HATE bloat and that is all the
stuff that makes code pretty and easily readable by inexperienced
programmers does.
If some one wants to review the code they can take the few seconds to do a
find } and replace with [return]}[return]
find { and replace with [space]{[space][return]
find ; and replace with ;[return] [space] [space] [space] [space]
find : and replace with :[space]
find , and replace with ,[space]
And you have the css stylesheet decrunched to the point it is fat pretty
again.
And with html, PHP and JAVA, I do the same thing wherever possible.
I always use this as a challenge to people - build a little 4-page site to
play with under the following rules:
Less than three http requests per page
Uses advanced technologies to make the site visually interesting and is not
just plain text.
1 css file - under one packet in size (less than 1160 bytes)
Page loads in under 5 seconds on 56k
Once you do that than optimize it to be as tiny as possible - how small can
you get it?
-Original Message-
From: Jason Turnbull [mailto:[EMAIL PROTECTED]
Sent: Wednesday, April 14, 2004 11:35 PM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Trimming the fat from CSS
Nick Lo wrote:
Does everyone else on the list do this?
For the sake of 11k that is cached on the first page load it seems a
little drastic
I would agree its not going to save much, having readable code is much
more important, I wonder if people who do this also remove all
spaces/tabs within the html code
Jason
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Re: [WSG] Trimming the fat from CSS
On Thursday, April 15, 2004, at 03:20 AM, theGrafixGuy wrote: I HATE bloat You know Brian, for a person who hates bloat, you sure are full of it. ;-) lol Leo * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat from CSS
Hi Brian, You seem to be getting jumped on a bit for this and I'd say it's largely a matter of preference so a little pointless to go on at length about. However, you are inviting comment by saying bloat and that is all the stuff that makes code pretty and easily readable by inexperienced programmers does. since Python itself is based on indentation (formatting) and can hardly be called a bloated language nor one for inexperienced programmers. Also the other big point is a stylesheet file is cached on the first page load whereas individual pages and images are often reloaded so arguing about the 7k saved in the CSS file while leaving 1k on every image (I certainly see far more sites with poorly optimised images that could speed things up no end) would be getting one's priorities wrong (not saying you do that just a general point). So in summary it depends where you need to trim. In your workflow you have things narrowed to the degree that you can afford to go to this length but for others this may actually bloat their workflow. Part of standards development I'm sure we all love is the improvement in workflow. Nick I happen to be one of those people and I can say that the practice is under utilized by the programming industry as a whole. And I am neither anal nor ANAL, it is simply the method of coding I like to use once I have a page developed to a point I no I will only be touching it up here and there. As I stated previously, I look at it as building a rocket to go to the moon - you want light but solid and reliable. I HATE bloat and that is all the stuff that makes code pretty and easily readable by inexperienced programmers does. * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Trimming the fat from CSS
I have been accused of that and worse ;-) You should hear what the wife says :-) Brian -Original Message- From: Leo J. O'Campo [mailto:[EMAIL PROTECTED] Sent: Thursday, April 15, 2004 12:31 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Trimming the fat from CSS On Thursday, April 15, 2004, at 03:20 AM, theGrafixGuy wrote: I HATE bloat You know Brian, for a person who hates bloat, you sure are full of it. ;-) lol Leo * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat from CSS
Wow.. this is fun... Im really glad i opened up this little can of worms, the list had really been a bit too quiet for my liking today. ;o) But to Brian... you made me think about the size of the css and I have done some of what you said but not all..and even if the code is not absolutely bare bones its a tad more compact than it was before...so thanks for your advice. Cheers Jackie... PS(must be time for an alcholic beverage or three by now) Leo said I HATE bloat You know Brian, for a person who hates bloat, you sure are full of it. ;-) lol Leo * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat from CSS
Lea de Groot said: On Thu, 15 Apr 2004 16:06:43 +1000, Nick Lo wrote: Does everyone else on the list do this? Mmmm.. not fanatically, but, well, there is a place for everything. The very fact that we are on this list means that our level of fanaticism is somewhat higher than the norm. http://www.eod.com/devil/archive/web_standards.html I have that page printed out as a nice postcard, hanging next to my desk. It's a reminder that I'm not alone, when the cudgel seems particularly heavy :) Slightly related, my blog post from this morning: http://kay.smoljak.com/archives/?web-standards-are-not-easy/ K. -- Kay Smoljak http://kay.smoljak.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat from CSS
Hugh, I always put in the trailing semicolon and would ask that this practice be adopted by any team I work in even though it is not required. When I wasn't particular about putting it in, I found that when the CSS was later edited by either myself or other maintainers that inevitably a bug in the CSS would be introduced because someone would add several new properties at the end of a rule but overlook terminating the previous property with a semicolon -- irritating. Getting in the habit of always adding the trailing semicolon has pretty much eliminated that ever happening. As Lindsay mentioned earlier, either you or someone else will have to read/edit/debug your code sooner or later and its important that it is readable and easy to follow. Following widely used coding practices just causes less pain and leaves less to trip over for whoever has to work with your code after you've left the building. Cheers, chris On 15/04/2004, at 4:13 PM, Hugh Todd wrote: theGrafixGuy said, You do not need the ; after the last attribute in each style I know this is technically true (browsers will accept it) but I understood that good coding practice is to put the semicolon even after the last attribute. Anyone else know anything about this? -Hugh Todd * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat
Brian Trimming excess fat off of the code does add up over time - both in storage and in transfer/bandwidth I totally agree with everything your saying. I too remove the comments and redundant code before uploading a site. I save a commented version, as a backup copy, so I or someone else can see what was done, a year from now. granted, I'll admit... That response was finite and only applied to that one situation of removing a font family for a single generic font in a single stylesheet. Leo * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat
I haven't been following how things are going on PHP5, but do we have a target on when this might be a full stable release (and then have to really start dealing with it)? v On 25 Mar 2004, at 06:38, Justin French wrote: PHP5 looks to have some VERY NICE features in the form of Tidy, which amongst other things, will help clean up HTML output -- either on the way to the browser, or with batch-processing. It can even drop proprietary tags and elements, drop font tags, clean up your CSS, and much more. It won't fix Java, bloated images and flash, or truckloads of presentational tables and all that guff, but it's a nice feature I'll be sure to try when PHP 5 is stable. http://www.zend.com/php5/articles/php5-tidy.php --- Justin French http://indent.com.au * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
[WSG] Trimming the fat
Trimming excess fat off of the code does add up over time - both in storage and in transfer/bandwidth - granted, I'll admit whether your CSS stylesheet can be transferred in a single packet or if it is 4kb in size is not going to make much of a difference; but sitewide - getting rid of the extra comments (if you know your code), removing extra spaces and getting rid of redundant code can save a lot of bandwidth and make for an overall faster running site. With a site file getting 2500 hits a day and trimming off even 100bytes in excess size, that is a savings of 250k for the day, add that up over the course of a month and you saved 7.5MB! Now think sitewide and if you could apply the same average across the site (very easy to do) if you have 100 files on the site total the savings in bandwidth add up and so does the decvrease in the amount of space needed. As a broadband user, I'll be the first to admit I forgot what it is like for 56k and less until I visited a client who dialed up my site (I've been spoiled by the Broadband and the fact the site is cached nicely in my system) it took almost a minute for the site to completely download!) Well that ws the big incentive there to get rid of some Java that was clogging the pipe. Now, my site is better, but still not where I want it, CSS will definitely bring it more inline but alas, I need to find a good lightweight, customizable and powerful shopping cart program to replace the VERY VERY tables heavy OSCommerce. Alas the troubles we put ourselves into! Brian -Original Message- From: Leo J. O'Campo [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 24, 2004 8:23 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] Font Styles: I can see one can shave some bytes of of their CSS stylesheet Brian Bytes??? This type of savings aren't even noticeable on any system. Even if you defined that rule in every handler, you'll never notice the difference in bytes or page-loading speed. I can't notice the speed difference between a nanosecond and 100 nanoseconds. ;-) Leo * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat
Quoting theGrafixGuy [EMAIL PROTECTED]: Now, my site is better, but still not where I want it, CSS will definitely bring it more inline but alas, I need to find a good lightweight, customizable and powerful shopping cart program to replace the VERY VERY tables heavy OSCommerce. Might want to check out Zen Cart: http://www.zen-cart.com -- tim www.toolmantim.com - Web, Email and Domain hosting - www.fasthit.net * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] Trimming the fat
Great point Brian. There are a lot of web viewer still using dial-up (like me *sob sob*). Broadband STILL isn't available in my area! Simply getting my pages to validate cut down a hell of a lot of needless code, as did converting to CSS. Also valid code processes a lot faster than choked up falty code. I'm all for streamlining websites Regards, Darian Cabot -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Software Engineer - Website Design http://www.cabotconsultants.com.au -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Trimming excess fat off of the code does add up over time - both in storage and in transfer/bandwidth - granted, I'll admit whether your CSS stylesheet can be transferred in a single packet or if it is 4kb in size is not going to make much of a difference; but sitewide - getting rid of the extra comments (if you know your code), removing extra spaces and getting rid of redundant code can save a lot of bandwidth and make for an overall faster running site. With a site file getting 2500 hits a day and trimming off even 100bytes in excess size, that is a savings of 250k for the day, add that up over the course of a month and you saved 7.5MB! Now think sitewide and if you could apply the same average across the site (very easy to do) if you have 100 files on the site total the savings in bandwidth add up and so does the decvrease in the amount of space needed. As a broadband user, I'll be the first to admit I forgot what it is like for 56k and less until I visited a client who dialed up my site (I've been spoiled by the Broadband and the fact the site is cached nicely in my system) it took almost a minute for the site to completely download!) Well that ws the big incentive there to get rid of some Java that was clogging the pipe. Now, my site is better, but still not where I want it, CSS will definitely bring it more inline but alas, I need to find a good lightweight, customizable and powerful shopping cart program to replace the VERY VERY tables heavy OSCommerce. Alas the troubles we put ourselves into! Brian -Original Message- From: Leo J. O'Campo [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 24, 2004 8:23 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] Font Styles: I can see one can shave some bytes of of their CSS stylesheet Brian Bytes??? This type of savings aren't even noticeable on any system. Even if you defined that rule in every handler, you'll never notice the difference in bytes or page-loading speed. I can't notice the speed difference between a nanosecond and 100 nanoseconds. ;-) Leo * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] Trimming the fat
Ooh, that might be just what the doctor ordered!!! Thanks. Brian -Original Message- From: Tim Lucas [mailto:[EMAIL PROTECTED] Sent: Wednesday, March 24, 2004 10:26 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] Trimming the fat Quoting theGrafixGuy [EMAIL PROTECTED]: Now, my site is better, but still not where I want it, CSS will definitely bring it more inline but alas, I need to find a good lightweight, customizable and powerful shopping cart program to replace the VERY VERY tables heavy OSCommerce. Might want to check out Zen Cart: http://www.zen-cart.com -- tim www.toolmantim.com - Web, Email and Domain hosting - www.fasthit.net * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
