Jekyll: HTML und CSS mittels gzip bzw. brotli komprimieren

15. Mai 2020 Stephan

Im letzten Jekyll-Beitrag, ging es um das Minimieren von HTML und CSS. Ergänzend dazu, zeige ich euch in diesem Beitrag, wie ihr die generierten HTML- und CSS-Dateien zusätzlich noch per gzip oder brotli kompimieren könnt.

Verwendete Software für diesen Beitrag

Jekyll v4.0.0
Jekyll Gzip v2.4.2
Jekyll Brotli v2.2.1
Apache v2.4 inkl. den aktivierten Modulen mod_rewrite und mod_headers

Dateien mit gzip und brotli komprimieren

Prinzipiell gibt es zwei Varianten, die Dateien komprimiert vom Webserver zum Client zu übermitteln:

"on the fly": der Webserver komprimiert eine unkomprimierte Datei bzw. Ressource immer in dem Augenblick, in dem die Datei angefragt wurde
vorkomprimiert: die Dateien liegen bereits vorkomprimiert vor und der Webserver muss diese nur ausliefern ohne selbst jedes Mal die Dateien zu komprimieren

Im Folgenden beschreibe ich die Umsetzung der "vorkomprimierten"-Variante in Verbindung mit Jekyll. Damit Jekyll beim Generieren der HTML- und CSS-Dateien (und weiterer Assets, wie z.B. JavaScript- und SVG-Dateien) neben der unkomprimierten auch eine komprimierte Version einer Datei erstellt, könnt ihr ein entsprechenden Plugin verwenden. Hierfür gibt es Jekyll Gzip und Jekyll Brotli (alternativ gibt es auch ein Plugin für Zopfli).

Hinweis gzip vs. brotli

Es bietet sich an sowohl eine mit gzip- als auch eine mit brotli-komprimierte Dateiversion anzulegen. Modernen Webbrowsern, die die brotli-Komprimierung unterstützen, werden brotli-komprimierte Dateien ausgeliefert. Als Fallback für Webbrowser, die brotli nicht unterstützen, wird diesen alternativ die gzip-komprimierte Datei übermittelt.

Im ersten Schritt müssen die beiden Plugins installiert werden. Dazu fügt im Gemfile eures Jekyll-Projekts die ensprechenden Gems hinzu. Bei mir würde das so aussehen:

source 'https://rubygems.org' do
    gem 'jekyll', '~> 4.0.0'
    gem 'jekyll-gzip', '~> 2.4.2'
    gem 'jekyll-brotli', '~> 2.2.1'
end

Gemfile

Anschließend öffnet eure Konsole, wechselt ins Projektverzeichnis und installiert die Gems mit dem folgenden Befehl:

bundle install

Terminal / Konsole

Jetzt ist noch die Konfiguration _config.yml anzupassen, so dass die Plugins auch verwendet werden:

plugins:
    - jekyll-gzip
    - jekyll-brotli

YAML - Datei: _config.yml

Von nun erzeugt Jekyll neben den unkomprimierten auch gzip- und brotli-komprimierte Dateien. Für die Seite dieses Beitrags hat Jekyll bei mir z.B. folgende 3 Dateien generiert:

jekyll-html-assets-komprimieren.html
jekyll-html-assets-komprimieren.html.br
jekyll-html-assets-komprimieren.html.gz

Webserver komprimierte Dateien ausliefern lassen

Damit der Webserver, im konkreten Fall Apache, die komprimierten Dateien anstelle der unkomprimierten ausliefert, ist dieser entsprechend zu konfigurieren.

In meinem Fall habe dafür einfach die .htaccess meines Blogs erweitert. Die folgenden Konfigurationsanweisungen habe ich der Apache-Doku der Module mod_brotli bzw. mod_deflate entnommen:

RewriteEngine On

RewriteCond "%{HTTP:Accept-encoding}" "br"
RewriteCond "%{REQUEST_FILENAME}\.br" -s

RewriteRule "^(.*)\.(css|html|svg)" "$1\.$2\.br" [QSA]
RewriteRule "\.css\.br$"    "-" [T=text/css,E=no-brotli:1,E=no-gzip:1]
RewriteRule "\.html\.br$"   "-" [T=text/html,E=no-brotli:1,E=no-gzip:1]
RewriteRule "\.svg\.br$"    "-" [T=image/svg+xml,E=no-brotli:1,E=no-gzip:1]

RewriteCond "%{HTTP:Accept-encoding}" "gzip"
RewriteCond "%{REQUEST_FILENAME}\.gz" -s

RewriteRule "^(.*)\.(css|html|svg)" "$1\.$2\.gz" [QSA]
RewriteRule "\.css\.gz$"    "-" [T=text/css,E=no-gzip:1]
RewriteRule "\.html\.gz$"   "-" [T=text/html,E=no-gzip:1]
RewriteRule "\.svg\.gz$"    "-" [T=image/svg+xml,E=no-gzip:1]

<FilesMatch "(\.css\.br|\.html\.br|\.svg\.br)$">
    RemoveLanguage br
    Header append Content-Encoding br
    Header append Vary Accept-Encoding
</FilesMatch>

<FilesMatch "(\.css\.gz|\.html\.gz|\.svg\.gz)$">
    Header append Content-Encoding gzip
    Header append Vary Accept-Encoding
</FilesMatch>

Datei: .htaccess

Als erstes prüft der Webserver, ob der Webbrowser bzw. Client brotli unterstützt. Wenn das der Fall ist und für die angefragte Datei eine brotli-komprimierte Datei vorhanden ist, dann wird diese ausgeliefert. Sollte der Webbrowser brotli nicht unterstützen, so folgt der gleiche Ablauf nochmals für gzip.

Hinweis Apache-Module mod_rewrite und mod_headers müssen aktiviert sein

Damit die o.a. Konfiguration funktioniert, muss euer Apache mit aktiviertem mod_rewrite und mod_headers ausgeführt werden.

Der Webserver wird zudem angewiesen komprimierte Dateien nicht noch einmal selbst zu komprimieren, was der Fall wäre, wenn ihr mod_brotli oder mod_deflate aktiviert habt.

Fazit

Ebenso wie das Minimieren, ist auch das Komprimieren der von Jekyll generierten Dateien recht einfach zu bewerkstelligen. Dadurch werden die Webseiten und Asset-Dateien, wie z.B. CSS-Dateien, eurer Jekyll-Website bzw. eures Jekyll-Blog nun komprimiert an eure Benutzer übertragen.