Optimizar es un arte, Parte I: compresión Gzip, incluyendo CSS y javascript

Este es el primer artículo de una serie de métodos que he conseguido implementar con éxito ahorrando CPU y transferencia, haciendo que mis servicios web soporten más lectores online, sirviendo más rápido y con menos hardware.

Parte I: Compresión Gzip

Este método ya es bastante familiar, casi todo el mundo que lo necesita realmente lo utiliza, pero no lo aprovecha al máximo.

La compresión Gzip hace que el servidor comprime los archivos de texto antes de transferirlos, reduciendo su tamaño entre 5 y 9 veces el original. Como por arte de magia consigue que la información que envía el servidor hacia el cliente sea notablemente menor.

Por ejemplo, un archivo que pesa 68 Kb gzipeado se queda en 9 Kb ahorrando mas de 7 veces el tamaño

Conseguimos de un plumazo tres enormes ventajas:

1. Mayor capacidad de carga: ahorrando tiempo en transferir archivos se minimiza la carga de CPU y RAM del servidor.
2. Mejor velocidad de carga: al transferir menos información las paginas cargarán bastante más rápido, la experiencia de tus usuarios será mejor y evade la necesidad de que el server esté en el país objetivo.
3. Considerable ahorro de dinero: el gasto elemental de un servidor web es la transferencia mensual, esta se mide en Gb/mes. Comprimiendo con Gzip el ahorro será tremendo.

[Curiosidad: existe una supuesta delgada linea de eficiencia, algunos dicen que activando Gzip on-the-flight se gasta más CPU que en modo normal. Por mi experiencia pienso que se ahorra CPU, sin embargo en la Parte II explicaré un método muy interesante para hace Gzip estáticamente (mas magia)]

Puede parecer trivial, ya que mucha gente lo conoce y lo aplica. Sin embargo mi truco "avanzado" es que recomiendo activar Gzip en TODOS los archivos planos y no solo a las páginas HTML como veo en la mayoría de webs. Cualquier archivo plano se debe gzipear, me refiero especialmente a archivos html, estilos css y archivos javascript. El ahorro triple será más significativo aún.

Distintos métodos para implementar Gzip:

• Con Wordpress: es fácil, Opciones > Lectura > Marcar opción Gzip (abajo). Sin embargo el error común es olvidarse aquí del tema, un error porque con esta opción solo consigues comprimir las páginas html olvidandote del archivo css y posibles javascripts.
• Con PHP: para comprimir una página html donde puedes ejecutar PHP has de añadir estas lineas de código al principio de cualquier proceso:

  <?php ob_start("ob_gzhandler"); ?>

  Al final de cualquier código:

  <?php ob_end_flush(); ?>

• Para CSS y javascript (recomendado) En .htaccess

  AddHandler application/x-httpd-php .css .js php_value auto_prepend_file /home/... RUTA LOCAL .../public_html/gzip-start.php php_value auto_append_file /home/... RUTA LOCAL .../public_html/gzip-end.php

  En gzip-start.php

  <?php ob_start("ob_gzhandler"); ?>

  En gzip-end.php

  <?php ob_end_flush(); ?>

• Combinando htaccess + PHP: poner en .htaccess:

  php_flag zlib.output_compression on #Con el numero se controla el nivel de compresion donde 0 es null y 9 el maximo php_value zlib.output_compression_level 5 AddHandler application/x-httpd-php .css .js #Poner una ruta local cualquiera hacia un archivo php php_value auto_prepend_file /home/.../public_html/gzip-head.php

  Crear el archivo gzip-head.php con el siguiente contenido:

  <?php $pathinfo = pathinfo($PHP_SELF); $extension = $pathinfo["extension"]; if ($extension == "css") {header("Content-type: text/css");} if ($extension == "js") {header("Content-type: text/javascript");} ?>

Y esto es todo...

En la Parte II explico un interesantísimo metodo para comprimir con Gzip estáticamente, en vez de on-the-flight gastando 0 CPU en comprimir cada pagina, completando el circulo de eficiencia perfecta.