Cómo habilitar la compresión GZIP para acelerar los sitios de WordPress

Publicado: 2020-10-16

La forma más fácil de acelerar su sitio de WordPress es eliminar todos sus recursos no deseados. La segunda forma más fácil de acelerarlo es comprimir todos sus recursos deseados. Habilitar la compresión GZIP en su 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 sus usuarios sin contratiempos, debe configurar su servidor correctamente.

En esta publicación, aprenderá los conceptos básicos de la compresión de datos en la web, qué es la compresión GZIP, sus diversos beneficios y cómo puede usarla para acelerar sus sitios de WordPress en diferentes configuraciones de servidor.

¿Emocionado? ¡Descomprimámonos!

¿Prefieres ver la versión en video?

La forma más fácil de acelerar tu sitio de #WordPress: deshazte de los recursos no deseados. La segunda forma más fácil: comprimir todos los recursos deseados. Aprende a hacer esto rápidamente con la compresión GZIP Haz clic para twittear

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. Según el tipo de datos (texto, imágenes, hojas de estilo, secuencias de comandos, fuentes), existen varias formas de comprimir los datos.

Una ilustración de los componentes principales de una página web
Los componentes principales 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 caracteres innecesarios como comentarios y espacios en blanco del código fuente.

En el siguiente ejemplo de un documento HTML simple, hay tres tipos de contenido: marcado HTML, estilos CSS y código JavaScript.

Cada tipo de contenido tiene una sintaxis y una 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 > <!-- kinsta banner START --> < div >...</ div > <!-- kinsta banner END --> < script > kinstaScripts(); // random scripts used on the page </ script > </ body > </ html >

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

 < 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 es un ahorro del 60,50% en el número de caracteres. No es tan agradable a la vista, pero eso no le importa al navegador. Seguirá mostrando la misma página al usuario.

Para aprovechar ambas versiones, puede mantener el documento original como una "versión de desarrollo", pero minimice todo el código antes de publicarlo.

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

Comparación de tamaño de archivo de jQuery sin comprimir vs minimizado
Compresión de tamaño de archivo de jQuery sin comprimir vs minimizado

Como ejemplo, la versión sin comprimir de la biblioteca jQuery 3.5.1 es más de 3 veces más grande que la versión reducida del mismo archivo.

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

Pero hay más en la compresión de datos que solo la minificación. Usando 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 en la web. Le permite reducir el tamaño de las páginas HTML, las hojas de estilo y los scripts de su sitio.

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

Se basa en el algoritmo DEFLATE, que es una combinación de algoritmos de codificación LZ77 y Huffman.

Una ilustración de cómo 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 sin procesar y los comprime sin pérdidas. Los datos sin procesar pueden ser de cualquier tipo de archivo, pero GZIP funciona mejor con recursos basados ​​en texto (p. ej., HTML, CSS, JS).

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

Cómo comprime datos GZIP

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 en los datos sin procesar para eliminar las redundancias. Este algoritmo funciona al encontrar patrones repetidos en una ventana deslizante predefinida (una pequeña sección de los datos sin procesar).

Luego reemplaza todas las cadenas repetidas con tuplas para comprimir los datos sin procesar.

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

En el ejemplo anterior, el tamaño de la ventana deslizante tiene solo 13 caracteres (13 bytes). Sin embargo, la compresión GZIP puede usar un tamaño máximo de ventana deslizante de 32 KB (32 768 bytes). El tamaño de la ventana deslizante juega un papel clave en el rendimiento de compresión LZ77.

Después de comprimir los datos sin procesar con el algoritmo LZ77, el compresor GZIP usa el algoritmo de codificación Huffman para comprimirlos aún más. Para ello, asigna a los caracteres que ocurren con más 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 que se usa en el código Morse, donde las letras que aparecen con mayor frecuencia en el idioma inglés obtienen las secuencias más cortas.

Para comprender cómo funciona el algoritmo de codificación de Huffman, considere la palabra BOOKKEEPER . Tiene 10 caracteres de largo, pero solo tiene 6 caracteres únicos. Esta palabra tiene una buena combinación 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, usa 1 byte (8 bits).

La palabra “CONTADOR” tiene muchas letras que se repiten
La palabra “CONTADOR” tiene muchas letras que se repiten

