API CompressionStream: Optimiza tus transferencias de datos de forma nativa

En la web moderna, la velocidad es una prioridad. Cada byte enviado entre un servidor y un usuario tiene un impacto en el tiempo de carga. Cuanto más pesados son los datos, más lenta parece la aplicación, especialmente en teléfonos móviles o con una mala conexión.

Hasta hace poco, la compresión de datos en el lado del cliente requería la importación de bibliotecas de terceros masivas como pako o zlib.js. Estas herramientas añaden peso a tu aplicación incluso antes de que empiece a funcionar. Hoy en día, existe una solución integrada: la API CompressionStream.

#¿Por qué comprimir los datos en el cliente?

La mayoría de los desarrolladores piensan que la compresión es una tarea reservada al servidor. Esto suele ser cierto para la descarga de páginas. Sin embargo, en aplicaciones ricas en datos, el cliente (el navegador) a menudo debe enviar información voluminosa al servidor.

Aquí hay algunas situaciones donde la compresión nativa es útil:

1. Envío de registros (logs): Si tu aplicación envía informes de errores detallados.
2. Guardado de documentos: Para editores de texto o dibujo en línea.
3. Almacenamiento local: Para guardar más información en la base de datos del navegador (IndexedDB) sin saturar el espacio en disco del usuario.

#¿Qué es la API CompressionStream?

Esta interfaz de programación (API) permite comprimir y descomprimir flujos de datos de forma nativa. “Nativa” significa que el código ya está presente en el navegador. No necesitas descargar nada adicional.

Utiliza flujos (streams). Un flujo es una forma de procesar los datos poco a poco, como el agua que fluye por una tubería, en lugar de esperar a que todo el cubo esté lleno. Esto evita el uso excesivo de memoria RAM en el dispositivo del usuario.

#Algoritmos disponibles

La API ofrece tres formatos principales para transformar tus datos:

• GZIP: El formato más común en Internet. Ofrece un excelente equilibrio entre el tamaño final del archivo y la velocidad de cálculo.
• DEFLATE: Un algoritmo básico muy rápido.
• DEFLATE-RAW: Una versión de Deflate sin la información de cabecera, utilizada para necesidades técnicas muy precisas.

#Práctica: comprimir un dato

Para usar esta API, creamos un flujo de compresión. Así es como se transforma un texto simple en un conjunto de datos comprimidos.

Copy/**
 * Comprime una cadena de caracteres en GZIP
 * @param {string} inputData
 * @returns {Promise<Uint8Array>}
 */
async function compressData(inputData)
{
  const
    encoder = new TextEncoder(),
    rawData = encoder.encode(inputData),

    // Creamos un flujo a partir de los datos brutos
    stream = new Blob([rawData]).stream(),
    compressionStream = new CompressionStream('gzip'),

    // Pasamos los datos por el compresor
    compressedStream = stream.pipeThrough(compressionStream),

    response = new Response(compressedStream),
    buffer = await response.arrayBuffer();

  return new Uint8Array(buffer);
}

#El proceso inverso: la descompresión

Si recibes datos comprimidos del servidor o de tu base de datos local, debes hacerlos legibles de nuevo.

Copy/**
 * Descomprime datos GZIP para obtener un texto
 * @param {Uint8Array} compressedData
 * @returns {Promise<string>}
 */
async function decompressData(compressedData)
{
  const
    decompressionStream = new DecompressionStream('gzip'),

    // Creamos un flujo legible para el descompresor
    stream = new ReadableStream(
      {
        start(controller)
        {
          controller.enqueue(compressedData);
          controller.close();
        }
      }),

    decompressedStream = stream.pipeThrough(decompressionStream),
    response = new Response(decompressedStream);

  return await response.text();
}

#La importancia del procesamiento por fragmentos (Streaming)

La fuerza de esta API reside en su capacidad para procesar archivos enormes sin bloquear el ordenador. Si intentas comprimir un archivo de 1 GB de golpe, el navegador podría cerrar la pestaña por falta de memoria.

Con el sistema de “tuberías” (pipeThrough), los datos circulan en pequeños segmentos. Esto es lo que se llama gestión de la contrapresión (backpressure). El sistema se adapta automáticamente a la velocidad de procesamiento del dispositivo.

#Optimización del diseño y accesibilidad

El rendimiento técnico no es suficiente. El usuario debe entender qué está pasando. Si una compresión tarda tiempo, se debe mostrar una barra de progreso fluida.

Utilicemos CSS moderno para crear un indicador que se adapte a todos los tamaños de pantalla mediante propiedades fluidas.

Copy.progress-container {
  /* Uso de clamp para un ancho fluido y reactivo sin media queries */
  inline-size      : clamp(15rem, 50vw + 2rem, 100%);
  background-color : #f0f0f0;
  border-radius    : .5rem;
  padding          : .25rem;
}

.progress-bar {
  block-size       : 1rem;
  background-color : #007bff;
  border-radius    : .25rem;
  /* Optimización: Solo aplicar transición si el usuario no prefiere movimiento reducido */
  transition       : width .2s ease-in-out;
}

/* Uso de :not para evitar sobreescrituras y mantener el código limpio */
@media (prefers-reduced-motion : reduce) {
  .progress-bar:not(.static) {
    transition : none;
  }
}

#Impacto en el SEO

Google y otros motores de búsqueda utilizan robots para analizar tu sitio. Estos robots recompensan a los sitios que son ligeros y eficientes con los recursos.

1. Reducción del peso total: Menos código JavaScript para descargar significa una mejor puntuación en “Core Web Vitals”.
2. Rapidez de interacción: Al comprimir los datos salientes, liberas el ancho de banda del usuario más rápido, lo que hace que la aplicación sea más reactiva.
3. Experiencia móvil: Un sitio que ahorra datos móviles a sus usuarios está mejor posicionado y es más apreciado.

#¿Cuándo evitar el uso de esta API?

Existen casos donde la compresión es inútil o incluso contraproducente:

• Archivos ya comprimidos: Las imágenes (JPG, PNG), los vídeos (MP4) y los archivos PDF ya están comprimidos. Intentar comprimirlos de nuevo con GZIP puede, a veces, hacer que el archivo sea más pesado.
• Datos pequeños: Si tu texto tiene menos de 100 bytes, la compresión añadirá información de estructura que hará que el resultado final sea más grande que el original.

#Compatibilidad con navegadores

La API CompressionStream está disponible en casi todos los navegadores recientes (Chrome, Firefox, Safari, Edge). Sin embargo, para sistemas antiguos, es importante verificar si la herramienta existe antes de usarla.

Copyconsole.log(
  ('CompressionStream' in window)
    ? '¡La compresión nativa está disponible!'
    : 'Usando un método alternativo más lento.'
);

#Conclusión: un paso hacia una web más limpia

El uso de la API CompressionStream es una decisión inteligente para cualquier desarrollador preocupado por el rendimiento. Permite eliminar dependencias innecesarias, reducir el consumo de memoria y mejorar la experiencia global del usuario.

En 2026, la calidad de una aplicación no se mide solo por sus funcionalidades, sino por su capacidad para ser ligera y respetuosa con los recursos del usuario. La compresión nativa es una de las mejores herramientas para lograr este objetivo.

Preguntas frecuentes (FAQ)

Lionel Péramo

Experto en Rendimiento Web y Ecodiseño

Desarrollador Full Stack y creador del framework OTRA (PHP) y de la librería EcoComposer. Escribo para hacer la web más rápida e inclusiva.

Sobre mí →