HTML komprimieren in 3 Schritten: Theoretisches Know-how und praktische Tipps

1. Was bedeutet es, den HTML-Code einer Website zu komprimieren und warum ist es wichtig?
2. Definition: HTML-Komprimierung
3. Bedeutung der Minimierung und Komprimierung
4. Welche Auswirkungen hat die Größe des HTML-Codes auf die Ladezeit, Benutzererfahrung und SEO?
5. Einstieg in die Praxis: Differenzierung zwischen automatischer und manueller HTML-Komprimierung
6. 3 Schritte, um die Größe des HTML-Codes zu reduzieren, ohne die Funktionalität der Website zu beeinträchtigen
7. Wie kann die Effektivität der Komprimierung von HTML-Code gemessen und überwacht werden?
8. Welche Tools stehen zur Verfügung, um den HTML-Code zu komprimieren?
9. Fazit: Automatisierte Komprimierung von HTML, CSS und JavaScript bietet diverse Vorteile!

Obwohl heutzutage nahezu alle User*innen einen Breitbandanschluss haben und man meinen müsste, die Ladegeschwindigkeit von Webseiten spiele eine untergeordnete Rolle, lässt sich Gegensätzliches beobachten: Die Seitenladegeschwindigkeit (engl. Pagespeed) ist für User*innen und auch für den Suchmaschinenbetreiber Google ein elementares Kriterium bei der Beurteilung von Webseiten. Die Komprimierung des HMTL-Codes ist ein Mittel zur Steigerung der Pagespeed.

Als Bestandteil der technischen Suchmaschinenoptimierung (SEO) gehört die HTML-Komprimierung den komplizierteren SEO-Maßnahmen an. Wir machen das Thema einfach und erklären dir in diesem Blogbeitrag in 3 simplen Schritten, wie du HTML-Dateien komprimieren kannst!

Was bedeutet es, den HTML-Code einer Website zu komprimieren und warum ist es wichtig?

„Bei der Datenkomprimierung wird die Anzahl der für die Darstellung von Daten benötigten Bits verringert. Durch die Komprimierung von Daten kann Speicherkapazität eingespart [und] die Dateiübertragung beschleunigt [werden].“ (Sliwa/Crocetti, 2024)

Der Code in HTML-Dokumenten lässt sich auf mehrere Weisen verkleinern. Ein Ansatz hierzu ist die Verkleinerung (auch: Reduzierung; Minimierung) des HTML-Codes. Der andere Ansatz ist die Komprimierung. Um verständlich zu machen, was es bedeutet, den HTML-Code zu komprimieren, erläutern wir zunächst die Reduktion des Codes.

Begriffliche Abgrenzung zur Komprimierung: Was die Minimierung des HTML-Codes ist und wie sie funktioniert

Maßnahmen zur Reduktion des HTML-Codes sind beispielsweise die Streichung aller unnötigen Bestandteile im Code, wozu allem Leerzeichen, Zeilenumbrüche und Kommentare gehören können. Du kannst es dir wie Text auf einem Blatt Papier vorstellen:

• Vor der Streichung der unnötigen Leerzeichen, Zeilenumbrüche und Kommentare nimmt der Text z. B. ein Drittel des Platzes ein.
• Zudem erfassen deine Augen die Leerzeichen, Zeilenumbrüche und Kommentare, was mehr Zeit in Anspruch nimmt, als wenn du den gesamten Text unterbrechungsfrei liest.
• Jetzt, nach der Kürzung des Textes, kommst du beim Lesen schneller voran und der Text nimmt vielleicht nur noch die Hälfte des Blattes ein.

Bei der HTML-Minimierung verhält es sich nicht anders, denn HTML-Dokumente sind nichts anderes als Text in einem digitalen Editor. Je weniger unnötige Elemente in diesem Text eingebunden sind, umso schneller kann er gelesen werden und umso weniger Platz nimmt er in Anspruch.

Definition: HTML-Komprimierung

