Metal Sole

CSS Compression tests

Posted by Matt Maher on Nov 30, 2013 in Programming | 0 comments

I’ve been spending all of my personal time working on a rather complicated system to help improve development in JavaScript/HTML. One of the steps of the deployment process is to “minify” or “collapse” CSS (JS is a whole other topic).

I had high hopes for minifiers. It seems like a really obvious thing to do, take all the required CSS, load it into memory, inspect obvious scenarios for collapse, remove redundant definitions, combine duplicate definitions and then remove all extraneous white-space. Sounds simple… well reasonable.

So I decided to put together a simple side-by-side comparison of the tools on a very simple CSS sheet. I’m less concerned with the exact amount of compression (which it seems is the only thing anyone else cares about), and more interested in what rules are being followed here.

The CSS

The starting CSS looks like this:

.mainView {
    font-family: sans-serif;
}
.firstView {
    font-family: sans-serif;
}
.secondView {
    display: none;
    display: none;
    color: rgb(255, 255, 255);
}
.mainView .title {
    font-weight: bold;
    font-size: 120%;
}
.mainView .title {
    color: green;
}
.test1 {
    color: green !important;
}
.test1 {
    /* I hope this moves up to the rule
        above
     */
    font-size: 22px;
}
.emptyRule {
    /* nothing here for now */
}

.mainView {

font-family: sans-serif;

}

.firstView {

font-family: sans-serif;

}

.secondView {

display: none;

color: rgb(255, 255, 255);

}

.mainView .title {

font-weight: bold;

font-size: 120%;

}

.mainView .title {

color: green;

}

.test1 {

color: green !important;

}

.test1 {

/* I hope this moves up to the rule

above

font-size: 22px;

}

.emptyRule {

/* nothing here for now */

}

The Challenges

There are a few very simple things I’ve done in here to see what the tools can do.

First you will see that in .secondView the display attribute is duplicated. This seemed simple.

Next, and likely not as obvious, is that .firstView and .mainView are the same (and adjacent to one another, which matters in CSS due to precedence order). With any second pass processor this should be obvious as well.

Then, .test1 class defined at the end is a duplicate selector that, again, is adjacent. Unlike the first and main items above, these rules have different attributes, so can they be combined properly.

There are a few simple items, like: are comments removed properly and does the IE specific !important rule stick around.

And lastly I was looking for the standard reductions in white-space while maintaining any obvious needs like the space in the middle of the .mainView .title definition. Anything that messes that up needs to be thrown our immediately.

The Challengers

There are a few CSS minifiers out there and it’s fair to say I didn’t try all of them. But I tried the big hitters. I’m a Node.JS lover and built this test there. So these tools happen to all be node-capable as well.

Clean-CSS
CSSO - this was my favorite going in, but the test is well worth it
NCSS
YCSS-Min
YUI Compressor - somewhat of a standard in the world of js and css compression. It’s slow as heck, but extremely well-tested and complete

The Results

The results (shown here) of the test show that for my very simple test file there were only a few things that could be done. But given that fact there were still some interesting findings. First, no one found the duplicate display:none definition. That remained in every case. And, second, most of these compressors are doing nothing to attempt to collapse adjacent or similar rules. Though 2 of them are:

