How to speed up the loading of your site using compress.php, which will combine and compress JS + CSS into Gzip

Detailed instructions given on code.google will allow you to:

• Compress all the numerous JS scripts and CSS styles
• Merge all the files in one JS and one CSS
• Compress the resulting two files into GZIP format, which almost all browsers understand and can unpack on the fly
• Prescribe a .htaccess that forces browsers to cache these two files

All this will happen when you run a single compress.php script

For example, the result of compressing scripts on my site:

• JS: compressed in gzip 26 698 B, compressed without gzip 95 796 B, was 120 147 B
• CSS: compressed in gzip 46,049 B, compressed without gzip 160,001 B, it was 281,870 B

It turns out that the traffic saving is 329,270 B. But the main gain for download speed is that now not 14 files are loaded, but only 2 (and this is much faster, since the browser does not waste time requesting). Moreover, this is done only once, and not dynamically by the server itself (especially since not all servers support such compression configuration to save processor resources).
')
In the end, it turns out:

<link rel="stylesheet" type="text/css" href="min/styles_1349888114.cssgz" /> <script src="min/all_1349888114.jsgz" /></script> 

The instructions are surprisingly simple:

1. Download the compress.php script
2. Download cssmin.php , jsmin.php scripts
3. Upload these 3 scripts to the root of your site *
4. Create a file compress_timestamp.php in the root of the site and set permissions on it so that the compress.php script can overwrite this file *
5. Create an empty min folder in the root of your site
6. In your index.php, include the following code in your header:
   

    <?php require_once('compress_timestamp.php'); // timestamp   ,   .  $compress_stamp=unix_timestamp if (stripos($_SERVER['HTTP_ACCEPT_ENCODING'],'GZIP')!==false) $gz='gz'; else $gz=null; echo '<script src="min/js_schedule_'.$compress_stamp.'.js'.$gz.'" />',PHP_EOL; echo '<link rel="stylesheet" type="text/css" href="min/css_schedule_'.$compress_stamp.'.css'.$gz.'" />',PHP_EOL; ?> 

   
   
7. Edit the compress.php file, and list your scripts and styles in the appropriate place:
   

    <?php file_compress('css_schedule.css',array('./CSS/menu.css', './CSS/ThreeColumnFixed.css', './CSS/sprite.css', './CSS/iCal.css')); file_compress('js_schedule.js',array('./js/all1.js', './js/jquery.js', './js/love_habrahabr.js', './love_4pda.js')); ?> 

   
   It is for these magical functions (packaged into one file and compressing it) that we started everything. The necessary files will be created in the MIN folder in the GZipped and normal version. If the browser is old, the usual JS and CSS formats will be displayed, if the new one is JSGZ and CSSGZ.
   
8. Remotely run the script compress.php and everything will happen automatically
9. Download site to check

* for simplicity, we save all files to the root of the site, but it is better not to do this for security reasons

Now your site loads faster, your JS and CSS code is harder to decipher for fans to break something.

Every time you change the scripts on the site, you need to run compress.php before loading the site, everything else happens automatically.

Do not forget that the links to the pictures in your CSS styles should now be called taking into account that the CSS is in the MIN folder.

---

If you want to further speed up the site, there is a simple solution. Set the headers of static files so that browsers caches them for a long time. This can be done by putting the .htaccess file in the site root:

 ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType audio/mp3 "access 1 year" ExpiresByType audio/wav "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES CACHING ## 

Afterword: The article is aimed at beginners, since the pros are already doing all this with the help of (with difficult settings for beginners) cumbersome platforms. I do not urge to use exactly compress.php, but with its help you can be convinced of the need to combine and compress JS scripts and CSS styles.

Source code.google
By Arn Burkhoff