CSS minifying and CSS compression

Posted: Tue Mar 27, 2012 10:28 am

OK so this doesn't exactly relate to block level CSS but it was an interesting excursion...
Google has a great little minifying tool for CSS and JS
http://code.google.com/p/minify/
I'm only going to tell you about using it for CSS here - sorry!

If you want to try it, download the zip file.
Unpacked it.
Copy the 'min' directory from the package to your webroot so it should look like;
/home/example/public_html/min

Open up the file
.. /min/config.php
Edit the setting $min_cachePath
and change it to a full server path to RN's cache directory (because it should be writable)

Code:

$min_cachePath = '/home/example/public_html/cache';

Save the file.

Run the built in builder app
www.yoursite.com/min/builder

You'll see a screen you can add all your CSS paths - easiest way is to copy/paste from the viewed page source. Click the update button and your done with that bit.
The app will give you all the data you need to link to so it loads a combined, minified and compressed file. In my case;

Code:




<link type="text/css" rel="stylesheet" href="/min/f=modules/News/css/newslink.css,themes/ravennuke.css,themes/CA_Abyss/style/style.css,includes/jquery/css/colorbox.css,includes/nukeSEO/nukePIE.css,includes/jquery/css/nukeNAV.css,themes/CA_Abyss/style/nukeNAV.css,modules/Tags/css/tags.css,modules/News/css/socialicons.css" />

You are also given the option to load those files with a group key (useful if you have theme specific CSS files!!).
An example of a file 'group' would be

Code:

<link type="text/css" rel="stylesheet" href="/min/g=RavenIce" />

And then you would put the grouping of files within min/groups/Config.php

Code:




return array (


    'RavenIce' => array('//modules/News/css/newslink.css', '//themes/ravennuke.css', '//themes/CA_Abyss/style/style.css', '//includes/jquery/css/colorbox.css', '//includes/nukeSEO/nukePIE.css', '//includes/jquery/css/nukeNAV.css', '//themes/CA_Abyss/style/nukeNAV.css', '//modules/Tags/css/tags.css', '//modules/News/css/socialicons.css'),


);

For more information, there is also a full user guide at
http://code.google.com/p/minify/wiki/UserGuide

Posted: Tue Mar 27, 2012 5:18 pm

#minify css
I was thinking about this some more today and think it is possible to get this to work with RN
You would just need to alter the function writeHEAD() to create a comma seperated list of the files instead of echoing each part of the CSS files array using implode()
*something* like (not tested)

Code:




function writeHEAD() {


   global $headCSS, $headJS;


   if (is_array($headCSS) && count($headCSS) > 0) {


      foreach($headCSS AS $css) {


         if ($css[0]=='file') {


                           $cssList = implode(",",$css[1])


                            echo '<link rel="stylesheet" href="min/f=' . $cssList . '" type="text/css" />' . "\n";


         } else {


            echo $css[1];


         }


      }


   }





   if (is_array($headJS) && count($headJS) > 0) {


      foreach($headJS AS $js) {


         if ($js[0] == 'file') {


                            $js[1] = ''.$js[1].'?'.filemtime($js[1]);


                            if(defined('HTML5')){


            echo '<script type="text/javascript" src="' . $js[1] . '"></script>' . "\n";


                            } else {


                                echo '<script type="text/javascript" language="JavaScript" src="' . $js[1] . '"></script>' . "\n";


                            }


         } else {


            echo $js[1];


         }


      }


   }


   return;


}

There are only two lines that need adding/changing from the original function, which is pretty good so I might even release a hack for this if I get the time.
It should be noted that the Google Minfy app uses filemtime() to versionise the files the same way I have posted snippets elsewhere in these forums and it also comes complete with it's own htaccess re-write rules to take care of everything to ensure everything is processed by the app. In case you were interested, here are the re-write rules it comes with

Code:




<IfModule mod_rewrite.c>


RewriteEngine on





# You may need RewriteBase on some servers


#RewriteBase /min





# rewrite URLs like "/min/f=..." to "/min/?f=..."


RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]


</IfModule>


<IfModule mod_env.c>


# In case AddOutputFilterByType has been added


SetEnv no-gzip


</IfModule>

Newbie Joined: May 12, 2009 Posts: 74 Location: TX

Very cool stuff, just got around to trying this and got it to work with some tweaks to your function writeHEAD() above.

php Code:

function writeHEAD() {


	global $headCSS, $headJS;


	if (is_array($headCSS) && count($headCSS) > 0) {


		$comma = $cssList = '';


		foreach($headCSS AS $css) {


			if ($css[0]=='file') {


				$cssList .= $comma . $css[1];


				$comma = ',';


			} else {


				echo $css[1];


			}


		}


		echo '<link rel="stylesheet" href="min/f=' . $cssList . '" type="text/css" />' . "\n";


	}





	if (is_array($headJS) && count($headJS) > 0) {


		$comma = $jsList = '';


		foreach($headJS AS $js) {


			if ($js[0] == 'file') {


				$jsList .= $comma . $js[1];


				$comma = ',';


			} else {


				echo $js[1];


			}


		}


		if(defined('HTML5')){


			echo '<script type="text/javascript" src="min/f=' . $jsList . '"></script>' . "\n";


		} else {


			echo '<script type="text/javascript" language="JavaScript" src="min/f=' . $jsList . '"></script>' . "\n";


		}


	}


	return;


}