Una cadena de 10 caracteres como BOOKKEEPER requerirá 10 bytes (80 bits) de memoria. Puede ver que contiene 1 instancia de las letras B , P , R , 2 instancias de las letras O y K , 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 con la frecuencia más baja (p. ej. B , P , R ) se encontrarán en la parte inferior del árbol, mientras que las que aparecen con frecuencia (p. ej. E , O , K ) se encontrarán idealmente en la parte superior.

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

Árbol de Huffman para la palabra “CONTADOR”
Árbol de Huffman para la palabra “CONTADOR”

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

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

Puede notar que las letras con la frecuencia más alta tienen códigos Huffman con los tamaños de bits más pequeños.

Nota: el algoritmo de codificación de Huffman puede generar códigos binarios alternativos mediante el uso de una estrategia de ordenación diferente para 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 es una reducción del 68,75 % en la memoria requerida 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 de prefijo. Garantiza que el código de Huffman de cualquier carácter específico no sea un prefijo del código de ningún otro carácter, lo que facilita la decodificación de la cadena codificada mediante el árbol de Huffman. Esto juega un papel principal en la velocidad de descompresión de 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 extensión .gz.

Si está interesado en obtener más información sobre cómo funciona GZIP, consulte este video para obtener una descripción general rápida.

¿Qué tan buena es la compresión GZIP?

Por lo general, GZIP logra una tasa de compresión de alrededor del 70 % para archivos pequeños, pero puede alcanzar hasta el 90 % para activos basados ​​en texto más grandes.

Comparación de relaciones de compresión GZIP para varias bibliotecas CSS y JS
Relaciones de compresión GZIP para algunas bibliotecas CSS y JS populares

En la tabla anterior, puede ver que comprimir archivos minificados con GZIP puede reducir aún más su tamaño.

Nota: puede comprimir cualquier tipo de archivo con GZIP, pero para los activos ya comprimidos con otros métodos (por ejemplo, imágenes, videos), no representará 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 qué tan rápido y eficientemente puede comprimir y descomprimir datos. Ahí es donde GZIP sobresale en la mayoría de los casos de uso.

Dado que GZIP se descomprime rápidamente mediante un algoritmo de transmisión, se adapta perfectamente a los protocolos web donde la velocidad es esencial. Además, GZIP usa 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 anteriores comparan el rendimiento de compresión de los algoritmos de compresión brotli , bzip2 , gzip y xz . GZIP pierde en la prueba de relación de compresión por un ligero margen, pero en cuanto a velocidades de compresión y descompresión, supera a la competencia por completo.

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

Nota: una abstracción de la biblioteca de compresión de GZIP llamada zlib se usa en muchos sistemas operativos populares (Linux, macOS, iOS) y consolas de juegos modernas (PlayStation 4, Wii U, Xbox One). También se usa 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 a las ventajas más importantes de la compresión GZIP.

Ofrece una relación de compresión decente

Como se mencionó anteriormente, GZIP no tiene la mejor relación de compresión en comparación con su competencia. Pero tampoco está tan lejos de ellos. Por lo general, puede ayudarlo 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 las velocidades de compresión y descompresión de datos, GZIP es el claro ganador. Es muy deseable para la compresión sobre la marcha en servidores HTTP y otros flujos de datos.

Requiere muy poca memoria

GZIP deja una huella de memoria mínima, lo que lo hace adecuado para servidores y sistemas con capacidad de memoria limitada. Por lo tanto, lo encontrará compatible incluso con 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érdida como GZIP tienen un límite estricto más allá del cual no pueden comprimir datos.

Por lo general, esto sucede cuando el recurso ya está bien comprimido, o si es pequeño y la sobrecarga de agregar el diccionario GZIP es mayor que los ahorros de compresión. Podemos atribuir este fenómeno a un concepto llamado codificación de entropía. GZIP es altamente resistente a este efecto.

De uso gratuito y código abierto

GZIP se creó principalmente como un reemplazo gratuito de código abierto para el programa de compresión patentado que se usaba en los primeros sistemas Unix. Por lo tanto, no está gravado con ninguna patente y puede ser utilizado libremente por cualquier persona.

Disfruta del soporte universal

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

GZIP es compatible con casi todos los servidores y clientes. No importa en qué servidor alojes tu sitio, puedes acelerarlo habilitando GZIP en él.

Advertencias de GZIP en las herramientas de prueba de velocidad del sitio web

Junto a la minificación, habilitar GZIP es una de las optimizaciones de velocidad más simples y efectivas que puede implementar en su sitio web.

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

Cuando visita un sitio web, su navegador verifica si el servidor web tiene GZIP habilitado al verificar la content-encoding: gzip . Si el encabezado existe, recupera los archivos comprimidos, los descomprime y luego le entrega automáticamente los archivos más pequeños.

