4

Cómo hacer una compresión GZIP con htaccess

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (2 votos, promedio: 3,00 de 5)
Loading ... Loading ...

La compresión Gzip es una practica muy habitual en los webmaster que desean mejorar el performance de su sitio, con ello podemos minimizar el tamaño de algunos archivos y obtener una respuesta de carga mas rápida de nuestro servidor. Por ejemplo si tenemos nuestro index.html o php con un tamaño de 40KB podemos reducirlo a 8KB mediante la técnica de compresión por Gzip, pero espera, aún hay mas.. No solo podremos comprimir el index, sino que también podremos comprimir archivos como .css .js y todos aquellos archivos que nosotros le indiquemos, realmente es una técnica muy recomendada para toda página web.

Cómo hacer una compresión Gzip?

Muy sencillo, solo debemos crear y trabajar sobre 3 archivos: .htaccess (Quizás ya lo tengamos creado, de lo contrario deberás hacerlo) php.ini y contentHeader.php. Empecemos:

  • Crear o editar el .htaccess

Aquí tenemos que añadir al final del archivo lo siguiente:

1
2
AddType x-mapp-php5 .php .shtml .html .htm .js .txt .css .woff .ttf
AddHandler x-mapp-php5 .php .shtml .html .htm .js .txt .css .woff .ttf
  • Crear contentHeader.php

En este archivo añadiremos lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$pathinfo = pathinfo($_SERVER['PHP_SELF']);
$extension = $pathinfo['extension'];
if($extension == "css")
{
header("Content-type: text/css");
header("Cache-Control: max-age=604800, public");
header("Last-modified: 2013-08-24 17:10");
}
if($extension == "js")
{
header("Content-type: text/javascript");
header("Cache-Control: max-age=604800, public");
header("Last-modified: 2013-08-24 17:10");
}
if($extension == "woff")
{
header("Content-type:  font/woff");
header("Cache-Control: max-age=604800, public");
header("Last-modified: 2013-08-24 17:10");
}
if($extension == "ttf")
{
header("Content-type:  application/octet-stream");
header("Cache-Control: max-age=604800, public");
header("Last-modified: 2013-08-24 17:10");
}
$ruta_absoluta = getcwd();

Nota1: Recuerda abrir con “<?php” y cerrar con “?>

Nota2: Estos 2 archivos (.htaccess y contentHeader.php) irán en la raíz del dominio. En contentHeader.php debemos incluir las extensiones a comprimir, en este caso, estaremos comprimiendo: .CSS, .JS, .WOFF, .TTF.

  • Crear php.ini

Y finalmente debemos crear un archivo llamado php.ini al cual añadiremos lo siguiente:

1
2
3
4
zlib.output_compression = On
zlib.output_compression_level = 9
allow_url_fopen = On
auto_prepend_file = /homepages/0/xxxxxxx/htdocs/nombredelacarpetaquequeramos/contentHeader.php

Nota: En la linea 4 “auto_prepend_file“, debemos añadir el directorio del servidor donde hemos guardado nuestro archivo contentHeader.php, cada hosting tiene directorios diferentes.. Si no sabes cómo conseguir esta ruta, lo típico es:
Entrar a tu Panel de Control » Ir al dominio donde quieres comprimir » Ver su información. Mira cual es la ruta de tu directorio raíz

Si tu blog está en una carpeta dentro de otra, la ruta sería algo así:

/homepages/0/xxxxxxx/htdocs/nombredelacarpetaquequeramos/blog/contentHeader.php
  • Último paso

Finalmente, con nuestros 3 archivos creados y editados, debemos hacer LO MAS IMPORTANTE, tenemos que subir el archivo php.ini a todas aquellas carpetas que contengan archivos con extensiones del tipo: .CSS, .JS, .WOFF, .TTF.

Si lo has hecho correctamente, ahora tu sitio completo podría dejar de pesar 1.5MB para pesar 1.0MB, siempre dependerá del tamaño y la cantidad de tus archivos comprimidos.

Quieres saber si lo has hecho bien?

Primero: Te recomiendo ANTES de aplicar esta técnica hacer un análisis por ejemplo en: http://tools.pingdom.com/fpt/
Tomar nota del peso total de tu sitio y hacer OTRO análisis al terminarlo.. De este modo no solo vemos el peso “ahorrado”, sino también la mejora en cuanto a velocidad de carga!!!

Segundo: Visitar algún “verificador” Online como pueden ser; www.whatsmyip.orgwww.gidnetwork.com

cómo hacer una compresión GZIP

No dejes de suscribirte al blog y/o mirar las tantas y variadas técnicas para pulir el rendimiento de nuestro sitio!!
Después de todo el #SEO y #Performance van de la mano  ;)

Comparte!

LuisLY

Soy Luis LY, la mayor parte de mi tiempo lo invierto aprendiendo y compartiendo sobre Diseño Web, Marketing y SEO.

4 Comments

  1. Hola Luis,
    muchas gracias por tu tutorial, he dado muchas vueltas hasta encontrar el tuyo, he podido comprimir la web de ejemplo que estoy haciendo con Adobe Muse, pero me sale una ventana en el navegador al cargar la web, la cual funciona bien, con el siguiente texto:
    musejsassert error calling selector function: referenceerror: webpro is not defined

    He podido ver en otros foros que existe un archivo llamado webpro.js que tiene que estar en la carpeta scripts/ Lo he comprobado y el archivo se encuentra alojado en el hosting.
    Se te ocurre que puede fallar?

    Un saludo, felices fiestas y gracias por todo.

    Luis Miguel.

    • Hola Luis Miguel,
      La verdad es que me pillas fuera de lugar, no tengo experiencia ahí pero desde luego alguna solución habrá.
      Si están comprimiendo todos los .js y .css (o al menos has dado esa orden en el .htaccess) entonces el archivo php.ini debe estar en todas las carpetas que incluyan js y css.
      1.- Una solución “rápida” para no tener que crear este archivo en todas las carpetas internas es aplicar cambios recursivamente a dicho archivo! De ese modo con un único php.ini en la raíz es suficiente.
      2.- Si está dando problemas un sector en particular. Te recomiendo que apliques estos cambios unicamente en la carpeta necesaria, es decir, para un caso en wordpress: en lugar de modificar el .htaccess de la raíz, crear un nuevo htaccess en “content” (la carpeta de la plantilla) y comprimir a partir de ahí..

  2. Hola Luisly, he seguido tus pasos y he podido comprimir mi web al 67%, pero quisiera saber si es posible comprimirla aun más, se puede llegar a comprimir al 100% un saludo y gracias por tus consejos…

    • Hola Jose,
      Eso depende, que has comprimido? un 67% está muy bien, de todos modos recuerda que hablamos de porcentajes! En estos casos es casi mejor hablar de kb, y mirar si merece la pena, porque por 0.50kb más de compresión ya te digo yo que no lo merece.

Deja un comentario