Tabla de contenido
Habilitar la compresión GZIP en tu servidor puede hacer que tu WordPress se acelere considerablemente, y a decir verdad, es una de las técnicas de las que podemos decir que la fruta está colgando muy abajo, es decir, no hace falta mucho esfuerzo para implementarla – y las ganancias pueden ser sustanciales. Recuerden que Google quiere que todos los sitios carguen rápido o de lo contrario tu sitio posiblemente pare en la página 5 o 6 de resultados de Google, junto con bonitos sitios de apuestas y demás.
¿Porqué es importante comprimir el contenido?
Si han usado GTmetrix alguna vez, sabrán que ofrece valores medios de varias métricas, una de ellas es el peso medio de los sitios: al momento de escribir este artículo, el peso medio de un sitio es de 3.17 MB; es fácil deducir que cuanto más nos ahorremos en nuestros sitios más rápido responderán, y una de las formas de ahorrar la cantidad de datos que se transmiten desde los servidores donde alojamos nuestros sitios hasta los navegadores es comprimir dichos datos. GTmetrix en particular reporta el uso de la compresión gzip en el criterio “Enable gzip compression“, el cual debe estar mínimo en 85% según GTmetrix.
Distribución de tamaño de sitio por tipo de contenido
Vale la pena observar cómo está distribuido ese peso final de un sitio web:
Como puedes ver las imágenes se llevan el primer lugar en total de datos transmitidos, así que es lo primero que debes optimizar (y aquí tengo un artículo sobre optimización de imágenes muy completo, y luego una comparativa de plugins de optimización de imágenes), pero no perdamos de vista que los scripts, fonts, HTML y CSS también contribuyen de manera significativa – y todos sabemos muy bien que en WordPress se carga una tonelada de JavaScript, por ejemplo.
El texto se comprime de maravilla
Como mencioné antes, en WordPress hay mucho HTML, CSS y JavaScript, y todo eso comparte una característica a nuestro favor: es texto, y el texto se comprime muy bien, lo que podemos usar para que, aunado a la optimización de imágenes, nuestro contenido se sirva a los clientes ya comprimido, y con esto reduciendo el tiempo de respuesta del servidor, pues como te imaginarás no es lo mismo enviar 3.17 MB que 500 KB.
¿Cómo funciona la compresión GZIP?
La idea es muy sencilla: cuando tu navegador solicita un sitio, este indica si puede o no admitir contenido comprimido con una cabecera especial (Accept-Encoding: gzip); de ser así, el servidor responde con lo que sea que haya solicitado pero comprimido (incluyendo en su cabecera de respuesta Content-Encoding: gzip), y caso contrario con el contenido normal. Si la respuesta está comprimida, el navegador la descomprime y lo procesa.
Una breve discusión técnica: GZIP vs DEFLATE
Esto breve discusión puede volverse un poco técnica y sirve más como conocimiento general que para otra cosa; si lo técnico no es lo tuyo puedes brincarte esta sección, donde hablo un poco de porqué a pesar de que aparentemente existen dos métodos de compresión, aún cuando se pretende usar DEFLATE se termina usando GZIP.
Qué es DEFLATE y que es GZIP
DEFLATE es un algoritmo de compresión sin pérdida que por lo general usa la librería zlib, la cual ofrece funciones para comprimir y descomprimir (DEFLATE e INFLATE respectivamente). Esta librería también define un formato de datos zlib, que no es más que un bloque de DEFLATE con una cabecera y un checksum Adler32.
Por su parte, GZIP es un algoritmo de compresión que usa DEFLATE para comprimir; internamente también usa zlib para usar las funciones de comprimir y descomprimir DEFLATE e INFLATE, y también define un formato de datos GZIP, que no es más que…un bloque de DEFLATE con una cabecera y un checksum CRC32.
Entra en escena la especificación HTTP 1.1
En esta especificación se dice que Content-Encoding: gzip significa que la respuesta contiene el formato de datos gzip, pero define la respuesta Content-Encoding: deflate como el formato de datos zlib, en vez de contener datos puros en formato DEFLATE. Esto ocasionó problemas en las implementaciones tempranas de DEFLATE en los servidores y terminó siendo considerado como no confiable, por lo que se terminó usando GZIP.
Por ello (por citar un ejemplo), en Apache aunque uses mod_deflate terminarás usando GZIP; en su página de documentación dice claramente que sólo soportan GZIP por compatibilidad con navegadores antiguos.
Métodos para habilitar la compresión GZIP
Ahora si, vamos a ver como habilitar la compresión GZIP en tu servidor y acelerar tu WordPress.
Habilitar compresión GZIP a través de CPanel
La manera más sencilla es si tu hosting te ofrece CPanel para administrarlo; sólo tienes que entrar en CPanel y en la pantalla principal ir a la sección Software y hacer clic en Optimizar el sitio web:
En la siguiente pantalla darle clic a Comprimir todo el contenido:
Si quieres puedes especificar los tipos MIME a comprimir en el campo que ves ahí, y cuando termines debes hacer clic en Actualizar configuración.
Habilitar compresión GZIP en Apache mediante .htaccess
También puedes habilitar la compresión GZIP a través del archivo .htaccess que sirve para controlar cómo funcionan varias características del servidor web, en este caso Apache. GTmetrix recomienda las siguientes directivas para configurar correctamente la compresión GZIP en tu hosting:
<IfModule mod_deflate.c> # Comprimir HTML, CSS, JavaScript, texto, XML y fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Eliminar bugs de navegadores (sólo para navegadores muy viejos) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
El primer bloque contiene la directiva AddOutputFilterByType que lo que hace es indicar el tipo de compresión y el tipo MIME sobre el cual actuará. Puedes agrupar los tipos MIME para no escribirlos uno por línea, sólo tienes que separarlos por un espacio en blanco.
También puedes usar la directiva SetOutputFilter:
<IfModule mod_deflate.c> SetOutputFilter DEFLATE SetEnvIfNoCase Request_URI \.(?:gif|jpg|png|ico|zip|gz|mp4|flv)$ no-gzip </IfModule>
En el caso anterior se activa el filtro DEFLATE para todo contenido excepto (no-gzip) que tengan las extensiones que ves ahí.
Habilitar compresión GZIP en nginx
Necesitarás editar el archivo de configuración de nginx (nginx.conf) y añadir las siguientes líneas, verifica que no hayan otras iguales:
gzip on; gzip_disable "msie6"; gzip_http_version 1.1; gzip_vary on; gzip_comp_level 6; gzip_buffers 16 8k; gzip_proxied any; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js;
Esto significa básicamente que habilite la compresión gzip excepto para Internet Explorer 6 e inferiores, establece la versión mínima de petición a HTTP 1.1, informa a proxies que pueden cachear ambas versiones de un recurso (normal y comprimida), establece el nivel de compresión a 6 que es el mejor compromiso entre uso de CPU y efectividad, establece 16 buffers de 8K, comprime cualquier respuesta que venga por proxy y por último define sobre que tipos de contenido tendrá efecto, por tipo MIME.
Posterior a esto, necesitarás reiniciar tu servidor nginx.
Habilitar compresión GZIP en WordPress con plugins
Hay varios plugins que soportan la característica de escribir en tu .htaccess y habilitar la compresión GZIP. Pero ojo: recuerda que para que esto funcione las librerías y la configuración de tu servidor web deben estar ya listas para que funcione; ningún plugin llega hasta tales configuraciones, así que deberás cerciorarte que el soporte de la compresión que quieres habilitar ya esté listo. Habiendo dicho esto y sólo por mencionar algunos, los siguientes plugins permiten habilitar compresión GZIP:
Y una tonelada más de plugins también permiten hacerlo. Recuerda cómo debes elegir plugins seguros para tu sitio de modo que no tengas problemas con ellos.
Brotli, un algoritmo moderno para reemplazar a gzip
Brotli es un algoritmo de compresión de datos que viene de un par de ingenieros de Google, y que a su vez es la continuación de otro algoritmo llamado Zopfli. Es muy eficiente, y puede comprimir hasta un 25% que GZIP/deflate sin consumir más CPU; su tipo de codificación se indica con las letras br, es decir, es el tipo que indica el navegador (Accept-Encoding) y el servidor (Content-Encoding) para referirse a Brotli.
Activar compresión Brotli con Apache
Necesitarás tener Apache 2.4.26 o superior y el módulo mod_brotli habilitado para poder usar Brotli. Con esos requerimientos satisfechos, sólo tienes que meter reglas AddOutputFilterByType en tu .htaccess y cambiar DEFLATE por BROTLI_COMPRESS en el formato de AddOutputFilterByType; es decir:
AddOutputFilterByType BROTLI_COMPRESS application/javascript
Con lo cual estaríamos indicando que queremos la compresión Brotli sólo en archivos de JavaScript; indica tantos tipos MIME como te sea necesario.
O también en otra sintaxis válida:
SetOutputFilter BROTLI_COMPRESS SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-brotli
En el ejemplo anterior se aplica Brotli en todos los tipos menos (no-brotli) GIF, JPEG, JPG y PNG.
Activar compresión Brotli con Cloudflare
El método más sencillo para activar Brotli es a través de Cloudflare; si aún no tienes, saca tu cuenta ahora y configura Cloudflare para tu sitio (por ahora no tengo una guía al respecto, pero no será muy difícil que encuentres una usando Google). Una vez que hayas hecho todo esto, entra en Cloudflare, selecciona tu sitio y en la botonera principal haz clic en Speed, y luego en la pestaña Optimization:
Después de eso ubica la sección Brotli, y habilita el switch de modo que quede verde:
¡Y listo! ahora falta probar si todo quedó bien; abre un navegador y ve a https://tools.keycdn.com/brotli-test para probar tu sitio; introduce la URL del mismo y presiona Test, y si quedó bien, verás el mensaje en fondo verde como el que muestro aquí:
Palabras finales
Habilitar la compresión GZIP en tu hosting es trivial y los dividendos son muy sustanciales como para no hacerlo; de no implementarlo sólo harás que tu sitio cargue más lento. Como dije al principio la compresión GZIP es una fruta que cuelga muy abajo, no representa mucho esfuerzo y sí mucha ganancia.
Orlando es un ingeniero en sistemas de 45 años de edad, apasionado del desarrollo de software y con un cariño especial por WordPress. Le encantan los libros, la música, la fotografía, los cómics y es un AFOL. De último pero no menos, esposo y padre de dos trolls.