Jekyll: HTML und CSS minimieren

7. Mai 2020 Stephan

Damit Jekyll HTML- und CSS-Code der generierten Seiten minimiert bzw. minifiziert, bedarf es nur weniger Anpassungen. Welche das sind , zeige ich euch in diesem Beitrag.

Verwendete Software für diesen Beitrag

Jekyll v4.0.0
jekyll-compress-html v3.1.0

HTML minimieren

Für die Minimierung des HTML-Codes kann ein spezielles "Compress"-Layout eingesetzt werden. Dieses Layout verwendet ihr einfach als Basis-Layout für eure eigenen Layouts und schon wird das komplette HTML minimiert.

Das Layout und die dazugehörige Dokumentation findet ihr hier: Jekyll-Layout zum Minimieren von HTML

Einige Funktionen, die das Layout euch bietet:

Entfernen von unnötigen Whitespaces (Whitespaces innerhalb <pre> bleiben erhalten)
Entfernen von Kommentaren
Löschen optionaler Start- und End-Tags
kompatibel mit GitHub Pages
bietet diverse Einstellungsmöglichkeiten
Profile-Modus

"Compress"-Layout verwenden

Ladet das "Compress"-Layout herunter und speichert es in eurem _layouts-Verzeichnis mit dem Namen compress.html ab. Anschließend müsst ihr nur im Front Matter des eigentlichen Layouts das "Compress"-Layout als Basis-Layout angeben:

---
layout: compress
---

Front Matter einer Layout-Datei

Anschließend sollte beim Aufruf eurer Jekyll-Website der HTML-Quelltext/-code minimiert sein. Optional könnt ihr nun noch individuelle Einstellungen vornehmen. Für meinen Blog verwende ich bspw. folgende Konfiguration, die in der _config.yml einzufügen ist:

compress_html:
  clippings: all

YAML - Datei: _config.yml

CSS minimieren

Das Minimieren von CSS-Dateien bzw. des entsprechenden Codes bedarf, falls ihr SASS verwendet, nur einer Anpassung in der _config.yml:

sass:
  style: compressed

YAML - Datei: _config.yml

Alternative zur Minimierung

Alternativ gibt es auch das Plugin jekyll-minifier. Damit lässt sich neben HTML und CSS z.B. auch JavaScript, XML usw. minimieren. Ich selbst habe es noch nicht ausprobiert, da ich nur HTML & CSS hier im Blog verwende und somit mit den in diesem Beitrag vorgestellten Lösungen zufrieden bin.

Fazit

Möchtet ihr eure Jekyll-Website bzw. euren Jekyll-Blog ein wenig optimieren, so ist das Minimieren von HTML, CSS, JavaScript usw. ohne großen Aufwand möglich.