Pourquoi Brotli compresse-t-il les ressources web bien plus efficacement que Gzip ?

Brotli utilise une fenêtre glissante pouvant atteindre 16 Mo (contre 32 Ko pour DEFLATE dans Gzip) et intègre un dictionnaire statique prédéfini de plus de 120 000 mots et fragments fréquents en HTML et JavaScript. Cela procure un gain de densité de compression de 15 % à 25 % supérieur à Gzip sur le texte web.

Brotli peut-il être utilisé sans chiffrement HTTPS sur les navigateurs modernes ?

Non. Les principaux navigateurs (Chrome, Firefox, Safari, Edge) imposent une connexion HTTPS pour activer Brotli (Content-Encoding: br), évitant ainsi que d'anciens proxys intermédiaires ne corrompent les flux binaires non reconnus sur le port 80.

Quel niveau de compression privilégier pour du contenu dynamique par rapport au statique ?

Pour les fichiers statiques générés en CI/CD, utilisez Brotli niveau 11 (--best) ou Gzip niveau 9/Zopfli, car le coût de calcul n'est payé qu'une seule fois. Pour les réponses API dynamiques calculées à chaque requête, préférez Brotli 4 ou Gzip 5 pour concilier latence réduite et faible consommation CPU.

Quel est l'impact direct de la compression sur les Core Web Vitals (CWV) ?

En réduisant drastiquement le volume des fichiers CSS et JS critiques pour le rendu, on diminue le nombre d'allers-retours réseau (RTT) nécessaires lors de la phase de démarrage lent TCP (slow-start) sur mobile, ce qui accélère immédiatement le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).

Faut-il compresser avec Brotli ou Gzip des médias tels que WebP, AVIF ou MP4 ?

Non. Les formats multimédias modernes comme WebP, AVIF ou MP4 font déjà l'objet d'un encodage entropique hautement spécialisé. Les retraiter avec Gzip ou Brotli mobilise inutilement le CPU, ajoute de la latence et accroît souvent la taille finale du fichier.

Benchmark de Compression Brotli & Gzip et Simulateur d'Économie de Bande Passante

Analysez les charges utiles de texte, CSS et JS via l'API native CompressionStream, en évaluant les ratios Brotli/Gzip et les temps de chargement mobiles 3G/4G.

Presets:

Profil Réseau:

Requêtes Mensuelles:

Ready14.6 KB initcwndCSS

Données d'entrée (Code / Texte)2.39 KB

/**
 * @license React v18.3.1
 * react-dom.production.min.js
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 */
!function(){"use strict";function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function t(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t}var n=Object.assign,r=Symbol.for("react.element"),a=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),l=Symbol.for("react.profiler"),u=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),h=Symbol.iterator;function m(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=h&&e[h]||e["@@iterator"])?e:null}function y(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var v={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},g={};function b(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||v}function k(){}b.prototype.isReactComponent={},b.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(y(85));this.updater.enqueueSetState(this,e,t,"setState")},b.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},k.prototype=b.prototype;function w(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||v}var E=w.prototype=new k;E.constructor=w,n(E,b.prototype),E.isPureReactComponent=!0;var S=Array.isArray,C=Object.prototype.hasOwnProperty,x={current:null},_={key:!0,ref:!0,__self:!0,__source:!0};function P(e,t,n){var a,o={},i=null,l=null;if(null!=t)for(a in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(i=""+t.key),t)C.call(t,a)&&!_.hasOwnProperty(a)&&(o[a]=t[a]);var u=arguments.length-2;if(1===u)o.children=n;else if(1<u){for(var s=Array(u),c=0;c<u;c++)s[c]=arguments[c+2];o.children=s}if(e&&e.defaultProps)for(a in u=e.defaultProps)void 0===o[a]&&(o[a]=u[a]);return{$$typeof:r,type:e,key:i,ref:l,props:o,_owner:x.current}}

Lines: 6•Chars: 2,447•Size: 2.39 KB

≤ 14.6 KB (1 paquet TCP)

Algorithme & Niveau de compressionRatio cible & Statut TCP

Uncompressed (Raw)Baseline

2.39 KB1x

Fastest (0 ms)