Geschwindigkeit ist für jede Webseite wichtig. Im Streben nach schnellen Ladezeiten gibt es eine Reihe von Technologien, die uns dabei helfen. Ein Ansatz besteht darin, den zugrunde liegenden Code deiner Webseite zu minimieren, ohne ihre Funktionsweise zu beeinträchtigen. Die GZIP-Komprimierung ist eine Möglichkeit, dies zu erreichen, aber die Brotli-Komprimierung ist eine alternative, noch junge Methode, die viel Aufmerksamkeit auf sich zieht.
Es handelt sich dabei um eine von Google entwickelte Lösung, die eine Reihe von Vorteilen gegenüber der GZIP-Komprimierung (und auch eine Alternative dazu) bietet. Was genau die Technologie ausmacht, wird in diesem Artikel näher erläutert, aber die Brotli-Komprimierung ist schnell und effizient – Grund genug sie näher kennenzulernen.
Unser Video-Leitfaden zur Brotli-Komprimierung
In diesem Leitfaden werden wir uns mit der Brotli-Komprimierung befassen und dir zeigen, wie du überprüfen kannst, ob deine Webseite diese Technologie nutzt und wie du sie bei Bedarf aktivieren kannst. Zunächst werden wir Brotli in den Bereich der Komprimierungsalgorithmen einordnen und erklären, warum du es gegenüber anderen Lösungen bevorzugen solltest.
Datenkomprimierung für das Web
Bei der Datenkompression wird der Code einer Webseite oder App komprimiert und die Dateigröße verringert. So kannst du die Dateien im Web leichter verschieben und die Lade- und Darstellungszeit einer Webseite verkürzen. Je nachdem, mit welchem Dateityp du arbeitest, gibt es viele Möglichkeiten, die Daten zu komprimieren.
Ein gängiger Ansatz ist die „Minifizierung“ Dabei entfernt ein Algorithmus einige überflüssige Elemente aus dem Code deiner Webseite. Die Idee dahinter ist, dass Aspekte wie Einrückungen, Kommentare, Leerzeichen und mehr die Dateigröße und damit die Ladezeiten erhöhen.
Wenn du diese Elemente entfernst, hat das in den meisten Fällen keinen Einfluss auf die User Experience (UX). Allerdings wird es für die Computer, die den Code kompilieren und darstellen müssen, einfacher. Nehmen wir zum Beispiel diese Codefolge:
define( 'WP_INSTALLING', true );
/** Sets up the WordPress Environment. */
require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );Der obige Code verwendet Elemente wie Leerzeichen und Zeilenumbrüche, um ihn für Menschen lesbar zu machen, aber ein Computer braucht sie nicht, um den Kerncode zu verstehen. Außerdem nehmen diese Leerzeichen und Zeilenumbrüche wertvollen Platz ein, der, wenn er entfernt wird, zu einer Leistungssteigerung führen kann.
Wenn du den Code verkleinerst, sieht er ganz anders aus:
define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. *
/ require __DIR__ . '/wp-load.php';
require __DIR__ . '/wp-blog-header.php';
if ( ! is_multisite() ) {
wp_redirect( wp_registration_url() );
die();
}
$valid_error_codes = array( 'already_active', 'blog_taken' );Die grundlegenden Funktionen des Codes sind jedoch immer noch dieselben.
Du wirst feststellen, dass es auch bei anderen Dateitypen Möglichkeiten gibt, Daten zu komprimieren. Bilder zum Beispiel müssen oft stark komprimiert werden, um sie zu verkleinern, ohne dass das Bild selbst darunter leidet:
Die GZIP-Komprimierung ist ein Standardverfahren, um die Größe von Dateibündeln zu minimieren – man denke an Pakete wie ZIP oder Linux .tar bundles. Aber bis jetzt gab es keine wirklichen Alternativen. Wir werden später mehr darüber reden, warum eine Alternative nötig ist, aber zuerst wollen wir dir den „Konkurrenten“ von GZIP vorstellen
Brotli Komprimierung
Kurz gesagt: Brotli ist ein Algorithmus zur Datenkompression. Aber wenn das alles wäre, was es dazu zu sagen gibt, gäbe es keinen Grund, ihn zu untersuchen.
Er bietet eine „verlustfreie“ Kompression und wird von Google unter einer MIT-Lizenz entwickelt. Das Unternehmen ist oft Vorreiter bei der Entwicklung von Webtechnologien. Daher ist es nicht verwunderlich, dass Brotli versucht, die Funktionen von GZIP zu übernehmen, sie zu verbessern und den Nutzern von Webseiten ein besseres Erlebnis zu bieten.
Die Brotli-Komprimierung nutzt dieselben Basistechnologien wie die GZIP-Komprimierung, nämlich:
- Der LZ77-Algorithmus
- Huffman-Kodierung und -Dekodierung
Wenn du diese beiden Technologien kombinierst, erhältst du das Format DEFLATE, das als Grundlage für die GZIP- und Brotli-Komprimierung dient. In unserem Beitrag über die GZIP-Komprimierung gehen wir sehr detailliert auf dieses Thema ein.
Kurz gesagt: Unkomprimierte Dateien durchlaufen die Algorithmen LZ77 und Huffman als Teil des DEFLATE Prozesses, um sie in ein Brotli-Format zu komprimieren. Von dort aus dekomprimiert ein INFLATE Prozess die Dateien bei Bedarf wieder.
Obwohl Brotli derzeit der Hauptkonkurrent von GZIP ist, gibt es andere ähnliche Technologien, die ebenfalls DEFLATE verwenden. Im nächsten Abschnitt werden wir darüber sprechen, was Brotli auszeichnet.
Brotli-Komprimierung vs. GZIP-Komprimierung
Wie bereits erwähnt, verwenden sowohl Brotli als auch GZIP die Methode DEFLATE, um Daten zu komprimieren (und zu dekomprimieren). Das kann viele Leute verwirren, denn das allein ist noch kein Grund für eine Umstellung.
Google baut jedoch auf DEFLATE auf, um verbesserte Techniken anzubieten und Daten nach einem höheren und schnelleren Standard zu komprimieren.
Wie Brotli Wörterbücher nutzt, um die Datenkompression zu verbessern
Ein technischer Aspekt der Datenkomprimierungsformate ist die Art und Weise, wie die Brotli-Komprimierung bestehende bekannte Sprache und Text in Datenwörterbüchern nutzt, um ihren Algorithmus einzusetzen.
Entwickler/innen verwenden ein Wörterbuch mit Schlüssel-Wert-Paaren, um Daten zu speichern, da es effizient, flexibel und skalierbar ist. So sieht ein PHP-Wörterbuch (ein sogenanntes „Array“) aus:
$cats = get_categories(
array(
'taxonomy' => 'link_category',
'hierarchical' => 0,
'include' => $link_cat,
)
);Während GZIP keine Wörterbücher verwendet, benutzt Brotli zwei.
Das statische Wörterbuch von Brotli
Das erste ist ein statisches (d.h. vordefiniertes) Wörterbuch mit gängigen Code-Begriffen, die als Referenz für den HTML-, CSS- und JavaScript-Text dienen.
Es gibt über 13.000 Wörter in sechs verschiedenen Sprachen, die Brotli als Verweise auf Punkte im Code verwendet. Das ist keine exakte Analogie, aber es ähnelt der Art und Weise, wie ein WordPress-Hook auf eine größere Code-Suite verweist.
So muss der Encoder den Code nicht Byte für Byte durchforsten. Stattdessen kann er auf die Verweise reagieren, die Definition aus dem Wörterbuch ziehen und mit dem nächsten Begriff fortfahren.
Du wirst feststellen, dass das Wörterbuch auch Phrasen aus der realen Welt sowie Code enthält, der nicht oft komprimiert wird. So können einige Tags wie <HTML> und Parameter wie type="text/javascript" komprimiert werden, was dir einen größeren Vorteil verschafft.
Es gibt auch einige „Transformationen“ im Wörterbuch: partielle, unvollständige und andere Arten von Phrasen, die mit einem neuen Präfix, Suffix oder einer Großschreibung zu einem ganz neuen Wort werden – zum Beispiel wird „Work“ zu „Working“ oder „html“ zu „HTML“
Das dynamische Wörterbuch von Brotli
Das dynamische Wörterbuch analysiert Inhalt und Code an der Quelle, was gut für kleinere Geräte, aber nicht so gut für größere Dateien ist. Es wird auch „sliding window“ genannt und kann bis zu 16 MB groß sein. In diesem Fenster speichert der Komprimierungsalgorithmus einige der neuesten Daten, um auf sie zurückgreifen zu können. Es ist sehr dynamisch, da es sich ständig ändert.
Wenn du das mit GZIPs etwa 32 KB großen „sliding window“ vergleichst, siehst du, dass die Möglichkeiten für Echtzeit-Parsing und -Komprimierung enorm sind. In den meisten Fällen wird ein Brotli „sliding window“ von etwa 4 MB verwendet, was im Vergleich zu konkurrierenden Algorithmen immer noch gigantisch ist.
Brotli-Komprimierung vs. GZIP-Komprimierung: Leistung und Unterstützung
Wenn es um die reinen Nutzerzahlen geht, ist die GZIP-Komprimierung immer noch die Nummer eins. Allerdings wird die Brotli-Komprimierung jeden Tag häufiger genutzt. Das liegt zum Teil daran, dass die großen Browser die Komprimierung in größerem Umfang übernehmen; auch der Aufstieg der Chromium-basierten Browser trägt dazu bei.
Unser Video-Leitfaden zur Brotli-Komprimierung im Vergleich zur GZIP-Komprimierung
Auf der Website Can I Use… wird aufgezeichnet, welche Technologien von Browsern übernommen werden, und es wird eine Art Historie erstellt. Die Webseite stellt fest, dass derzeit über 95 % der Browser die Brotli-Komprimierung verwenden, darunter alle wichtigen Versionen.
In unserem Artikel zur GZIP-Komprimierung haben wir einen Benchmark-Test erwähnt, bei dem Brotli im Vergleich zu konkurrierenden Algorithmen eine bessere Komprimierungsrate hatte, aber bei der Komprimierungs- und Dekomprimierungszeit zurückfiel:
Die Squash-Benchmark-Tests zeigen jedoch eine andere Geschichte – eine, die etwas differenzierter ist. Die eigentliche Erkenntnis ist, dass Brotli insgesamt flexibler ist als GZIP und im Allgemeinen eine höhere Kompressionsrate aufweist.
Hier ist die Zusammenfassung der Ergebnisse von Squash Benchmarks:
- Brotli hat das bessere Komprimierungsverhältnis (d.h. es erzeugt kleinere komprimierte Dateien) auf jeder Komprimierungsstufe.
- GZIP ist zwar meistens schneller als Brotli, aber der Grad der Komprimierung hat Einfluss auf die Ergebnisse, die du erzielst.
Die Aufschlüsselung von Paul Calvano enthält weitere Details, aber der Kern ist, dass Brotli mehr CPU-Leistung benötigt, um eine höhere Dateikomprimierung zu erreichen. Das zeigt sich sowohl bei der höchsten als auch bei der niedrigsten Komprimierungsstufe. Das Benchmarking von Cloudflare bestätigt dies: viel kleinere Dateien, mit kleineren Vergleichszahlen für die Kompressionsgeschwindigkeit.
Außerdem solltest du bedenken, dass einige Test-Tools wie Pingdom und einige Content Delivery Networks (CDNs) Brotli noch nicht unterstützen. Das kann die Daten, die andere über die Funktionsweise von Brotli sammeln, verfälschen. Wenn du Tests durchführst, kannst du „falsch-negative“ Ergebnisse sehen: höhere Werte für die Seitengeschwindigkeit, die die von dir verwendete Dateikomprimierung nicht berücksichtigen.
Vorteile der Brotli-Komprimierung
Bis jetzt gibt es eine Menge Informationen über die Brotli-Komprimierung, die du berücksichtigen solltest. Wir können jedoch zusammenfassen, was du wissen musst, warum du Brotli gegenüber GZIP bevorzugen solltest:
- Brotli nutzt die gleiche Technologie wie GZIP und erweitert sie um moderne Methoden.
- Die wörterbuchbasierte Analyse von Brotli bedeutet, dass es mehr deiner Dateien auf einer tieferen Ebene komprimieren kann.
- Brotli braucht zwar mehr Rechenleistung als GZIP, aber das Ergebnis sind kleinere Dateien.
- Bei den Komprimierungsstufen, die die meisten Webhoster verwenden – etwas im mittleren Bereich wie Stufe vier oder fünf – schneidet Brotli besser ab als GZIP, ohne wirkliche Anstrengung.
- Du wirst feststellen, dass Brotli von fast allen Browsern unterstützt wird, wenn auch nicht von einigen der Benchmark-Tools, die du gewohnt bist.
- Brotli ist kostenlos und quelloffen. Das ist ein Vorteil, wenn du ein Brotli-kompatibles CDN wie Cloudflare verwendest.
Es ist erwähnenswert, dass Cloudflare die Brotli-Komprimierung auf allen seinen Servern verwendet. Es handelt sich dabei um eine modifizierte und optimierte Version von Brotli, die dir noch mehr Vorteile in Bezug auf die Geschwindigkeit und die Bereitstellung von Dateien bietet.
Da Kinsta die Integration von Cloudflare für alle Tarife anbietet, verwendet jede gehostete Webseite standardmäßig Brotli. Das ist nur einer der Gründe, warum Kinsta zu den marktführenden und besten Hosting-Anbietern überhaupt gehört.
So überprüfst du, ob deine Webseite die Brotli-Komprimierung nutzt
Da die Brotli-Komprimierung noch nicht zum Standard gehört (obwohl sie fast so weit ist), willst du wahrscheinlich wissen, ob deine Webseite sie verwendet. Es gibt einige Möglichkeiten, das herauszufinden.
1. Verwende ein Online-Tool
Der einfachste Weg, um zu überprüfen, ob deine Webseite die Brotli-Kompression verwendet, ist ein Online-Tool. Es gibt zwar einige davon, aber du solltest dir ein Tool aussuchen, das schnell und einfach zu bedienen ist und dir außerdem eine Reihe von Informationen über deine Webseite liefert.
Gift of Speed ist unsere Wahl, um die Brotli-Kompression zu überprüfen.
Es wird festgestellt, ob deine Webseite GZIP, Brotli oder gar keine Komprimierung verwendet, und es werden ein paar andere Metriken angezeigt, die dir helfen zu entscheiden, was du als Nächstes tun solltest. Diese Daten sind wichtig, denn du solltest nicht nur darauf achten, ob der Server deiner Webseite die richtige Komprimierungsart verwendet.
Es gibt viele Elemente, die eine Webseite ausmachen, und sogar Bibliotheken und Abhängigkeiten von Dritten. Wenn du dich dafür entscheidest, sie über ein CDN bereitzustellen, muss auch dieses die Brotli-Kompression verwenden, um die bestmögliche Leistung zu erzielen.
Wenn du Gift Of Speed verwendest, um einzelne Assets zu testen, kannst du einen Blick auf den Server-Wert werfen, um zu sehen, wie sie bereitgestellt werden.
Alle Kinsta-Webseiten nutzen das von Cloudflare betriebene Kinsta CDN. Das bedeutet, dass jede Webseite auch die Brotli-Kompression in der gesamten Kette und Serverarchitektur nutzt.
2. Überprüfe mit den Entwickler-Tools deines Browsers
Die meisten Entwicklerinnen und Entwickler wissen, dass ihr Browser einige fantastische Tools bietet, mit denen sie alle möglichen webbezogenen Untersuchungen und Fehlerbehebungen durchführen können. Du kannst zum Beispiel schnell überprüfen, ob deine Webseite (oder ein bestimmtes Asset) die Brotli-Komprimierung verwendet.
Bei allen gängigen Browsern wie Brave, Edge, Firefox oder Chrome kannst du den Bildschirm Netzwerk > Alle aufrufen.
Zunächst siehst du nichts, was sich auf die Kopfzeilen der Inhalte bezieht – du musst auf der linken Seite ein Asset oder eine Anfrage auswählen. Wenn du in der Liste weiter nach unten scrollst, öffnet sich ein Fenster, das die Kopfzeileninformationen anzeigt.
Hier scrollst du in der Ausgabe nach unten, bis du die Zeile content-encoding: br siehst:
Kurz gesagt: Wenn du content-encoding: br siehst, bedeutet das, dass Brotli für diese Seite aktiv ist.
So aktivierst du die Brotli-Komprimierung für deine Webseite
In den letzten Abschnitten zeigen wir dir verschiedene Möglichkeiten, wie du die Brotli-Komprimierung für deine Webseite aktivieren kannst. Die erste Methode empfehlen wir für die meisten WordPress-Webseiten, die Kinsta nicht nutzen – und die letzte Methode empfehlen wir für alle Webseiten, die die erste Methode lesen!
1. Verwende ein WordPress-Plugin
So gut wie jede WordPress-Webseite verwendet mindestens ein Plugin – oft sogar mehrere, je nachdem, welche Funktionen die Webseite benötigt. Caching ist ein Anwendungsfall für Plugins, von denen es viele gibt. Aber nicht alle erlauben es dir, die Brotli-Komprimierung zu aktivieren. Du musst also mit Bedacht wählen und darauf vorbereitet sein, deine bevorzugte Lösung zu wechseln.
Bevor du Änderungen an deiner Webseite vornimmst, solltest du ein komplettes Backup erstellen, falls du es später wiederherstellen musst. Für diese Methode werden wir W3 Total Cache verwenden, weil es einfach ist, die richtige Einstellung zu finden.
Du musst in WordPress die Seite Leistung > Browser-Cache aufrufen:
Dieser Bildschirm zeigt zwei Einstellungen an. Diejenige, die du wählen solltest, ist HTTP (brotli) Komprimierung aktivieren:
Allerdings ist das nicht für jede Webseite und jede Situation geeignet. Kinsta zum Beispiel optimiert seine Server für schnelles, leistungsfähiges und zuverlässiges Hosting. Daher gibt es eine Reihe von Plugins, die du nicht brauchst, und einige andere sind auf Kinsta-Seiten sogar verboten.
In diesen Fällen solltest du einen anderen Ansatz wählen.
2. Aktiviere Brotli auf dem Server
Wenn es um die Wahl des Servertyps geht, ist Nginx vs Apache ein langjähriger Kampf, den (im Moment) Ersterer gewinnt. Trotzdem können beide Servertypen die Brotli-Komprimierung aktivieren, und es gibt verschiedene Ansätze für beide.
Bevor du dich mit dem manuellen Ansatz beschäftigst, solltest du ein paar Voraussetzungen kennen:
- Du solltest wissen, wie du auf die Konfigurationsdateien deines Servers zugreifen kannst.
- Kommandozeilenkenntnisse sind von Vorteil, vor allem bei Apache-Servern. Um Befehle auszuführen, brauchst du einen Root-User mit den Rechten
sudo. - Möglicherweise benötigst du einen Texteditor, aber für schnelle Änderungen wie diese solltest du keine Probleme haben.
- In manchen Fällen brauchst du deine Anmeldedaten als SSH-Benutzer (Secure Shell) auf dem Server selbst. Diese findest du in deinem Hosting-Kontrollpanel oder du fragst beim Support nach.
Wenn du Zweifel an der manuellen Vorgehensweise hast, empfehlen wir dir, eine andere Option in Betracht zu ziehen oder dich an deinen Hoster zu wenden. Unabhängig davon geben wir dir einen kurzen Überblick über den Prozess für jeden einzelnen Server, beginnend mit Nginx.
Nginx
Um die Brotli-Komprimierung auf Nginx-Servern zu aktivieren, musst du zunächst die Datei nginx.conf finden. Sie befindet sich an einem von mehreren Orten:
/usr/local/nginx/conf/etc/nginx/usr/local/etc/nginx
Wenn du die Datei geöffnet hast, füge Folgendes am Ende hinzu:
brotli on;
brotli_static on;
brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;Diese Suite schaltet Brotli ein und nutzt es, um statische Dateien bereitzustellen. Die Einstellung brotli_comp_level kannst du je nach Anwendungsfall und Bedarf ändern. Höhere Werte bieten eine bessere Komprimierung, aber auch eine geringere Leistung der Webseite.
Apache
Da Apache flexibel konfigurierbar ist, kannst du die Brotli-Komprimierung ohne großen Aufwand aktivieren.
Befolge dazu die folgenden Schritte:
- Melde dich mit einer Eingabeaufforderung oder einem Terminalprogramm als Root-User
sudobei deinem Server an. - Führe den Befehl
a2enmod brotliaus, um die Komprimierung zu aktivieren. - Füge in Apache VirtualHost oder in deiner Serverkonfiguration die Zeile
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascripthinzu, um die richtigen Dateitypen festzulegen, die du komprimieren möchtest.
Obwohl der Apache keine statische Komprimierung unterstützt, kannst du den Grad der Brotli-Komprimierung in der Zeile BrotliCompressionQuality LEVEL-NUMBER ändern. Allerdings musst du den Platzhalter „LEVEL-NUMBER“ durch eine Zahl zwischen 1-11 ersetzen.
3. Verwende einen unterstützenden Webhoster
Der einfachste Weg, die Brotli-Komprimierung für deine Webseite zu aktivieren, ist, sicherzustellen, dass dein Hoster dies standardmäßig tut. Kinsta bietet dank seiner Integration in das CDN von Cloudflare standardmäßig Brotli-Kompression an.
Das Kinsta CDN wird bei allen Tarifen von der Cloudflare-Infrastruktur gespeist – so nutzt jede Seite die Brotli-Kompression, ohne dass du sie aktivieren musst.
Du solltest prüfen, ob dein gewählter Hoster die Brotli-Komprimierung anbietet und in welchem Umfang du sie konfigurieren musst. Um eine möglichst leistungsstarke, stabile und sichere Webseite zu betreiben, ist ein gutes Hosting unerlässlich.
Zusammenfassung
Datenkompression ist ein notwendiger Bestandteil der Entwicklung und Nutzung des modernen Webs. Die Dateigrößen können aufgrund der vielen und komplexen Dateitypen, die du zum Aufbau einer Webseite verwendest, in die Höhe schießen. Sie alle benötigen eine Form der Komprimierung.
Bislang wurde in der Regel GZIP verwendet, aber es gibt einen neuen Kandidaten.
Die Komprimierungstechnologie von Brotli basiert auf der gleichen Grundlage wie GZIP, bietet aber einige leistungssteigernde Vorteile. Wie wir bereits besprochen haben, nutzt Brotli das Context Mapping, um eine Komprimierungsanfrage schneller zu bearbeiten, und ein Wörterbuch, das eine dynamische Population verwendet. Dies ist viel umfangreicher als das, was GZIP bieten kann, und ermöglicht es auch mobilen Nutzern, von der Komprimierung zu profitieren.
Die gute Nachricht ist, dass jede Kinsta-Webseite aufgrund unserer einzigartigen Cloudflare-Integration von der Brotli-Kompression profitieren kann. Das bedeutet, dass deine bei Kinsta gehostete Webseite schneller ist als die der Konkurrenz, die GZIP verwendet, und auch auf kleineren Geräten schnell lädt.
Hast du Fragen zur Brotli-Komprimierung? Frag einfach in den Kommentaren unten!
Schreibe einen Kommentar