La forma más fácil de acelerar tu sitio de WordPress es eliminar todos sus recursos no deseados. La segunda forma más fácil de acelerarla es comprimir todos sus recursos deseados. Activar la compresión GZIP en tu servidor web es una de las formas más simples y eficientes de lograrlo.

Todos los navegadores modernos incluyen soporte para compresión GZIP por defecto. Sin embargo, para servir los recursos comprimidos a tus usuarios sin sobresaltos, debes configurar tu servidor correctamente.

En este post, aprenderás los fundamentos de la compresión de datos en la web, qué es la compresión GZIP, sus diversos beneficios y cómo puedes usarla para acelerar tus sitios de WordPress con diferentes configuraciones de servidor.

¿Entusiasmado? ¡Vamos a descomprimir!

¿Prefieres ver la versión en vídeo?

Los Fundamentos de la Compresión de Datos en la Web

La compresión de datos en la web es el proceso de reducir el tamaño de los datos transmitidos por los sitios web. Dependiendo del tipo de datos -texto, imágenes, hojas de estilo, guiones, fuentes- hay varias maneras de comprimir los datos.

Los principales componentes de una página web
Los principales componentes de una página web

Por ejemplo, la minificación de HTML, CSS y JavaScript es una forma sencilla de reducir la cantidad de datos enviados por los navegadores. Aquí, el minificador comprime el texto eliminando los caracteres innecesarios como comentarios y espacios en blanco del código fuente.

En el ejemplo que figura a continuación de un simple documento HTML, hay tres tipos de contenido: Marcado HTML, estilos CSS y código JavaScript.

Cada tipo de contenido tiene una sintaxis y semántica únicas. En general, este documento HTML tiene 357 caracteres en total.

<html>
<head>
    <style>
    /* kinsta-banner is used on the homepage only */
    .kinsta-banner { font-size: 150% }
    .kinsta-banner { width: 75% }
</style>
</head>
<body>
    
    <div>...</div>
    
    <script>
    kinstaScripts(); // random scripts used on the page
    </script>
</body>
</html>

El código de arriba es fácil de leer y seguir. Es ideal para el desarrollo. Sin embargo, no es necesario que el navegador lea los comentarios y tenga las etiquetas perfectamente indentadas. Un compresor inteligente puede analizar este documento y eliminar todos los bits innecesarios en él.

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>

Después de la minificación, el documento HTML se reduce a solo 141 caracteres. Eso supone un 60,50% de ahorro en el número de caracteres. No es tan fácil de ver para los ojos, pero eso no le importa al navegador. Seguirá mostrando la misma página al usuario.

Para aprovechar las ventajas de ambas versiones, puedes mantener el documento original como una «versión de desarrollo», pero minificando todo el código antes de activarlo en vivo.

La mayoría de los plugins de rendimiento de WordPress se encargan de esto automáticamente por ti.

Compresión del tamaño del archivo de jQuery no comprimido vs. minificado
Compresión del tamaño del archivo de jQuery no comprimido vs. minificado

Por ejemplo, la versión no comprimida de la biblioteca jQuery 3.5.1 es más de 3 veces mayor que la versión minificada del mismo archivo.

Asimismo, las mismas técnicas de compresión descritas anteriormente pueden optimizar otros tipos de contenido como imágenes, vídeos, fuentes y mucho más. Las reducciones de contenido específico como estas son el primer paso para optimizar el tamaño de los activos basados en texto de tu sitio web.

Estos evidentes beneficios son la razón por la que Kinsta ha incorporado una función de minificación de código en el panel de control de MyKinsta. Los clientes pueden optar por la minificación automática de código para sus archivos CSS y JavaScript, acelerando sus sitios con cero esfuerzo manual.

Pero la compresión de datos es más que una simple minificación. Mediante técnicas matemáticas avanzadas, los algoritmos de compresión de datos pueden reducir aún más el tamaño de los datos.

Uno de los ejemplos más populares de este método de compresión de datos es GZIP. Permite una transmisión de datos eficiente y ha contribuido significativamente a hacer de Internet un medio de comunicación global viable.

¿Qué es la Compresión GZIP?

GZIP, abreviatura de GNU Zip, es el método de compresión de datos sin pérdidas más popular de la web. Te permite reducir el tamaño de las páginas HTML, hojas de estilo y scripts de tu sitio.

Además de ser un algoritmo de compresión de datos, el GZIP es también una extensión de archivo (.gz) y un software utilizado para la compresión/descompresión de archivos.

