The Net is Dead

Marco van Hylckama Vlieg on web technology, design, life and everything

WP-CSS-Streamliner: CSS optimization plugin for WordPress

'I CAN HAS CODE''10 Mac OS X Apps you probably d…'

meta info

Thursday May 31 2007

This post serves as a 'homepage' for WP-CSS-Streamliner, a WordPress plugin that will greatly enhance the client-side performance of your WordPress site. The plugin was originally written as a showcase example in my article named 'On a quest for ultimate website performance' in which I describe several techniques that help improve the performance of your website. Read it to find out what the purpose of this plugin really is.

WP-CSS-Streamliner is WordPress 2.5 compatible!

Features

WP-CSS-Streamliner has the following features:

Grabs all <link> tags from your pages in real-time and transforms them into one new one pointing to a highly optimized combined CSS file
Performs gzip compression on the optimized CSS file
Exclude mechanism to keep certain CSS out of the optimization process, for example print CSS files, alternate stylesheets or IE specific CSS within conditional comments
Caches different combinations of CSS on a per-page basis. Every combination will be cached and served once
Rewrites image URL's in CSS to absolute ones in order to make CSS coming from different directories still work properly when served from one location
Automatically excludes CSS served from other hosts (no need to use the exclude mechanism for this)
Force-refresh option to refresh the cache in case of trouble

For more information, read the README.txt provided in the archive.

Compatibility

The All-In-One-SEO-Pack plugin breaks your site when used in combination with WP-CSS-Streamliner. I think it's not WP-CSS-Streamliner's fault but I'm going to look into it later.

WP-CSS-Streamliner was developed on WordPress 2.1.x and should work on any 2.x version. In case you encounter trouble, let me know about it and I'll try to fix it.

HELP! It doesn't work!

In case the plugin results in broken pages or other undesired effects, do the following:

In rare cases the caching process results in broken CSS. This happens when a visitor calls the page at the exact moment when one of your CSS files is being updated on disk. Call your page again in your browser with ?refresh appended. It will refresh the cache.
Read the README.txt if you hadn't already. If you did, read it again. There's troubleshooting hints in there.
Exclude all CSS through the exclusion mechanism by adding them to nocompress.inc and remove them one by one, starting with your main CSS file. This will help you find the troublesome CSS file. If it's an IE specific CSS file, an alternate CSS file or a print CSS file, leave it out. If it's something else I'd love to hear about it.
Check if files are being created in your wp-content directory. They should look like c9a61def0d2950b10d8078b605290622.css. Check what's in it. The files should contain highly compressed CSS.
If all this fails or brings up clues about a bug, post a comment below this post.

Current version and download

The current version is: 1.0.3.

Download WP-CSS-Streamliner

Affiliate program available

bookmarking

Commentary

Join the discussion! Leave a comment through the comment form below!

At 01 June '07 - 05:26 Marcos wrote:
Looks great! I’m going to test it in my blog right now.
At 08 June '07 - 00:05 Ozh wrote:
Interesting stuff Marco

I use something similar on my blog which was made from the following article :
http://rakaz.nl/item/make_your_pages_loa..

supports CSS and JS, and supports various browser bugs (for instance, some versions of IE can’t read gzipped content)
At 08 June '07 - 00:33 Marco wrote:
Definitely interesting. Just like Ed’s post

However not so easy to use on WordPress because you’d have to edit all plugins to remove their insertion of link tags pointing to CSS files. This is one of the things I wanted to prevent or too many people wouldn’t know how to use my plugin. I wanted to make sure that no WP (plugin) files need to be edited in order to use the plugin. There’s just the exclusion array to modify. Also, this script assumes all CSS files are in the same directory. If not it will cause images to not load anymore because the merged CSS is served from one location. I took care of that issue as well.

I like the check for gzip compatibility even though hardly anyone surfs with those browsers and most WP sites would break on them anyway (because most themes and scripts aren’t compatible with them). I think I’ll add it to the next version.
At 08 June '07 - 00:58 Ozh wrote:
Indeed, my approach was more theme based than plugin based (and when I want to use a plugin that injects CSS, I do it manually myself to make use of my combine stuff)
At 09 June '07 - 05:03 DaveMc wrote:
Excellent. I was starting to get concerned about the number of css files that all the plugins I’m using have added to my site, and was thinking about doing this sort of thing manually to optimise things. I’ll give this a try. Thanks.