In Abgrenzung zur HTML-Minimierung ist die HTML-Komprimierung etwas grundlegend anderes. Auch die Komprimierung trägt zur Verringerung der Dateigröße bei, jedoch werden dabei nicht die Leerzeichen, Zeilenumbrüche und Kommentare gestrichen. Stattdessen werden mehrere Strings – also Zeichenketten – durch einen Pointer ersetzt, was die Dateigröße um bis zu 20 % reduzieren kann.

Bedeutung der Minimierung und Komprimierung

Wieso die HTML-Minimierung sowie die HTML-Komprimierung wichtig sind? Weil Webseiten mit komprimiertem HTML-Code und darüber hinaus auch mit komprimierten CSS- und JavaScript-Dateien schneller laden. Die Ladezeit wiederum beeinflusst die Erfahrungen, die Nutzer*innen auf Webseiten machen. Je besser diese Erfahrungen sind, umso zufriedener sind die Nutzer*innen und umso höher fällt deren Bereitschaft aus, auf der schnell ladenden Webseite z. B. ein Produkt zu kaufen.

Für den Erfolg mit deiner Website sind die Ladezeit und somit auch die Größe des HTML-Codes auf jeder einzelnen Unterseite relevant. Wenn du deinen HTML-Code reduzierst und komprimierst, förderst du damit die Erreichung deiner individuellen Ziele, da du die User*innen besser zufriedenstellst und damit deren Bereitschaft zur Durchführung der von dir angestrebten Aktion (z. B. Produktkauf; Abschluss eines Abos) auf deiner Website steigerst.

Welche Auswirkungen hat die Größe des HTML-Codes auf die Ladezeit, Benutzererfahrung und SEO?

Die Auswirkungen des HMTL-Codes auf die Ladezeit, Benutzererfahrung und Suchmaschinenoptimierung (SEO) sind weitreichend. Folglich entwickeln sich die HTML-Minimierung und HTML-Komprimierung zu wichtigen Bestandteilen einer professionellen Onpage-Optimierung im Online Marketing.

In den folgenden drei Abschnitten bieten wir eine Übersicht über die verschiedenen Auswirkungen der Größe des HTML-Codes. Dabei beziehen wir uns u. a. auf Erkenntnisse aus Tests sowie Studien und auf die offiziellen Stellungnahmen von Google. Die folgenden Informationen werden dir auch den Übergang zu unserer Anleitung zur HTML-Komprimierung erleichtern.

Auswirkungen des HTML-Codes auf die Ladezeit

Die Browser von Nutzern*innen fragen bei dem Aufruf einer Seite beim Server an, damit dieser Dateien übermittelt. Erst durch die Übermittlung der Dateien wird eine Webseite sicht- und nutzbar. Zur Darstellung der Seite muss der Browser u. a. den Quellcode auslesen. Neben dem HTML-Code gehören hierzu auch der CSS- und JavaScript-Code.

Der Ablauf, in dem der Quellcode vom Server an den Browser der User*innen übermittelt wird, nimmt mehr Zeit in Anspruch, je umfassender der Quellcode ist. Hierbei handelt es sich um eine schlichte Tatsache der Webentwicklung und IT. Somit wirkt sich der HTML-Code definitiv auf die Ladezeit aus. In diesem Zusammenhang sind folgende weitere Überlegungen relevant:

• Website-Betreiber*innen verwenden meist ein Content-Management-System (CMS), das sie zur Individualisierung ihrer Website um Plugins erweitern. Jedes Plugin trägt zusätzlichen HTML-, CSS- und JavaScript-Code mit sich.
• Häufig setzen Entwickler*innen zur besseren Übersichtlichkeit und Arbeit an einer Website Leerzeichen und Kommentare. Diese müssen vom Server übermittelt und vom Browser ebenfalls ausgelesen werden.
• Nicht immer verwenden Entwickler*innen die für die Ladezeit vorteilhafte Kurzschreibweise. Eventuell teilen sie z. B. mehrere CSS-Befehle auf mehrere Zeilen auf, anstelle diese in einem Befehl und einer Zeile zu bündeln.

