Combine and Minify CSS and Javascript Files Using Minify

Combine, Minify, Cache CSS and Javascript Files

This tutorial will teach us how to combine and minify CSS and javascript files using [http://code.google.com/p/minify/ Minify] thus will help your site regain high performance result and pass the tests of Yahoo!'s YSLow, Google's Page Speed, or AOL's WebPagetest.


What is Minify?


Minify is a PHP5 app that helps you follow several of Yahoo!'s Rules for High Performance Web Sites.

It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.


How to use Minify?

1. Download minify from Google Code

visit: http://code.google.com/p/minify/downloads/list

2. Extract content then copy /min/ folder into your site as a child of your DOCUMENT_ROOT

i.e. folder structure: /home/user/www/public_html/min

3. Open !http://yourdomain/min/ in a web browser. This will forward you to the Minify URI Builder application, which will help you quickly start using Minify to serve content on your site.



How to implement Minify?

Assuming you have this html code:

<html>
<head>
<title>Home</title>
<link type="text/css" rel="stylesheet" href="/css/style.css">
</head>
<body>
Body content here
<script type="text/javascript" src="/js/script.js"></script>
</body>
</html>

1. Download minify from Google Code

visit: http://code.google.com/p/minify/downloads/list

2. Extract content then copy /min/ folder outside of your DOCUMENT_ROOT


DOCUMENT_ROOT: /home/user/www/public_html
MINIFY_PATH: /home/user/www/lib/min

3. Create /home/user/www/public_html/combo.php

<?php

include_once '../lib/min/index.php';

?>

4. Use combo.php and modify your html as follows:

<html>
<head>
<title>Home</title>
<link type="text/css" rel="stylesheet" href="/combo.php?f=css/style.css">
</head>
<body>
Body content here
<script type="text/javascript" src="/combo.php?f=/js/script.js"></script>
</body>
</html>

5. You may also want to modify some settings in /home/user/www/lib/min/config.php:

// disables Minify URI Builder app
$min_enableBuilder = false;

// tells browser to cache static content for 1 year
$min_serveOptions['maxAge'] = 365*24*60*60;

References

minify - Project Hosting on Google Code - http://code.google.com/p/minify/

UserGuide - minify - http://code.google.com/p/minify/wiki/UserGuide