El encabezado de respuesta "codificación de contenido: gzip"
El encabezado de respuesta "codificación de contenido: gzip" en Chrome DevTools

Si el navegador no detecta el encabezado de respuesta GZIP, descarga los archivos sin comprimir. 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 tiene habilitado GZIP, verá advertencias en las herramientas de prueba de velocidad del sitio web.

Advertencia de GZIP en Google PageSpeed ​​Insights / Lighthouse

Google PageSpeed ​​Insights muestra una advertencia cuando no tiene habilitada ninguna compresión de texto en su sitio web.

Nota: Google PageSpeed ​​Insights y Google Lighthouse eran dos herramientas de prueba de rendimiento de sitios web independientes. Trabajaron de forma independiente hasta 2018, cuando Google actualizó PageSpeed ​​Insights para usar Lighthouse como su motor de análisis. Por lo tanto, PageSpeed ​​Insights y Lighthouse son lo mismo ahora.

Advertencia "Habilitar compresión de texto" en Google PageSpeed ​​Insights
Advertencia "Habilitar compresión de texto" en Google PageSpeed ​​Insights

En el sitio de ejemplo anterior, la compresión de recursos basados ​​en 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 los encabezados de respuesta que el servidor devuelve a su navegador. A veces, puede mostrar una advertencia falsa incluso cuando tiene habilitada la compresión GZIP. Puede deberse 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 desde servidores externos.

Advertencia de GZIP en GTmetrix

GTmetrix muestra una advertencia si su sitio web no ofrece recursos basados ​​en texto comprimido. Al igual que Google PageSpeed ​​Insights, también le mostrará los ahorros potenciales que puede lograr.

Advertencia de "Habilitar compresión" en GTmetrix
Advertencia de "Habilitar 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. Puede esperar que su advertencia de compresión GZIP sea similar a la que muestra Lighthouse.

Advertencia de GZIP en las herramientas de Pingdom

Pingdom Tools arroja una advertencia directa para comprimir los componentes de su 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 le brinda algunas estadísticas sobre la importancia de GZIP. Frijoles frescos!

Advertencia de GZIP en WebPageTest

WebPageTest muestra una advertencia en su pestaña Revisión de rendimiento si detecta que las respuestas comprimibles no se están entregando de la manera más optimizada.

Advertencia "Usar compresión GZIP" en WebPageTest
Advertencia "Usar compresión GZIP" en WebPageTest

WebPageTest también otorgará una puntuación calificada para mostrar la gravedad de una advertencia. Por ejemplo, califica la advertencia anterior con 23 de 100, lo que significa que debe solucionarlo como una prioridad.

Cómo verificar si la compresión GZIP está habilitada

El encabezado HTTP Accept-Encoding: gzip, deflate es compatible con todos los navegadores modernos. Por lo tanto, la mayoría de los servidores web, incluido Kinsta, habilitan la compresión GZIP de forma predeterminada en todos sus servidores.

Cuando los servidores web ven este encabezado enviado por un navegador, reconocen la compatibilidad del navegador con GZIP y responden con una respuesta HTTP comprimida utilizando content-encoding: gzip .

Pero si está utilizando otro proveedor de alojamiento de WordPress, o si solo desea confirmar si su sitio web ofrece contenido comprimido GZIP correctamente, siempre verifique si está habilitado.

A continuación se muestran algunas formas sencillas de verificar la compresión GZIP.

1. Herramientas de prueba de compresión GZIP en línea

Usar una herramienta en línea es la forma más fácil de verificar si la compresión GZIP está habilitada en su sitio web. Recomiendo usar las herramientas gratuitas Check GZIP Compression o HTTP Compression Test. Simplemente ingrese la URL de su sitio web y presione el botón Verificar o Probar .

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

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

Probando la página de inicio de Kinsta con la herramienta de compresión Check GZIP
Probando la página de inicio de Kinsta con la herramienta de compresión Check GZIP
Probar Kinsta.com con la herramienta de prueba de compresión HTTP
Probar Kinsta.com con la herramienta de prueba de compresión HTTP

Debe tener en cuenta que la optimización de GZIP no solo se detiene en su página web, sino que también incluye sus activos basados ​​en texto estático, como hojas de estilo, scripts y fuentes. Si está utilizando una CDN para servir estos activos, debe asegurarse de que la CDN también los sirva con la compresión GZIP habilitada.

