A medida que aumentan las visitas a nuestro sitio web también aumenta la transferencia consumida. Si queremos evitar que el aumento sea desproporcionado, haciendo que nuestro hosting se quede pequeño, lo podemos evitar comprimiendo los ficheros html, css y js que enviamos al usuario desde el servidor, reduciendo el tamaño en un 60% y también el uso del procesador (el coste de compresión consume menos CPU que el tener una conexión abierta más tiempo para transmitir los ficheros). Si quieres puedes comprobar como quedaría tu web comprimida en esta página: port80.

Para hacerlo existen varias maneras, aquí explicaremos dos métodos parecidos mediante el uso del .htaccess y un pequeño fichero en php. Los dos versiones son:

Aviso! Si usas wordpress y ya tienes habilitada la opción de compresión, desactivala (Opciones ->Lectura) ya que con el método que usa wordpress no comprime los css ni los js.

Versión 1 (aportación de knoopx)

Si nuestro apache lleva tiene el mod_deflate:
Paso 1.-Añadimos esta línea al final del fichero .htaccess


# Activa la compresion en el servidor
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

Versión 2

Paso 1.-Añadimos estas tres lineas al final del fichero .htaccess


# Activa la compresion en el servidor
php_flag zlib.output_compression On
# Indica el nivel de compresion de 1 a 9 (de menor a mayor compresion)
php_value zlib.output_compression_level 5
# Indica sobre que extensiones se aplica la compresion
AddHandler application/x-httpd-php .css .js

Paso 2.-Con el codigo anterior ya debería bastar, pero veremos que las páginas webs no se visualizarán correctamente en Firefox, pero si en el Internet Explorer. Esto es debido a que hemos machacado las cabeceras de los ficheros .css y .js y los envia con una cabcera html (“Content-type: text/html”). Para evitar esto deberemos incluir una linea más en el fichero .htaccess y subir un archivo nuevo al servidor:

Paso 2.1.-Crearemos el fichero contentHeader.php que dejaremos en nuestro servidor con el siguiente código:

<?php
$pathinfo = pathinfo($_SERVER['PHP_SELF']);
$extension = $pathinfo['extension'];
if($extension == "css"){
header("Content-type: text/css");}
if($extension == "js"){
header("Content-type: text/javascript");}
?>

Paso 2.2.-Añadimos la siguiente linea en el fichero .htaccess justo después de las anteriores:

# Si es un hosting compartido la "ruta_abosluta" seria por ejemplo /usr/home/de-mas.net/web/contentHeader.php
php_value auto_prepend_file /ruta_absoluta/contentHeader.php

Nota: Si no sabes tu ruta absoluta, no funcionará la página. Una forma de averiguarlo sería mediante un fichero php que te devuelva este valor:


<?php
$ruta_absoluta = getcwd();
echo $ruta_absoluta;
?>

Con estos dos últimos pasos lo que hacemos es formatear las cabeceras de los ficheros .css y .js para que Firefox las pueda interpretar correctamente.
Si queremos saber si nuestra web esta comprimida y ver los tiempos de carga, puedes descargarte el plugin Firebug para Firefox.

Los resultados se pueden apreciar con el siguiente ejemplo donde una web pasa de 28 KB a 8.5 KB, reduciendo el tamaño en un 70% y el tiempo de carga en un 33% (de 1282ms a 859ms).

sin compresion http
compresion http

Podemos comprobar con el plugin Firebug si la compresión se ha llevado mediante este tag de la cabecera HTPP

cabecera http

Ejemplo

En este gráfico podemos ver la diferencia entre aplicar o no la compresión. Los dos meses tuvieron un número similar de visitas (Noviembre tuvo unas 10.000 más) en cambio la transferencia entre uno y otro fueron de 32Gb para Octubre y 20Gb para Noviembre, ahorrando un 33% de ancho de banda al haber aplicado la compresión.

Transferencia
  1. Pingback: www.webeame.net
  2. Hola Eduard

    Muy buena tu ayuda.
    La forma correcta de acceder al nombre del archivo es $_SERVER[‘PHP_SELF’] en lugar de $PHP_SELF, ya que esta ultima solo esta disponible con register_globals activado, que ya viene OFF por default en PHP 5 y sera eliminada del todo en PHP 6.

    Gracias!
    Saludos

  3. Hola Knoopx!

    Primero de todo, gracias por el enlace que es bastante interesante.

    En cuanto a que es más sencilla…solo hay que ver lo largo que es el documento que me pasas 😛

    En cuanto a velocidad, si que es más rápida, pero estas trabajando con la configuración del Apache, algo que no está en la mano de la mayoría de los hostings (en concreto los compartidos que son los que usa la mayoría), con lo cual no todo el mundo puede usar el mod_deflate para usar su compresión, es por eso que publiqué este documento sobre como hacerlo mediante el htaccess.

    En cuanto a flexibilidad (corrigeme si me equivoco) mediante el mod_deflate debes de indicar tu mismo que browsers no soportan que le envies los ficheros comprimidos (BrowserMatch ^Mozilla/4 gzip-only-text/html), mientras que con el método del htaccess es el navegador el que indica si soporta los ficheros comprimidos o no y el servidor sólo los ha de servir, no?

    Gracias por tus comentarios, un saludo!

  4. fermuned, el documento que te he pasado es largo porque es el manual completo de mod_deflate. Tú método usa PHP para comprimir la salida mientras que el que te he pasado usa mod_deflate, un módulo de Apache2 pensado para eso.

    En ambos casos puedes editar el httpd.conf o simplemente crear un .htaccess siempre y cuando este seteado el parámetro “AllowOverride All”.

    Mediante mod_deflate es tan sencillo como añadir la linia “AddOutputFilterByType DEFLATE text/html text/plain text/xml” en un .htaccess y automáticamente todos tus html son comprimidos en runtime.

    Cuando hablo de flexibilidad me refiero a que tu método comprime siempre la salida incluso cuando el browser del usuario no soporte compresión y es aquí donde entran en juego las reglas BrowserMatch del mod_deflate.

    Además de la compresión de la salida hay varios métodos más para optimizar la velocidad de carga de un sitio. Te recomiendo que le eches un ojo a http://developer.yahoo.com/performance/index.html#rules donde encontrarás otras directivas para añadir al .htaccess y a la extensión de firebug http://developer.yahoo.com/yslow/

    Un saludo!

  5. Gracias Knoopx por las molestias y toda la información que me has pasado!

    A ver si saco tiempo este fin de semana para poder probar este método y te cuento como ha ido.

    La web de las “reglas para aumentar el rendimiento de los sitios webs” esta muy bien (casualida que ayer topé con él) pero le falta que traten algo sobre cachear PHP, que es algo en lo que también estoy interesado conseguir más información…a ver que encuentro.

    Un saludo y gracias de nuevo!

  6. Knoopx, acabo de probarlo y funciona perfectamente. Voy a mirar de ponerlo en el documento para la gente que tenga el Apache con el mod_deflate puedan hacerlo más facilmente.

    Muchas gracias!

  7. Cuando pongo php_value auto_prepend_file /ruta_absoluta/contentHeader.php
    me sale un erro 500 en la pagina por favor alguien me puede decir que estoy haciendo mal ?

    Gracias de antemano.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>