Comments on: Common web myths: Optimizing CSS & Javascript

By: Marcus Collinsworth

Marcus Collinsworth — Thu, 27 Sep 2007 18:44:30 +0000

Why not take this a slight step further and cache the output compressed file? :)

By: Mike Papageorge

Mike Papageorge — Thu, 22 Mar 2007 09:33:22 +0000

I think if you can implement something on the fly that strips whitespace and gzips, you're laughing. This can be easily done by we programmer types :-)

Also, see The Definitive Post on Gzipping your CSS for some more PHP style solutions.

By: Mal

Mal — Mon, 19 Mar 2007 16:11:51 +0000

The gzip’d compress CSS is 3kb, which is 25% smaller than the gzip’d but uncompressed version. It’s also harder to steal, if you’re worried about that.

While it’s important to keep your CSS readable for development and maintenance, this is only important within your editor. Your web server and browser doesn’t care, and there’s a number of ways to produce the optimized version automatically. You can have PHP pipe the file through cctidy, similar to Paul’s gzip setup, you can use modextfilter on Apache to do the same, or you can make the compression part of your build process, if you use Ant or similar.

And when you need to examine the CSS of page in your browser, for that off the cuff tweaking, you can use Firebug or the IE Developer toolbar to see the current style of an element.

By: Lukaszp

Lukaszp — Mon, 19 Mar 2007 11:12:56 +0000

But you all forget about those who still use slow connections. For me, as an low level programmer, it’s good to squeeze as much as possible especially when i see those websites where images and all those pretty addons take 60-70% of screen not talking about bandwidth.
Imagine what would happen if you optimized your css AND used transport compression? Remember that faster your HTML/CSS/JS gets to the browser faster it gets displayed and images can be downloaded later by browser so overall smaller your HTML etc. faster your page’s initial display.

By: links for 2007-03-18 « kobak del.icio.us kÃ¶nyvjelzÅ‘i

links for 2007-03-18 « kobak del.icio.us kÃ¶nyvjelzÅ‘i — Sun, 18 Mar 2007 23:19:09 +0000

[...] Common web myths: Optimizing CSS & Javascript - Warpspire (tags: css webdev wordpress HowTo optimization reference warspire) [...]

By: Georges

Georges — Sun, 18 Mar 2007 12:15:45 +0000

Good point! Using mod_deflated for some time now and I even start having the feeling that most of my projects just load faster with compressions on the server-side!

Just to point it out: since Apache2, mod_gzip does not exist anymore. It’s now mod_deflated. Here is a good article on how to set it up in less than 5 minutes: http://www.debian-administration.org/articles/137

By: Matthijs

Matthijs — Sun, 18 Mar 2007 12:10:40 +0000

@Matt: indeed, horizontal scrolling is not pleasant. I avoid that as well. If an element has that many declarations, I use another line. And I am aware of using comment anchors and how they can be used to collapse/search. But for me, one move of my scroll wheel to get me were I want to go is faster then typing in a search term.

But, I understand this is all personal preference. I also think it makes a big difference whether you work alone or in a team, on smaller or bigger sites, etc.

By: Matt Wilcox

Matt Wilcox — Sun, 18 Mar 2007 11:49:54 +0000

@ Mattijs

I used to use the one line technique, but find that horizontal scrolling is much worse than vertical scrolling for trying to find things. Good use of ‘comment anchors’ allow easy searching through your editor of choice too. If you’re interested you could take a look at the organisation techniques I’ve come to use after a few years of constant CSS development, and see if any tickle your fancy: http://mattwilcox.net/archive/entry/id/642/

By: Matt Wilcox

Matt Wilcox — Sun, 18 Mar 2007 11:44:54 +0000

I have to voice my ‘here here’ for your conclusion. I’ve always felt that readability is far more important than shaving off a few Kb in a file that’s downloaded once, cashed immediately, and can be greatly compressed server side anyway. I’ve never been sold on ‘code optimisation’ utilities. They optimise very little but mean that the developer will take twice as long to figure stuff out if they ever need to revisit that css/javascript.

NB: well written CSS using selector grouping and the cascade is a different form of optimisation, and one that I do support the use of.

By: Matthijs

Matthijs — Sun, 18 Mar 2007 11:23:39 +0000

The funny thing is, I have recently switched from using whitespace and coments in css to just writing declarations on single lines. Not for performance sake. It just makes my stylesheets a lot easier to read/work with. For me. The reason is that scrolling up and down and finding the section you’re looking for takes a lot more time then reading a single line with a couple of declarations (margin,padding,color, etc). So my css now looks like:
h2 {font-size:2em;margin:1em 0; etc}
h3 {font-size:1.5em;margin:1em 0; etc}
Certainly if you use a common order, it’s no problem at all to find specific style declarations.