Die in der Aufzählung genannten Aspekte wirken sich nachteilig auf die Ladezeit von Webseiten aus. Was hierbei zu beachten ist: Die Nutzung des Internets über mobile Endgeräte ist in den letzten Jahren stark gestiegen. User*innen greifen beim Surfen häufig auf mobile Daten zurück. Da Technologien wie 4G, LTE und 5G noch nicht flächendeckend ausgebaut sind, machen sich bei der Nutzung der mobilen Datenverbindung die negativen Auswirkungen eines großen HTML-Codes noch stärker bemerkbar.

Falls du HTML-, CSS- und JavaScript-Dokumente komprimierst, indem du u. a. Leerzeichen, Zeilenumbrüche und Kommentare aus dem Code entfernst, erreichst du daher definitiv eine höhere Seitenladegeschwindigkeit. Das beweisen nicht zuletzt auch Tests wie die von Vodafone: Das Unternehmen Vodafone setzte zur Optimierung der Ladegeschwindigkeit beispielsweise auf eine HTML-Komprimierung und war damit nachweislich erfolgreich. (web.dev, 2024)

Auswirkungen des HTML-Codes auf die Benutzererfahrung

Die Benutzererfahrung (engl. User Experience; UX) ist im Online-Marketing eine der wichtigsten Komponenten. In Anbetracht der großen Konkurrenz im World Wide Web ist es essenziell, die Ansprüche der eigenen Zielgruppe zu befriedigen; andernfalls finden die User*innen auf einer konkurrierenden Website definitiv ein adäquates Angebot.

Im Verlaufe der letzten Jahrzehnte hat sich das Marketing von Unternehmen als Reaktion auf die große Konkurrenz und die Vielfalt an Produkten sowie Dienstleistungen grundlegend gewandelt – weg von der Zentrierung auf die eigenen Angebote sowie Produkte. Passend hierzu hat sich im Fachgebiet des User-Experience-Designs (UX-Designs) der Ansatz des menschenzentrierten Designprozesses etabliert.

Der menschenzentrierte Designprozess sieht eine Fokussierung der Bedürfnisse von User*innen bei der Entwicklung von Produkten, Dienstleistungen, Systemen, Apps und Webseiten vor. Einer der zentralen Aspekte hierbei ist die Usability (deutsch: Nutzerfreundlichkeit). Diese wiederum wird maßgeblich von der Ladezeit beeinflusst. Es ist kaum zu glauben, aber wahr:

• Jede zusätzliche Sekunde an Ladezeit steigert die Absprungrate der User*innen auf der Website des Nachrichtensenders BBC um 10 Prozent. (Clark, 2018)
• Durch die Verbesserung der Ladezeit konnte Vodafone unter anderem den Gesamtumsatz um 8 Prozent steigern. (web.dev, 2024)
• Eine Verbraucherstudie von Ericsson (Pressemitteilung, 2016) hat gezeigt, dass ein geringer Pagespeed zu Stressreaktionen bei User*innen führen kann.

Das Entwicklerteam von Google kommt zum Schluss, dass die Ladegeschwindigkeit von Webseiten „ein wesentlicher Aspekt einer guten User Experience“ ist. Weiter: „Wenn Websites sehr viel Code versenden, müssen Browser den Datentarif des Nutzers in Megabyte verwenden, um ihn herunterzuladen. Insbesondere Mobilgeräte haben begrenzte CPU-Leistung und -Speicher. Dies kann zu schlechten Leistungsbedingungen führen […].“ (web.dev, 2024) In diesem Zitat werden die Auswirkungen vom Quellcode auf die Ladezeit explizit erwähnt, was unsere Ausführungen aus dem vorigen Abschnitt über die Auswirkungen des HTML-Codes auf die Ladezeit untermauert.

Auswirkungen des HTML-Codes auf die SEO

In der Suchmaschinenoptimierung ist die Ladezeit von Webseiten ein Rankingfaktor von Google. Über die exakte Gewichtung dieses Rankingfaktors ist nichts bekannt, jedoch hat Google laut Angaben seines Entwicklerteams „viel Zeit und Mühe investiert, um eine Reihe von nutzerorientierten Leistungsmesswerten zu definieren, die sogenannten Core Web Vitals.“ (web.dev, 2024) Somit ist davon auszugehen, dass die Ladezeit sogar ein äußerst relevanter Faktor für das Ranking von Webseiten in den Suchergebnissen ist.

