Welcome to WebmasterWorld Guest from 34.204.191.31

Forum Moderators: not2easy

Message Too Old, No Replies

Recommended CSS Minifier?

     
3:31 pm on Jan 19, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 63
votes: 1


Is there a recommended tool for minifying CSS files in order to satisfy Google's Page Speed Insights? Should I just start with the minified file PSI provides?
3:42 pm on Jan 19, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2715
votes: 823


Just Google online css minifier, and use whatever tool is presented.

There is nothing magic in minifying all it does is remove, tabs, useless white spaces, carriage returns, line feeds and comments.
4:13 pm on Jan 19, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


There can be some byte-saving "magic" like value optimizations, e.g. color: #000 instead of color: #000000, border: 2px instead of border: 2px 2px 2px 2px, outline: 0 instead of outline: none, etc. Depends on how you write your CSS. Some minifiers can even group certain rules together if they share declarations, but that can be dangerous.

I usually use the YUI Compressor [yui.github.io].

Don't optimize to satisfy a tool. That's not the point. Do it for your users. What's best according to the tool may not be best for your users.
8:34 pm on Jan 19, 2018 (gmt 0)

Junior Member from CA 

Top Contributors Of The Month

joined:Mar 2, 2017
posts:51
votes: 5


Don't optimize to satisfy a tool. That's not the point. Do it for your users. What's best according to the tool may not be best for your users.

NIce answer. By the way I'll take a peek on YUI compressor. I've never heard about it before.
2:21 am on Jan 20, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Just a reminder... always backup a file *before* altering it in case you need to use it again.
4:03 am on Jan 20, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 63
votes: 1


I will. Thanks!
7:35 pm on Jan 20, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15893
votes: 876


Oh, and ... don't be surprised if Page Speed continues to recommend minifying css/js even after you have minified them. You could compress your jpgs down to 10% (is it a blazing log? is it an orangutan? what's that greenish blob in the corner?) and they'd still recommend compressing images.
11:05 pm on Jan 20, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


It's common practice to save an optimized copy of the original file (e.g. stylesheet.css) as a separate file (e.g. stylesheet.min.css). That way you always have a backup. (If you mess up, you could always rectify by "beautifying" the minified file -- lots of fying going on there). My preferred process after finishing work on a CSS or javascript file is to run a script that minifies the contents and stores both a separate plain-text copy (stylesheet.min.css) as well as a GZIPped version (stylesheet.min.css.gz) to save the server from having to do GZIP compression on-the-fly every time the file is requested even though the contents don't change very often. My precious CPU cycles.
11:13 pm on Jan 20, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 63
votes: 1


I successfully uploaded 2 different minified CSS files and have saved 2 copies of each "working" (unminified) CSS file. Thanks so much for your help!