Programación web, Drupal, Wordpress y ¡Mucho más!

Aprende a programar y diseñar una página web gracias a los trucos y tutoriales que ofrecemos en nuestro sitio.

viernes, 5 de octubre de 2012

Compresión GZip en htaccess


La compresión por Gzip, se realiza con el fin de minimizar el tamaño de nuestros archivos y obtener una mayor respuesta de carga de nuestro servidor. Es decir si tenemos nuestro index.php o html con un tamaño de 35KB podemos reducirlo a 7KB mediante la técnica de compresión por GZip, pero no solo se comprime el index, sino que también comprime todos los archivos que nosotros le indiquemos, realmente es una técnica muy recomendada para toda página web.


¿Como se realiza la compresión GZip?

Es muy sencillo y muy breve, son 3 archivos los que tenemos que crear, por una parte el .htaccess y por otra un archivo al que llamaremos php.ini y otro contentHeader.php

  • .htaccess:

Debemos añadir al final del archivo lo siguiente:

AddType x-mapp-php5 .php .shtml .html .htm .js .txt .css .woff
AddHandler x-mapp-php5 .php .shtml .html .htm .js .txt .css .woff

  • contentHeader.php:

Debemos añadir al final del archivo lo siguiente:


$pathinfo = pathinfo($_SERVER["PHP_SELF"]);
$extension = $pathinfo["extension"];
if($extension == "css")
{header("Content-type: text/css");}
if($extension == "js")
{header("Content-type: text/javascript");}
if($extension == "woff")
{header("Content-type: font/woff");}
$ruta_absoluta = getcwd();

  • php.ini:

Debemos crear un archivo llamado php.ini y añadir lo siguiente:


zlib.output_compression = On
zlib.output_compression_level = 9
allow_url_fopen = On
auto_prepend_file = /homepages/0/xxxxxxxxxxx/htdocs/nombredecarpetaquequeramos/contentHeader.php


(Nota: auto_prepend_file: Añadir el directorio del servidor de donde hemos guardado nuestro archivo contentHeader.php, cada hosting tiene directorios diferentes)

Último paso

Bien una vez tenemos los tres archivos, subimos el contentHeader por FTP al directorio que hemos hablado anteriormente, el .htaccess lo subimos a nuestro directorio raíz y el php.ini lo tenemos subir a todas aquellas carpetas que contengan archivos .JS, .CSS y .WOFF.

Con esto os funcionará y obtendréis un resultado muy notable.

16 comentarios:

  1. Hola, gracias por compartir. Tengo un problema, sigo todos los pasos de tu tutorial y cuando cargo mi página web se queda en blanco, no carga. Esto me pasa en el primer punto, al añadir las líneas de codigo en el htacces.
    Te agradecería si me pudieses hechar una mano.

    ResponderEliminar
  2. Hola Angel, no hay de que, es normal que no se te vea si no has realizado todos los pasos. necesitas tambien poner el archivo php.ini en todas y cada una de las carpetas que contiene tu sitio web. Una vez tengas todos los pasos te funcionará.

    ResponderEliminar
  3. Si quieres te puedo mandar por correo los archivos.

    ResponderEliminar
  4. Hola. Muy bueno el post. Una pregunta, servirá para un sitio hecho por completo en html? No PHP? Hace un tiempo intento aplicar compresion pero no lo logro. Me podrías mandar los archivos asi hago pruebas? Muchas gracias. Muy buena la página. Saludos.

    ResponderEliminar
  5. También serviría. No tiene porque ser un site php para poder comprimirlo. Solo tendrás un archivo php para compilación.

    También te digo una cosa...un sitio web en html yo no soy partidario de comprimir...ya que el html es un proceso de carga muy rápido, mayor que el php...y dudo de que los resultados sean muy difirentes a los que obtienes actualmente sin comprimir.

    Si quieres dime tu correo y me pongo en contacto para poder ayudarte a ello.

    ResponderEliminar
  6. Muchas gracias por tu respuesta. Te dejo mi mail: elaris2002@hotmail.com
    He hecho muchisimas pruebas y no logro activar la compresion. Comprendo lo del HTML. Sigo intentando a ver si logro activar la compresion para js y css. Gracias por ayudar!!!

    ResponderEliminar
  7. Muy bien, te preparo una prueba de como sería y te lo mando.

    ResponderEliminar
  8. Quiero agradecerte publicamente por aquí, para que los visitantes sepan que sos una persona con muy buena predisposicion para ayudar a los demás. Alberto me ha contactado para intentar ayudarme a solucionar mi problema con gzip. En fin, es excelente tu sitio y la info. Seguí así! Saludos desde Argentina.

    ResponderEliminar
  9. Muchas gracias Ariel, muy amable. Un saludo

    ResponderEliminar
  10. Hola Alberto Perez, no será suficiente con este código en el .htaccess ?


    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html

    ResponderEliminar
  11. Hola Elvis no he probado como tu dices, existen varias maneras de habilitar gzip. La mas común es por servidor directamente.

    Un saludo

    ResponderEliminar
  12. hola, mi sitio es en html pero queria comprimir los css y js, con gzip mi pregunta es: el archivo contentHeader.php va en raiz o va en la carpeta donde están los css y js???

    ResponderEliminar
  13. Hola Felipe, el archivo contentHeader lo tienes que poner en cada carpeta y subcarpetas que contengan archivos css y js. En el caso de que tuvieras archivos js o css en el raíz ponlo también ahí. Un saludo.

    ResponderEliminar
  14. Gracias por la respuesta, la entiendo.
    Pero al agregar ese código al final del htaccess, me salia un error 500 interno del servidor.

    ResponderEliminar
  15. Hola Alberto me enviaría los archivos por correo? Ya he intentado todo y no puedo comprimir mi sitio HTML. gracias.

    ResponderEliminar
  16. Hola Ismael, si dame un día o dos y te lo preparo que me has pillado en unas fechas de mucho trabajo.

    Un saludo.

    ResponderEliminar