Está basado en el algoritmo DEFLATE, que es una mezcla de la codificación LZ77 y los algoritmos de codificación Huffman.

La compresión GZIP se basa en el algoritmo DEFLATE
La compresión GZIP se basa en el algoritmo DEFLATE

Un compresor GZIP toma un conjunto de datos en bruto y los comprime sin pérdida. Los datos en bruto pueden ser de cualquier tipo de archivo, pero el GZIP funciona mejor con activos basados en texto (por ejemplo, HTML, CSS, JS).

La siguiente sección cubre cómo funciona la compresión GZIP en profundidad.

Cómo GZIP Comprime los Datos

Una ilustración aproximada de cómo funciona la compresión GZIP
Una ilustración aproximada de cómo funciona la compresión GZIP

Para empezar, el compresor GZIP ejecuta el algoritmo de compresión LZ77 sobre los datos en bruto para eliminar las redundancias. Este algoritmo funciona encontrando patrones repetidos en una ventana corrediza predefinida (una pequeña sección de los datos en bruto).

Luego reemplaza todas las cadenas repetidas con tuplas para comprimir los datos en bruto.

Una ilustración del algoritmo de codificación del LZ77
Una ilustración del algoritmo de codificación del LZ77

En el ejemplo anterior, el tamaño de la ventana corrediza es de solo 13 caracteres de largo (13 bytes). Sin embargo, la compresión GZIP puede utilizar un tamaño máximo de ventana deslizante de 32 KB (32.768 bytes). El tamaño de la ventana corrediza desempeña un papel fundamental en el rendimiento de la compresión LZ77.

Después de comprimir los datos en bruto con el algoritmo LZ77, el compresor GZIP utiliza el algoritmo de codificación Huffman para comprimirlos aún más. Lo hace asignando a los caracteres que se producen con mayor frecuencia el menor número de bits, mientras que asigna a los caracteres raros el mayor número de bits.

Esta técnica es como la utilizada en el código Morse, donde las letras que aparecen más frecuentemente en el idioma inglés obtienen las secuencias más cortas.

Para entender cómo funciona el algoritmo de codificación de Huffman, considera la palabra BOOKKEEPER. Tiene 10 caracteres de largo, pero solo tiene 6 caracteres únicos. Esta palabra tiene una buena mezcla de letras simples, dobles y triples.

Casi todos los sitios web utilizan la codificación de caracteres UTF-8 para representar letras y símbolos. Cada carácter ASCII en UTF-8, que también incluye el alfabeto inglés, utiliza 1 byte (8 bits).

La palabra "BOOKKEEPER" tiene muchas letras que se repiten
La palabra «BOOKKEEPER» tiene muchas letras que se repiten

Una cadena de 10 caracteres como BOOKKEEPER requerirá 10 bytes (80 bits) de memoria. Puedes ver que contiene 1 instancia de las letras B, P, R, 2 instancias de las letras OK, y 3 instancias de la letra E.

El algoritmo de codificación de Huffman utiliza este conocimiento para comprimir la cadena sin pérdidas. Lo hace generando un árbol binario con cada letra única como una hoja.

Las letras de menor frecuencia (por ejemplo, B, P, R) se encontrarán en la parte inferior del árbol, mientras que las que aparecen con mayor frecuencia (por ejemplo, E, O, K) se encontrarán idealmente en la parte superior.

El nodo más alto del árbol es la raíz, y su valor es igual al número total de caracteres de la cadena.

Árbol Huffman para la palabra "BOOKKEEPER"
Árbol Huffman para la palabra «BOOKKEEPER»

Después de generar el árbol de Huffman, todas las flechas de la rama izquierda y la derecha reciben números 0 y 1 respectivamente. Entonces se puede generar el código Huffman para cualquier carácter trazando el camino de la raíz a la hoja y uniendo todos los 0 y 1.

Los códigos de Huffman son códigos binarios únicos para cada personaje
Los códigos de Huffman son códigos binarios únicos para cada carácter

Puedes ver que las letras de mayor frecuencia tienen códigos Huffman con los tamaños de bits más pequeños.

Nota: El algoritmo de Codificación Huffman puede generar códigos binarios alternativos utilizando una estrategia de ordenamiento diferente para los caracteres con las mismas frecuencias. Sin embargo, el tamaño total de la cadena codificada seguirá siendo el mismo.

Una palabra de 80 bits codificada como una cadena de 25 bits
Una palabra de 80 bits codificada como una cadena de 25 bits

