Samstag, 1. Februar 2014

How to minify javascript / css?

We are agreed, that assets like html, css and javascript must be better minified. If not, YSlow, Google Page Speed test and similar tools will give your site less scoring points and advice you to minify. It is enough said about importance of load optimizing for SEO, so lets look, what we can do and what we use to achive best possible result.
I tested 17 free tools to minify JavaScript online: after minifying with the best tool there are ca 43% of code remained,  the "worst" tool (not really worst) remained ca 51% of code. It worth also to minify. To minify CSS gives ca 60% of less code - It worth also to minify too. Read further - i list all tested online minifying tools with stats and a few server-side traffic-saving hints :

I tested Javascript minifying with this 408 signs long script, which inserted into the < head > helps you to clean up your HTML-output:
function sanitize_output($buffer)
{
$search = array(
'/\>[^\S ]+/s', // strip whitespaces after tags, except space
'/[^\S ]+\</s', // strip whitespaces before tags, except space
'/(\s)+/s' // shorten multiple whitespace sequences
);
$replace = array(
'>',
'<',
'\\1'
);
$buffer = preg_replace($search, $replace, $buffer);
return $buffer;
}
ob_start("sanitize_output");


Test results of javascript minifying

  1. 43,87% left, WINNER! http://javascript-minifier.com/
  2. 43,87% left, WINNER! http://marijnhaverbeke.nl/uglifyjs
  3. 43,87% left, WINNER! http://www.lotterypost.com/js-compress.aspx, used Microsoft Ajax Minifier
  4. 44,11% left, http://sundgaard.dk/javascript-minify.aspx
  5. 44,36% left, http://compressorrater.thruhere.net/
  6. 44,36% left, http://minify.avivo.si
  7. 44,36% left, http://javascriptcompressor.com/ shrink variables
  8. 44,36% left, http://www.freeformatter.com/javascript-minifier.html
  9. 44,36% left, http://htmlcompressor.com/compressor/
  10. 44,36% left, http://jscompress.com/
  11. 44,36% left, http://www.lotterypost.com/js-compress.aspx, used YUI Compressor
  12. 44,6% left, http://www.jscompressor.com/
  13. 45,83% left, http://shrinksafe.dojotoolkit.org/
  14. 50,24% left, http://www.jsmini.com/
  15. 51,47% signs left, http://javascriptcompressor.com/
  16. 51,71% left, left, http://htmlcompressor.com/compressor/, used Simple optimization
  17. 51,71% left, http://fmarcia.info/jsmin aggresive level
  18. 51,71% left, http://prettydiff.com/?m=minify
And here you can look into minifying methods of each tool.

Test results of CSS-minifying tools

  1. 41,60% left, http://cssminifier.com/
  2. 41,60% left, http://www.lotterypost.com/css-compress.aspx
  3. 41,60% left, http://www.freeformatter.com/css-minifier.html
  4. 41,60% left, http://devilo.us/
  5. 41,60% left, http://toolswebtop.com/css/minify
  6. 43,64% left, http://www.cssdrive.com/compressor/compress.php
  7. 43,64% left, http://sundgaard.dk/css-minify.aspx

Server-side minifying

  1. Firstly look into your phpinfo.php (if you haven't one, simply create a text file, name it phpinfo.php and write inside phpinfo()and upload the file into your root directory)  file and check, whether mod_gzip is available and on.
  2. If mod_gzip is here and on, open your .htaccess file (if not existing, create one and upload after editing into your root directory) and add code from this file.
  3. Then save and upload.
Yandex.Metrica