A PHP library that enhances your website performance by optimizing the front end using techniques such as minifying, compression, caching, concatenation and embedding. All the work is done on the fly on demand.

Java

The leading tool in the for compressing CSS and JavaScript files, and could easily be ported/encapsulated into other environments. Note: Doesn’t support concatenation of files.. Could be used in conjunction with an Ant task, as described in Building Web Applications With Apache Ant

75 Comments

This is basically how I minify my files. I run the Java port of YUI Compressor on one of my web servers, and wrote two PHP scripts. The first PHP script takes URIs of JS files as input and outputs the contents of the minified concatenation of those files (using the Java YUI Compressor). Obviously, this script is hosted on the same server as the YUI Compressor Java port.

Then, whenever I make some JS/CSS updates on another server, I just run another PHP script (on that server) which fetches the abovementioned page, passing the JS URIs as parameters, and then writes back the resulting output to my local copy of the concatenated file.

Someone (Yahoo!? Google?) should provide a RESTful API, which does just this — takes URIs of several CSS or JS files, and returns the minified, concatenated file.

People could then very easily create scripts in their language of choice to 'build' JS/CSS, i.e. concat them, like I do.

I personally haven't used this myself, but somewhere somehow I've come across Combine for PHP. It uses the mod_rewrite module of Apache and .htaccessfiles to intercept requests for JavaScript and CSS files.

Also aso of Rails 2.0 the javascript_link_tag and stylesheet_link_tag both include "cache" options which will automatically combine javascript/css files when run in production mode. e.g. javascript_link_tag("foo","bar","baz", :cache => true) will generate a file called all.js which contains all three javascript files when run in production mode.

Django Static Management offers a lot of control over how Javascript and CSS files are handled in development and deployment, including minification using YUI (or whatever else you want to plug in), filename versioning (so you can use far future expiry headers) and file concatenation.

It does have some rough edges (it uses a lot of memory when processing large JS files and is slower than f.i. JSMin), but it does have more potential since it is based on an actual JS parser and therefor does not impose strict syntax rules. I still hope to add variable-name minification some day.

CSS minification on the other hand is no rocket-science though; a simple set of some regular expressions is quite effective for that

[…] (to a point), but you still need some of the tools from the collection for both themes and plugins. Tools for concatenating and minifying CSS and JavaScript files in different development environments… VN:F [1.8.1_1037]Rating: 0.0/10 (0 votes […]

I’d like to throw my own CSS-JS-Booster into the mix. It is priliminary meant as stand-alone PHP-library that you hook into your PHP5-programming. At the same it also works as WordPress-plugin.

It tries to automate as many performance optimizing steps related to CSS and JS embedding as possible, in realtime (with aggressive client and server-side caching – still sensible to any version changes).
In contrast to most other tools the Booster embeds any image referenced in CSS as dataURI. This has the same benefits as spriting but doesn’t have the downsides like not being able to throw image-formats like 24bit-PNG + JPG into the same sprite or having to have empty areas or needing to calculate background-positions. It’s a no-brainer and what’s even cooler is the fact that this also works for IE6 + IE 7! Now coming to what the Booster does exactly:

For CSS these steps are:

* combine multiple CSS-files resulting in HTTP-requests going down
* optimize and minify CSS with CSSTidy
* Embed any CSS-images smaller 24KB as data-URI or MHTML (for IE <= 7) – this is really special!
* Split the output back into 2 even files that can load in parallel
* GZIP-compress the resulting CSS
* Have browsers cache the result as long as it remains unchanged
* If IE6: Issue a JS-command to fix background image caching behaviour

For JS these steps are:

* combine multiple JS-files resulting in HTTP-requests going down
* GZIP-compress the resulting JS
* Have browsers cache the result as long as it remains unchanged

+ GZIP-compresses the page calling those files.

It corrently does NOT minify Javascript itself, which I think is not_ that_ important if you know what you do and use minified versions of JS-frameworks in production and if you already have everthing GZIPed. Also better for JS-debugging… But perhaps I'll add Googles Closure one day.

—

Putting CSS-JS-Booster aside, people wanting to squeeze out every possible byte of optimization-potential should have a look at the (semi-free) tool WEBO Site SpeedUp. What they do is really extreme, but they are working with a lot of passion on their software.

And last but not least there is aptimize as a commercial solution targetted at all bigger players (visitor-on-your-site-wise).

I used Django compressor for my Django website.
It’s very easy to use and I love the “no-settings” approach.
However be careful as by default CSS files are not minimized.
Also be careful not to try to minimize dynamically generated JS as it will try to minimize it each time it’ll detect some changes.

Anyone know of a method for concatenating and compressing js on a local machine ie. not through a server. I’d rather compress it while writing it as I do with sass via sass or compass watch. I don’t see the point of having a server do the work when you could simply deploy the compressed file to the server. I know how to do it manually with cat an yui in a terminal bash but it requires having to specify the files in the bash file for each project.
Have attempted to use Sprokets and other Ruby based packagers but cant find any terminal commands (ie. they assume your project is a Ruby).
What I’d love is a packager that is on par with sass where you can watch a directory locally and it will compile to compressed assets as you edit save the original files – sass works like a dream for css dev

I’ll observe that Sprockets (at least as of writing this comment) doesn’t directly do any minifying itself. It’s actually a framework for asset management across a variety of different tools. E.g. it will convert SASS/SCSS to CSS, then minify that output. Similar workflows exist for plain Javascript, Coffeescript, and numerous other asset representations. It’s also quite possible to add your own workflows, such as Javascript via Closure Compiler, a custom image optimization/processing pipeline, and so forth.

[…] if you’re interested in this stuff make sure to read Robert Nyman’s Tools For Concatenating And Minifying CSS And JavaScript Files In Different Development Environments. It’s a great round-up of tools in a variety of languages and […]

[…] A variety of tools can help minify both CSS and JavaScript, including CSSTidy, Minify, JSMin, YUI Compressor and SquishIt, to name a few. You can even compare the various choices. Ultimately though, it’s about picking the tool that best suits both your code and workflow. […]

[…] A variety of tools can help minify both CSS and JavaScript, including CSSTidy, Minify, JSMin,YUI Compressor and SquishIt, to name a few. You can even compare the various choices. Ultimately though, it’s about picking the tool that best suits both your code and workflow. […]

[…] A variety of tools can help minify both CSS and JavaScript, including CSSTidy, Minify, JSMin,YUI Compressor and SquishIt, to name a few. You can even compare the various choices. Ultimately though, it’s about picking the tool that best suits both your code and workflow. […]

[…] images to reduce file size without compromising image quality and resolution. There are many online services to help wih the minification process, but I’m partial SquishIt. Another common issue on […]

iam using minify it works fine if we need multiple js files at the same time but , if i need js files at differnt level between the html code and now if i use minify then i got error it says this and that variable is not defined ?

Thanks for all this huge list, was very helpful to me. I have a question though, isn’t easier to just use a compressor for Javascript files. Usually I only have a few JS files anyway. So I use a compressor like this one or this one here and it takes me about a minute to compress them. What do you think?