Eso supone una reducción del 68,75% en la memoria necesaria para almacenar la palabra original.

El uso del árbol de Huffman con la convención 0/1 genera códigos binarios que satisfacen la propiedad del prefijo. Asegura que el código Huffman de cualquier carácter específico no es un prefijo del código de cualquier otro carácter, facilitando la decodificación de la cadena codificada utilizando el árbol Huffman. Esto juega un papel primordial en la velocidad de descompresión del GZIP.

Al igual que con la palabra anterior, el compresor GZIP utiliza el algoritmo de codificación Huffman para optimizar aún más las tuplas generadas por el algoritmo LZ77. Esto da como resultado archivos altamente comprimidos con .gz extension.

Si estás interesado en aprender más acerca de cómo funciona el GZIP, consulta este video para tener una rápida visión general.

¿Qué Buena es la Compresión del GZIP?

Típicamente, el GZIP alcanza una tasa de compresión de alrededor del 70% para archivos pequeños, pero puede llegar hasta el 90% para activos de texto más grandes.

Ratios de compresión GZIP para algunas bibliotecas populares de CSS y JS
Ratios de compresión GZIP para algunas bibliotecas populares de CSS y JS

En la tabla anterior, puedes ver que comprimir los archivos minimizados con GZIP pueden reducir su tamaño aún más.

Nota: Puedes comprimir cualquier tipo de archivo con GZIP, pero para los activos ya comprimidos con otros métodos (por ejemplo, imágenes, vídeos), no supondrá ningún ahorro. A veces, incluso puede aumentar el tamaño del archivo.

La fuerza de un algoritmo de compresión no solo depende de su relación de compresión, sino también de la rapidez y eficiencia con que pueda comprimir y descomprimir los datos. Ahí es donde el GZIP sobresale para la mayoría de los casos de uso.

Dado que el GZIP se descomprime rápidamente usando un algoritmo de streaming, es un gran ajuste para los protocolos web donde la velocidad es crucial. Además, GZIP utiliza recursos mínimos para comprimir y descomprimir datos, lo que lo hace ideal tanto para servidores como para clientes.

Rendimiento de compresión de brotli vs bzip2 vs GZIP vs xz (Fuente: OpenCPU)
Rendimiento de compresión de brotli vs bzip2 vs GZIP vs xz (Fuente: OpenCPU)

Los gráficos de arriba comparan el rendimiento de compresión de los algoritmos de compresión brotli, bzip2, gzip y xz. El GZIP pierde en la prueba de relación de compresión por un ligero margen, pero para las velocidades de compresión y descompresión, supera a la competencia por completo.

Mirando el gráfico de la velocidad de compresión, podemos concluir que el GZIP es ideal para la compresión en tiempo real en servidores HTTP y otros flujos de datos en la web. Considerando todos sus aspectos positivos en el avance de la web, el IETF ratificó el GZIP como uno de los tres formatos estándar para la compresión en HTTP/1.1.

Nota: Una abstracción de la librería de compresión de GZIP llamada zlib se utiliza en muchos sistemas operativos populares (Linux, macOS, iOS) y en las modernas consolas de juegos (PlayStation 4, Wii U, Xbox One). También se utiliza en el formato de archivo PNG sin pérdidas para comprimir imágenes.

6 Ventajas de la Compresión GZIP

Echemos un vistazo más de cerca las ventajas más importantes de la compresión GZIP.

Proporciona un Índice de Compresión Decente

Como ya hemos mencionado, el GZIP no tiene la mejor relación de compresión en comparación con su competencia. Pero tampoco está tan lejos de ellos. Típicamente, puede ayudar a reducir el tamaño de los recursos basados en texto en un 70-90%.

Compresión y Descompresión Súper Rápidas

Para la compresión de datos y las velocidades de descompresión, el GZIP es el claro vencedor. Es muy conveniente para la compresión sobre la marcha en los servidores HTTP y otros flujos de datos.

Requiere Muy Poca Memoria

El GZIP deja una huella mínima de memoria, lo que lo hace adecuado para servidores y sistemas con capacidad de memoria limitada. Por lo tanto, lo encontrarás soportado incluso por los proveedores de alojamiento web más baratos.

No se Expande Mucho Incluso en los Peores Casos

Los algoritmos de compresión de datos sin pérdidas como el GZIP tienen un límite estricto más allá del cual no pueden comprimir los datos.