La mayoría de las CDN modernas, como Cloudflare, Kinsta CDN, KeyCDN y CloudFront, admiten la compresión GZIP. Puede probar los activos servidos por CDN para la compresión GZIP al vincularlos directamente a los activos.

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

En el informe anterior, puede ver que Kinsta CDN usa el motor KeyCDN, que es un CDN de extracción tradicional. Si está utilizando Kinsta para alojar su sitio de WordPress, no tiene que preocuparse por nada acerca de la compresión GZIP, ya que está habilitada de manera predeterminada.

2. El encabezado de respuesta HTTP "codificación de contenido: gzip"

La segunda forma de verificar si un sitio web entrega contenido comprimido GZIP es verificando la content-encoding: gzip .

¿Cansado del soporte de alojamiento de WordPress de nivel 1 mediocre sin las respuestas? ¡Pruebe nuestro equipo de soporte de clase mundial! Consulta nuestros planes

Puede abrir Chrome DevTools o Firefox Developer Tools y buscar este encabezado de respuesta en la sección Red .

Ya mostré cómo se ve en Chrome DevTools anteriormente. Así es como se ve en las herramientas de desarrollo de Firefox.

El encabezado "codificación de contenido: gzip" en las herramientas para desarrolladores de Firefox
El encabezado "codificación de contenido: gzip" en las herramientas para desarrolladores de Firefox

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

Ver los tamaños de página comprimidos y sin comprimir en Chrome Devtools
Ver los tamaños de página comprimidos y sin comprimir en Chrome Devtools

3. Herramientas de prueba de velocidad de página web

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

Advertencias de GZIP en varias herramientas de prueba de velocidad de páginas web
Advertencias de GZIP en varias herramientas de prueba de velocidad de páginas web

Puede usar herramientas como PageSPeed Insights, GTmetrix, Pingdom Tools y WebPageTest para verificar si tiene habilitada la compresión GZIP en su sitio web de WordPress.

Cómo habilitar la compresión GZIP

Si no tiene habilitada la compresión GZIP en su servidor web, hay muchas formas de habilitarla. El método exacto depende del servidor web que esté utilizando para alojar su sitio web.

Importante: como siempre, haga una copia de seguridad de su sitio y de los archivos de configuración del servidor antes de editarlos.

Habilite GZIP con un complemento de WordPress

La forma más fácil de habilitar la compresión GZIP en su sitio de WordPress es mediante el uso de un complemento de optimización de rendimiento o almacenamiento en caché.

Por ejemplo, si aloja su 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 Caché del navegador .

Asimismo, WP Rocket te permite agregar reglas de compresión GZIP automáticamente. Estos complementos permiten la compresión GZIP agregando el módulo mod_deflate de Apache al archivo .htaccess.

Habilitación de la compresión GZIP en W3 Total Cache
Habilitación de la compresión GZIP en W3 Total Cache

Los complementos de WordPress requieren permisos para modificar archivos en su servidor web. Si no tienen los permisos correctos, fallarán o le mostrarán un error.

En tales casos, debe comunicarse con su proveedor de alojamiento o modificar los archivos de configuración de su servidor web manualmente utilizando los fragmentos de código a continuación.

Nota: Kinsta ha optimizado su plataforma para un alto rendimiento, confiabilidad y seguridad. Esto también incluye habilitar la compresión GZIP de forma predeterminada para todos sus planes de alojamiento.

Dado que los complementos de almacenamiento en caché 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 obtener más información, puede ver la lista completa de complementos prohibidos de Kinsta.

Habilitar GZIP en el servidor web Apache

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

Para habilitar la compresión GZIP en los servidores Apache, debe usar sus módulos mod_filter y mod_deflate y configurarlos correctamente con las directivas correctas. Le indicarán a Apache que comprima la salida del servidor antes de enviarla a los clientes a través de la red.

Tiene dos opciones para editar las configuraciones del servidor de Apache según el nivel de acceso que tenga:

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

La primera opción es estrictamente para administradores de sistemas, ya que los proveedores de alojamiento rara vez le 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. Puede consultar las configuraciones del servidor Apache de muestra compartidas por el proyecto HTML5 Boilerplate y la documentación de Apache para comenzar.

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

Para comenzar, use SFTP o el administrador de archivos en línea de su host para encontrar el archivo .htaccess en el directorio raíz de su sitio de WordPress. Luego agregue el fragmento de código a continuación.