---------[ Clean-CSS ]-------------
.firstView,.mainView{font-family:sans-serif}.secondView{display:none;display:none;color:#fff}.mainView .title{font-weight:700;font-size:120%;color:green}.test1{color:green!important;font-size:22px}
Length: 197 from 456
Time: 0.011

---------[ CSSO ]-------------
.mainView,.firstView{font-family:sans-serif}.secondView{display:none;display:none;color:#fff}.mainView .title{font-weight:700;font-size:120%;color:green}.test1{color:green!important;font-size:22px}
Length: 197 from 456
Time: 0.015

---------[ YCCS-Min ]-------------
.mainView{font-family:sans-serif}.firstView{font-family:sans-serif}.secondView{display:none;display:none;color:#fff}.mainView .title{font-weight:bold;font-size:120%}.mainView .title{color:green}.test1{color:green!important}.test1{font-size:22px}
Length: 245 from 456
Time: 0.002

---------[ NCSS ]-------------
.mainView{font-family:sans-serif}.firstView{font-family:sans-serif}.secondView{display:none;display:none;color:#fff}.mainView .title{font-weight:bold;font-size:120%}.mainView .title{color:green}.test1{color:green!important}.test1{font-size:22px}
Length: 245 from 456
Time: 0.002

---------[ YUI Compressor ]-------------
.mainView{font-family:sans-serif}.firstView{font-family:sans-serif}.secondView{display:none;display:none;color:#fff}.mainView .title{font-weight:bold;font-size:120%}.mainView .title{color:green}.test1{color:green !important}.test1{font-size:22px}
Length: 246 from 456
Time: 0.228

---------[ Clean-CSS ]-------------

.firstView,.mainView{font-family:sans-serif}.secondView{display:none;display:none;color:#fff}.mainView .title{font-weight:700;font-size:120%;color:green}.test1{color:green!important;font-size:22px}

Length: 197 from 456

Time: 0.011

---------[ CSSO ]-------------

.mainView,.firstView{font-family:sans-serif}.secondView{display:none;display:none;color:#fff}.mainView .title{font-weight:700;font-size:120%;color:green}.test1{color:green!important;font-size:22px}

Length: 197 from 456

Time: 0.015

---------[ YCCS-Min ]-------------

.mainView{font-family:sans-serif}.firstView{font-family:sans-serif}.secondView{display:none;display:none;color:#fff}.mainView .title{font-weight:bold;font-size:120%}.mainView .title{color:green}.test1{color:green!important}.test1{font-size:22px}

Length: 245 from 456

Time: 0.002

---------[ NCSS ]-------------

Length: 245 from 456

Time: 0.002

---------[ YUI Compressor ]-------------

Length: 246 from 456

Time: 0.228

My Favorite

CSSO remains my go-to for CSS compression and it really hits almost all of the marks. I’m disappointed that it doesn’t find the duplicate definition. This is the resulting CSS (with line-breaks added for readability) from CSSO.

.firstView,.mainView{font-family:sans-serif}
.secondView{display:none;display:none;color:#fff}
.mainView .title{font-weight:700;font-size:120%;color:green}
.test1{color:green!important;font-size:22px}

.firstView,.mainView{font-family:sans-serif}

.secondView{display:none;display:none;color:#fff}

.mainView .title{font-weight:700;font-size:120%;color:green}

.test1{color:green!important;font-size:22px}

The Test Script

And finally I will include the script here so you can run the test yourself and possibly include your own tools to test with.

/**
 * CSS Compression Tests
 *
 * Simple test of different compression tools for CSS. This
 * uses node (of course) as the execution environment.
 *
 * To install the tools used below, drop to shell at
 * the location of this file and enter the following:
 *
 * 		npm install clean-css;npm install csso;npm install ycssmin;npm install ncss;npm install yuicompressor
 *
 * then
 * 		node cssCompressionTests.js		(assuming that is what you named this script)
 */

var origSrc 		= "\n	.mainView {\n	font-family: sans-serif;\n}\n.firstView {\n	font-family: sans-serif;\n}\n.secondView {\n	display: none;\n	display: none;\n	color: rgb(255, 255, 255);\n}\n.mainView .title {\n	font-weight: bold;\n	font-size: 120%;\n}\n.mainView .title {\n	color: green;\n}\n.test1 {\n	color: green !important;\n}\n.test1 {\n	/* I hope this moves up to the rule\n	 above\n	 */\n	font-size: 22px;\n}\n.emptyRule {\n	/* nothing here for now */\n}";

var CleanCSS 		= require('clean-css'),
	CSSO 			= require('csso'),
	YCSS 			= require('ycssmin').cssmin,
	ncss 			= require('ncss'),
	compressor 		= require("yuicompressor");

// CLEAN CSS
logCompressionResults(new Date(), "Clean-CSS", origSrc, new CleanCSS().minify(origSrc));

// CLEAN CSSO
logCompressionResults(new Date(), "CSSO", origSrc, CSSO.justDoIt(origSrc));

// CLEAN YCSS-MIN
logCompressionResults(new Date(), "YCCS-Min", origSrc, YCSS(origSrc));

// CLEAN NCSS
logCompressionResults(new Date(), "NCSS", origSrc, ncss(origSrc));

// CLEAN YUI-COMPRESSOR
var timestamp			= new Date();
compressor.compress(origSrc, {
	charset			: 'utf8',
	type			: 'css'
}, function(err, data, extra) {
	logCompressionResults(timestamp, "YUI Compressor", origSrc, data);
});

// = --- = --- = --- = --- = --- = --- =
// The main logger
function logCompressionResults(startTimestamp, toolName, origSrc, newSrc) {
	var endTimestamp	= new Date();
	console.log();
	console.log("---------[ "+ toolName +" ]-------------");
	console.log(newSrc);
	console.log("Length: " + newSrc.length + " from " + origSrc.length);
	console.log("Time: " + getRuntimePretty(startTimestamp.getTime(), endTimestamp.getTime()));
}

// = --- = --- = --- = --- = --- = --- =
// Some helper functions
function getRuntimePretty(startTS, endTS) {
	var milsRem				= endTS - startTS;
	var hourInMils			= 60 * 60 * 1000;
	var minInMils			= 60 * 1000;
	var secInMils			= 1000;
	var hours				= getInt(milsRem / hourInMils);
	milsRem					-= (hours * hourInMils);

	var mins				= getInt(milsRem / minInMils);
	milsRem					-= (mins * minInMils);

	var secs				= getInt(milsRem / secInMils);
	milsRem					-= (secs * secInMils);

	var mils				= (milsRem / 1000);
	mils					= fRight(mils, ".");

	if (hours &gt; 0) {
		return hours + ":" + numberZeroPadded(mins) + ":" + numberZeroPadded(secs) + "." + mils;
	}

	if (mins &gt; 0) {
		return mins + ":" + numberZeroPadded(secs) + "." + mils;
	}

	return secs + "." + mils;

}
function numberZeroPadded(num) {
	var str					= '' + num;
	if (str.length == 2) {
		return str;
	}
	if (str.length == 1) {
		return "0" + str;
	}
	if (str.length == 0) {
		return "00";
	}
	return str;
}
function getInt(value) {
	if (value == null || value &lt; 0) return 0; 	else return Math.floor(value); } function fRight(string, delim) { 	if (typeof string === 'undefined' || typeof delim === 'undefined') { 		return ""; 	} 	if (string === null || delim === null) { 		return ""; 	} 	string 	= string.toString(); 	delim	= delim.toString(); 	var theSpot					= string.indexOf(delim); 	if (theSpot &gt; -1) {
		return string.substring(theSpot + delim.length, string.length);
	}

	return "";
}

100

101

102

103

104

105

/**

* CSS Compression Tests

* Simple test of different compression tools for CSS. This

* uses node (of course) as the execution environment.

* To install the tools used below, drop to shell at

* the location of this file and enter the following:

* npm install clean-css;npm install csso;npm install ycssmin;npm install ncss;npm install yuicompressor

* then

* node cssCompressionTests.js (assuming that is what you named this script)

var CleanCSS = require('clean-css'),

CSSO = require('csso'),

YCSS = require('ycssmin').cssmin,

ncss = require('ncss'),

compressor = require("yuicompressor");

// CLEAN CSS

logCompressionResults(new Date(), "Clean-CSS", origSrc, new CleanCSS().minify(origSrc));

// CLEAN CSSO

logCompressionResults(new Date(), "CSSO", origSrc, CSSO.justDoIt(origSrc));

// CLEAN YCSS-MIN

logCompressionResults(new Date(), "YCCS-Min", origSrc, YCSS(origSrc));

// CLEAN NCSS

logCompressionResults(new Date(), "NCSS", origSrc, ncss(origSrc));

// CLEAN YUI-COMPRESSOR

var timestamp = new Date();

compressor.compress(origSrc, {

charset : 'utf8',

type : 'css'

}, function(err, data, extra) {

logCompressionResults(timestamp, "YUI Compressor", origSrc, data);

});

// = --- = --- = --- = --- = --- = --- =

// The main logger

function logCompressionResults(startTimestamp, toolName, origSrc, newSrc) {

var endTimestamp = new Date();

console.log();

console.log("---------[ "+ toolName +" ]-------------");

console.log(newSrc);

console.log("Length: " + newSrc.length + " from " + origSrc.length);

console.log("Time: " + getRuntimePretty(startTimestamp.getTime(), endTimestamp.getTime()));

}

// = --- = --- = --- = --- = --- = --- =

// Some helper functions

function getRuntimePretty(startTS, endTS) {

var milsRem = endTS - startTS;

var hourInMils = 60 * 60 * 1000;

var minInMils = 60 * 1000;

var secInMils = 1000;

var hours = getInt(milsRem / hourInMils);

milsRem -= (hours * hourInMils);

var mins = getInt(milsRem / minInMils);

milsRem -= (mins * minInMils);

var secs = getInt(milsRem / secInMils);

milsRem -= (secs * secInMils);

var mils = (milsRem / 1000);

mils = fRight(mils, ".");

if (hours > 0) {

return hours + ":" + numberZeroPadded(mins) + ":" + numberZeroPadded(secs) + "." + mils;

}

if (mins > 0) {

return mins + ":" + numberZeroPadded(secs) + "." + mils;

}

return secs + "." + mils;

}

function numberZeroPadded(num) {

var str = '' + num;

if (str.length == 2) {

return str;

}

if (str.length == 1) {

return "0" + str;

}

if (str.length == 0) {

return "00";

}

return str;

}

function getInt(value) {

if (value == null || value < 0) return 0; else return Math.floor(value); } function fRight(string, delim) { if (typeof string === 'undefined' || typeof delim === 'undefined') { return ""; } if (string === null || delim === null) { return ""; } string = string.toString(); delim = delim.toString(); var theSpot = string.indexOf(delim); if (theSpot > -1) {

return string.substring(theSpot + delim.length, string.length);

}

return "";

}

Node.js — install on OSX

Posted by Matt Maher on Oct 1, 2013 in Uncategorized | 0 comments

This one is so simple it’s crazy to write a post about it. At this time, go to http://nodejs.org/ and download the installer and install that way.

Extra credit: There is one little extra tool you will may want and it’s called Homebrew. This is the thing that makes installing packages for OSX so super simple. You will be doing a lot of “npm” with Node. That is how you install packages. Well, OSX can have this same yummy greatness with Homebrew.

Windows 8 Surface Pro in an Apple house?

Posted by Matt Maher on Sep 24, 2013 in Other parts | 0 comments

This weekend I finally succumbed to my urges, and it wasn’t the new Apple iPhone! This time I broke down and got a Surface Pro from Microsoft.

I know, I think you could have knocked my wife over with a feather when I told her.

The thing that interested me the most was first and foremost that the Surface has a pressure-sensitive screen. This means a lot to me in the way of art. What fun. It’s like a Cintiq for your back-pocket!

Well, okay maybe not like the industry leading pressure-sensitive device all those REAL artists use. But this sure had promise to be something interesting. I’ve been excited about it since they were announced, and this week I finally broke down.

My first impressions were a bit concerning. I spent many hours getting the software I’d need onto the thing just so I could get started. And from a Mac world, returning to the days of 1998 with nasty installers, popups, install riders, and even 2 “Browser Helper Objects” being installed was terribly depressing. By the end of the first day I had horrible buyer’s remorse.

Well, the next few days have turned things around.

ART

As an art slab it really rocks. There is an issue with the screen-size and things like Adobe Photoshop’s penchant for itty-bitty buttons, but once you get a working process down it is near painless.

I have become great friends with Sketchbook Pro again and am amazed at how much can be done there. But my main art is illustration and I am yet to venture into those waters. I have a work process that involves my iPad that has been terrific at getting the rough flow of an image started before I have to wander back to a desk and Illustrator. I have Illustrator installed on the Surface but haven’t ventured in there. I am so adept with keyboard shortcuts I’m concerned that things there will feel far more difficult. We will see.

COMPUTER

As a computer the Windows 8 environment is awesome. I’ve spent a fair amount of time there with some of my servers and in preparations to release Windows 8 tablet apps, and I really think it’s easily the fastest and best OS Microsoft has put out in a long time. That said it’s Windows and I’ve been in the Mac world for a long time. Without spending a majority of my time here for a while I think my reviews here may be a little stilted.

Dropping to the Desktop is insanely simple and fast. Bouncing in and out of it is not jarring in any way. Early preview builds of Windows 8 had me thinking that I’d feel the harsh drop-off from “Metro” back to the desktop. That’s not the case. It’s smooth and entirely forgiving. And that said I want to add this this is the first Windows I’ve been in ever that simply “closing the lid” did not come with the fear of loss. Bravo Microsoft.

Hit points are still rather small in the Desktop, so the embedded track pad on the keyboard gets some extra use there. But there is almost nothing negative to say about using “touch” in a “mouse” world. It’s not perfect, but for the most part if I find myself in the Desktop I usually want the keyboard and mouse world.

TABLET

Now this one is harder. And I am trying. I’ve been with the iPad since day 1, so this transition was always going to be the hardest. In fact, I never at all expected to use the Surface as a tablet (in the vein of the iPad). But things are nice enough in the Windows world (Metro) that I’d be willing. The problem is — no surprise here — the App selection. It’s pitiful. And that’s not Microsoft’s fault. It’s simply that the market hasn’t yet shown itself. Many of the things I love to do on my iPad are not available in the same way here. Flipboard is a favorite reader and not (yet) available for Windows 8. The News reader that ships is a nice enough system and seems to work well with some cool features, but it can’t touch the depth of Flipboard. I’ve become entrenched in iMessages as well, so not “texting” from Windows is a little tough — my phone gets more use. Slacker has a very nice player (thank goodness), so music is covered. Magazines are rough as well. I have a few subscriptions that are stuck to the “Newsstand” in iOS and simply have no way to get things here. Then there are other fringe apps that I miss as well.

It’s early as a tablet for me, and dropping to a full Web has helped with some of that, but you feel it. I’ll keep stabbing around.

FINAL

Honestly, this is a device that is worth looking into. It doesn’t replace everything, nor do I really want it to. But I never would have typed this whole post on an iPad, and my MacBook Pro is too clunky to have laying around begging to be used. For art it has no rival in my world. And as a computer it is really fast and powerful for such a small device.

A day or so ago there was an announcement about the Surface 2 that will be coming out in a month. Luckily I’ll be within my 45-day return period on this device and I will be able to “upgrade” for free. I’ll definitely be there early for that one. And it’s a device I really like. There’s just something about it. Very Dreamcast-y.

JS Diagrammer

Posted by Matt Maher on Sep 11, 2013 in Featured, Portfolio | 0 comments

An automated diagramming tool that draws SVG Waterfall diagrams of a JavaScript system on the fly. Fantastic.

FedEx iOS (2013)

Posted by Matt Maher on Sep 11, 2013 in Featured, Portfolio | 0 comments

Well, iOS has arrived and it was time for a refresh anyway. I took the time to restyle almost every element of the application for iOS7, including my first de-styled placard. It’s growing up, I suppose.

Another JavaScript resource loader

Posted by Matt Maher on Sep 11, 2013 in Programming | 0 comments

I don’t have a lot to show on this one, a resource loader is not the most visual of elements. But suffice it to say that I spent a fair amount of time designing a very extensive relative resource loading system. That means that if you can point to one file in the package the loader can figure out how to load the rest.

This creates scenarios where it is simple to share a component between teams, environments, websites — just about anywhere. I’m still working on the best way to package up the loader so it presents itself as a simple library inclusion, but until then it needs one script tag to be included and then you tell it what to load.

Some of the more unusual features of this loader are the ability to load any file type, to install html template files for later use, active memory, thread controls and blocking. It will do the work of loading web resources like .js and .css files then insert them properly into the DOM properly and uniquely.

It could be one of the more exciting developments from my recent JS exploits, but again, it’s not exactly pretty.

« Older Entries

JS Diagrammer

FedEx iOS (2013)

Test Runner (2013)

GameTracker Web (2013)

Automatically diagram a JavaScript application

Now: Elegant Clock and Weather (2013)

Rethink the Blink

Metric Viewer 2.0 (2012)

CSS Compression tests

The CSS

The Challenges

The Challengers

The Results

My Favorite

The Test Script

Like this:

Node.js — install on OSX

Like this:

Windows 8 Surface Pro in an Apple house?

ART

COMPUTER

TABLET

FINAL

Like this:

JS Diagrammer

Like this:

FedEx iOS (2013)

Like this:

Another JavaScript resource loader

Like this:

Recent Posts

Subscribe to Blog via Email

The CSS

The Challenges

The Challengers

The Results

My Favorite

The Test Script

Share this:

Like this:

Share this:

Like this:

ART

COMPUTER

TABLET

FINAL

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Recent Posts

Subscribe to Blog via Email