Típicamente, esto ocurre cuando el recurso ya está bien comprimido, o si es pequeño y la sobrecarga de añadir el diccionario GZIP es mayor que el ahorro de compresión. Podemos atribuir este fenómeno a un concepto llamado codificación de entropía. El GZIP es altamente resistente a este efecto.

Gratuito y de código abierto

El GZIP fue creado principalmente como un sustituto gratuito y de código abierto del programa de compresión patentado utilizado en los primeros sistemas Unix. Por lo tanto, no está cargado con ninguna patente y puede ser usado libremente por cualquiera.

Disfruta de Soporte Universal

Según W3Techs, la compresión GZIP es utilizada por el 82% de todos los sitios web que rastrean, lo que lo convierte en el algoritmo de compresión más utilizado en la web.

El GZIP es soportado por casi todos los servidores y clientes. No importa en qué servidor alojes tu sitio, puedes acelerarlo activando GZIP en él.

Advertencias GZIP en Herramientas de Prueba de Velocidad de Sitios Web

Además de la minificación, activar el GZIP es una de las optimizaciones de velocidad más simples y efectivas que puedes implementar en tu sitio web.

También es una de las formas más fáciles de optimizar WordPress. A pesar de esto, muchos sitios de WordPress todavía no lo usan.

Cuando visitas un sitio web, tu navegador comprueba si el servidor web tiene el GZIP activado comprobando la codificación de content-encoding: gzip de respuesta. Si la cabecera existe, recupera los archivos comprimidos, los descomprime y luego te sirve los archivos más pequeños automáticamente.

 

El encabezado de respuesta "content-encoding: gzip" en Chrome DevTools
La cabecera de respuesta «content-encoding: gzip» en Chrome DevTools

Si el navegador no detecta la cabecera de respuesta del GZIP, descarga los archivos descomprimidos. En la mayoría de los casos, la diferencia en la velocidad de carga de la página puede ser de varios segundos. Por lo tanto, si no tienes el GZIP activado, verás advertencias en las herramientas de prueba de velocidad del sitio web.

Advertencia GZIP en Google PageSpeed Insights / Lighthouse

Google Page Speed Insights lanza una advertencia cuando no tienes habilitada la compresión de texto en tu sitio web.

Nota: Google PageSpeed Insights y Google Lighthouse eran dos herramientas separadas para probar el rendimiento de los sitios web. Funcionaron independientemente una de la otra hasta 2018, cuando Google actualizó Page Speed Insights para usar Lighthouse como su motor de análisis. Por lo tanto, PageSpeed Insights y Lighthouse son uno y el mismo ahora.

Advertencia de "Habilitar la compresión de texto" en Google PageSpeed Insights
Advertencia de «Habilita la compresión de texto» en Google PageSpeed Insights

En el sitio de ejemplo anterior, la compresión de los recursos basados en el texto puede reducir el peso de la página en más de un 78% y acelerar el tiempo de carga de la página en 2,1 segundos.

Nota: PageSpeed Insights se basa en las cabeceras de respuesta devueltos a tu navegador por el servidor. A veces, puede mostrar una falsa advertencia incluso cuando tienes habilitada la compresión GZIP. Puede ser debido a la ejecución de la prueba de velocidad en una máquina que utiliza un servidor proxy intermedio o un software de seguridad. Pueden interferir con la descarga de archivos comprimidos de servidores externos.

Advertencia GZIP en GTmetrix

GTmetrix muestra una advertencia si tu sitio web no sirve recursos basados en texto comprimido. Al igual que Google PageSpeed Insights, también te mostrará el ahorro potencial que puedes conseguir.

Advertencia de "Habilitar la compresión" en GTmetrix
Advertencia de «Habilita la compresión» en GTmetrix

Nota: GTmetrix está actualizando su algoritmo de prueba de velocidad para reemplazar las antiguas bibliotecas PageSpeed Insights e YSlow con las últimas métricas de Google Lighthouse. Puedes esperar que su advertencia de compresión GZIP sea similar a la mostrada por Lighthouse.

Herramientas de Alerta GZIP en el Pingdom Tools

Pingdom Tools lanza una advertencia directa para comprimir los componentes de tu sitio web con GZIP.

Advertencia "Comprimir componentes con GZIP" en Pingdom Tools
Advertencia «Comprimir componentes con GZIP» en Pingdom Tools

En la sección de descripción, Pingdom Tools también te presenta algunas estadísticas sobre la importancia del GZIP. ¡Genial!

