Compress your HTML, CSS and Javascript using simple PHP Code

Although Compression is a very important method of making your pages lighter and easier for users to download, it’s definitely going to cost you more CPU and on high load servers it’s not recommended unless you already know how to cache your HTML pages.

GZIP compression
This is highly recommended as it doesn’t need any code and generates Gzipped HTML which almost all today browsers can understand. You need to /add these values on your php.ini

zlib.output_compression = On
zlib.output_compression_level = 9

you can check the size difference online through
read more about Gzip

Javascript and CSS compression
I would firstly recommend taking a look on Dean Edwards ‘s Packer; a JavaScript compressor which could cut your scripts into half size, you might need to download the PHP class that we would be on the code to compress the JS scripts.

All .js and .css files should be in one folder “js” and all files should be writable by your server including the folder (chmod -R 777 js).
Now you’ll have 2 copies of every JS/CSS file one is readable which you can edit and the other is the compressed file that is included into your HTML using "<script type="text/javascript" language="javascript" src="/js/script.js"></script>" for JS or "<link href="/js/style.css" rel="stylesheet" type="text/css" media="screen" />" for CSS, let’s say our uncompressed files with all the and formating is having prefix “local_” before file name then we will always edit that one and dynamically generate the compressed scripts whenever it’s modified.
Here are the functions you need to

function JS_check(){

$jsfiles = array('script.js','style.css'); #add names of scripts you like to generate

foreach($jsfiles as $js){


#if the file doesn't exist or the time stamp time of both compressed and uncompressed files are not near

if(!file_exists($_SERVER['DOCUMENT_ROOT']."/js/{$js}") || ($diff = filemtime($_SERVER['DOCUMENT_ROOT']."/js/local_{$js}") - filemtime($_SERVER['DOCUMENT_ROOT']."/js/{$js}")) > 3){

if(strpos($js,'.css')===false){ #if a JS file

require_once($_SERVER['DOCUMENT_ROOT']."/include/class.JavaScriptPacker.php"); #include Packer class

$script = file_get_contents($_SERVER['DOCUMENT_ROOT']."/js/local_{$js}"); #getting JS file

$script = str_replace(';;;', '//',$script); #the ;;; comment feature in the packer beta
$packer =  JavaScriptPacker($script, 62, 1, 0); #using Dean Edwards 's Packer, check documentations on the class file for the best compression level

$packed = $packer->pack(); #JS code compressed

}else  #if CSS file

$packed = css_cmpress(file_get_contents($_SERVER['DOCUMENT_ROOT']."/js/local_{$js}"));

file_put_contents($_SERVER['DOCUMENT_ROOT']."/js/{$js}", $packed); # compressed code into files

touch($_SERVER['DOCUMENT_ROOT']."/js/local_{$js}"); #change the time stamp time for original scripts

#$GLOBALS['debuger'][] = "$js generated, diff was $diff"; #Global array to let you see results




function css_cmpress($css){

$css = preg_replace('!//[^\n\r]+!', '', $css);#comments

$css = preg_replace('/[\r\n\t\s]+/s', ' ', $css);# lines, multiple spaces/tabs/newlines

$css = preg_replace('#/\*.*?\*/#', '', $css);#comments

$css = preg_replace('/[\s]*([\{\},;:])[\s]*/', '\1', $css);#spaces before and after marks

$css = preg_replace('/^\s+/', '', $css);#spaces on the begining

return $css;


HTML compression
although this is not very important and the user might get diffrent results than what you expect but I tried to generate HTML without extra spaces, tabs ,newlines or comments that’s not for IE

function html_compress($html){

preg_match_all('!(<(?:code|).*>[^<]+</(?:code|)>)!',$html,$);# pre or code tags

$html = preg_replace('!<(?:code|pre).*>[^<]+</(?:code|pre)>!', '#pre#', $html);# all pre or code tags

$html = preg_replace('#<!--[^\[].+-->#', '', $html);# HTML comments

$html = preg_replace('/[\r\n\t]+/', ' ', $html);# new lines, spaces, tabs

$html = preg_replace('/>[\s]+</', '><', $html);# new lines, spaces, tabs

$html = preg_replace('/[\s]+/', ' ', $html);# new lines, spaces, tabs


foreach($pre[0] as $tag)

$html = preg_replace('!#pre#!', $tag, $html,1);# back pre|code tags

return $html;


The only point is that you could enjoy working using formated tags while giving the user exactly what he needs without any extras, remember that you will always have to save all page output into a single variable then echo it which is usually recommended on small pages while could cost you more memory on large pages.

Updated css function, multi-line /**/ comments are now removed

  • Great post dude .. worked

  • Pingback: Walid GadElKarim » Blog Archive » Dynamic Content Caching using Lighty + mod_magnet + lua()

  • any idea’s on how i can get my front portal page to load faster (graphics and animation from frontpage)

  • @Shawn
    there are a lot of ways to speed up static contents of your website, check your server’s configuration optimization tutorials for more info. Most common way is to put them on a separate server with a different sub domain like and use something like lighttpd to serve static contents.

  • Hi wkarim, and thanks for sharing these pieces of code. They are interesting.

    Though I wonder about your html_compress function. Is it necessary to use so much regex ? I have a function that does the nearly the same :

    function compress($string){
    $string = str_replace(“\n”, “”, $string);
    $string = str_replace(“\t”, “”, $string);
    $string = wordwrap($string, 990, “\n”);

    return $string;

    The thing that is cleary missing, is a way to preserve the code and pre tags. So my function is not complete, but yours seems overkill to me.

    There has to be a correct middle.

  • @louis
    Thanks for your comment.
    I think I need to simplify it a lil yes

  • georgi

    It’a a good idea to pack all files into one
    file for keeping HTTP Requests as low as possible
    (good if you have 5-6 js/css in your page)

  • multi-line HTML comments are not work

  • I think you’ll get a lot of Spaghetti code due to this optimization, although it looks very fine.
    I gonna try it on my test-base.
    Thank you!

  • Pingback: semi di marijuana()