Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
By robertdouglass on
If you want to wring every bit of performance out of your Drupal site, you will appreciate CSS Tweak:
http://www.cssdev.com/csstweak/
Upload your CSS files and it will make them more efficient and smaller by using shorthand notation, stripping whitespace and stripping comments. The resulting file is smaller and saves you bandwidth and transfer time.
You won't want to use the resulting file for editing, however, as it isn't very easy to read. So rename your current style sheets (I add an underscore _style.css), make the changes to the renamed version, and every time you are ready to deploy, use CSSTweak to compress it.
I like to use the CivicSpace theme and CSTweak made the 32K visual.css file into a 17K file. That's 15K that your server doesn't have to transfer with every new visitor.
Comments
Output guidelines
Tweaking the CSS file is good, but tweaking the core theming system is better.
If you look at the output of the base modules of Drupal, you can notice A LOT of useless nested divs. It's a common problem among CMSs.
I hope to see improvements on this side in the future.
Is it worth the effort?
The nested divs are only useless until someone comes up with a way of using them (at least assuming they have class names). It really isn't worth saving several dozen, or even a few hundred characters at the expense of making the layout less flexible. A consistent div strategy plays the same role for CSS as the PHP naming conventions play for the extensibility of modules and themes.
As far as compressing the CSS, are there situations where a 20KB savings would make a significant dent? A modest-sized image can take as much. For example, I found a 19KB images on the Joomla site; there's probably over 100KB in images alone on their frontpage. Heck, even the Google frontpage logo is 8KB. I'd think that http compression would be a more worthwhile approach than just compressing the CSS.
I hate to beat on the Joomla rivalry, as I chose Drupal because of its code quality, but I worry that an overemphasis on the wrong aspects of performance inhibits Drupal from getting a more compelling, more modern visual design as its default. I suppose there may be cases where this sort of tweaking is important, but I don't know of any, let alone any that might be common.
Gary Feldman
MarsDome, Inc.
http://www.marsdome.com
Take everything you can get
It would be wrong to say that saving 20K in downloads isn't worth it. If you really want sites that can scale, you take every optimisation you can find. If you can iterate over a loop a couple times fewer, you smile. If you can reduce the number of database queries by 1-2, you celebrate. If you can avoid serving a file, or even part of a file, you've won a battle. This is the only mentality that leads to better performing software.
I'm sure there are Joomla site admins who compress their CSS.
- Robert Douglass
-----
My Drupal book: Building Online Communities with Drupal, phpBB and WordPress
If reducing the number of
If reducing the number of iterations of a loop is really going to help, then rewriting it in C is likely to help much more.
The problem is that these are all tactics, and performance needs to be addressed strategically. It's easy to come up with situations where a performance improvement saves less time than it cost to implement. Worse is when it costs more in increased developer time down the road.
It's more important to get the big picture, identify the big bottlenecks, and identify the biggest winners. Tactics have their place, but they're just one more tool in the kit. Strategic approaches, such as converting N^2 algorithms to N, carefully identifying indices for database tables, using general compression on everything before specialized compression on some things, etc. are where the big performance wins occur.
Besides, better performance is just one aspect of better software. These all need to be balanced.
Gary Feldman
MarsDome, Inc.
http://www.marsdome.com
Yup.
So if you want to have smaller CSS files to serve, you know where to get them.
- Robert Douglass
-----
My Drupal book: Building Online Communities with Drupal, phpBB and WordPress
While it is definitely true
While it is definitely true that every single extra tag adds up, out of the box it is much more important to provide markup that is rich style hooks — even at the expense of added file size.
Here's why:
PHP development implies an understanding of html and css. You usually learn in the following order html -> css -> PHP, not the other way around.
That said, it is much easier (if not trivial) for someone familiar with PHP to trim the fat off the default template markup than it is for a someone with excellent html/css (much less a dreamweaver jocky) who is not familiar with PHP to go back in and create the necessary markup to support a rich CSS design.
-zach
------------------------
harkey design
: z
CSS size
I think I've mentioned it on this forum before that Drupal css files are huge for what they do (this site 35K), much larger than a Joomla css file would need to be for same output.
Now if you could reduce the database calls in Drupal, you would make some big gains.
Is this a valid point? or a rant:
http://www.hiveminds.co.uk/drupal-has-terrible-access-control
Nested Divs
I know how useful are nested divs for someone that uses CSS to manage the layout of his sites.
But not every theme needs those divs. Maybe they need extra divs elsewhere. That's why I think that the default output of theme functions should come out with only essential markup.
If someone is working on a theme and wants extra divs, he must override the outputs.
Well, I wouldnt call it
Well, I wouldnt call it "compression". Heh.
Usually you gain way more if you take care of the images. Eg by using tools like pngout you can often save a lot of space. Be also sure to try gif for tiny images (it beats png in some exceptional cases). And dont use interlaced gifs/pngs. However, progressive jpgs can be smaller than non-progressive ones.
Very good point
This is actually a very good point. The .css will often be cached by the browser, so it will only be downloaded once. (Along with any .js and image files) The page content itself will be downloaded with every request because that's the part that changes as you click around the site.
So, while it's good to factor the css file (and it's impressive how well it works), that's not where your biggest gain will come from.
Fortunately, the nested divs (and html in general) are very redundant and will be compressed very well by mod_deflate or mod_gzip.
On several busy sites...
it turned out that CSS took up a higher percentage of the bandwidth than most people were expecting. We had this discussion on the devel list at some point and people started looking at their logs and doing the math. The bandwidth savings is not trivial.
- Robert Douglass
-----
My Drupal book: Building Online Communities with Drupal, phpBB and WordPress
I shudder to think what a
I shudder to think what a cleanup script like this would do to any of the 9 billion ninja css hacks that require specific comments, whitespace, longhand, etc. to make the IEs play ball.
-zach
------------------------
harkey design
: z
Thanks for the link Do you
Thanks for the link
Do you know of an equivalent one for HTML/PHP code? I used to know a site, but I lost the link.
i remember all I had to do to compress the html/php was cut and paste it and all the white space and comments were removed
marcopolo ---
Blog | Photography | Sydney | Celebrities | Best Designed Drupal Websites | Share Trading |