Advertencia GZIP en WebPageTest

WebPage Test muestra una advertencia en su pestaña de Revisión de Rendimiento si detecta que alguna respuesta comprimible no está siendo servida de la manera más optimizada.

Advertencia "Use GZIP compression" en WebPageTest
Advertencia «Usa GZIP compression» en WebPageTest

La prueba de la página web también te dará una puntuación para mostrar la gravedad de la advertencia. Por ejemplo, califica la advertencia anterior con una puntuación de 23 sobre 100, lo que significa que debes arreglarla con la mayor prioridad.

¿Cómo Comprobar Si La Compresión GZIP Está Activada?

El código de Accept-Encoding: gzip, deflate la cabecera HTTP es soportado efectivamente por todos los navegadores modernos. Por lo tanto, la mayoría de los alojamientos web habilitan la compresión GZIP (o compresión Brotli) por defecto en todos sus servidores.

Cuando los servidores web ven este encabezado enviado por un navegador, reconocen el soporte del navegador para GZIP y responden con una respuesta HTTP comprimida usando codificación de content-encoding: gzip cabecera.

Pero si estás usando otro proveedor de alojamiento, o si solo quieres confirmar si tu sitio web sirve contenido comprimido GZIP correctamente, comprueba siempre si está activado.

Abajo te mostramos algunas formas sencillas de comprobar la compresión del GZIP.

1. Herramientas de Prueba de Compresión GZIP Online

Usar una herramienta online es la forma más fácil de comprobar si la compresión GZIP está habilitada en tu sitio web. Recomiendo usar las herramientas gratuitas Check GZIP Compression o HTTP Compression Test. Simplemente ingresa la URL de tu sitio web y presiona el botón Comprobar o Probar.

Ambas herramientas en línea te mostrarán un breve informe sobre si el GZIP está habilitado o no, y la cantidad de transferencia de datos que ha guardado (o puede guardar) al servir la URL de la prueba con la compresión GZIP habilitada.

La primera herramienta también te mostrará otra información relevante como el tipo de servidor de tu sitio web, el tipo de contenido y el tiempo de compresión.

Probando la página web de Kinsta con la herramienta de compresión Check GZIP
Probando la página web de Kinsta con la herramienta de compresión Check GZIP

Nota: A partir del 5 de noviembre de 2021, Kinsta ha actualizado la compresión Brotli a través de Cloudflare para todas las solicitudes HTTPS. Puedes comprobar la compresión Brotli buscando content-encoding: br en las cabeceras de respuesta de una petición.

Probando Kinsta.com con la herramienta de prueba de compresión HTTP
Probando Kinsta.com con la herramienta TTP Compression Test

Debes tener en cuenta que la optimización del GZIP no se limita a tu página web, sino que también incluye sus activos estáticos basados en texto, como hojas de estilo, scripts y fuentes. Si utilizas una CDN para servir estos activos, debes asegurarte de que la CDN también los sirva con la compresión GZIP activada.

La mayoría de los CDN modernos como Cloudflare, Kinsta CDN, KeyCDN, y CloudFront soportan la compresión GZIP. Puedes probar los activos servidos por CDN para la compresión GZIP enlazando directamente a los activos.

Prueba de compresión GZIP para activos alojados en un CDN
Prueba de compresión GZIP para activos alojados en un CDN

En el informe anterior, puedes ver que la CDN de Kinsta utiliza el motor de KeyCDN, que es una CDN tradicional.

Nota: Kinsta ha cambiado a Cloudflare como su socio CDN para acelerar y asegurar los sitios de nuestros clientes. Puedes leer más sobre esto aquí.

Si utilizas Kinsta para alojar tu sitio, no tienes que preocuparte por nada de la compresión GZIP ya que activamos la compresión Brotli — una alternativa más rápida a la compresión GZIP — por defecto.

2. La cabecera de respuesta HTTP «content-encoding: gzip».

La segunda forma de verificar si un sitio web entrega contenido comprimido en GZIP es verificando la codificación del content-encoding: gzip de respuesta HTTP.

Puedes abrir Chrome DevTools o las herramientas de desarrollo de Firefox y buscar esta cabecera de respuesta en la sección Red.

Ya hemos enseñado cómo se ve en Chrome DevTools antes. Esto es lo que se ve en Herramientas para Desarrolladores de Firefox.

El encabezado "content-encoding: gzip" en Firefox Developer Tools
La cabecera «content-encoding: gzip» en Firefox Developer Tools

