¿Por qué Brotli comprime activos web notablemente mejor que Gzip?

Brotli utiliza una ventana deslizante de hasta 16 MB (frente a los 32 KB del algoritmo DEFLATE de Gzip) e incorpora un diccionario estático predeterminado con más de 120.000 palabras y patrones web comunes. Esto le permite obtener entre un 15% y un 25% más de densidad de compresión en archivos de texto web.

¿Se puede utilizar Brotli en navegadores modernos sobre HTTP sin cifrar?

No. Los principales navegadores (Chrome, Firefox, Safari, Edge) exigen conexiones HTTPS para admitir Brotli (Content-Encoding: br), con el fin de evitar que proxies transparentes obsoletos corrompan flujos binarios desconocidos en el puerto 80.

¿Qué nivel de compresión se debe elegir para contenido dinámico frente a estático?

Para recursos estáticos generados en CI/CD, utiliza Brotli nivel 11 (--best) o Gzip nivel 9/Zopfli, ya que el costo computacional se asume una sola vez. Para respuestas API dinámicas generadas en tiempo real, usa Brotli nivel 4 o Gzip nivel 5 para equilibrar la latencia de respuesta y el gasto de CPU.

¿De qué forma beneficia la compresión a las métricas Core Web Vitals (CWV)?

Al disminuir los bytes transferidos en la ruta crítica de renderizado, se reducen los ciclos de ida y vuelta (RTT) asociados al inicio lento de TCP (slow-start) en redes móviles, acelerando directamente First Contentful Paint (FCP) y Largest Contentful Paint (LCP).

¿Se deben comprimir con Brotli o Gzip formatos multimedia como WebP, AVIF o MP4?

No. Formatos modernos como WebP, AVIF y MP4 ya cuentan con codificación entrópica especializada. Comprimirlos con Gzip o Brotli desperdicia recursos del servidor, añade latencia innecesaria y con frecuencia incrementa el tamaño final del archivo.

Benchmark de Compresión Brotli & Gzip y Calculadora de Ahorro

Analiza cargas de texto, CSS y JS con la API nativa CompressionStream, estimando ratios de compresión Brotli/Gzip y tiempos de carga en redes móviles 3G/4G.

Presets:

Perfil de Red:

Peticiones Mensuales:

Ready14.6 KB initcwndCSS

Carga Útil de Entrada (Código / Texto)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 paquete TCP)

Algoritmo y nivel de compresiónTasa objetivo y estado TCP

Uncompressed (Raw)Baseline

2.39 KB1x

Fastest (0 ms)