Performance-Optimierung: Brotli-Kompression und all-inkl.com

Symbolbild: Geschwindigkeit

Eine wichtige Maßnahme, um die Website schneller laden zu lassen, ist die Komprimierung von Textdateien. Der Flaschenhals ist immer die Internetverbindung und nicht die Power des Servers oder des Rechners des Nutzers.

Daher ist es sinnvoll, die Textdateien zu komprimieren. Dazu zählen nicht nur die klassischen Textdateien mit der Endung .txt, sondern auch PHP-, CSS-, HTML-, Javascript-Dateien und einige weitere. Bilder sollte man auf dem Server nicht komprimieren, da die sinnvolle Vorgehensweise es ist, sie vorher in einem Grafikprogramm für Webeinsatz zu komprimieren. Sie noch einmal zusätzlich auf dem Server zu komprimieren würde kaum was bringen, aber den Server unnötig belasten.

Bis vor ein paar Tagen habe ich dafür gzip bzw. mod_deflate genutzt. Dafür hatte ich in der .htaccess meiner Projekte folgenden Code-schnipsel hinzugefügt:

# mod_deflate aktivieren
<FilesMatch "\\.(js|css|html|htm|php|xml|svg|txt)$">
SetOutputFilter DEFLATE
</FilesMatch>

Das hat viele Jahre gute Dienste geleistet und brav die Dateien mit den genannten Endungen komprimiert. Aber für die Webserver gibt es einen noch effektivere Komprimierungsmethode mit dem lustigen Namen Brotli. Angeblich ist mit Brotli eine Verbesserung in der Kompression von bis zu 20 Prozent möglich.

Das klingt interessant und daher habe ich den Support von all-inkl.com angeschrieben und die haben mir bestätigt, dass Brotli auf dem Server aktiv ist und standardmäßig folgende Dateien komprimiert:

text/html text/plain text/xml text/css text/javascript application/x-javascript application/javascript application/json application/x-font-ttf application/vnd

Wer mit dieser Dateiauswahl zufrieden ist, der muss nichts mehr machen. Es sind diesbezüglich keine Angaben in der .htaccess zu machen. Da ich aber an einigen Stellen SVG-Grafiken im Einsatz habe, fehlte mir die Angabe zu diesem Dateityp. Im Gegensatz zu JPEG oder PNG sind SVG keine Rastergrafiken, sondern Vektorgrafiken basierend auf XML, also einem Textdateiformat.

Um das nachzurüsten, reicht es leider nicht, nur das SVG-Format manuell in der .htaccess zu ergänzen, du musst alle Dateitypen noch einmal eintragen, die du komprimieren möchtest. Dafür gibt es zwei Methoden:

# Brotli aktivieren, Methode 1
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/x-javascript application/javascript application/json image/svg+xml
# Brotli aktivieren, Methode 2
<FilesMatch "\\.(js|css|html|htm|php|xml|svg|json|txt|csv)$">
SetOutputFilter BROTLI_COMPRESS
</FilesMatch>

Ich habe mich für die zweite Methode entschieden, und zwar aus zwei Gründen. Zum einen ist es für mich wesentlich einfacher, mit Dateiendungen zu arbeiten als mit MIME-Type. Zum anderen hat die zweite Methode leicht bessere Werte in PageSpeed Insights geliefert, was zwar eigentlich nicht sein sollte, aber ich habe es dennoch dankend angenommen.

Brotli ist aktiv
Brotli ist aktiv, das kannst du an dem Kürzel “br” erkennen.

Und was hat die ganze Aktion gebracht? Vor dem Umstieg auf Brotli wurde die Startseite auf 16,8 komprimiert. Brotli schafft hierbei 14,9 KB. Das sind Pi mal Daumen 11 Prozent. Klingt zwar nach nicht viel, aber das gilt dann für alle oben genannte Dateien und das läppert sich.

Image(s) licensed by Ingram Image/adpic.

Diesen Beitrag teilen:

Verwandte Beiträge:

2 Kommentare

  1. Total spannend. Kannte Brotli vorher noch gar nicht.
    Danke für den Tipp.

    Duelliere mich gerade mit WP Rocket, das von sich aus die entsprechenden gzip-Regeln in die htaccess wirft. Aber in Zeiten von HTTP/2 und …. Brotli stellt sich mir spontan die Frage nach Sinn und Zweck eines so umfangreichen Plugins. 🤔
    Mal abwägen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.