API CompressionStream : Optimisez vos transferts de données de manière native

Sur le web moderne, la vitesse est une priorité. Chaque octet envoyé entre un serveur et un utilisateur a un impact sur le temps de chargement. Plus les données sont lourdes, plus l’application semble lente, surtout sur les téléphones mobiles ou avec une mauvaise connexion.

Jusqu’à récemment, la compression de données côté client nécessitait l’importation de bibliothèques tierces massives comme pako ou zlib.js. Ces outils ajoutent du poids à votre application avant même qu’elle ne commence à travailler. Aujourd’hui, il existe une solution intégrée : l’API CompressionStream.

#Pourquoi compresser les données côté client ?

La plupart des développeurs pensent que la compression est une tâche réservée au serveur. C’est souvent vrai pour le téléchargement des pages. Cependant, dans les applications riches en données, le client (le navigateur) doit souvent envoyer des informations volumineuses au serveur.

Voici quelques situations où la compression native est utile :

1. Envoi de journaux (logs) : Si votre application envoie des rapports d’erreurs détaillés.
2. Sauvegarde de documents : Pour les éditeurs de texte ou de dessin en ligne.
3. Stockage local : Pour enregistrer plus d’informations dans la base de données du navigateur (IndexedDB) sans saturer l’espace disque de l’utilisateur.

#Qu’est-ce que l’API CompressionStream ?

Cette interface de programmation (API) permet de compresser et de décompresser des flux de données de manière native. “ Native” signifie que le code est déjà présent dans le navigateur. Vous n’avez rien à télécharger de plus.

Elle utilise des flux (streams). Un flux est une manière de traiter les données petit à petit, comme de l’eau qui coule dans un tuyau, plutôt que d’attendre que tout le seau soit plein. Cela évite d’utiliser trop de mémoire vive (RAM) sur l’appareil de l’utilisateur.

#Les algorithmes disponibles

L’API propose trois formats principaux pour transformer vos données :

• GZIP : Le format le plus courant sur Internet. Il offre un excellent compromis entre la taille finale du fichier et la vitesse de calcul.
• DEFLATE : Un algorithme de base très rapide.
• DEFLATE-RAW : Une version de Deflate sans les informations d’en-tête, utilisée pour des besoins techniques très précis.

#Mise en pratique : compresser une donnée

Pour utiliser cette API, nous créons un flux de compression. Voici comment transformer un texte simple en un ensemble de données compressées.

Copy/**
 * Compresse une chaîne de caractères en GZIP
 * @param {string} inputData
 * @returns {Promise<Uint8Array>}
 */
async function compressData(inputData)
{
  const
    encoder = new TextEncoder(),
    rawData = encoder.encode(inputData),
    
    // On crée un flux à partir des données brutes
    stream = new Blob([rawData]).stream(),
    compressionStream = new CompressionStream('gzip'),
    
    // On fait passer les données dans le compresseur
    compressedStream = stream.pipeThrough(compressionStream),

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

  return new Uint8Array(buffer);
}

#Faire l’inverse : la décompression

Si vous recevez des données compressées du serveur ou de votre base de données locale, vous devez les rendre à nouveau lisibles.

Copy/**
 * Décompresse des données GZIP pour obtenir un texte
 * @param {Uint8Array} compressedData
 * @returns {Promise<string>}
 */
async function decompressData(compressedData)
{
  const 
    decompressionStream = new DecompressionStream('gzip'),

    // On crée un flux lisible pour le décompresseur
    stream = new ReadableStream(
    {
      start(controller)
      {
        controller.enqueue(compressedData);
        controller.close();
      }
    }),

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

  return await response.text();
}

#L’importance du traitement par morceaux (Streaming)

La force de cette API réside dans sa capacité à traiter des fichiers énormes sans bloquer l’ordinateur. Si vous essayez de compresser un fichier de 1 Go d’un seul coup, le navigateur risque de fermer l’onglet par manque de mémoire.

Avec le système de “tuyaux” (pipeThrough), les données circulent par petits segments. C’est ce qu’on appelle la gestion de la pression arrière (backpressure). Le système s’adapte automatiquement à la vitesse de traitement de l’ appareil.

#Optimisation du design et accessibilité

La performance technique ne suffit pas. L’utilisateur doit comprendre ce qu’il se passe. Si une compression prend du temps, il faut afficher une barre de progression fluide.

Utilisons le CSS moderne pour créer un indicateur qui s’adapte à toutes les tailles d’écran sans utiliser de calculs complexes.

Copy.progress-container {
  /* Utilisation de clamp pour une largeur fluide et réactive */
  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;
  /* On évite de redéfinir la largeur si elle n'est pas nécessaire */
  transition       : width .2s ease-in-out;
}

/* Accessibilité : on cache la barre si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion : reduce) {
  .progress-bar {
    transition : none;
  }
}

#Impact sur le référencement (SEO)

Google et les autres moteurs de recherche utilisent des robots pour analyser votre site. Ces robots récompensent les sites qui sont légers et économes en ressources.

1. Réduction du poids total : Moins de code JavaScript à télécharger signifie un meilleur score “Core Web Vitals”.
2. Rapidité d’interaction : En compressant les données sortantes, vous libérez la bande passante de l’utilisateur plus rapidement, ce qui rend l’application plus réactive.
3. Expérience mobile : Un site qui économise les données mobiles de ses utilisateurs est mieux classé et plus apprécié.

#Quand éviter d’utiliser cette API ?

Il existe des cas où la compression est inutile, voire contre-productive :

• Fichiers déjà compressés : Les images (JPG, PNG), les vidéos (MP4) et les fichiers PDF sont déjà compressés. Essayer de les compresser à nouveau avec GZIP peut parfois rendre le fichier plus lourd.
• Petites données : Si votre texte fait moins de 100 octets, la compression ajoutera des informations de structure qui rendront le résultat final plus gros que l’original.

#Compatibilité avec les navigateurs

L’API CompressionStream est disponible sur presque tous les navigateurs récents (Chrome, Firefox, Safari, Edge). Cependant, pour les vieux systèmes, il est important de vérifier si l’outil existe avant de l’utiliser.

Copyconsole.log(
  ('CompressionStream' in window) 
  ? 'La compression native est disponible !'
  : "Utilisation d'une méthode alternative moins rapide."
);

#Conclusion : un pas vers un web plus propre

L’utilisation de l’API CompressionStream est une décision intelligente pour tout développeur soucieux de la performance. Elle permet de supprimer des dépendances inutiles, de réduire la consommation de mémoire et d’améliorer l’expérience globale de l’utilisateur.

En 2026, la qualité d’une application ne se mesure pas seulement à ses fonctionnalités, mais à sa capacité à être légère et respectueuse des ressources de l’utilisateur. La compression native est l’un des meilleurs outils pour atteindre cet objectif.

Foire aux questions (FAQ)

Lionel Péramo

Expert Performance Web & Écoconception

Développeur full stack et créateur du framework OTRA (PHP) et de la librairie EcoComposer. J'écris pour rendre le web plus rapide et inclusif.

En savoir plus →