C贸mo habilitar la compresi贸n GZip en tu servidor web

Por Ricardo Cruz, 21 de Enero de 2019. Publicado en Rendimiento. 5 minutos de lectura.

Hay pocas cosas que sean tan sencillas de implementar y que tengan un impacto espectacular en el rendimiento, como habilitar la compresi贸n GZip. Aprende c贸mo hacerlo en tu servidor.

驴Alguna vez te ha pasado que tengas que tu servidor de correo no te permita enviar un mensaje por alg煤n archivo adjunto que pesa demasiado?. Seguramente lo has solucionado comprimiendo el fichero.

Tu servidor web puede hacer esto mismo, de manera transparente, simplemente habilitando una opci贸n.

驴Qu茅 beneficios tiene habilitar la compresi贸n GZip?

Cada d铆a, los contenidos de Internet se consumen cada vez m谩s desde dispositivos m贸viles. Aunque las redes 4G cada vez cubren m谩s territorio, hay factores externos que provocan que la cobertura que llega a los dispositivos no sea siempre la adecuada.

En estos casos, el salto de 4G a una red m谩s lenta, como 3G o inferior, hace que la velocidad de descarga se degrade notablemente. Se entiende mejor viendo los n煤meros. Veamos cu谩nto tardar铆amos en descargarnos 1MB dependiendo de la red:

  • 3G (200 kilobits por segundo, o m谩s): unos 30 segundos
  • ADSL (de hasta 10Mb): unos 4 segundos
  • 4G (100 megabits por segundo, o m谩s): 隆0 segundos!

El tiempo que se tarda en descomprimir un fichero de 1MB se contabiliza en milisegundos, por lo que no hay raz贸n para no habilitarlo.

Los estudios en sitios web como Amazon o eBay han demostrado que cada segundo que tarda una p谩gina web en cargar, hace que el abandono de un visitante, crezca exponencialmente.

驴Alguna vez te has aguantado esperando 30 segundos por una web?, tus visitantes tampoco lo har谩n.

驴Por qu茅 elegir GZip (o Deflate) en lugar de Brotli?

Brotli es otro de los muchos algoritmos de compresi贸n que hay, con una velocidad similar a GZip, que optimiza mucho m谩s los ficheros.

Si bien Brotli tiene un mayor ratio de compresi贸n, frente a GZip, lo cierto es que las implementaciones son relativamente recientes, por lo que no todos los dispositivos lo soportan.

Seg煤n la web Can I use, la penetraci贸n de Brotli en los navegadores es de un 86%. En cuanto a GZip, se da por bueno que la penetraci贸n de esta tecnolog铆a es del 100%, estando presente incluso en versiones muy viejas de Internet Explorer.

Aunque todos los navegadores nuevos lo vayan a implementar, los antiguos no se siguen actualizando, a pesar de seguir teniendo una cantidad respetable de usuarios. La 煤nica esperanza es que esos navegadores se dejen de utilizar con el paso del tiempo.

Mi consejo es que todav铆a utilices GZip durante un tiempo, mientras el porcentaje de penetraci贸n de los nuevos navegadores siga incrementando.

Compresi贸n GZip en Nginx 1.14

Nginx trae por defecto el soporte para servir los ficheros HTML mediante GZip, por lo que 煤nicamente tendremos que configurarlo para que comprima tambi茅n el resto de tipos de fichero que queramos.

Un ejemplo de configuraci贸n:

http {
  server {
    location / {
      # Activa la compresi贸n GZip
      gzip on;

      # Desactiva la compresi贸n GZip en navegadores
      # Internet Explorer demasiado viejos
      gzip_disable "msie6";

      # A帽ade a continuaci贸n los tipos de ficheros
      # que quieras comprimir:
      gzip_types
        text/css
        text/javascript
        text/plain
        application/json
        application/javascript
        font/truetype
        font/opentype
        image/svg+xml;

      # A帽ade la cabecera "Vary: Accept-Encoding" para
      # evitar problemas con cach茅s intermedias
      gzip_vary on;
    }
  }
}

Puedes ver el resto de las opciones en la documentaci贸n oficial del m贸dulo.

隆Listo! Reinicia el servidor, o recarga la configuraci贸n, para aplicar los cambios.

Compresi贸n GZip en Apache 2.4

En Apache es tan f谩cil como en Nginx. Basta con elegir los tipos de fichero que quieres que el servidor comprima.

A帽ade estas lineas a tu fichero .htaccess:

<ifmodule mod_deflate.c>
    AddOutputFilterByType DEFLATE "text/html" \
                                  "text/css" \
                                  "text/plain" \
                                  "text/xml" \
                                  "application/x-javascript" \
                                  "application/x-httpd-php"
</ifmodule>

Al igual que con el ejemplo de Nginx, tendr谩s que a帽adir los tipos mime que quieras servir comprimidos. Por ejemplo, para las im谩genes SVG ser铆a 鈥渋mage/svg+xml鈥.

Conclusi贸n

No encontrar谩s algo tan sencillo de implementar que te de tantos beneficios en cuanto a la velocidad de carga de tu web. 隆Pero no te detengas aqu铆!, hay muchas cosas que mejorar en una p谩gina web, d铆a a d铆a.

隆Nos leemos en el pr贸ximo art铆culo!

Sigue leyendo

TTFB - Reduciendo los tiempos de respuesta del servidor

28 de Enero de 2019. 14 minutos de lectura
Rendimiento

驴C贸mo mejorar la m茅trica Time To First Byte?, 驴es realmente importante?, 驴c贸mo afecta al SEO?. En este art铆culo te explico todo lo que necesitas saber y los consejos para que tu web sea todav铆a m谩s r谩pida.