Compresión de elementos de texto en tu servidor web

Como parte de la série de conceptos WPO, hoy hablaremos de GZIP. ¿Qué es? ¿Cómo podemos verificar que funciona? ¿Cómo podemos activarlo?

Antecedentes

Cuando queremos conseguir mejorar la puntuación WPO en nuestra web, un punto importante, y no siempre contemplado, se refiere a la velocidad de descarga de la web desde nuestro servidor hasta el navegador del cliente.

Podemos adelgazar nuestro HTML, ampliar los recursos de nuestro servidor, pero en lo que poco podemos influir es en el camino entre el navegador y nuestro servidor.

Una manera de actuar sobre esta variable consiste en hacer más pequeña toda la información que enviamos. Ello hará que llegue antes en las mismas condiciones de velocidad.

Hacer algo más pequeño se consigue comprimiendo los datos.

La compresión es el proceso de codificación de información mediante el uso de pocos bits.

Ilya Grigorik – Google Developer Advocate and Web Perf Guru

¿Qué es GZIP?

Es un formato de compresión sin pérdida basado en el algoritmo LZ77 y codificación Huffman.

Resumiendo su funcionamiento se basa en localizar cadenas de texto duplicadas y sustituirlas por referencias hacia la primera repetición. De esta manera, el bloque comprimido es mucho menor.

Esta codificación sólamente funciona bien con contenido de texto como html, javascript o css.

Utilizar GZIP en archivos de imágen o video casi no ofrecerá mejora ya que éstos ya vienen comprimidos.

¿Cómo podemos verificar si nuestra página web lo tiene activo?

Existen multitud de herramientas online para verificarlo, desde los propios sistemas de chequeo de wpo como Page Speed Insights, WebPageTest o GTMetrix a herramientas específicas como Varvy:

En la mayoría de servidores web GZIP viene instalado y activo por defecto. Pero debemos vigilar y comprobar que GZIP se aplica a todo el contenido de texto y no solo al HTML.

Por ejemplo, verificar en Varvy que tanto el javascript como el css también se envia al navegador de cliente en formato comprimido:

¿Cómo podemos activarlo?

Si estamos utilizando un panel de administración tipo Plesk o cPanel tendríamos que ir al apartado de configuración del servidor web y buscar la opción de servir páginas comprimidas.

Por ejemplo, en cPanel, accederiamos al apartado Optimize Website

En Plesk tenemos que confirmar que tenemos activos los modulos deflate y filter:

Luego, añadir mediante el panel, al fichero .htaccess la configuración. Por ejemplo para el servidor web Apache sería:

En otros paneles de control tendríamos que localizar las secciones equivalentes y consultar su documentación.

Si no tenemos paneles activos o queremos directamente añadir las configuraciones en los servidores, a continuación mostramos cómo hacerlo.

Configuración servidor Apache

Ante todo nos aseguraremos que esté instalado y activo el módulo mod_deflate en la configuración de Apache.

Ojo. En algunos tutoriales de Internet dicen activar el módulo mod_gzip. Ambos, mod_deflate y mod_gzip, hacen lo mismo. Aplican el formato gzip a los ficheros. La diferencia es que mod_deflate es el más moderno y el que viene activo habitualmente. El nombre deflate se cogió debido a que los creadores de mod_gzip ya ocupaban el nombre gzip.

Una vez activo, desde la configuración de Apache para el virtual host o bien si tenemos la posibilidad, desde el .htaccess del site al que le queremos activar la compresión, le aplicamos el siguiente código.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule> 

Configuración servidor Nginx

Desde el archivo de configuración, habitualmente nginx.conf, se ha de activar el siguiente bloque de código.

gzip on;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/html text/css text/javascript image/svg+xml application/javascript application/x-javascript;

Para activarlo reiniciamos el servicio y ya veremos que la compresión está funcionando correctamente.

Espero que os haya servido de ayuda y si tenéis cualquier pregunta no dudéis en hacernos comentarios.