También puedes habilitar la opción «Usar filas de solicitudes grandes» en el panel de configuración de Chrome DevTools para ver tanto el tamaño original como el comprimido de la página. Como puedes ver a continuación, el tamaño original de la página se redujo de 118 KB a solo 22,9 KB después de comprimirla con GZIP.

Ver los tamaños de las páginas comprimidas y no comprimidas en Chrome Devtools
Ver los tamaños de las páginas comprimidas y no comprimidas en Chrome Devtools

3. Herramientas de Prueba de Velocidad de Páginas Web

La mayoría de las herramientas de prueba de velocidad de sitios web te advertirán de que no uses compresión como GZIP para servir sus páginas web. Muchos de los lectores que llegan a este artículo probablemente vienen por estas advertencias GZIP, muchas de las cuales ya hemos discutido anteriormente en profundidad.

Alertas GZIP en varias herramientas de pruebas de velocidad de páginas web
Alertas GZIP en varias herramientas de pruebas de velocidad de páginas web

Puedes usar herramientas como PageSPeed Insights, GTmetrix, Pingdom Tools, y WebPageTest para comprobar si tienes habilitada la compresión GZIP en tu sitio web de WordPress.

¿Cómo Activar la Compresión GZIP?

Si no tienes activada la compresión GZIP en tu servidor web, hay muchas formas de habilitarla. El método exacto depende del servidor web que estés usando para alojar tu sitio web.

Importante: Como siempre, haz una copia de seguridad de tu sitio y de los archivos de configuración del servidor antes de editarlos.

1. Habilitar GZIP con un Plugin de WordPress

La forma más fácil de habilitar la compresión GZIP en tu sitio de WordPress es usando un plugin de caché o de optimización de rendimiento.

Por ejemplo, si alojas tu sitio de WordPress en el servidor web Apache, W3 Total Cache incluye una opción para habilitar la compresión GZIP en su panel de configuración de Browser Cache.

De la misma manera, WP Rocket permite agregar reglas de compresión GZIP automáticamente. Estos plugins permiten la compresión GZIP añadiendo el módulo  mod_deflate de Apache al .htaccess file.

Habilitando la compresión GZIP en W3 Total Cache
Activando la compresión GZIP en W3 Total Cache

Los plugins de WordPress requieren permisos para modificar los archivos en tu servidor web. Si no tienen los permisos correctos, entonces fallarán o te mostrarán un error.

En tales casos, debes ponerte en contacto con tu proveedor de alojamiento o modificar manualmente los archivos de configuración de tu servidor web utilizando los fragmentos de código de abajo.

Nota: Kinsta ha optimizado su plataforma para un alto rendimiento, fiabilidad y seguridad. Esto también incluye la habilitación de la compresión GZIP por defecto para todos sus planes de alojamiento.

Dado que los plugins de cacheo de terceros pueden causar conflictos con las optimizaciones de rendimiento internas de Kinsta, Kinsta no permite la mayoría de ellos en sus servidores. Para más información, puedes ver la lista completa de los plugins prohibidos de Kinsta.

Activar GZIP en el Servidor Web Apache

Según Netcraft, Apache sirve más sitios activos que cualquier otro servidor web en uso hoy en día. También es uno de los dos servidores web recomendados.

Para habilitar la compresión GZIP en los servidores Apache, necesitas usar sus módulos mod_filtermod_deflate y configurarlos correctamente con las directivas adecuadas. Ellos dirigirán a Apache para que comprima la salida del servidor antes de enviarla a los clientes a través de la red.

Tienes dos opciones para editar la configuración del servidor de Apache según el nivel de acceso que tengas:

  1. Si puedes acceder al archivo de configuración del servidor principal (normalmente llamado httpd.conf), se recomienda usarlo para configurar Apache ya que los archivos .htaccess pueden ralentizar el funcionamiento de Apache.
  2. Si no puedes acceder al archivo de configuración del servidor principal, que suele ser el caso con la mayoría de los proveedores de hospedaje compartido de WordPress, entonces necesitas configurar Apache usando el archivo .htaccess.

La primera opción es estrictamente para los sysadmins, ya que los proveedores de hospedaje rara vez permiten editar el archivo de configuración del servidor principal. Explicar cómo hacerlo de esta manera está fuera del alcance de este artículo. Puedes referirte al ejemplo de Configuraciones del Servidor Apache compartidas por el proyecto Boilerplate HTML5 y a la documentación de Apache para empezar.

