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:
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
3. Create /home/user/www/public_html/combo.php
4. Use combo.php and modify your html as follows:
5. You may also want to modify some settings in /home/user/www/lib/min/config.php:
References
minify - Project Hosting on Google Code - http://code.google.com/p/minify/
UserGuide - minify - http://code.google.com/p/minify/wiki/UserGuide
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
Comments