How To: Optimize Your CSS Even More
Over the summer I wrote a post called 5 Ways to Speed Up Your Site that went through some basic tips for getting your site to load faster. I mentioned enabling gzip compression in WordPress and using services that remove the whitespace from your CSS, effectively “compressing” it. Now, I’ll go a bit more in-depth with a simple, yet powerful, PHP method of compressing your CSS.
What We’re Doing
The WordPress method of compression gzip’s your site’s markup, but it doesn’t go so far as compressing your linked stylesheets. To get the benefit of a compressed CSS file (or more, if you have several), I’m going to go a bit deeper by adding this compression directly on each CSS file.
Things You Should Know
All forms of compression, including this PHP method, will utilize a tad of your server’s CPU to compress data. For most this is negligible, but if you know that you are on a flaky, shared-server-using webhost you might rethink using compression on your site. But I mean, it would have to be a flaky webhost.. a $5/year host as from what I’ve seen most decent servers can handle compression no problem.
Also, not every browser supports gzip compression. However, you’d have to be running a very old browser for that case to appear. Kyle Neath tells me that IE 4+, Netscape 4+, Opera 5+ and all versions of Safari and Firefox support gzip compression, so I would say that it is very safe to go ahead with using gzip compression in terms of compatibility.
Edit: The method of gzip compression I will be pursuing utilizes ob_gzhandler which is smart about compressing data..
Before ob_gzhandler() actually sends compressed data, it determines what type of content encoding the browser will accept (”gzip”, “deflate” or none at all) and will return its output accordingly. All browsers are supported since it’s up to the browser to send the correct header saying that it accepts compressed web pages.
Gains
With compression you save bandwidth by having smaller file sizes. For example, my already whitespace-free CSS file was around 9kB before compression. After, it weighed in at only 2.4kB. While that is a great compression rate, let me show you the difference on your typical CSS file. Using digg’s global CSS file as an example - before compression the CSS was 26.3kB and after compression it was only 6kB. Amazing stuff.
Okay Already, Show Me How!
First off, make a copy of your current CSS file and add the suffix “.php” to the file name. If your CSS file was named style.css your new file would be named style.css.php (don’t include this period to the right > ).
Next, update your CSS link to reflect this change. Note: Don’t copy and paste the any of the code below - my blog displays quotes as smart quotes instead of regular ones and this will mess it up. Just type it as you see it.
Before
After
Now to the real part. Open up your style.css.php, or whatever you named it, file and add the following snippet of PHP to the very top:
Then, add the next line to the very bottom and save the file.
That’s it! Refresh your site and check it out.
How It Works
The first part of the PHP code checks to see if your server’s PHP installation supports zlib, which is required for the gzip compression we are trying to attain. If that’s all fine and dandy, output buffering begins processing with ob_gzhandler, which creates gz-encoded data if supported by the user’s browser. The last line stops the output buffering and sends the contents of the buffer to the user. It is debated whether or not ob_end_flush() is actually required since it is apparently called automatically by PHP at the end of the script execution, however I kept it in there for good measure.
If you did just the output buffering, this method wouldn’t work since the browser doesn’t know how to parse it. That’s why the header of content-type text/css must be sent out.
What Do You Think?
As of now, this blog’s homepage comes in at 27.6kB from its already lightweight 34kB. If I didn’t have those three sponsor graphics in my sidebar, it would only be about 15kB.
After you have dealt with compression and saving images for the web, the next thing would be optimizing database queries.. but that’s another article or series of articles in itself.
What do you do to ensure that your site runs and loads as fast as it can?
The codes won’t show up in feeds. Now wonder I can’t understand what it’s all about. :) Thanks for the tips!
Yeah, I get a completely blank page in NewsFire.
Weird.
Good tip though, thanks.
Yeah I have no idea why it’s doing that..
Oh this is nice
Very cool script. I’m adding this to all my pages now.
By the way. If anyone copy and pasted Paul’s code and now is getting a blank display, be sure to go back and change the ” (quotes) in your php file. Just delete them and retype them in your text editor. Seems like WordPress is throwing up smart quotes or something and that interferes with PHP code.
Yeah that’s an issue with my code plugin. =/
I do the same thing with my CSS files. You should also probably send out the charset like this: header(”Content-type:text/css;charset=utf-8″). I also enable caching by outputing a last-modified header and returning a 304 if the representation hasn’t changed. In addition, you can send an Expires or Content-control: max-age header to specify how long the file can be cached.
If anyone finds a plugin that does not spit out smart quotes for code, do share. I think this is something that a lot of WordPress users are looking for. I used to use the same plugin Paul, but after seeing that it basically rendered the code snippets useless, I disabled and went back to using <code> around web safe converted code - Postable.
http://dev.wp-plugins.org/wiki/css-compress
Works like a charm for me
@derek: http://erik.range-it.de/wordpress/plugins/syntaxhighlighter/ I think I’ll start using that..
For those with the Smart Quote problem, I’ve always used this plugin and never had a problem.
Why not mess with the css but do the same with the addition of 2 separate files. I find this cleaner
1. Drop a .htaccess in your css folder or just add this to your main .htaccess
AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
2. of now, you will need the gzip-css.php with the following code
Paul,
The plugin you linked is nice, but it has an insane amount of file inclusions.
I just tried out “SyntHihol”, http://www.indyjt.com/software/synthihol/SyntHihol.zip
It highlights whatever language you define, using GeShi. Doesn’t include any external JS or CSS files as far as I can tell. Best of all, it’s easy to toggle the styling.
For a quick demo, see: http://patrickmn.com/2007/03/19/appetizer-easiest-proxy-server-ever-with-python-and-twisted/
This is a good tactic, but it’s adding load to your web server by having to do this every request. It would be more efficient to use caching or compress it once and make it a static css file.
http://www.codeandcoffee.com/2007/01/19/how-to-compress-your-css/
Sure the load isn’t much until your page hits spike, like on popular blogs. In situations where you blog and data is dynamic, it’s best to make PHP and your database work as least as possible… dynamic is only good to a certain extent and for data that is changes a lot.
@matthew - the site you liked to talks about css compressor which only removes whitespace, comments and things like that. That’s much different than this gzip compressing, although I do use both methods. But in general, you’re right - cache where and when you can.
Current, I know it only removes whitespace… but you could cache your gzip results so the server and PHP does not need to do this every page hit.
Writing code in WordPress is a pain, but fixing your code is actually very easy, and essential to avoid all the whines and complaints. There are some simple instructions in WordPress.com Blog Bling: Signatures and Writing Code in the second half of the article that will help, along with some online tools for fast converting if you don’t want to do a little search and replace in a text editor.
I post code on my blog constantly, and so I’m very familiar with this issue.
Very great tips. I hope my tip helps you make them better. ;-)
umm why not just gzip the css? the http 1.1 spec allows for gziped data… set the mime type to x-html it should still render as css though.
nathan - there are multiple ways of gzipping your CSS. the way you mentioned works just as well.
Paul, is there some option to have it sitewide for all CSS files and not just the style.css file??
Awesome, I used this and the css-compress plugin on my blog. Now I have my shoutbox plugin sending itself compressed. Before it was one of the biggest code that the browser had to download
Neat Trick Paul!
For something more sophisticated, which may be useful in other situations:
The Definitive Post on Gzipping your CSS
Right, one more thing, you may want to send a full set of headers with what you are doing, or else you risk having the browser *not* cache the CSS file and request it every time. I did a bunch of testing when I looked at this back in 2004 and most of the browsers only cached the CSS file if it came with the proper expires headers.
See the file I linked above for the details.
Mike thanks for pointing this out… Am looking at the tutorial now. Would this also be the case for other type of files, like js files?
Hey Ajay,
For sure. Basically, what’s happening here is the file is being “served” by PHP, rather then Apache (or whatever), so the headers are no longer being handled by the server, but by the scripting language.
If you have a local setup that you can test on, try this out locally and check the log files (I played with this stuff here, ). You will see if your caching is working etc.
I have a local setup, so will take a look.
But, I really like the gzip solution.
This is not great.
IT´S PERFECT!!!
I reduced my site from good 43KB and bad 42HTTP requests to
unbelievable 29KB and only 18 HTTP requests.
This is stunning!
I am searching non stop for methods to reduce site loading time.
At first the site had about 92KB and with every new method I reduced it
a bit.
Thank you Paul!
Great post. Thank you for the info. I’ll make a reference about it on my blog.
using it. loving it. thanks!
Great! Thanks for this how to! …markus
Hello, it might be simpler just to do:
instead of checking for the library. ‘@’ should suppress the warning message!
Do you really think that doing an unique js file, compressing it with JSmin (or similiar) and doing a gzip of that file really worth?
Because all that parsing functions, joining, parsing and compressing here and there would result in a greater load time for this files, I mean, would you do a simple gzip?
Great resource m8, I’m going to work at implementing this on my webpage.
Nice article. I’ve seen it in a couple of places before but never seen the code behind it.
Cheers for the post
I thought I would add that the CSS Compress WordPress Plugin not only compresses the CSS file, but also compresses the images referenced within the CSS file and sends everything to the client in a single gzip file.
This eliminates the need to combine images into a single file and use image maps, because the number of HTTP requests would be the same either way. I verified this plugin by testing my page under several scenarios using WebSiteOptimization.com. Unfortunately, the plugin works only on the main template CSS file, not any CSS files used by plugins. If you’re using WordPress, the CSS-compress plugin is an easy way improve performance.
Thanks, I’ve been looking for how to gzip my CSS. This rocks.
This looks very interesting. Have used the Icey CSS compressor, but never have gone into depth on this subject since I am not a programmer. You make it sound so easy with simple instructions. Much appreciated.
Thanks, I’ll definitely tag this page for future reference, will definitely come in handy.
If you are having trouble displaying code in Wordpress I have written a post (http://carltondickson.co.uk/2008/03/02/displaying-source-code-in-wordpress-post/) that could help, I would definitely recommend the Google Syntax Highlighter (http://wordpress.org/extend/plugins/google-syntax-highlighter/) admitedly it does include all highlighters C++/XML/JAVA but these can easily be removed using the plugin editor and removing the script tags containing the brushes you don’t need.
@Vladimir Nikolic It’s always nice to discover ways to reduce the page load and performance of your pages….I would urge you to install YSlow, it’s a firefox plugin for another firefox plugin - firebug. They reguarly talk about ways to serve pages faster, I checked your site and there are definitely plenty of things that you could do to reduce the page size even more, give me a mail if you need any help :)