La segunda opción es ideal para la mayoría de los propietarios de sitios de WordPress, ya que muchos proveedores de alojamiento compartido permiten editar archivos .htaccess.

Para empezar, usa SFTP o el administrador de archivos en línea de tu host para encontrar el archivo .htaccess en el directorio raíz de tu sitio de WordPress. Luego agrega el siguiente fragmento de código.

Importante: Asegúrate de que el módulo mod_filter está activo en tu servidor. La mayoría de los hosts web lo tienen activado por defecto, pero si no lo está, la directiva AddOutputFilterByType no funcionará y puede provocar un error HTTP 500. Puedes comprobar los registros de errores de tu servidor si tienes algún problema después de añadir el fragmento de código a continuación.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and 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  

  # Remove browser bugs (only needed for ancient browsers)
  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>

Añade el código anterior sólo después de las directivas existentes de tu archivo .htaccess. Guarda el archivo y luego comprueba si permite la compresión GZIP en tu servidor.

Ejemplo de archivo Apache . htaccess después de habilitar la compresión GZIP
Ejemplo de archivo Apache .htaccess después de habilitar la compresión GZIP

Tu servidor web debería servir ahora archivos comprimidos para todas las extensiones de archivo listadas arriba. Puedes confirmar esto usando cualquiera de los métodos mencionados anteriormente.

Si quieres asegurarte de que los proxies y el software de seguridad del lado del cliente no interfieran con la compresión del GZIP, puedes reemplazar el fragmento de código anterior por el siguiente.

<IfModule mod_deflate.c>
  # force compression for clients that mangle 'Accept-Encoding' request headers
  <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
  </IfModule>

  # compress all output with one of the following file extensions
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/atom+xml" \
                                  "application/javascript" \
                                  "application/json" \
                                  "application/ld+json" \
                                  "application/manifest+json" \
                                  "application/rdf+xml" \
                                  "application/rss+xml" \
                                  "application/schema+json" \
                                  "application/geo+json" \
                                  "application/vnd.ms-fontobject" \
                                  "application/wasm" \
                                  "application/x-font-ttf" \
                                  "application/x-javascript" \
                                  "application/x-web-app-manifest+json" \
                                  "application/xhtml+xml" \
                                  "application/xml" \
                                  "font/eot" \
                                  "font/opentype" \
                                  "font/otf" \
                                  "font/ttf" \
                                  "image/bmp" \
                                  "image/svg+xml" \
                                  "image/vnd.microsoft.icon" \
                                  "text/cache-manifest" \
                                  "text/calendar" \
                                  "text/css" \
                                  "text/html" \
                                  "text/javascript" \
                                  "text/plain" \
                                  "text/markdown" \
                                  "text/vcard" \
                                  "text/vnd.rim.location.xloc" \
                                  "text/vtt" \
                                  "text/x-component" \
                                  "text/x-cross-domain-policy" \
                                  "text/xml"
  </IfModule>

  # define and map media types to their appropriate encoding type    
  # Using SVG format (Scalable Vector Graphics) is highly recommended to    
  # load logos, icons, text, and simple images. You can compress .SVG files
  # further using GZIP to create .SVGZ files. However, most browsers don’t
  # know that they need to decompress them first if they’re not served
  # without an appropriate ‘content-encoding’ HTTP response header. Thus,
  # these images wouldn’t show up in the browser. Hence, this module.

  <IfModule mod_mime.c>
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
  </IfModule>

</IfModule>

Puedes aprender más sobre todas las directivas usadas aquí yendo a su repositorio de código y siguiendo todos los recursos enlazados allí.

Habilitar GZIP en el Servidor Web de Nginx

Según Netcraft, Nginx es el servidor web más utilizado por las computadoras de cara a la web. Si la tendencia actual continúa, pronto superará a Apache para convertirse en el servidor web más utilizado por los sitios activos. Incluso Kinsta usa Nginx para potenciar sus soluciones de alojamiento optimizadas para WordPress.

Puedes habilitar la compresión GZIP en tu servidor web Nginx usando las directivas definidas en el módulo ngx_http_gzip_module.

Para empezar, agrega las directivas que se indican a continuación a tu archivo nginx.conf. Normalmente, puedes encontrar este archivo en la ubicación /etc/nginx/nginx.conf de tu servidor.

# enables GZIP compression
gzip on; 

# compression level (1-9)
# 6 is a good compromise between CPU usage and file size
gzip_comp_level 6;

