Por que o Brotli comprime arquivos web com muito mais eficiência do que o Gzip?

O Brotli utiliza uma janela deslizante de até 16 MB (contra 32 KB do DEFLATE no Gzip) e conta com um dicionário estático nativo de mais de 120.000 palavras, tags HTML e padrões frequentes de JavaScript. Isso proporciona entre 15% e 25% mais densidade de compressão em ativos web de texto.

É possível usar Brotli sem HTTPS nos navegadores modernos?

Não. Os navegadores modernos (Chrome, Firefox, Safari, Edge) exigem obrigatoriamente conexões HTTPS para habilitar o Brotli (Content-Encoding: br), evitando problemas causados por proxies legados que corrompem fluxos binários na porta 80.

Qual nível de compressão deve ser adotado para dados dinâmicos vs. estáticos?

Para arquivos estáticos gerados no CI/CD, utilize Brotli nível 11 (--best) ou Gzip 9/Zopfli, já que o processamento ocorre uma única vez. Para respostas dinâmicas de APIs geradas em tempo real, use Brotli nível 4 ou Gzip nível 5 para conciliar velocidade de resposta com baixo consumo de CPU.

Como a compressão de payload influencia diretamente o Core Web Vitals (CWV)?

Ao encolher os pacotes de CSS e JavaScript essenciais para renderização, diminuem-se os ciclos de ida e volta (RTT) provocados pela fase de slow-start do TCP em redes móveis, adiantando sensivelmente as métricas First Contentful Paint (FCP) e Largest Contentful Paint (LCP).

Formatos de mídia como WebP, AVIF ou MP4 devem ser comprimidos com Brotli ou Gzip?

Não. Arquivos como WebP, AVIF e vídeos MP4 já possuem codificação entrópica dedicada e compactação avançada. Tentar comprimi-los novamente com Gzip ou Brotli consome CPU inutilmente, aumenta a latência e frequentemente expande o tamanho final do arquivo.

Benchmark de Compressão Brotli & Gzip e Estimador de Largura de Banda

Analise payloads de texto, CSS e JS usando a API nativa CompressionStream, estimando taxas de compressão Brotli/Gzip e tempos de carregamento em redes móveis 3G/4G.

Presets:

Perfil de Conexão:

Requisições Mensais:

Ready14.6 KB initcwndCSS

Payload 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 pacote TCP)

Algoritmo & Nível de CompressãoTaxa Alvo & Status TCP

Uncompressed (Raw)Baseline

2.39 KB1x

Fastest (0 ms)