Although I did not make any tweaks to minify, so still testing things out to see what you may have been referring to there... But to take 20+ files and serve them in two, very nice Smile

Newbie Joined: May 12, 2009 Posts: 74 Location: TX

Update to the function above, as in most cases you will need your inline CSS and JS to occur after the file includes, and the prior method always had them before.

php Code:

function writeHEAD() {


	global $headCSS, $headJS;


	if (is_array($headCSS) && count($headCSS) > 0) {


		$comma = $cssList = $cssInline = '';


		foreach($headCSS AS $css) {


			if ($css[0]=='file') {


				$cssList .= $comma . $css[1];


				$comma = ',';


			} else {


				$cssInline .= $css[1];


			}


		}


		echo '<link rel="stylesheet" href="min/f=' . $cssList . '" type="text/css" />' . "\n";


		echo $cssInline;


	}





	if (is_array($headJS) && count($headJS) > 0) {


		$comma = $jsList = $jsInline = '';


		foreach($headJS AS $js) {


			if ($js[0] == 'file') {


				$jsList .= $comma . $js[1];


				$comma = ',';


			} else {


				$jsInline .= $js[1];


			}


		}


		if(defined('HTML5')){


			echo '<script type="text/javascript" src="min/f=' . $jsList . '"></script>' . "\n";


		} else {


			echo '<script type="text/javascript" language="JavaScript" src="min/f=' . $jsList . '"></script>' . "\n";


		}


		echo $jsInline;


	}


	return;


}

And might as well add it to function writeBODYJS too...

php Code:

function writeBODYJS() {


	global $bodyJS;


	if (is_array($bodyJS) && count($bodyJS) > 0) {


		$comma = $jsList = $jsInline = '';


		foreach($bodyJS AS $js) {


			if ($js[0] == 'file') {


				$jsList .= $comma . $js[1];


				$comma = ',';


			} else {


				$jsInline .= $js[1];


			}


		}


		if(defined('HTML5')){


			echo '<script type="text/javascript" src="min/f=' . $jsList . '"></script>' . "\n";


		} else {


			echo '<script type="text/javascript" language="JavaScript" src="min/f=' . $jsList . '"></script>' . "\n";


		}


		echo $jsInline;


	}


	return;


}

I end up playing around with alot of CSS/JS on my sites, so they are not usually a good example of optimization Rolling Eyes

- but with this is was able to serve 29 files as 3... a great first step to a faster loading site... Smile

Suspended User Joined: Jun 03, 2009 Posts: 61

Guys, thanks for this amazing hack, where should I put this link

Code:

<link type="text/css" rel="stylesheet" href="/min/g=RavenIce" />

Newbie Joined: May 12, 2009 Posts: 74 Location: TX

If you want to try it out replace the 2 functions in /mainfile.php with those from my last post. If minify is configured correctly that's all you should need to do.

The section of code you posted is for grouping files which is done on the fly with the modified functions, so that approach is not needed for this to work.

Make sure to edit the $min_cachePath as Guardian mentioned in the first post. Generally it should look like your .htaccess path in nukesentinel config, but instead of pointing to .htaccess, point to cache

Check out your cache directory after loading a few pages and you should see files appearing there. If not check your error logs and see what they say. There may be an error log auto-generated in the min directory or elsewhere.

You can tell it's working once you have some crazy long url's for CSS and JS in your head.

html Code:

<link rel="stylesheet" href="min/f=themes/Chameleon/style/gsearch.css,themes/ravennuke.css,themes/Chameleon/style/style.css,includes/jquery/css/colorbox.css,includes/nukeSEO/nukePIE.css,includes/jquery/css/nukeNAV.css,themes/Chameleon/style/nukeNAV.css,modules/News/css/socialicons.css,modules/Tags/css/tags.css,themes/Chameleon/style/searchblock.css,./themes/Chameleon/style/ctopics.css" type="text/css" />


<script type="text/javascript" language="JavaScript" src="min/f=includes/jquery/jquery.js,themes/Chameleon/style/jquery.tools.min.js,themes/Chameleon/style/smoothanchors.js,themes/Chameleon/style/jquery.tablesorter.min.js,themes/Chameleon/style/jquery.truncator.js,themes/Chameleon/style/jquery.filestyle.mini.js,includes/rn.js,includes/jquery/jquery.colorbox-min.js,includes/jquery/colorbox-settings.js,includes/boxover/boxover.js,includes/jquery/jquery.hoverIntent.minified.js,includes/jquery/superfish.js,includes/jquery/supersubs.js,includes/jquery/nukeNAV.js"></script>