Importante: asegúrese de que el módulo mod_filter esté activo en su servidor. La mayoría de los servidores web lo tienen habilitado de forma predeterminada, pero si no es así, la directiva AddOutputFilterByType no funcionará y puede arrojar un error HTTP 500. Puede consultar los registros de errores de su servidor si tiene algún problema después de agregar 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>

Agregue el código anterior solo después de las directivas existentes de su archivo .htaccess . Guarde el archivo y luego verifique si habilita la compresión GZIP en su 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

Su servidor web ahora debería servir archivos comprimidos para todas las extensiones de archivo enumeradas anteriormente. Puede confirmar esto utilizando cualquiera de los métodos mencionados anteriormente.

Si desea asegurarse de que los proxies y el software de seguridad del lado del cliente no interfieran con la compresión GZIP, puede reemplazar el fragmento de código anterior con 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>

Puede obtener más información sobre todas las directivas utilizadas aquí yendo a su repositorio de código y siguiendo todos los recursos vinculados allí.

Habilitar GZIP en el servidor web Nginx

Según Netcraft, Nginx es el servidor web más utilizado por las computadoras orientadas 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 de rendimiento optimizado para WordPress.

Puede habilitar la compresión GZIP en su servidor web Nginx usando las directivas definidas en ngx_http_gzip_module.

Para comenzar, agregue las directivas que se dan a continuación a su archivo nginx.conf . Por lo general, puede encontrar este archivo en la ubicación /etc/nginx/nginx.conf de su 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 su sitio sirve archivos JS y CSS grandes, puede aumentar el tamaño del búfer utilizado para la compresión agregando la siguiente directiva a su 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 olvide volver a cargar Nginx después de guardar su archivo nginx.conf .

 sudo service nginx reload

Finalmente, debe probar para ver si su servidor tiene habilitada la compresión GZIP. Puede consultar la documentación de Nginx para obtener una lista actualizada de todas las directivas ngx_http_gzip_module .

Habilitar GZIP en el servidor web IIS

Internet Information Services (IIS) de Microsoft es el tercer servidor web más popular en uso en la actualidad. IIS se implementa principalmente en entornos empresariales que se ejecutan en Windows, especialmente para configurar servidores de intranet y extranet específicos de la empresa.

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

Sin embargo, si se encuentra en una de esas raras situaciones en las que necesita habilitar la compresión GZIP en IIS, puede consultar la documentación de Microsoft para comenzar. También puede encontrar útil este hilo de desbordamiento de pila.

Alternativas a la compresión GZIP

El mundo de la compresión de datos en la web siempre avanza. Dado que el tamaño promedio de la página aumenta constantemente, la tecnología web también está tratando de ponerse al día para hacer que la transferencia de datos a través de la web sea más eficiente.

Aumento del peso de la página a lo largo del tiempo (Fuente: HTTPArchive)
Aumento del peso de la página a lo largo del tiempo (Fuente: HTTPArchive)

Un nuevo algoritmo de compresión ha ganado gran popularidad en los últimos años: Brotli. La compresión de fuentes web WOFF2 fue el enfoque principal de Brotli originalmente, pero desde entonces se ha ampliado para admitir la compresión de cualquier tipo de datos.

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

Compatibilidad con Brotli en varios navegadores
Compatibilidad con Brotli en varios navegadores

La mayoría de los navegadores son compatibles con Brotli hoy en día, pero usarlo en sitios de WordPress todavía es algo complicado. Debe alojar su sitio con un proveedor de alojamiento que admita Brotli o le permita instalar la biblioteca de Brotli. La mayoría de los hosts de WordPress administrados aún no lo admiten por completo, pero si usa un CDN como Cloudflare o KeyCDN, puede habilitarlo fácilmente.

Brotli muestra una gran promesa para la compresión de activos estáticos. Akamai ha publicado un artículo detallado que compara Brotli con GZIP. You can check it out to learn more about Brotli.

Ready to speed up your site? ️ Enabling GZIP compression on your web server is one of the simplest and most efficient ways to achieve that. Learn how with this step-by-step walkthrough ️ Click to Tweet

Resumen

A well-optimized web is great for everyone. Users love snappier websites, website owners love the reduced hosting charges, and web hosts love the optimization achieved on their servers. Compression techniques like GZIP are one of the best ways to speed up page load times for your visitors.

WordPress site owners can speed up their sites instantly by enabling GZIP compression. Kinsta enables it by default on all its servers, but for others, this article covers multiple ways to enable GZIP compression on various web servers.

Speed is critical for any website. Just compress!