Manually Compress Javascript dan CSS with PHP GZip

Posted in: Programming @en,Website & Blog |

This post is also available in: Indonesian

compress web

This post is also available in: Indonesian

When web page is being rendered, the first time being loaded is the HTML file, then the styles (CSS) and the last is the scripts (Javascript/JS) – the best practice, CSS files in the header while the JS files in the footer. If the page is an interactive page where the HTML files, CSS, and JS are getting larger in size, then a page will be loaded longer than those with small size. Therefore, the compression of static content such as plain-text (like HTML, CSS, JS) will be needed.

Compression intended to reduce web page loading time. The best compression that is used by the server side is GZIP, Deflate (Apache module, mod_gzip and mod_deflate). However, sometimes these module are not enabled on some hosting – as I experienced this, had several times told Capoeng hosting , but no response: sigh: – To test whether a page/file is compressed, we can use online GZIPTest such as  GIDZipTest,or manually see through YSlow or Firebug (see the Header Info, Content-encoding part).

Bunch of times had tried many configuration in .htaccess to compress using GZip in my web taken from many forums and webs, but with no luck. Seems like apache GZip compression (mod_gzip) is not enabled in the apache server on my shared hosting. Tried however, ended with failure. Content-encoding from plain-text files is not suppose as I wanted to be, whether it is “gzip” or “deflate”

But finally, i found the way when accidentally see header info from files in WordPress’ Admin via YSlow and I used this trick. Some failed configuration I tried (even from the simplest ones), eg:

SetOutputFilter DEFLATE

or

AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript

or

mod_gzip_on       Yes
mod_gzip_dechunk  Yes
mod_gzip_item_include file      \.(html?|txt|css|js|php|pl|jpg|png|gif)$
mod_gzip_item_include handler   ^cgi-script$
mod_gzip_item_include mime      ^text/.*
mod_gzip_item_include mime      ^application/x-javascript.*
mod_gzip_item_exclude mime      ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

or

php_value output_handler ob_gzhandler
php_flag zlib.output_compression On
php_value zlib.output_compression_level 6

or like here

GZip files with .htaccess and PHP @ lateralcode.com

How To Optimize Your Site With GZIP Compression

Finally to enable compression I use deflate/gzip through PHP file (GZip.php) to set the header info instead of being set by the apache. Drawback from this method is time-consuming, because files must be redirected and compressed on-the-fly.

in .htaccess file add following

RewriteEngine on
RewriteRule ^(.*\.(js|css))$ /gzip.php?file=$1

then create file gzip.php

<?php
/*if(isset($_SERVER['HTTP_ACCEPT_ENCODING']) && substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
ob_start('ob_gzhandler');
else
ob_start();
*/

function get_file($path) {
 if ( function_exists('realpath') )
 $path = realpath($path);

 if ( ! $path || ! @is_file($path) )
 return '';

 return @file_get_contents($path);
}

$compress = true; //( isset($_GET['c']) && $_GET['c'] );
$force_gzip = false; //( $compress && 'gzip' == $_GET['c'] );

$out = '';
$out .= get_file($_GET['file']) . "\n";

if ( $compress && ! ini_get('zlib.output_compression') && 'ob_gzhandler' != ini_get('output_handler') ) {
 $fileName = $_GET['file'];
 $ext = strtolower(substr($fileName, strrpos($fileName, '.') + 1));

 if ($ext=='css')
 header('Content-type: text/css');
 else if ($ext=='js')
 header('Content-type: application/x-javascript');

 header('Vary: Accept-Encoding'); // Handle proxies
 if ( false !== strpos( strtolower($_SERVER['HTTP_ACCEPT_ENCODING']), 'deflate') && function_exists('gzdeflate') && ! $force_gzip ) {
 header('Content-Encoding: deflate');
 $out = gzdeflate( $out, 3 );
 } elseif ( false !== strpos( strtolower($_SERVER['HTTP_ACCEPT_ENCODING']), 'gzip') && function_exists('gzencode') ) {
 header('Content-Encoding: gzip');
 $out = gzencode( $out, 3 );
 }
}

echo $out;
exit;

?>



Speak Up!

Leave your own comment

Notify me of follow-up comments via e-mail (or subscribe here).




 

Share

Subscribe Feed

Email

Facebook

Twitter

Delicious

Digg

StumbleUpon

Google Buzz

Deviantart