and you can actually visit those url's to see the compression results, etc.
sample

which reminds me I really need to optimize some of the CSS files themselves, but only so much time in the day... Smile

Only downside to this, is tools such as firebug which make it really easy to find styling declarations, reference the compressed file.... which doesn't help if you want to know what line the CSS is declared on, in your original file(s).. but I can get used to it Wink

Suspended User Joined: Jun 03, 2009 Posts: 61

spasticdonkey. I did everything,

Yesteday I did it and everything got messed up. I will do it right now again.

Guys, I guess something is missing here. I uncomment all these code in config.php

Code:

 * For best performance, specify your temp directory here. Otherwise Minify


 * will have to load extra code to guess. Some examples below:


 */


//$min_cachePath = 'c:\\WINDOWS\\Temp';


//$min_cachePath = '/tmp';


//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());

Posted: Tue Jul 17, 2012 3:10 pm

Sorry, it was not meant as a tutorial but as something for experienced PHP coders / web developers to play with. I will try to be clearer in future to avoid confusion. I'm not at home for another 6 weeks or so, so I don't even have access to any olf files I might have.

Newbie Joined: May 12, 2009 Posts: 74 Location: TX

Guardian, hope you are enjoying your time abroad! Smile

First verify that minify is working correctly. It comes with testing within the download package
http://code.google.com/p/minify/wiki/TestingMinify

Although I will add I did get 2 failures and a note when running the tests, even though things seem to be running ok.

Code:

.....


NOTE: Minify_Cache_File : path is set to: '/tmp'.


...


!FAIL: Minify_Cache_File : display (1 of 23 tests run so far have failed)


...


!FAIL: environment : PHP/server should not auto-encode application/x-javascript output (2 of 85 tests run so far have failed)

The testing script never seems to recognize changes to the Minify_Cache_File : path - not sure why.. The Minify_Cache_File : display error may be created by the settings of the /cache/.htaccess but seems to function ok that way. I don't believe you should (or need to) make edits there. I haven't looked into the last failure yet, but it may be due to some older code in mimetype.php which will probably be replaced in an upcoming RN version. Haven't had any issues with !FAIL: environment : PHP/server should not auto-encode application/x-javascript output yet...

The first code example you posted just shows different examples of setting a cache path. Just uncomment one of them and replace with your cache path. It will look something like

php Code:

$min_cachePath = '/home/username/public_html/cache';


//$min_cachePath = '/tmp';


//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());

You do not need to edit groups config or your .htaccess - the rewrites within min are used internally, nothing you need to copy there.

You can also set $min_enableBuilder = false; in min/config.php

The only files I had to edit to get this working where:
min/config.php
/mainfile.php

Suspended User Joined: Jun 03, 2009 Posts: 61

check my site and u can see how nuke nav menu is messed

http://www.bestbuildpc.org/

Please give me the solution. I did all the changes you mention.

U don't answer my question about this result

http://www.bestbuildpc.org/min/builder/

I added all the css links there.

Where should I put these links above?

Suspended User Joined: Jun 03, 2009 Posts: 61

Guys, I restore everything back. I tried all but it doesn't work. Crying or Very sad

Newbie Joined: May 12, 2009 Posts: 74 Location: TX

I think you need to fix the DOCUMENT_ROOT issue. Did you try as the script is telling you? There is a section for it in min/config.php. The trailing slash is a problem. Also server path is sensitive server info you shouldn't be posting on forums.

Why are you still using the builder? That is for grouping files, we are not using that method... That is why I didn't tell you what to do there, because we are not doing anything Smile

I think if you fix the DOCUMENT_ROOT issue you should be good to go, the url's in your page look as they should, it's just minify is not setup properly yet.

Suspended User Joined: Jun 03, 2009 Posts: 61

spasticdonkey, it doesn't matter. I tried everything u told me and it didn't work. I restored everything back. I hate when I can not solve a problem!

Newbie Joined: May 12, 2009 Posts: 74 Location: TX

Your problems seem to be with getting minify to work correctly on your server. If you still want to solve this, there is debugging info here
http://code.google.com/p/minify/wiki/Debugging

which will tell you more info on what is going wrong. Also if your site is actually installed outside of the document root, i.e.
/home/example/public_html/yoursite.com/folder
there may be other changes required:
http://code.google.com/p/minify/wiki/AlternateFileLayouts

you should be able to test and configure minify without making the mainfile edits. If you get 400 Bad Request something is not set correctly in minify. It currently is 404 not found since you removed the directory. The problems/answers should be in min/config.php - Once (or if) you get minify working, the prior edits should work for you. If not, hey, we tried Smile

Suspended User Joined: Jun 03, 2009 Posts: 61

I thought you were not following me anymore since I get crazy with Mr Mini. I am going to try again now.