Compresseur de bundle CSS

Importez ou collez un bundle CSS et découvrez instantanément sa taille minifiée, sa taille GZIP exacte et sa taille Brotli estimée, avec des extraits de configuration nginx et Apache prêts à l'emploi pour activer la compression. Notre compresseur de bundle CSS affiche aussi un panneau d'analyse du bundle avec le nombre de règles, de sélecteurs et de media queries. Toute la compression s'exécute dans votre navigateur. Sans inscription.

CSS Bundle Compressor

Upload or paste a CSS bundle and instantly see its minified size, GZIP size, and Brotli size - with ready-to-use nginx and Apache server configuration snippets. All compression runs locally in your browser. Your CSS never leaves your device.

CSS Bundle Input

1.45 KBUpload .css

/* Reset styles */
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

/* Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #111111;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px 16px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 0px solid transparent;
}

.btn-primary {
  background-color: #0099ff;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #0077cc;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333333;
}

/* Cards */
.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Media queries */
@media (max-width: 768px) {
  .container {
    padding: 0px 8px;
  }
  .flex {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .btn {
    width: 100%;
  }
}

Pourquoi utiliser notre compresseur de bundle CSS ?

Compression de bundle CSS instantanée : compressez n'importe quel bundle CSS instantanément dans votre navigateur, sans envoi au serveur ni outils de build. Notre compresseur de bundle CSS minifie votre CSS et calcule la taille GZIP exacte et la taille Brotli estimée en un clic.
Compresseur de bundle CSS en ligne et sécurisé : votre bundle CSS ne quitte jamais votre appareil avec ce compresseur de bundle CSS. Un traitement 100 % côté client garantit une confidentialité totale : aucun stockage cloud, aucun journal serveur, aucune exposition de vos feuilles de styles.
Compresseur de bundle CSS sans installation : compressez vos bundles CSS directement dans le navigateur, sans paquet npm, sans outil de build et sans compte. Ce compresseur de bundle CSS gratuit fonctionne sur tout navigateur moderne et tout système d'exploitation.
Extraits de configuration serveur et analyse du bundle : obtenez des extraits de configuration nginx et Apache prêts à l'emploi pour activer la compression GZIP et Brotli, plus un panneau d'analyse indiquant le nombre de règles, de sélecteurs, de commentaires et de media queries.

Cas d'usage courants du compresseur de bundle CSS

Optimisation des Core Web Vitals : utilisez le compresseur de bundle CSS pour réduire la taille du bundle avant déploiement. Des bundles CSS plus légers réduisent le temps de blocage du rendu et améliorent les scores LCP et FCP ; les extraits de configuration facilitent l'activation de GZIP sur votre CDN.
Suivi du budget de taille : utilisez le compresseur de bundle CSS pour vérifier que votre bundle CSS respecte votre budget de performance. Visualisez les tailles minifiée, GZIP et Brotli d'un seul coup d'œil : les mêmes chiffres que votre outil de build en production.
Audit CSS avant déploiement : faites passer votre bundle CSS dans le compresseur de bundle CSS avant chaque déploiement pour détecter le surplus au plus tôt. Le panneau d'analyse indique le nombre de règles, de sélecteurs et de commentaires, utile pour repérer le CSS inutilisé.
Configuration CDN et serveur : utilisez le compresseur de bundle CSS pour obtenir des extraits de configuration nginx et Apache prêts à activer la compression GZIP et Brotli sur vos fichiers CSS. Copiez-collez-les directement dans la configuration de votre serveur.
Rapports de performance client : utilisez le compresseur de bundle CSS pour produire des données de taille CSS dans vos rapports de performance. Présentez la taille d'origine, minifiée, GZIP et Brotli pour justifier vos recommandations d'optimisation CSS.
Optimisation des performances mobiles : utilisez le compresseur de bundle CSS pour quantifier les gains CSS pour les utilisateurs mobiles. Avec 100 000 visiteurs mobiles par jour, réduire un bundle CSS de 50 Ko à 12 Ko grâce à GZIP économise 3,8 Go de données mobiles par jour.

Qu'est-ce que la compression de bundle CSS ?

La compression de bundle CSS consiste à réduire la taille d'une feuille de styles CSS grâce à deux techniques complémentaires : la minification (suppression des espaces et des commentaires, optimisations en notation abrégée) et la compression de transport (encodage GZIP ou Brotli appliqué par le serveur web avant l'envoi du fichier au navigateur). Notre compresseur de bundle CSS applique les deux : il minifie votre CSS avec un minifieur en JS pur, puis calcule la taille GZIP exacte à l'aide de l'API CompressionStream native du navigateur. La taille Brotli est estimée à environ 18 % de moins que GZIP, d'après les taux de compression Brotli typiques pour le CSS.

