Crear usuario · Acceder

Optimizar es un arte, Parte II: pre-Gzip estático, evitando compresión on-the-flight

Segunda parte de una serie de artículos divulgativos sobre una de mis aficiones de mi trabajo, optimizar la carga web.

Parte II: Gzip estático

El único problema que tiene la compresión con Gzip (explicado en la Parte I) es que sacrifica consumo de CPU a cambio de obtener archivos 4 o 9 veces mas pequeños. En mi opinion realmente ahorra CPU, sin embargo existe esa delgada linea de rendimiento.

La solución que he desarrollado soluciona por completo este problema.

Ventajas:

  1. Elimina la necesidad de comprimir Gzip on-the-flight (en cada petición). Solo se hará una sola vez, cuando se genere una caché del archivo.
  2. Ahorra de 4 a 9 veces espacio en disco, ya que reduce el tamaño de los archivos. Para una caché es magnifico, como explicaré en el ejemplo práctico.
  3. Permite activar el nivel más potente de compresión (9) sin ningún miedo a colapso, ahorrando un poco más de espacio en disco, CPU por transferir más rápido y tiempo de carga.
  4. Además conserva todas las ventajas del Gzip (explicadas extensamente en la Parte I)
En qué consiste:

Consiste en guardar una copia pre-comprimida del archivo a transferir. El concepto es sencillo, evita la necesidad de comprimirlo al vuelo (on-the-flight) cada vez que se pide ese archivo de texto plano como ocurriría con Gzip normal.

Esto alivia radicalmente el consumo de CPU conservando, incluso aumentando la ventaja de comprimir a más nivel.

Ejemplo práctico:

La herramienta más usada de Blogs Teoriza es el Caché Web. Para el que no lo conozca es una sencilla aplicación web que genera una copia en texto plano de una pagina web dada.

Ahora funciona con este nuevo método. Con ello doy un paso de gigante en cuanto a rendimiento, uno más ya que conseguí desarrollarlo sin uso de MySQL y con apenas 10 lineas para presentar cada caché. Sin embargo permanecia la poca ventaja del gasto de CPU al comprimir las paginas.

Ahora las comprime una sola vez, cuando genera cada caché. Sirviendolas sin apenas procesar. Ligerísimo.

Antes aseguraba que aguantaba cualquier avalancha de visitas extremas... ahora ya doy por sentado que jamás conseguirán colapsarlo.

Ejemplo del resultado:

Donde aplicarlo:

Recomiendo usar esta metodología para los siguientes casos:

  • Cachés de cualquier tipo. (especialmente útil al ahorrar también tremendo espacio en disco)
  • CSS y javascript: en la mayoría de los casos estos archivos son totalmente estáticos y rara vez son modificados. Por lo tanto son candidatos perfectos a ser pre-gzipeados y ahorrar así enormes gastos de CPU.
  • Cualquier archivo en general que cumpla estas tres condiciones:
    • Texto plano. (html, css, javascript...)
    • Contenido estático (cuando no tiene variables, cuidado con formularios).
    • Pocas modificaciones.
Cómo aplicarlo:

La clave del asunto es la función gzencode($datos, 9) para PHP.

Usándola de la siguiente manera se crea una copia de un archivo con terminación .gz y comprimido con Gzip al máximo en el disco duro del servidor.

<?php if ($_GET["archivo"]) { $file = $_GET["archivo"]; $data = implode("", file($file)); $gzdata = gzencode($data, 9); $fp = fopen($file . ".gz", "w"); fwrite($fp, $gzdata); fclose($fp); } ?>
[Aviso: este código es una herramienta sencillísima de ejemplo para generar archivos pre-gzipeados.]

Pegando este código en un archivo PHP, por ejemplo gziper.php y dando los permisos de escritura (777) correspondientes vía FTP podrémos crear versiones Gzipeadas de cualquier archivo que se encuentre en ese directorio ejecutandolo de la siguiente forma:

http://www.tuweb!.es/gziper.php?archivo=style.css
Con esto obtendremos la creación de un nuevo archivo style.css.gz pre-comprimido con Gzip.

Una vez creado el archivo, recomiendo enmascararlo con .htaccess. También se puede mejorar un poco la cosa, detectando si el navegador acepta Gzip para descomprimir el archivo en su defecto.

Otro punto a tener en cuenta es que hay que modificar la cabecera del archivo. Se resuelve desde .htaccess o fácilmente añadiendo esta linea PHP al principio del código:

header("Content-Encoding: gzip");

@include("style.css.gz");

Y eso es todo para una interesante Parte II, espero que sirva a la comunidad.

4
+1 GONZO 23-12-2007
Categoría: Conocimientos Recomendaciones Descubrimientos Internet

Artículos relacionados:

  1. Optimizar es un arte, Parte I: compresión Gzip, incluyendo CSS y javascript
  2. Los timos más famosos: teléfonos 900 (parte II)
  3. Gráfico del consumo de transferencia con o sin compresión Gzip
  4. optimizar
  5. Rumores en el séptimo arte: Tercera parte de Crepúsculo, la saga de vampiros
  6. Paradojas de Internet (II)
  1. +3 roberto207031 2009-12-29 19:12:05

    yo tengo problemas con los css felicidades buen articulo, gracias.

  2. +0 lolo 2010-03-18 13:55:14

    Buen aporte, y además q buen Captcha jaja!

  3. +0 Juan 2010-05-05 18:23:22

    puedes hacer una guia pero que diga paso por paso como hacerlo? porque lo explicas bien que hace cada cosa pero no entiendo como implementarlo.
    Desde ya gracias.

  4. +0 Inma 2013-09-03 21:07:28

    ¡Funciona! Genial, Gonzo. Muchas gracias por tu ayuda.

Artículo escrito por GONZO para Blogs Teoriza.
Optimizar es un arte, Parte II: pre-Gzip estático, evitando compresión on-the-flight, web php archivos