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.org o www.gidnetwork.com
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 