Topics

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 change/add these values on your php.ini

zlib.output_compression = On
zlib.output_compression_level = 9

you can check the size difference online through http://www.gidnetwork.com/tools/gzip-test.php
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 using 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 comments 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 include


function JS_check(){

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

foreach($jsfiles as $js){

clearstatcache();

#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 = new 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); #inserting 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);#new 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|pre).*>[^<]+</(?:code|pre)>)!',$html,$pre);#exclude pre or code tags

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

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

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

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

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

if(!empty($pre[0]))

foreach($pre[0] as $tag)

$html = preg_replace('!#pre#!', $tag, $html,1);#putting 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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close