Cómo activar la compresión Gzip o Brotli en WordPress

Cuando un navegador solicita una página de tu sitio WordPress, el servidor devuelve HTML, CSS, JavaScript y otros archivos basados en texto. Sin compresión, estos archivos se transmiten en su tamaño completo. Activar la compresión puede reducir el tamaño de estos archivos entre un 70 y un 90%, lo que se traduce directamente en cargas de página más rápidas y menores costes de ancho de banda.

Cómo funciona la compresión por debajo

La compresión se basa en una negociación entre el navegador y el servidor. Cuando el navegador envía una petición, incluye una cabecera Accept-Encoding que enumera los algoritmos de compresión que admite, normalmente gzip, deflate, br. El servidor comprueba esta cabecera, comprime la respuesta utilizando el mejor algoritmo disponible y la devuelve con una cabecera Content-Encoding que indica el método utilizado. El navegador descomprime el contenido antes de renderizarlo. Todo este proceso es transparente para el usuario final.

Hay dos algoritmos de compresión principales con los que te encontrarás:

• Gzip: El estándar de la industria desde hace más de dos décadas. Compatible con todos los navegadores y servidores web. Las tasas de compresión del 70-80% son típicas para archivos de texto.
• Brotli: Desarrollado por Google y publicado en 2015. Ofrece tasas de compresión un 15-25% mejores que Gzip con un uso de CPU similar. Es compatible con todos los navegadores modernos. Solo funciona sobre conexiones HTTPS.

Qué tipos de archivo deben comprimirse

La compresión funciona mejor en contenido textual y repetitivo. Deberías activarla para los siguientes tipos MIME:

• Archivos de texto: text/html, text/css, text/javascript, text/xml, text/plain
• Archivos de aplicación: application/javascript, application/json, application/xml, application/rss+xml, application/atom+xml
• Fuentes y SVG: image/svg+xml, font/ttf, font/otf (las fuentes WOFF y WOFF2 ya están comprimidas)

No comprimas archivos binarios como JPEG, PNG, WebP, GIF, MP4 o PDF. Estos formatos ya utilizan sus propios algoritmos de compresión, y volver a comprimirlos malgasta CPU sin reducir el tamaño del archivo.

Ahorro de tamaño esperado

Para darte una idea concreta de lo que consigue la compresión, aquí tienes algunos ejemplos del mundo real:

• Una página HTML típica de WordPress (80 KB): Se comprime a unos 15-20 KB con Gzip, o 12-16 KB con Brotli.
• Librería jQuery (90 KB minificada): Se comprime a unos 30 KB con Gzip, o 25 KB con Brotli.
• Bootstrap CSS (160 KB): Se comprime a unos 25 KB con Gzip, o 20 KB con Brotli.
• Una respuesta JSON grande de una API (500 KB): Se comprime a unos 50-80 KB con Gzip.

En un sitio WordPress completo, activar la compresión reduce normalmente el tamaño total de transferencia entre un 60 y un 80%.

Apache: activar Gzip con mod_deflate

Si tu sitio WordPress se ejecuta en Apache (lo cual es el caso de la mayoría de los proveedores de hosting compartido), añade lo siguiente a tu archivo .htaccess. Colócalo antes de las reglas de reescritura de WordPress:

<IfModule mod_deflate.c>
    # Comprimir HTML, CSS, JavaScript, texto, XML y fuentes
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/woff

    # Eliminar errores de navegadores antiguos
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # Asegurar que los proxys entreguen el contenido correcto
    Header append Vary Accept-Encoding
</IfModule>

El envoltorio IfModule garantiza que esta configuración solo se aplique si mod_deflate está instalado. En la mayoría de los proveedores de hosting está activado por defecto. Si recibes un error 500 Internal Server Error tras añadir este código, contacta con tu hoster para confirmar que mod_deflate está disponible.

Nginx: activar la compresión Gzip

Si tu servidor utiliza Nginx, añade las siguientes directivas a tu bloque server o al bloque http en tu archivo nginx.conf:

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_min_length 256;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Algunas notas sobre estos ajustes: gzip_comp_level 6 ofrece un buen equilibrio entre la tasa de compresión y el uso de CPU. Niveles superiores a 6 ofrecen rendimientos decrecientes mientras aumentan significativamente la carga de la CPU. La directiva gzip_min_length 256 evita comprimir archivos muy pequeños donde el coste de la compresión supera al ahorro. La directiva gzip_vary on indica a los proxys de caché que almacenen versiones separadas para contenido comprimido y sin comprimir.

