Minify HTML in TYPO3
Eine Möglichkeit, um den Pagespeed, also die Ladezeit einer TYPO3-Website zu verbessern, ist den HTML-Output zu komprimieren. In diesem Artikel zeigen wir, wie’s geht.
Wozu Minify HTML verwenden?
Webentwickler:innen arbeiten mit Einrückungen und Kommentaren im HTML-Code, um diesen zu strukturieren und sich jederzeit gut im Quellcode zurechtfinden zu können. Was die Arbeit der Entwickler:innen beschleunigt, kann sich hingegen negativ auf die Ladezeit der Webseite auswirken. Denn je mehr Daten übertragen werden müssen, desto mehr Zeit nimmt das Laden der HTML-Dateien in Anspruch. Daher ist es ratsam, das HTML-Markup zu komprimieren und alles was für den Browser zum Darstellen der Internetseite überflüssig ist, zu entfernen.
Nicht nur aus Aspekten des technischen SEO ist der Pagespeed einer Website relevant. Auch für eine optimierte User Experience sollten bei der Entwicklung einer Website Maßnahmen ergriffen werden.
Beispiel eines Codes ohne Komprimierung (574 Zeichen):
Beispiel eines Codes mit Komprimierung (130 Zeichen):
HTML-Code komprimieren: Los geht's!
In nur drei Schritten lässt sich über eine PSR-15 Middleware eine Reihe von verfügbaren HTML-Minfiern in ein TYPO3-Projekt einbinden:
1. Kompression-Library installieren:
Über Composer lassen sich viele unterschiedliche Libraries installieren, welche die Komprimierung der HTML-Dateien vornehmen. Als weit verbreitetes Package, das sehr schnell und zuverlässig arbeitet, empfehlen wir voku/html-min. Für Composer-basierte TYPO3-Projekte kann das Package über folgenden Befehl auf Ihrer Website installiert werden:
composer require voku/html-min
2. PSR-15 Middleware registrieren:
Als nächstes muss eine Middleware in TYPO3 eingebunden werden, um die Komprimierung der HTML-Dateien zum richtigen Zeitpunkt bei der Generierung durch TYPO3 ausführen zu können. Hierfür eignet sich die Stelle unmittelbar bevor die Datei-Größe des Markups in den Request-Header eingetragen wird.
3. Markup komprimieren:
Nachdem der Minifier installiert ist und die Middleware eingerichtet wurde, muss der Request-Body überschrieben werden. Dazu wird der Seiteninhalt vor der Auslieferung geladen, komprimiert und als Stream zurück in den Body Ihrer Website gegeben.
Tipps für das Komprimieren mit dem HTML-Minifier
In der Regel entfernen HTML-Minifier großzügig alle Kommentare im Markup des HTML-Codes. Manche Kommentare sollten jedoch bestehen bleiben. Dies sind beispielsweise Copyright-Informationen, oder Anweisungen für Suchmaschinen wie Google und die TYPO3-eigene Suche. In unserem Beispiel kann dies im Minfier konfiguriert werden:
Fazit der HTML-Komprimierung mit HTML-Minifier
In unserem Test benötigt der HTML-Minifier etwa 50 bis 100 ms zum Verkleinern, also Komprimieren der HTML-Struktur. Meist werden Anfragen vom Browser direkt über den TYPO3-Cache beantwortet, weshalb die HTML-Komprimierung nicht bei jedem Seitenaufruf erfolgen muss. Auch, wenn es sich meist nur um wenige KB Ersparnis handelt, wirkt die komprimierte Version des Markups dennoch "aufgeräumter" und frei von internen Hinweisen und Notizen. Somit stellt diese Komprimierung eine schnelle und gute Möglichkeit dar, um die Ladezeit einer TYPO3-Website zu optimieren.
Mehr als 20 Jahre TYPO3 Erfahrung. Das unterscheidet uns.
Unsere Expertise im Bereich TYPO3 Entwicklung sowie die hohe Skalierbarkeit des Content Management Systems TYPO3 sind die ideale Grundlage für ein erfolgreiches Internet-Projekt und die digitale Zukunft Ihres Unternehmens.