Angesichts der bisherigen Informationen über die Auswirkungen des HTML-Codes auf die Ladezeit und die Benutzererfahrung und in Anbetracht der Bemühungen von Google bei der Entwicklung der Core Web Vitals ist klar: Die Größe des HTML-Codes wirkt sich vielfältig auf die SEO aus. Googles Entwickler Philip Walton spricht in einem Artikel über die Web Vitals (2024) konkrete Empfehlungen zur Ladeleistung aus.

• Walton empfiehlt, sich an der Kennzahl LCP (Largest Contentful Paint) zu orientieren.
• Eine gute Ladezeit liegt vor, wenn der LCP spätestens innerhalb von 2,5 Sekunden erfolgt. Noch besser ist ein geringerer Messwert.
• Messwerte zwischen 2,5 und 4 Sekunden sind verbesserungswürdig.
• Bei einem nach 4 Sekunden eintretenden LCP besteht eine schlechte Ladezeit, die laut Google nicht im Sinne der Nutzerfreundlichkeit ist.

Schlussendlich lässt sich feststellen, dass die Ladezeit und dadurch auch die Größe des HTML-Codes definitiv einen Einfluss auf die Suchmaschinenoptimierung ausübt. Durch die Komprimierung von HTML-Code dürfen Website-Betreiber*innen, SEO-Experten*innen und Webentwickler*innen berechtigterweise eine verbesserte Platzierung in den Suchmaschinen erwarten.

Einstieg in die Praxis: Differenzierung zwischen automatischer und manueller HTML-Komprimierung

In Online-Ratgebern ist vereinzelt von automatischer und manueller HTML-Komprimierung die Rede. Hierbei handelt es sich allerdings um eine fehlerhafte Bezeichnung, denn es gibt keine manuelle Komprimierung. Die manuellen Maßnahmen zur Reduzierung der Dateigröße entsprechen einer Minimierung:

• Die manuelle HTML-Komprimierung, also die HTML-Minimierung (auch: HTML-Reduzierung), umfasst die Entfernung von Zeilenumbrüchen, Leerzeichen und Kommentaren.
• Diese Maßnahme der HTML-Reduzierung lässt sich auch zur Minimierung des Codes bei CSS- und JavaScript-Dateien anwenden.
• Bei der Reduzierung von CSS-Dateien gibt es außerdem die Möglichkeit, Kurzschreibweisen zu verwenden. Dabei werden mehrere Befehle in einer Zeile anstatt in mehreren Zeilen zusammengefasst.

Die Aufzählung zeigt, dass beim Thema HTML-Komprimierung die begriffliche Differenzierung zwischen Minimierung/Reduzierung sowie Komprimierung wichtig ist. Bei der Minimierung/Reduzierung werden Dateien tatsächlich verkleinert, indem unnötige Elemente entfernt werden. Die Komprimierung hingegen meint keine Verkleinerung von Dateien, sondern deren Verdichtung – dies kann nur mittels Tools und somit automatisiert erfolgen.

Auf Empfehlungen für Tools, mit denen sich HTML-, CSS- und JavaScript-Dateien minimieren oder auch komprimieren lassen, gehen wir weiter unten näher ein.

3 Schritte, um die Größe des HTML-Codes zu reduzieren, ohne die Funktionalität der Website zu beeinträchtigen

1. Um HTML zu komprimieren, brauchst du ein Tool. Hierzu wählst du z. B. Gzip oder Deflate.
2. Sobald du dieses Tool aktiviert hast, musst du die HTML-Komprimierung im Server aktivieren; dieser Vorgang variiert mit dem jeweiligen Server.
3. Auf Apache und anderen NCSA-kompatiblen Webservern aktivierst du die Komprimierung durch das Hinzufügen des folgenden Codes in die .htaccess-Konfigurationsdatei:

<IfModule mod_deflate.c>

<FilesMatch "\\.(js|css|html|htm|php|xml|svg|txt)$">

SetOutputFilter DEFLATE

</FilesMatch>

</IfModule>

Weiterführende Informationen zu GZIP. 

