javascript minifiershtml minifierscss minifiers
Comparison Set Rodrigo54 PHPClasses package/9865 MatthiasMullie CSSTidy
javascript css html minifier evaluation
Written: Jun-2023

CSS Minifiers Comparison

Continuing on from evaluating the set of modules available for JavaScript minification, the need for CSS minification seemed an easy secondary solution that would help in reducing the noise being sent over the wire to the client browser. The evaluation was also more simple than the JavaScript - looking for (1) does it result in valid CSS, (2) does it remove block comments and (3) does it remove important block comments.

Comparison Set

ClassValid
result
Block-
comments
Important-
comments
Block
merging1
Minifies
0px2
Removes
redundant
semi-colons3
Minified
colors
Test-speedResult size*
JSqueeze n/an/an/an/an/an/an/an/an/a
Rodrigo54 check check check close check checkclose 0.00106 55.25%
PHPClasses/9865 closea check close close close closeclose 0.00272 50.53%
JShrink n/a n/a n/a n/a n/a n/a n/a n/a n/a
PHPWee n/a n/a n/a n/a n/a n/a n/a n/a n/a
MatthiasMullie close check check close check check check 0.00331 55.25%
CSSTidy close check check checkclosec check check check 0.01892 55.44%
1 Block-merging seems an obvious reduction plan of collating all similarly named blocks together and merging their content into a single block
2 0px can be changed to 0 with the obvious reduction in characters.
a @media screen and (max-width:650px) resulted in @media screen and(max-width:650px) which fails to work as a CSS instruction grid-template-areas: have had their line breaks removed which causes problems
b grid-template-areas: have had their line breaks removed which causes problems
c Seems to only work with adjacent selectors.
** This will change and was simply a snapshot of the basic [small code] test run at one time.

Scroll down, or click on the links in the table above to jump to the live-demo of each class involved.

Rodrigo54

https://gist.github.com/Rodrigo54

Code implementation is very simple:

rodrigo54-css.php :: Rodrigo54
require_once 'rodrigo54-minifier.php'; // or whatever filename you chose
$jz = new Rodrigo54();

$minifiedCode = $jz->minify_css($css);
// or $minifiedCode = $jz->minify_css($css);
// or $minifiedCode = $jz->minify_html($html);
Pros

  • Very easy deployment (note I decided to clipboard the raw-code into a Rodrigo54 class so that I could use it as an external class in my packages).
  • Very simple and easy to understand code involving a set of regex's.
  • Handles HTML and CSS as well as JavaScript.
  • Does what is says on the tin.
  • Handles important comments (no option to turn this off).

Cons

  • No version number in the code or download, so you don't know if you're using older code.
  • Removes redundant semi-colons sometimes (see demo)

PHPClasses package/9865

https://www.phpclasses.org

Code implementation is very simple:

phpclasses-css.php :: PHPClasses/9865
require_once 'phpclasses9865/CssMinifier.phpclass'; //
$minifier        =  new  CssMinifier () ;
$minifiedCode    =  $minifier->Minify( $css ) ;
// or $minifiedCode    =  $minifier->MinifyFrom( $filename ) ;
I'm not a fan of this one mainly due to the complexity of the code verses what it delivers, and the confusion of documentation that PHPClasses.org provides.

The output comes in multiple lines.

Pros

  • It will remove comments.1

Cons

  • Download requires a PHPClasses.org login before you can evaluate the solution.
  • PHPClasses documentation and download area is a disaster and difficult to navigate.
  • Strange use of .phpclass files (something I'm not familiar with).
  • Documentation.
  • Removes important comments (no obvious way to disable this).
  • Retains redundant semi-colons
  • No version number in the code or download, so you don't know if you're using older code.
  • Not clear if any fixes have been applied to this code since first posting.

1 Including Important Comments - which you may not want to occur.

MatthiasMullie

https://github.com/matthiasmullie

This extension reduces the page size by removing unused white-spaces and comments in the HTML output.

Code implementation is very simple:

matthiasmullie-css.php :: MatthiasMullie
require_once 'MatthiasMullie/src/Minify.php';
require_once 'MatthiasMullie/src/CSS.php';
require_once 'MatthiasMullie/src/JS.php';
require_once 'MatthiasMullie/src/Exception.php';
require_once 'MatthiasMullie/src/Exceptions/BasicException.php';
require_once 'MatthiasMullie/src/Exceptions/FileImportException.php';
require_once 'MatthiasMullie/src/Exceptions/IOException.php';
require_once 'path-converter/src/ConverterInterface.php';
require_once 'path-converter/src/Converter.php';

$minifier = new Minify\CSS();
$minifier->add($css);

// or ....

//$sourcePath1 = '/path/to/second/source/css/file1.js';
//$minifier->add($sourcePath1);
//$sourcePath2 = '/path/to/second/source/css/file2.js';
//$minifier->add($sourcePath2);


// save minified file to disk
//$minifiedPath = '/path/to/minified/js/file.min.js';
//$minifier->minify($minifiedPath);

// or just output the content
$minifiedCode = $minifier->minify();
Pros

  • Removes comments
  • Removes redundant semi-colons

Cons

  • Deployment isn't as easy as the other classes.
  • Multi-line output.
  • Breaks grid-template-areas: by removing line breaks.

CSSTidy

(v2.0.3)

https://github.com/Cerdic/CSSTidy

Code implementation is a simple download:

csstidy-css.php :: CSSTidy
include('csstidy/class.csstidy.php');
$csstidy = new csstidy();

// Set some options :
$csstidy->set_cfg('optimise_shorthands', 2);
$csstidy->set_cfg('template', 'high');
$csstidy->set_cfg('sort_selectors', true);
$csstidy->set_cfg('merge_selectors', true);
$csstidy->set_cfg('compress_colors', true);
//$csstidy->set_cfg('discard_invalid_selectors', true);
//$csstidy->set_cfg('discard_invalid_properties', true);

// Parse the CSS
$csstidy->parse($css);

// Get back the optimized CSS Code
$minifiedCode = $csstidy->print->plain();

Although there is no documentation, I can see the following $csstidy->set_cfg(k,v) options in the code:

php :: title
set_cfg('remove_bslash', $bool);
set_cfg('compress_colors', $bool);
set_cfg('compress_font-weight', $bool);
set_cfg('lowercase_s', $bool);
set_cfg('optimise_shorthands', $bool);
set_cfg('remove_last', $bool);
set_cfg('space_before_important', $bool);
set_cfg('case_properties', $bool);
set_cfg('sort_selectors', $bool);
set_cfg('merge_selectors', $bool);
set_cfg('reverse_left_and_right', $bool);
set_cfg('discard_invalid_selectors', $bool);
set_cfg('discard_invalid_properties', $bool);
set_cfg('css_level, $levelCd); // e.g. CSS1.0|CSS2.0|CSS2.1|CSS3.0)
set_cfg('preserve_css', $bool);
set_cfg('timestamp', $bool);
set_cfg('template, $levelCd); // e.g. highest|high|low

Pros

  • Versions visible in GitHub.
  • Lots of options.
  • Removes comments.
  • Removes redundant semi-colons.
  • Merges selectors (but in the test it only worked if they are adjacent).

Cons

  • Documentation lacking.
  • Deployment isn't as easy as the other classes.
  • Multi-line output.
  • Breaks grid-template-areas: by removing line breaks.


link Click to view a demo

square