Dave
At 10 June '07 - 13:58 tash wrote:
I tried this plugin and it caused my wp site to show up as blank. I’ll look into it when i have some more time later today, but I like the idea of it at least!

I had a css-compress plugin I was using that would gzip the contents of the css but turning it into one css file would be great too.
At 10 June '07 - 14:06 Marco wrote:
If it blanks out, first try everything in the ‘Help! it doesn’t work!’ section in this post. Those steps should solve 99% of the problems. If you still have problems after that feel free to email me so I can have a look at what’s going wrong!
At 10 June '07 - 14:40 tash wrote:
Thanks that was a quick reply. And I’ve tried all of those steps so far; it still blanks out with all the css files being excluded. The best guess I have so far is that a plugin I use (wordspew) has a css.php file that generates the .css for itself, but even with the plugin disabled and wp-css-streamliner enabled it still blanks out. I’ll go ahead and email you :]
At 10 June '07 - 17:58 Marco wrote:
So far I can confirm that WordSpew is compatible with WP-CSS-Streamliner. I got it to work correctly on my testsite
At 10 July '07 - 02:40 jez wrote:
I am using

[...]
the corresponding end tag to compress my css and somehow this delivers smaller results than your plugin (thanks for releasing it!!!).
what compression routine do you use?
At 25 July '07 - 11:28 Joe wrote:
I’m trying to use your plugin, but it’s not working correctly with my site. The plugin is finding two plugin generated style-sheets, and is working properly with them, but it doesn’t include the content of my main style sheet in the compressed version, though it does strip the call to it out of the page, which of course breaks most of the site. I’ve validated the CSS in the file (http://itsvista.com/wp-content/themes/Cutline/style.css), and it comes up clean. Any idea what is wrong? I love the idea of your plugin, would love to get it working, and I hope you’re still working on the Javascript one as well!
At 07 August '07 - 13:22 Joe wrote:
I found that the plugin was making two files in the wp-content folder, one blank, the other with my CSS code. The plugin then wrote the link code to point at the blank file. I renamed the file that had the code with the name of the blank file, and it started working, but I’m getting the following error message in my footer:
Warning: Invalid argument supplied for foreach() in /home/[path removed]/wp-content/plugins/WP-CSS-Streamliner/wp_css_streamliner.php on line 128
At 05 November '08 - 09:38 MrPete wrote:
The zip download is missing now. Is it still available somewhere?
At 31 July '09 - 12:01 SamuraiMarine wrote:
I just ran into your site… do you still have this plugin available for WP?

Got something to add to this?

Feel free to leave a comment on this site. You can use Textile and Emoticons. Your email address is only used to show a gravatar. Please stay on-topic and use common decency. Spammers will be shot in front of a live studio audience.

If you plan on posting code, use pastebin please and post a URL to the code. The comment processing doesn't deal very well with code. Sorry for the inconvenience.

Human comment spammers: don't bother posting your crap here. Comments are moderated and I won't let any of your shit through.

Trackbacks

If you have an interesting related post on your own site you can leave a trackback. As they say: 'a little AJAX a day keeps the spammers away' which is why you'll have to click below to generate a trackback key. The key will be valid for 15 minutes and can be used only once.

Five reasons why …
Well I just recently deleted my facebook permantly. It is fake, and found many of the people there pretentious or fake. I just sick of seeing the status updates of people there and …
(Stu)
Designing and bui…
I was wondering if you might be able to help me… I was wondering if it is possible in Tumblr to only display certain info on a the front end? I want to post a text post, chat an…
(Gavin Steele)
An example of why…
Holland fucking sucks dick. Houses are way too expensive. A 750 Square feet (70M2) in Amsterdam/Den Haag costs like 180.000 Euro’s. With that kind of money you buy a damned ho…
(Robijn)
Five reasons why …
I HATE!! FB… so much. My friends keep pressuring me to join and make fun of me for not joining.. I was going to join but now for spite I refuse. It is like a sick FB clique in High …
(Renee)
Yup, Yet another …
To avoid conflicts with Prototype, shouldn’t you wrap your plugin inside (function($) { // your plugin here })(jQuery); ? I’m just getting started with jQuery, so I’m not …
(John)

You can use the form below to contact me about various issues. Make sure you enter a proper email address or I won't be able to reply to you. I will try to answer your email as soon as possible. This is an AJAX mail form. Hope it stops some spam.

Featured Links