Sie sind auf Seite 1von 6

Servicios de Innovacin para Empresas S.A. de C.V.

SIE-Group

APACHE CONFIGURACION AVANZADA -- SERVIR CONTENIDO


COMPRIMIDO APACHE+PHP+DEFLATE+GZIP.
INTRODUCCION.

Cuando realizamos un sitio web y lo tenemos funcionando al 100% por lo general nuestro sitio llega a
pesar mas de 1, 2, 3 o hasta 10Kb, esto resulta muy costoso ($$$) cuando tenemos un servidor dedicado,
ya que tenemos una cuota limite de consumo del ancho de banda y nuestro proveedor nos cobrara una
cuota por cada Kb consumo extra, por lo cual es el momento en que debemos empezar a pensar en
economizar cdigo, disminuir tamao del sitio y a su vez agilizar el despliegue del sitio, he aqu donde
tocamos el tema de Servir Contenido Comprimido.

La estrategia solo es valida para Servidores Dedicados o un Servidor Casero, ya que tocaremos la
configuracin del apache y del php. Sobre mod_rewrite pues ya saber que pueden definirla desde su
.htacces.

CONSEJOS.

Si usan un servidor dedicado o servidor casero no les recomendamos poner configuraciones en el


.htacces, ya que es mas rpida la digestin y procesamiento de las reglas mod_rewrite desde el
<VirtualHost> (donde declaramos nuestro dominio en httpd.conf).

Antes de seguir con el manual es bueno primero vean cuanto pesa su web? y que rpido con que se
despliega?, as cuando implementen esto vean los resultados. Les dejo una implementacin para verificar
el renderizado del sitio y tiempo:

<?php
# funcion para verificar el tiempo de carga
function tiempodecarga()
{
$tm= explode( " ", microtime() );
return ($tm[1]+$tm[0]);
}

$render= tiempodecarga(); # tiempo actual


echo '<html>
<head>
</head>

<body>';

$render= tiempodecarga()-$render;
$d= 212;
echo 'Tiempo de Carga: '. number_format($render,2). ' |

www.sie-group.net
Servicios de Innovacin para Empresas S.A. de C.V. SIE-Group

Peso Web: ';


echo number_format( (ob_get_length()+$d)/1024, 2);
echo ' kb';
unset($render);

echo '</body>
</html>';
?>

En misitio.com tenamos los siguientes tiempos....

Antes de la implementacin...
Tiempo de Carga: 1.50 | Peso Web: 14.43 kb

Despus de la implementacin...
Tiempo de Carga: 1.04 | Peso Web: 0.23 kb

CONFIGURANDO PHP.

Solamente editamos el php.ini para habilitar la compresin usando zlib. Les mencionare solamente las
lineas como deben estar, as que, si ustedes las ven comentadas, entonces descomentarlas...

shell# catwc /etc/php.ini |grep zlib


zlib.output_compression = On
zlib.output_handler =

CONFIGURANDO APACHE.

Es importante mencionar que en Apache versiones mayor o igual a 2.0 se utiliza mod_deflate y en
versiones menores a 2.0 se usa mod_gzip. En este caso utilizaremos la versin reciente sobre mod_deflate.