# minimum file size limit in bytes to avoid negative compression outcomes
gzip_min_length 256;

# compress data for clients connecting via proxies
gzip_proxied any;

# directs proxies to cache both the regular and GZIP versions of an asset
gzip_vary on;

# disables GZIP compression for ancient browsers that don't support it
gzip_disable "msie6";

# compress outputs labeled with the following file extensions or MIME-types
# text/html MIME-type is enabled by default and need not be included
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

Si tu sitio sirve grandes archivos JS y CSS, entonces puedes aumentar el tamaño del buffer usado para la compresión agregando la siguiente directiva a tu archivo nginx.conf:

# sets the 'number' and 'size' of buffers for GZIP compression
# default buffer size is 4K or 8K depending on the platform
gzip_buffers 16 8k;

No te olvides de recargar Nginx después de guardar tu archivo nginx.conf.

sudo service nginx reload

Finalmente, deberías probar si tu servidor tiene habilitada la compresión GZIP. Puede utilizar la documentación de Nginx para una lista actualizada de todas las directivas ngx_http_gzip_module.

Habilitar GZIP en el Servidor Web de IIS

Los Servicios de Información de Internet de Microsoft (IIS) es el tercer servidor web más popular en uso hoy en día. IIS se despliega principalmente en entornos empresariales que funcionan con Windows, especialmente para configurar servidores de intranet y extranet específicos de la empresa.

Rara vez se utiliza para alojar sitios de WordPress debido a varios problemas de compatibilidad.

Sin embargo, si te encuentras en una de esas raras situaciones en las que necesitas habilitar la compresión GZIP en IIS, puedes consultar la documentación de Microsoft para empezar. También puedes encontrar útil este hilo de Stack Overflow.

Alternativas a la Compresión GZIP

El mundo de la compresión de datos en la web siempre está avanzando. Con el tamaño promedio del peso de la página aumentando constantemente, la tecnología de la web está tratando de alcanzarlo también para hacer más eficiente la transferencia de datos a través de la web.

Aumento del tamaño del peso de la página con el tiempo (Fuente: HTTPArchive)
Aumento del tamaño del peso de la página con el tiempo (Fuente: HTTPArchive)

Un nuevo algoritmo de compresión ha ganado amplia popularidad en los últimos años: Brotli. La compresión de fuentes web WOFF2 era el principal objetivo de Brotli originalmente, pero desde entonces se ha expandido para soportar la compresión de cualquier tipo de datos.

Brotli comprime los datos mejor que el GZIP, pero requiere considerablemente más tiempo y recursos para comprimir los datos. Sin embargo, su tiempo de descompresión es comparable al del GZIP, aunque sigue siendo un poco más lento.

El soporte de Brotli en varios navegadores
El soporte de Brotli en varios navegadores

La mayoría de los navegadores soportan Brotli hoy en día, pero usarlo en sitios de WordPress es todavía algo complicado. Debes alojar tu sitio con un proveedor de alojamiento que soporte Brotli o que te permita instalar la biblioteca Brotli. La mayoría de los alojamientos administrados de WordPress no lo soportan completamente todavía, pero si usas un CDN como Cloudflare o KeyCDN, puedes habilitarlo fácilmente.

Brotli es muy prometedor para los activos estáticos de compresión. Akamai ha publicado un artículo detallado que compara Brotli con GZIP. Puedes consultarlo para obtener más información sobre Brotli.

Resumen

Una web bien optimizada es genial para todos. A los usuarios les encantan los sitios web más rápidos, a los propietarios de los sitios web les encanta la reducción de los costos de alojamiento y a los hosts web les encanta la optimización lograda en sus servidores. Las técnicas de compresión como GZIP son una de las mejores formas de acelerar los tiempos de carga de las páginas para tus visitantes.

Los propietarios de sitios de WordPress pueden acelerar sus sitios instantáneamente habilitando la compresión GZIP. Kinsta lo habilita por defecto en todos sus servidores, pero para otros, este artículo cubre múltiples formas de habilitar la compresión GZIP en varios servidores web.

La velocidad es crítica para cualquier sitio web. ¡Solo comprime!

Salman Ravoof

Salman Ravoof es desarrollador web autodidacta, escritor, creador y un gran admirador del Software Libre y de Código Abierto (FOSS, Free and Open Source Software). Además de la tecnología, le apasionan la ciencia, la filosofía, la fotografía, las artes, los gatos y la comida. Obtén más información sobre él en su sitio web, y conecta con Salman en X.