A new release of Minify is finally out, and among several new features is the “min” application that makes 2.1 a snap to integrate into most sites. This post walks through the installation of Minify 2.1 on this site.
1. I download minify-2.1.0.zip and extract the “min” folder inside directly inside my DocumentRoot (on my host “public_html”). I browse to http://mrclay.org/min/, which brings up the “Minify URI Builder” helper application:
2. From here I could start typing in my file paths, but the “Create Minify URIs” bookmarket is there to help with this task. I add it to my bookmarks and execute it on the home page. This returns me to the builder app with found links:
3. I add my CSS paths by clicking the .css links. As they are added to the list, the builder checks the files by AJAX and places a check after found files (this helps prevent errors if you want to type them yourself):
4. When I click [Update], the app generates the URI I can use to serve these files as one:
I can click the link to verify the CSS is served, and copy the given HTML link element into my header template, replacing the two existing stylesheet links. (The only change I make to this is to add the attribute media=”screen”).
After clicking [Update] this time, I get another URI. It works, but it’s very long, so I decide it might be cleaner to serve these files as a group, as the app suggests:
6. I paste the given line of code into into /min/groupsConfig.php (formatted a little more cleanly for this tutorial) and replaced “keyName” with “js”:
return array( 'js' => array( '//wp-content/chili/jquery-1.2.3.min.js', '//wp-content/chili/chili-1.8b.js', '//wp-content/chili/recipes.js', '//js/email.js', '//js/waitFor.jquery.js' ), );
(The double solidi “//” is a shortcut for the DocumentRoot. These are filesystem paths, not URIs, so you could just as easily use paths like “c:/files/my.js” or “//../hiddenFile.js”)
7. The builder implies I should now be able to use the URI /min/?g=js (actually you can leave out the question mark if mod_rewrite is enabled on your server), so I try this out in the browser. It works!
In my template I replace the five script elements with one with
Seven requests became two and bytes transferred dropped by 70%. This means faster loading pages and reduced bandwidth.
This is way easier than what you had to do to get this working back in March. Relative URIs are rewritten for you in CSS files and the JS/CSS minifiers are generally improved.
I’ve left the builder app open on my server for the time being (it can be easily disabled via /min/config.php). If you view source you’ll see the output of the Minify_HTML class, which also minifies the embedded style and script blocks.