Nach der Aktivierung der HMTL-Komprimierung werden die Browser von Usern*innen die Dateien komprimiert ausliefen. Da sich Gzip und Deflate auch zur Komprimierung von CSS-und JavaScript-Dateien eignen, schlägst du mehrere Fliegen mit einer Klappe und steigerst die Ladegeschwindigkeit deiner Website deutlich.

Wie kann die Effektivität der Komprimierung von HTML-Code gemessen und überwacht werden?

Zur Messung der Effektivität der HTML-Komprimierung empfiehlt sich eindeutig der Einsatz von SEO-Tools. Ein besonderes Beispiel hierfür ist das SEO-Tool Ryte. Als eines der wenigsten Tools zur Technical SEO bietet Ryte einen gesonderten Komprimierungs-Report, in dem sich für sämtliche Arten von Dokumenten alle aktiven Komprimierungen einsehen lassen.

Des Weiteren ist die Nutzung von Tools empfehlenswert, die eine Auswertung der Seitenladegeschwindigkeit beinhalten. Wenn du eine HTML-Komprimierung vornimmst und ansonsten keine Maßnahmen zur Steigerung der Pagespeed ergreifst, aber sich die Ladezeit der Seite verbessert, kannst du davon ausgehen, dass dies an der HTML-Komprimierung liegt.

Leistungsstarke Tools zur Prüfung der Ladegeschwindigkeit von Webseiten sind:

• Seobility
• SE Ranking
• Sistrix

Zudem gibt es kostenlose Online-Tools, mit denen sich ohne Anmeldung und Login auf die Schnelle prüfen lässt, ob die Komprimierung auf dem Server aktiviert ist. Eines davon ist eKiwi.de.

Welche Tools stehen zur Verfügung, um den HTML-Code zu komprimieren?

Die HTML-Komprimierung verläuft immer automatisch über den Einsatz von Tools und CMS-Plugins. Die bekanntesten Tools zur Komprimierung sind GZIP und Deflate; diese wurden auch in der oberen Anleitung zur HTML-Komprimierung genannt. Ein besonders beliebtes Plugin fürs CMS WordPress zur Code-Komprimierung ist „Autoptimize“.

Bei GZIP und Deflate werden ähnliche Strings in Dokumenten lokalisiert und für den Moment des Datentransfers von Server zu Browser temporär durch Strings mit gleichem Platzhalter substituiert. Dies bewirkt eine deutliche Reduktion der Dauer für die Datenübertragung und steigert auf diese Weise die Ladegeschwindigkeit von Webseiten.

Neben der Komprimierung von HTML-, CSS- und JavaScript-Dateien lässt sich auch die Minimierung der Codes mithilfe von Tools durchführen. Hierzu die folgende Tabelle mit unseren Empfehlungen:

Es ist aufwändig, den Code manuell durchzugehen und alle Leerzeichen, Zeilenumbrüche sowie Kommentare händisch zu entfernen. Daher sind die Tools zur Verkleinerung von HTML-, CSS- und JavaScript-Dateien eine willkommene Hilfe. Einige dieser Tools beinhalten auch die Dateikomprimierung, jedoch solltest du der Qualität wegen zur HTML-Komprimierung stets die erprobten Algorithmen in den Tools GZIP und Deflate verwenden.

Fazit: Automatisierte Komprimierung von HTML, CSS und JavaScript bietet diverse Vorteile!

Obwohl die Komprimierung von HTML-, CSS- und JavaScript-Dateien manchmal einen komplizierten Eindruck vermittelt, lässt sich der Prozess mithilfe der Tools Gzip und Deflate sowie unserer Code-Schnipsel einfach umsetzen. Nutze die in diesem Beitrag genannten Tools und Tipps, um die Dateigröße deiner HTML-Dokumente zu reduzieren und eine schnellere Ladezeit zu erreichen! Dadurch profitieren deine SEO und deine Website-Besucher*innen, was dir zu mehr Erfolg mit deiner Website verhilft.

Bedenke außerdem, dass sich neben den HTML-Dokumenten auch andere Dateien komprimieren lassen, wie beispielsweise Bilder – hierzu haben wir dir in unserem Artikel übers „Bilder komprimieren“ hilfreiche Informationen, Tipps und Anleitungen zusammengestellt.