Comment fonctionne notre compresseur de bundle CSS

1 Importez ou collez votre bundle CSS : glissez-déposez un fichier .css ou collez votre CSS directement dans la zone de saisie. Le compresseur de bundle CSS accepte tout CSS valide : bundles de frameworks, feuilles de styles de composants, CSS d'e-mail ou feuilles de styles personnalisées.
2 Compression instantanée dans le navigateur : cliquez sur « Compresser le bundle » et le compresseur de bundle CSS minifie votre CSS, calcule la taille GZIP exacte via l'API CompressionStream du navigateur et estime la taille Brotli. Aucune donnée n'est envoyée à un serveur.
3 Téléchargez et configurez votre serveur : téléchargez le fichier CSS minifié et copiez l'extrait de configuration nginx ou Apache prêt à l'emploi pour activer la compression GZIP et Brotli sur vos fichiers CSS.

Ce que le compresseur de bundle CSS optimise

Suppression des commentaires : tous les commentaires CSS sont retirés ; ils représentent souvent 5 à 15 % de la taille d'un bundle CSS en développement.
Compression des espaces : tous les espaces, retours à la ligne et indentations sont supprimés ; ils représentent souvent 20 à 40 % de la taille d'un bundle CSS formaté.
Optimisations en notation abrégée : les couleurs hexadécimales sont normalisées et raccourcies (#aabbcc → #abc), les valeurs nulles sont abrégées (0px → 0) et font-weight est raccourci (bold → 700, normal → 400).
Points-virgules finaux : le dernier point-virgule avant une accolade fermante est supprimé ; c'est valide selon la spécification CSS et économise un octet par règle.

Minification et compression de transport

La minification réduit la taille du fichier stocké sur le disque et servi au navigateur. La compression de transport (GZIP/Brotli) réduit les octets transférés sur le réseau ; le navigateur décompresse le fichier automatiquement. Les deux doivent être combinées : minifiez d'abord, puis activez GZIP ou Brotli sur votre serveur. Le compresseur de bundle CSS affiche les trois tailles pour visualiser l'effet combiné. Un bundle CSS typique passe de 100 Ko (origine) → 70 Ko (minifié) → 15 Ko (GZIP), soit une réduction totale de 85 %.

Foire aux questions

Un compresseur de bundle CSS réduit la taille d'une feuille de styles CSS grâce à la minification et affiche les tailles GZIP et Brotli obtenues pour la configuration du serveur. Notre compresseur de bundle CSS gratuit fonctionne entièrement dans votre navigateur.

La minification réduit la taille du fichier stocké sur le disque. La compression GZIP réduit les octets transférés sur le réseau ; le navigateur les décompresse automatiquement. Les deux doivent être appliquées ensemble pour un gain maximal.

Absolument. Le compresseur de bundle CSS traite tout localement dans votre navigateur. Votre bundle CSS n'est jamais envoyé à un serveur et ne quitte jamais votre appareil.

Oui : 100 % gratuit, pour toujours. Sans inscription, sans compte, sans offre premium, sans limite de taille et sans publicité.

Les tailles GZIP sont exactes : elles sont calculées avec l'API CompressionStream native du navigateur. Les tailles Brotli sont estimées à environ 18 % de moins que GZIP, d'après les taux de compression CSS courants.

Sous nginx, ajoutez « gzip on; gzip_types text/css; » à votre bloc server. Sous Apache, activez mod_deflate. Le compresseur de bundle CSS fournit des extraits de configuration prêts à l'emploi pour les deux serveurs.

Le compresseur de bundle CSS applique des transformations sûres et conformes aux spécifications, qui ne modifient pas le rendu visuel de votre CSS. Testez toujours la sortie minifiée dans les navigateurs cibles avant de déployer.

Le CSS riche en commentaires, en espaces superflus et en motifs répétés se compresse le plus fortement. Les bundles de frameworks atteignent souvent une réduction GZIP de 70 à 85 %.

Brotli obtient une meilleure compression (généralement 15 à 25 % de moins que GZIP) mais consomme plus de CPU. GZIP reste le choix par défaut sûr. Activez Brotli si votre CDN le prend en charge.