Warum komprimiert Brotli Webinhalte deutlich effizienter als Gzip?

Brotli verwendet ein gleitendes Fenster von bis zu 16 MB (gegenüber 32 KB bei Gzip DEFLATE) und verfügt über ein festes statisches Wörterbuch mit über 120.000 typischen HTML-, JS- und Webbegriffen. Dies ermöglicht bei Text-Assets 15 % bis 25 % höhere Kompressionsdichten im Vergleich zu Gzip.

Funktioniert Brotli in modernen Browsern auch über unverschlüsseltes HTTP?

Nein. Alle führenden Browser (Chrome, Firefox, Safari, Edge) setzen für Brotli (Content-Encoding: br) zwingend HTTPS voraus, da ältere zwischengeschaltete Proxys unverschlüsselte Brotli-Datenströme auf Port 80 häufig beschädigt haben.

Welche Komprimierungsstufe sollte für dynamische vs. statische Ressourcen gewählt werden?

Für statische Dateien, die im CI/CD-Prozess erzeugt werden, empfiehlt sich Brotli Stufe 11 (--best) oder Gzip 9/Zopfli, da der Rechenaufwand nur einmal anfällt. Für dynamisch pro Anfrage erzeugte API-Antworten sind Brotli 4-5 oder Gzip 5-6 der beste Kompromiss aus Latenz und CPU-Ressourcen.

Wie wirkt sich die Nutzlast-Komprimierung direkt auf die Core Web Vitals aus?

Durch die Reduzierung kritischer CSS- und JS-Dateien werden First Contentful Paint (FCP) und Largest Contentful Paint (LCP) beschleunigt, da weniger TCP-Pakete übertragen werden müssen und Verzögerungen durch TCP Slow-Start entfallen.

Sollten Bild- und Videoformate wie WebP, AVIF oder MP4 komprimiert werden?

Nein. Moderne Medienformate wie WebP, AVIF oder MP4 sind bereits stark verlustbehaftet oder verlustfrei entropiekodiert. Ein nachträgliches Komprimieren mit Gzip oder Brotli verbraucht unnötig CPU-Zyklen und vergrößert häufig die Datei.

Brotli & Gzip Komprimierungs-Benchmark & Bandbreiten-Rechner

Analysieren Sie Text-, CSS- und JavaScript-Nutzlasten mit der nativen CompressionStream-API, um Brotli/Gzip-Raten und mobile 3G/4G-Ladezeiten präzise zu ermitteln.

Presets:

Netzwerkprofil:

Monatliche Aufrufe:

Ready14.6 KB initcwndCSS

Eingabe-Nutzlast (Code / Text)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 TCP-Paket)

Algorithmus & KomprimierungsstufeZielverhältnis & TCP-Status

Uncompressed (Raw)Baseline

2.39 KB1x

Fastest (0 ms)