TIP: Compresión HTTP del código html, js y css

Si bien el ancho de banda ha aumentado por lo que el tiempo de espera de carga de un sitio Web ya no es tan relevante, si lo puede ser para nuestro pequeño hosting, sobre todo cuando el contenido aumenta y las visitas también, además reduce 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). Puedes ver en port80 como quedaria tu sitio reducido.
Para hacerlo existen varias maneras y la mejor que he encontrado (más rápida y fácil) es mediante el uso del .htaccess y un pequeño fichero en php. Los pasos 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.

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

CODE:

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

Paso 2.-Con el código 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:

CODE:

  1. $pathinfo = pathinfo($PHP_SELF);
  2. $extension = $pathinfo[‘extension’];
  3. if($extension == “css”){
  4. header(“Content-type: text/css”);}
  5. if($extension == “js”){
  6. header(“Content-type: text/javascript”);}
  7. ?>

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

CODE:

  1. # Si es un hosting compartido la “ruta_abosluta” seria por ejemplo /usr/home/de-mas.net/web/contentHeader.php
  2. 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:

CODE:

  1. $ruta_absoluta = getcwd();
  2. echo $ruta_absoluta;
  3. ?>

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.

Saludos :D

1 comment on “TIP: Compresión HTTP del código html, js y cssAdd yours →

  1. Jajaj miren el linuxista como amo, jajjaja por aki pasando a dejarte mis mas cordiales aludos ami contra cara del sistema operativo, alguien k tal vez preferiria matarce antes de usar WV
    jaja
    Saludos

Leave a Reply

Your email address will not be published. Required fields are marked *