Cómo habilitar compresión GZIP para acelerar tu WordPress

Por , actualizado en

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:

Distribución de contenido por tipo (fuente: Google)

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?

Muestra como negocian cliente y servidor el envío de contenido comprimido con 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:

Muestra el menú principal de CloudFlare

Después de eso ubica la sección Brotli, y habilita el switch de modo que quede verde:

Muestra el switch que controla la compresión Brotli en Cloudflare

¡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.

Deja un comentario

Do NOT follow this link or you will be banned from the site!

A %d blogueros les gusta esto: