¿Cómo Habilitar Compresión GZIP en WordPress?

Para tener tiempos de carga rápidos en su sitio WordPress disminuir el tamaño del sitio es crucial. Esta puede ser la diferencia entre un sitio que se carga dentro de un segundo, u otro que se arrastra. Habilitar la compresión GZIP puede ayudar a reducir el tamaño de su página web que significativamente disminuye el tiempo para descargar los recursos, uso de datos del cliente y mejora el tiempo hasta el primer byte.

Todos los navegadores modernos la apoyan y automáticamente colaboran con compresión GZIP para servir todas las solicitudes HTTP. Hoy vamos a compartir cómo revisar y habilitar compresión GZIP en su servidor web.

• ¿Qué Es Compresión GZIP?
• Cómo Verificar Si la Compresión GZIP Está Habilitada
• Cómo Habilitar Compresión GZIP

¿Qué Es Compresión GZIP?

GZIP es un formato de archivo y una aplicación de software utilizado para comprimir y descomprimir archivos. La compresión GZIP es habilitada en el lado del servidor y permite la reducción adicional de su HTML, stylesheets y archivos JavaScript. No trabajará con imágenes ya estas son comprimidas de una manera diferente. Algunos han experimentado hasta 70% de reducción gracias a la compresión. Es probablemente la optimización más fácil que uno puede hacer cuando se trata de WordPress.

Compresión es el proceso de cifrar información usando menos bits. — Ilya Grigorik, Google

Cuando un navegador visita un sitio web chequea si el servidor web tiene GZIP habilitada verificando si la cabecera de respuesta “content-encoding: gzip” existe. Si encuentra la cabecera presenta los archivos más pequeños, si no la encuentra presenta los archivos sin comprimir. Si usted no tiene GZIP habilitada muy probablemente verá advertencias y errores en las herramientas de prueba de velocidad tal como Google PageSpeed Insight y GTmetrix.

Advertencia GZIP en Google PageSpeed Insights

Como se puede ver Google dice que la compresión de los recursos con GZIP o desinflar puede reducir el número de bytes enviados a través de la red.

Advertencia de habilitar comprensión en Google PageSpeed Insights

Advertencia GZIP en GTmetrix

GTmetrix también tiene una recomendación para habilitar compresión GZIP para reducir el tamaño de transferencia de los recursos estáticos.

Advertencia de habilitar comprensión GZIP en GTmetrix

Cómo Verificar Si la Compresión GZIP Está Habilitada

GZIP es muy común en nuestros días y es habilitada por defecto en todos los servidores de Kinsta. No hay que preocuparse por el soporte de GZIP por los navegadores ya que muchos la habían soportado desde hace 17 años. Aquí viene una lista de los navegadores que pueden manejar la cabecera de respuesta HTTP “content-encoding: gzip”:

• Internet Explorer 5.5+ (Julio 2000)
• Opera 5+ (Junio 2000)
• Firefox 0.9.5+ (Octubre 2001)
• Chrome (después del lanzamiento en 2008)
• Safari (poco después del primer lanzamiento 2003)

Si usted trabaja con otro host de WordPress es mejor verificar y asegurarse que la compresión GZIP sea habilitada ya que los admins de los servidores a veces ignoran esta optimización. Hay un par de maneras rápidas para chequear el estado de la compresión GZIP:

1. Herramienta Check GZIP Compression

La primera forma y la más rápida para verificar si la compresión GZIP es habilitada en su sitio es simplemente utilizar la herramienta Check GZIP compression. Introduzca la dirección de su sitio y haga click en buscar. La herramienta mostrará la cantidad de bytes ahorrada por comprimir la página con GZIP. O al contrario mostrará un error informándole que GZIP no es habilitada. Como se puede ver en nuestra prueba abajo hemos ahorrado 66.9%.

Herramienta de Check GZIP compression

Y recuerde que GZIP aplica activos estáticos también lo que significa que si usted sirve activos de una CDN debe asegurarse de que la CDN tenga la compresión GZIP habilitada.  Todos los proveedores modernos de CDN apoyan la compresión GZIP, tal como Kinsta CDN, CloudFlare, KeyCDN y CloudFront. Otra prueba puede ver es la ejecución de uno de sus archivos CSS o JavaScript en la CDN a través del este instrumento.

Check GZIP compression en CDN

2. Cabecera de Respuesta HTTP de GZIP content-encoding

La segunda manera es chequear si la cabecera de respuesta “content-encoding: gzip” está activa en su sitio. El navegador busca estas cabeceras al enviar una solicitud al servidor. Usted puede abrir Chrome Devtools y ver su primera cabecera de respuesta bajo la sección “Network”.

content-encoding: gzip HTTP cabecera de respuesta

También puede hacer clic en la opción “view large requests” y le mostrará el tamaño original y comprimido de la página. Como se puede ver abajo la página original era de 51.6 KB y la versión comprimida con GZIP es de 17.7 KB.

Ver tamaño comprimido de la página en Chrome Devtools

Cómo Habilitar Compresión GZIP

Si usted no tiene la compresión GZIP habilitada hay varias soluciones que puede elegir en su servidor web.

Habilitar GZIP con WordPress Plugin

La primera manera y la más fácil es utilizar un cache plugin que soporta habilitar GZIP. WP Rocket por ejemplo añade las reglas de compresión GZIP en su archivo .htaccess automáticamente usando el módulo mod_deflate. W3 Total Cache también tiene una forma de habilitarla bajo su sección de rendimiento. A pesar de que estos son plugins siguen dependiendo de permisos para modificar archivos en su servidor web. Si su cache plugin no tiene permiso usted deberá pedirlo de su host o utilizar este fragmento de código abajo.

Habilitar GZIP en Apache

La segunda forma de habilitar la compresión GZIP es editando su archivo .htaccess. La mayoría de los hosts compartidos usan Apache donde simplemente hay que añadir el código que ve a continuación a su archivo .htaccess. Usted puede encontrar su archivo .htaccess en la raíz de su sitio WordPress vía FTP.

Importante: Asegúrese de que mod_filter esté cargado en su servidor de lo contrario la directiva AddOutputFilterByType no funcionará y puede causar un error 500. Recomendamos verificar sus error logs si tiene cualquier problema con el código abajo.

<IfModule mod_deflate.c>
  # Comprimir HTML, CSS, JavaScript, Text, 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 browser bugs (necesario en caso de navegadores realmente antiguos)
  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>

Asegúrese de que añada debajo de los contenidos actuales de su archivo .htaccess. Ejemplo abajo:

Ejemplo de código GZIP Apache .htaccess

Habilitar GZIP en NGINX

Si está ejecutando en NGINX simplemente añada el código siguiente a su archivo nginx.conf.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Habilitar GZIP en IIS

Si está ejecutando en IIS, hay dos tipos distintos de compresión, estática y dinámica. Recomendamos leer la guía de Microsoft sobre cómo habilitar compresión.