Primero dentro de nuestro <VirtualHost> debemos activar la encodeo con gzip y declarar los tipos de
formatos[. OJO: ponemos todo en el <VirtualHost> porque solo me interesa para mi espacio, el de mis
clientes pues ya debern pedirlo o simplemente debe dar mas $$ (gajes de Hosting Bsico y otros
niveles).

El VirtualHost
shell# cat /etc/httpd/conf/httpd.conf

<VirtualHost misitio.net:80>
ServerAdmin contacto@sie-group.net
DocumentRoot /home/misitio/public_html
ServerName misitio.net
ServerAlias www.misitio.net
ErrorLog logs/misitio-net-error_log
CustomLog logs/misitio-net-access_log common
<Directory "/home/misitio/public_html">
Options +FollowSymLinks
Order allow,deny
Allow from all
AllowOverride All

www.sie-group.net
Servicios de Innovacin para Empresas S.A. de C.V. SIE-Group

RewriteEngine on
AddEncoding x-gzip .jgz .cgz .gz
AddType text/css .css
AddType text/css .cgz
AddType application/x-javascript .js
AddType application/x-javascript .jgz
#................
#................ MIS REGLAS RewriteRule ....
#................
</VirtualHost>

Ahora explicamos las lineas:

# estas son MIME types


#

# indicamos que toda extensin .css debe tratarse como contenido tipo text/css.
AddType text/css .css

# indicamos que toda extensin .cgz debe tratarse como contenido tipo text/css,
# ya que es CSS Comprimido.
AddType text/css .cgz

# indicamos que toda extensin .js debe tratarse como contenido tipo application/x-javascript
AddType application/x-javascript .js

# indicamos que toda extensin .jgz debe tratarse como contenido tipo application/x-javascript, ya que
# son script JS comprimidos
AddType application/x-javascript .jgz

El Encodeado de los tipos:


# aqui indicamos que vamos a encodear con el compresor GZIP los tipos: .gz, .cgz y .jsz
AddEncoding x-gzip .jgz .cgz .gz

IMPORTANTE: si no tenemos estas lineas, lo que suceder es que al subir nuestros CSS o JS compreso en
GZIP estos no se interpretaran, sino que sern tomados como archivos compresos e interpretados con el
MIME Type de applicacion/x-gzip y esto causara que no tengamos los STYLES puestos y el SCRIPT JS no
existir.

Ahora debemos habilitar mod_deflate.

shell# cat /etc/httpd/conf/httpd.conf |grep deflate

LoadModule deflate_module modules/mod_deflate.so

Y la configuracin... en neustor caso todo lo tengo en el directorio /etc/httpd/conf.d/

shell# cat /etc/httpd/conf.d/deflate.conf

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

www.sie-group.net
Servicios de Innovacin para Empresas S.A. de C.V. SIE-Group

CREACION DE COMPRIMIDOS.

Ya que tenemos todo configurado, ahora falta comprimir los estilos CSS y script JS.

# comprimiendo CSSs
shell# cd /nuestro/proyecto/web/estilos
shell# ls -l
estilo.css

shell# gzip estilo.css


shell# ls -l
estilo.css.gz

# cambiando el nombre al comprimido


shell# mv estilo.css.gz estilo.cgz

# comprimiendo js
shell# cd /nuestro/proyecto/web/js/
shell# ls -l
script.js

shell# gzip script.js


shell# ls -l
script.js.gz

# re-nombrando
shell# mv script.js.gz script.jgz

La razn del porque cambiamos de css.gz a .cgz, es porque mas arriba en la configuracin del Apache
indicamos el MIME Type .cgz y .jgz.

ADAPTACION EN EL SITIO.

Ahora solo falta mandar llamar los comprimidos en el sitio, un ejemplo de antes y despus.

Antes.........
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
</body>
</html>

Despus.....
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilo.cgz">
<script type="text/javascript" src="js/script.jgz"></script>
</head>

<body>

www.sie-group.net
Servicios de Innovacin para Empresas S.A. de C.V. SIE-Group

</body>
</html>

OFUSCACION EN PHP.

Ahora debemos hacer la ofuscacin, y esto debe ser directamente en PHP, y veras como mgicamente su
sitio pasa de pesar muchsimo, a simples Kilobytes.

Les dejamos la idea bsica sobre como se hara, ustedes ya en sus codes lo arman al gusto, pero deben
seguir el siguiente lineamiento.

<?php
ob_start( 'comprimir_web' );
# funcion para comprimir pagina web
function comprimir_web($buffer)
{
$busca = array('/\>[^\S ]+/s','/[^\S ]+\</s','/(\s)+/s');
$reemplaza = array('>','<','\\1');
return preg_replace($busca, $reemplaza, $buffer);
}

echo '<html>
<head>
<title></title>
</head>

<body></body>
</html>';

ob_end_flush(); # fin objeto


?>

URL Amigables.

El uso de URL Amigables como muchos sabrn sirven para evitar acceder a las noticias de la forma comn
que es http://sitios.com/?id_noticia=12 y hacerlo mas amigable y legible, que seria:
http://misitios.com/noticias/10-tituto_de_la_noticia.html.

El punto de mencionar las URLS Amigables es porque posiblemente muchos dirn no quiero usar la
extensin CGZ o JGZ, y desean seguir usando CSS y JS. Pues si se puede, para ello hacemos uso de las
mod_rewrite en Apache, la cual deben saber como activarlas (sino, entonces a Googlear).

Para seguir usando la "nomenclatura" estilo.css o script.js, pero que este llame al comprimido GZ, usamos
Reglas que deben ser establecidas mas o menos as, cabe mencionar que para cada caso es distinto,
dependiendo como tienen organizado el cdigo y el sitio.

Donde tengo mis JGZ y CGZ ??


# aqui tengo mis CGZ
shell# ls -l /home/user/public_html/templates/css/

www.sie-group.net
Servicios de Innovacin para Empresas S.A. de C.V. SIE-Group

# aqui tengo mis JGZ


shell# ls -l /home/user/public_html/templates/js/

Editamos el <VirtualHost> (de preferencia...) o bien el .htacces. Y dejamos:

shell# cat /etc/httpd/conf/httpd.conf

........
RewriteRule ^template/css/(.+)\.css$ template/css/$1.cgz
RewriteRule ^template/js/(.+)\.js$ template/js/$1.jgz
........

Ahora podrn invocar las etiquetas:

<link rel="stylesheet" type="text/css" href="css/estilo.css">


<script type="text/javascript" src="js/script.js"></script>

Y mod_rewrite estara llamando los JGZ y CGZ que son los que en realidad existen en el sitio.

HERRAMIENTAS.

Les dejo las herramientas web para que puedan testear la configuraron en su sitio y verificar que este bien
implementado:

http://www.whatsmyip.org/http_compression/
http://www.gidnetwork.com/tools/gzip-test.php

AGRADECIMIENTOS.

Se agradece cualquier publicacin, colgada y re-distribucin del manual, ante todo se pide respetar los
datos originales del autor y se avise de cualquier modificacin para realizar las re-ediciones oficialmente.

Este Manual-Practico fue realizado el 11 de Agosto del 2011 por:

Autor: M.S.I Angel Cantu Jauregui.


Web: http://www.sie-group.net
Blog: http://lab.sie-group.net
Licencia: http://creativecommons.org/licenses/by-nc-sa/2.5/mx/

Para mayor informacin sobre nuestra empresa, integrantes, productos innovadores, servicios y entre otras
aportaciones de software, visitar nuestro sitio oficial http://www.sie-group.net/.
Somos una empresa seria y comprometida con sus clientes, con la finalidad de satisfacer sus necesidades
proponiendo soluciones inteligentes de alta calidad.

www.sie-group.net