Nginx: activar la compresión Brotli

Brotli no se incluye en el paquete estándar de Nginx. Necesitas instalar el módulo ngx_brotli por separado, o usar una distribución que lo incluya (muchas distribuciones modernas de Linux lo ofrecen como paquete opcional). Una vez instalado, añade esto a tu configuración de Nginx:

brotli on;
brotli_comp_level 6;
brotli_min_length 256;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Puedes ejecutar Gzip y Brotli al mismo tiempo. Nginx servirá Brotli a los navegadores que lo admitan y recurrirá a Gzip para el resto. Esta es la configuración recomendada para máxima compatibilidad.

Plugins de WordPress que gestionan la compresión

Si no tienes acceso a los archivos de configuración del servidor (algo común en hosting compartido), varios plugins de caché de WordPress pueden activar la compresión por ti:

• WP Rocket: Añade automáticamente reglas de compresión Gzip a tu archivo .htaccess al activarse. No requiere configuración adicional. Es un plugin premium.
• LiteSpeed Cache: Si tu hoster utiliza el servidor web LiteSpeed, este plugin activa la compresión a nivel de servidor, lo cual es más eficiente que mod_deflate de Apache. Gratuito y disponible en el directorio de plugins de WordPress.
• W3 Total Cache: Ofrece compresión Gzip como parte de sus ajustes de caché del navegador. Actívala en Performance > Browser Cache > HTTP compression. Gratuito, pero con una curva de aprendizaje más pronunciada.
• WP Super Cache: Incluye una opción "Compress pages" que sirve archivos estáticos precomprimidos. Más simple que W3 Total Cache pero con menos opciones.

Ten en cuenta que si tu proveedor de hosting ya activa la compresión a nivel de servidor, añadirla de nuevo a través de un plugin no tendrá efecto adicional. Compruébalo primero antes de hacer cambios.

Cómo comprobar que la compresión funciona

Tras activar la compresión, deberías verificar que realmente se está aplicando. Aquí tienes varios métodos:

• DevTools del navegador: Abre tu sitio, pulsa F12 para abrir las DevTools, ve a la pestaña Red y recarga la página. Haz clic en cualquier petición HTML, CSS o JS y mira las cabeceras de respuesta. Deberías ver Content-Encoding: gzip o Content-Encoding: br. También puedes comparar la columna "Tamaño" (tamaño de transferencia comprimida) con la columna "Contenido" o "Recurso" (tamaño real descomprimido).
• Herramientas online: Sitios como GTmetrix, Google PageSpeed Insights y el comprobador de compresión de KeyCDN pueden verificar que tu sitio sirve contenido comprimido. Marcarán los recursos sin comprimir si los encuentran.
• Línea de comandos: Si tienes acceso a una terminal, puedes usar curl -H "Accept-Encoding: gzip" -I https://tusitio.com para ver las cabeceras de respuesta. Busca la cabecera Content-Encoding en la salida.
• Análisis de InspectWP: Ejecuta un nuevo análisis de InspectWP tras activar la compresión. La sección de rendimiento mostrará el valor de Content-Encoding. Debería mostrar gzip o br (Brotli) en lugar de estar vacío o ausente.

Resolución de problemas comunes

Si la compresión no parece funcionar tras los cambios, comprueba lo siguiente:

• Sobrescritura por CDN: Si usas un CDN como Cloudflare, el CDN puede gestionar la compresión de forma independiente a la configuración de tu servidor. Cloudflare activa Gzip por defecto y ofrece Brotli como un interruptor en los ajustes de Speed.
• Módulo del servidor no cargado: En Apache, mod_deflate debe estar habilitado. Contacta con tu proveedor de hosting si no estás seguro. En Nginx, el módulo Brotli requiere instalación separada.
• Reglas en conflicto: Múltiples plugins o reglas de .htaccess intentando establecer compresión pueden entrar en conflicto. Comprueba si hay bloques mod_deflate duplicados en tu archivo .htaccess.
• Capa de proxy o caché: Los proxys inversos como Varnish pueden eliminar o modificar las cabeceras de compresión. Asegúrate de que cada capa de tu stack está configurada correctamente.