HTML, CSS und JavaScript reduzieren: So einfach funktioniert es in WordPress

Sven Scheuerle Aktualisiert am 21.10.2020
9 Min.
css minifizierung
Zuletzt aktualisiert am 21.10.2020

Das Minifizieren von HTML-, CSS- und JavaScript-Dateien ist eine von vielen kleinen Stellschrauben, um die Ladegeschwindigkeit deiner Webseite zu optimieren. In diesem Beitrag erklärt dir Sven Scheuerle, was es mit dem Verkleinern von CSS, HTML und Co. auf sich hat, wie viel Ladezeit du durch schlanken Code einsparst und welche WordPress-Plugins dir bei der Umsetzung helfen.

Wenn du dir in der heutigen Zeit die Websites im World Wide Web anschaust, stellst du schnell fest, dass diese mit Seiten vor noch 10 Jahren in keinster Weise zu vergleichen sind. In den Anfängen reichte ein einfacher HTML-Code und ein wenig Text vollkommen aus. Heutzutage jedoch, bestehen Webseiten aus umfangreichem Code, der häufig sowohl aus HTML, CSS und JavaScript besteht. Das liegt zum einen am Funktionsumfang, der mittlerweile für Websites zur Verfügung steht, aber auch an den immer umfangreicheren Designs und Templates, die im Webdesign genutzt werden. 

So kommt es also nicht selten vor, dass HTML-, CSS- oder auch JavaScript-Dateien schnell hunderte von Kilobyte groß sind. Um alle diese Codes in den Dateien zu verarbeiten und die Webseite darstellen zu können, sendet der Webbrowser zahlreiche Anfragen (sogenannte HTTP-Requests) an den Server. 

Je mehr „Requests” gesendet werden, desto länger die Ladezeit. Um die Anzahl der Abfragen so gering wie möglich zu halten, und somit auch die Ladezeit der Website, solltest du die Dateien zusammenführen und komprimieren.  

Was bedeutet Minifizierung von HTML-, CSS- und JavaScript?

Die Minifizierung – also eine möglichst starke Verringerung der Dateigröße von HTML-, CSS- und Co. – gehört zu jeder guten OnPage-Optimierung dazu. Sie macht zwar nur einen kleinen Teil der Ladezeiten aus, jedoch kann auch sie ausschlaggebend für deine Rankings in den Suchmaschinen sein. 

Gerade WordPress ist nicht dafür bekannt, dass es von Haus aus Tools für die Optimierung der Ladezeit mit sich bringt. Deshalb solltest du die Performance deiner WordPress-Seite regelmäßig prüfen.

Ladezeiten verringern

Jeder Webseitenbetreiber, der schon einmal ein Tool wie PageSeepd Insights von Google genutzt hat, kennt mit Sicherheit diesen Optimierungsvorschlag: „CSS reduzieren”

Diese Maßnahme wird von PageSpeed Insights empfohlen, wenn die Abfragen (Requests), um die CSS-Dateien abzurufen, die Ladezeit der Website stark beeinflussen. Eine ausführliche Erklärung und Erläuterungen zu weiteren Meldungen im Tool, findest du im Artikel „Google Pagespeed – Die wichtigsten Fehlermeldungen”. 

Wie die Reduzierung von CSS die Ladezeit deiner Webseite beeinflussen kann, möchte ich dir anhand eines Wasserfalldiagramms von meinem Blog bloggiraffe.de zeigen. Bei den Beispielen handelt es sich nur um kleine Ausschnitte, die jedoch schon deutlich zeigen, wie die Ladezeit verringert werden kann.

Beispiel 1 – Unkomprimiert (nicht reduziert):

css umkomprimiert
Wasserfalldiagramm – ohne Komprimierung von HTML-, CSS- und JavaScript-Dateien

Beispiel 2 – Komprimiert (reduziert):

css komprimiert
Wasserfalldiagramm – mit Komprimierung von HTML-, CSS- und JavaScript-Dateien

Schon beim Abruf der Hauptdomain ist zu erkennen, dass ich die Ladezeit von 1233 Millisekunden auf 860 Millisekunden reduzieren konnte. Auch die Ladezeiten der einzelnen Dateien konnten teilweise minimal reduziert werden.

Was passiert beim Komprimieren von HTML, CSS- und JavaScript-Dateien? 

Wie im Artikel schon kurz erwähnt, werden bei der Komprimierung von Dateien wie z. B. HTML, CSS und JavaScript, einzelne Dateien in eine einzige Datei zusammengefasst. 

Dies hat zur Folge, dass der Browser – über welchen du eine bestimmte Webseite aufrufst – weniger Anfragen an den Server senden muss, um die Website darstellen zu können und ggf. notwendige Skripte zu laden.

Ein Alltagsbeispiel zum Verständnis

Stell’ dir vor, du gehst in den Supermarkt und hast 10 Produkte auf deiner Einkaufsliste. Diese stehen aber in jeweils unterschiedlichen Gängen und Regalen. 

Folge: Es kostet unheimlich viel Zeit, bis du jedes einzelne Produkt gefunden und in den Einkaufswagen gelegt hast. 

Lösung: Du teilst dem Supermarkt vorher mit, welche Produkte du benötigst. Dieser stellt dir deine Produkte innerhalb eines Regals bereit, so dass du diese nur noch in den Einkaufswagen legen musst und an der Kasse bezahlst. 

Ergebnis: Durch die Zusammenstellung aller Produkte innerhalb eines Regals, muss du nur einen Weg durch den Supermarkt laufen und sparst so unglaublich viel Zeit. So ähnlich funktioniert das mit der Minifizierung einzelner Codes und Skripte deiner Website. Damit du siehst, wie das Ganze in der Praxis funktioniert, möchte ich dir dies anhand kleiner Beispiele zeigen. 

Datensparsamkeit hilft nicht nur bei der Performance-Optimierung.
Denn ein bewusster Umgang mit Ressourcen trägt auch dazu bei, dass deine Webseite nachhaltiger wird. Lies dir dazu gerne die Beiträge zu den Themen Wie grün ist WordPress? und Green Hosting durch.

HTML

HTML (Hypertext Markup Language) ist für das Grundgerüst einer Website notwendig. So werden hierüber die Texte, Links oder auch Bilder ausgegeben. 

Ein Standard HTML-Code sieht beispielsweise wie folgt aus: 

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Komprimiert: 

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

CSS (Cascading Style Sheets) ist keine richtige Programmiersprache. Die sogenannte Stylesheet-Sprache wird jedoch dazu genutzt, um das Aussehen einzelner Website-Elemente zu verändern. 

Ein Standard CSS-Code sieht beispielsweise wie folgt aus: 

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Komprimiert:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

JavaScript

Bei JavaScript handelt es sich um eine reine Skriptsprache, die ursprünglich für die Ausgabe von dynamischem HTML in Webbrowsern entwickelt wurde (wikipedia.org). Hiermit haben Webseitenbetreiber heute die Möglichkeit, HTML und CSS erweitert zu nutzen. 

Ein Standard JavaScript-Code (wiki.selfhtml.org) sieht beispielsweise wie folgt aus: 

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Komprimiert: 

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

Mit Hilfe der oben genannten Beispiele kannst du sehr schön sehen, wie die Minifizierung von HTML-, CSS- und JavaScript-Code funktioniert. Als Fortgeschrittener und Profi kannst du diese Komprimierung auch manuell durchführen und hierfür ein Tool wie zum Beispiel linkcode-generator.de nutzen. Als WordPress-Nutzer können dir spezielle „Minify Plugins” diese Arbeit abnehmen. Das spart nicht nur Zeit, sondern funktioniert auch voll automatisch.

5 Minify Plugins für WordPress

In der nachfolgenden Aufstellung habe ich fünf beliebte Minifizierungs-Plugins aufgeführt, welche dir die Arbeit bei der Komprimierung von HTML, CSS und JavaScript abnehmen. 

#1 Merge + Minify + Refresh

merge minify refresh

Wie der Name des Plugins Merge + Minify + Refresh (Zusammenführen + Minimieren + Aktualisieren) schon sagt, liegt der Fokus dieses Tools voll und ganz auf der Komprimierung von CSS- sowie JavaScript-Code. 

Das Plugin fasst Cascading Style Sheets (CSS) und Javascript-Dateien in einzelne Gruppen zusammen. Diese wiederum werden mit Minify für CSS sowie Google Closure für JavaScript minimiert. 

Nach der Installation in WordPress bietet dir das Plugin Merge + Minify + Refresh einige Einstellungsmöglichkeiten, um die Ladezeit deiner Website zu optimieren.

merge minify refresh wordpresspng

So kannst du hier unter anderem auswählen, ob CSS-Dateien und JS-Dateien zusammengeführt werden sollen oder nicht. Außerdem, ob die Komprimierung über WP-Cron stattfinden soll und ob die Daten außerhalb zwischengespeichert werden oder innerhalb einer Gzip-Datei komprimiert werden sollen. 

Eine sehr nützliche Funktion ist der sogenannte „HTTP2 Server Push”. Dabei werden vom Server gleich mehrere Antworten für eine Abfrage an den entsprechenden Browser gesendet. 

Die 3 wichtigsten Funktionen des Merge + Minify + Refresh Plugins: 

  • Zusammenführen / Komprimierung von CSS und JavaScript
  • HTTP2 Server Push
  • Multisitefähig

#2 WP Super Minify

wp super minify

Mit dem Plugin WP Super Minify können CSS- und JavaScript-Dateien verkleinert und zwischengespeichert werden. Das beschleunigte Laden dieser Dateien wird im Anschluss via Minify PHP Framework ermöglicht. 

Das besondere an diesem Plugin ist, dass es sich hierbei um eine Open-Source-Software handelt. Der Quellcode des Tools ist also offen und kann von jedem Nutzer weiterentwickelt werden.

In den Einstellungen von WP Super Minify gibt es für Nutzer nicht viel Auswahl. Zu sehen sind hier nur die Einstellungen für die Komprimierung von JavaScript und CSS.

wp super minif wordpress

Die wichtigsten Funktionen des WP Super Minify Plugins: 

  • Komprimierung / Reduzierung von CSS- und Javascript-Dateien
  • Minify PHP Framework

#3 Fast Velocity Minify

fast velocity minify

Das Plugin Fast Velocity Minify ermöglicht die Ladezeitoptimierung für Entwickler und fortgeschrittene Nutzer. Es reduziert zum einen die HTTP-Anfragen durch die Zusammenführung von CSS- und Javascript-Dateien und zum anderen minimiert es die Dateien mit PHP Minify. 

Im WordPress-Backend findest du nach der Installation des Minify Plugins zahlreiche Einstellungsmöglichkeiten, die den ein oder anderen Nutzer sicher etwas überfordern können. Das Gute ist: Viele Standardeinstellungen sind bereits vorgegeben, sodass es für Laien ausreicht, wenn sie das Plugin aktivieren. 

Für Fortgeschrittene und Entwickler bietet das Plugin Fast Velocity Minify viele Spielereien und Optimierungsmöglichkeiten.

fast velocity minify wordpress

Darüber hinaus bietet dieses Plugin auch eine Pro-Version an. In dieser stehen dir Funktionen für das Ausschließen verschiedener CSS- und JavaScript-Dateien zur Verfügung. 

Die wichtigsten Funktionen von Fast Velocity Minify

  • Komprimierung / Reduzierung von HTML-, CSS- und JavaScript-Dateien
  • PHP Minify
  • Ausschließen von Dateien und Skripten
  • statische Cache-Dateien
  • WP CLI-Unterstützung
  • Kompatibel mit einer Vielzahl von Caching-Plugins

#4 Autoptimize

autoptimize

Das WordPress-Plugin Autoptimize bietet dir die einfache Optimierung deiner Website. Mit nur wenigen Handgriffen kannst du HTML-, CSS- und JavaScript-Dateien komprimieren und somit die Ladezeit deiner Seite beschleunigen. 

Dabei verschiebt das Autoptimize-Plugin Skripte beispielsweise in den Footer und verzögert das Laden von Dateien, etwa HTML, CSS und JavaScript, oder auch von vielen weiteren Dateien, wie zum Beipiel Google Fonts.

Wichtig für RAIDBOXES Kunden

Autoptimize ist nicht kompatibel mit weiteren Caches, bspw. mit dem RAIDBOXES Server-Cache. Wir raten daher dringend von der Nutzung von Autoptimize auf unserem System ab!

Sobald du das Plugin in WordPress installiert hast, findest du in den Einstellungen verschiedene Registerkarten wie „JS, CSS, HTML”, „Bilder” und „Extras”. Die einzelnen Möglichkeiten und Optionen sind hier sehr gut beschrieben und auch für Laien sehr gut verständlich.

autoptimize wordpress

In der Registerkarte „JS, CSS & HTML” stehen dir verschiedene Optimierungsmöglichkeiten für die Dateien JavaScript, CSS und HTML zur Auswahl. Die Registerkarte „Bilder” ermöglicht dir die automatische Optimierung von Bildern sowie das verzögerte Laden von Bilddateien. 

Unter dem Menüpunkt „Extras” können weitere Auto-Optimierungen, z. B. für Google Fonts, für Emojis sowie für das Laden von Dateien über Drittanbieter-Domains, vorgenommen werden. 

Die wichtigsten Funktionen von Autoptimize

  • Minimierung / Zwischenspeichern von HTML-, CSS- und JavaScript-Dateien
  • Optimierung von Bildern
  • Google Fonts entfernen
  • Emojis entfernen
  • JavaScript synchronisieren
  • Kompatibel mit einer Vielzahl von Caching-Plugins

#5 WP Speed of Light

wp speed of light

Bei dem Plugin WP Speed of Light handelt es sich ebenfalls um ein WordPress-Plugin, welches HTML-, CSS- und JavaScript-Dateien zusammenfasst. Das leistungsstarke Plugin verfügt außerdem über eine Cache- und Gzip-Komprimierung, ein Datenbankbereinigungssystem und auch eine htacces-Optimierung. 

In der kostenlosen Version des WP Speed of Light-Plugins stehen dir alle Standard-Features für die Optimierung deiner Website zur Verfügung. So kannst du in den Plugin-Einstellungen die einzelnen Gruppen (HTML, CSS, JavaScript), welche du minimieren und zusammenfassen möchtest, auswählen.

wp speed of light wordpress

Darüber hinaus stehen dir in der Pro-Version des Plugins noch einige weitere Funktionen, wie z. B. das Ausschließen oder Verschieben von Skripten, zur Verfügung. 

WP Speed of Light bietet neben der reinen Komprimierung von Dateien noch viele weitere Funktionen, welche du auf einfache Weise über das übersichtliche Backend nutzen kannst. 

Die wichtigsten Funktionen des Plugins: 

  • Komprimierung von HTML-, CSS- und JavaScript-Dateien
  • Cache- und Gzip-Komprimierung
  • Gruppentools
  • Datenbankbereinigung
  • Bildoptimierung

Die Plugins im direkten Vergleich

 Merge + Minify
+ Refresh
WP Super
Minify
Fast Velocity
Minify
AutoptimizeWP Speed
of Light
Kostenlosjajajajaja
Geeignet fürAnfängerAnfängerFortgeschrittene + ProfisAnfänger + FortgeschritteneAnfänger + Fortgeschrittene
HTML-Komprimierungneinneinjajaja
CSS-Komprimierungjajajajaja
JavaScript-Komprimierungjajajajaja
Bewertung4/53/54/55/54/5

Fazit

Die Reduzierung von HTML-, CSS- oder JavaScript-Dateien kann dafür sorgen, dass du die Ladezeiten deiner Website um einige Millisekunden steigern kannst. Hierfür stehen dir in WordPress einige sehr nützliche und kostenlose Plugins zur Auswahl. 

Auch wenn diese Stellschraube nur ein kleiner Teil deiner OnPage-Optimierung ist, sollte sie stets aufs Neue überprüft werden. So stellst du sicher, dass die Ladezeit deiner Website durch die oben genannten Dateien nicht negativ beeinflusst wird.

Beitragsbild: Paula Schmidt | Unsplash

Sven Scheuerle - Selbstständiger Freelancer und Affiliate-Marketer aus Leidenschaft, ist bereits seit vielen Jahren im Online-Marketing aktiv. Außerdem ist er Blogger und berichtet auf seinem Blog BLOGGiraffe.de, regelmäßig über die Selbstständigkeit im Online-Business und gibt seinen Lesern Tipps & Tricks.

Ähnliche Artikel

Kommentare zu diesem Artikel

Michael Hörnlimann
Michael Hörnlimann

Hi Sven

Danke für diesen Einblick und die Tipps!

Ich habe jedoch die Erfahrung gemacht, dass das Minimieren von CSS zu unschönen Nebeneffekten geführt hat. Beispielsweise war nach der Minimierung der Button-Style plötzlich anders (padding war weg), was dann unschön dargestellt wurde.

Viel Ladezeit konnte ich durch die Optimierung leider auch nicht rausholen, lediglich die Anzahl Requests hat sich verringert. Da dadurch aber wie erwähnt das Design in Mitleidenschaft gezogen wurde (vermutlich abhängig vom Theme), hab ich die Minimierung wieder entfernt.

Zudem überrascht mich, dass Autoptimize in deinem Rating am besten abschneidet (RAIDBOXES empfiehlt es meines Wissens explizit nicht, da es mit dem serverseitigen Caching in Konflikt steht).

Viele Grüsse
Michael

Sven
Sven

Hi Michael,

das kann durchaus passieren, da hast du Recht. Du hast hier aber auch die Möglichkeit, bestimmte Pfade von der Komprimierung auszuschließen, die evtl. solche CSS-Anpassungen betreffen könnten.

Aus meiner Sicht ist Autoptimize das Plugin, welches für Anfänger am besten geeignet ist. Es bietet die wichtigsten Grundfunktionen. Für Fortgeschrittene und Profis ist das Plugin sicherlich zu “smart” :-).

VG

Mark Max Henckel
Mark Max Henckel

Doch, du kannst AUTOPTIMIZE mit dem RAIDBOXES-Cache nutzen.

N
Nils Cartsburg

Lieber Sven, danke für deinen Beitrag zu diesem Thema!
Wir können als Ergänzung noch WP-Rocket empfehlen, dass wir als in Kombination mit Raidboxes nutzen. Leider ist WP-Rocket im Vergleich zu Siteground oder WPengine nicht 100% kompatibel mit dem Plugin, so dass man sich für eine Caching Variante (Raidboxes oder WP-Rocket) entscheiden muss.

Siehe Dokumentation für weitere Informationen: https://docs.wp-rocket.me/article/670-hosting-compatibility#RAIDBOXES

Workaround ist das man WP-Rockets Caching über ein Addon einfach deaktiviert.
Siehe: https://docs.wp-rocket.me/article/61-disable-page-caching

So kann man dann glücklicherweise Komprimierung von WP-Rocket sowie alle weitere Funktionen der Speedoptimierung, sowie den serverseitigen Raidboxes Cache verwenden. Großer Vorteil ist ebenfalls die leichte Konfiguration von WP-Rocket im Vergleich zu anderes Plugins.

Mit freundlichen Grüßen,
Nils Cartsburg

Sven
Sven

Hi Nils,

vielen Dank für dein Feedback.

Ja, dass mit WP Rocket ist richtig. Nutze ich selbst auch und es ist wirklich ein tolles Plugin, dass man als Ergänzung zum Caching von Raidboxes nutzen kann :-).

VG

Michael Hörnlimann
Michael Hörnlimann

Hallo Sven

Spannend – hast du mal einen Speedtest bzw. Vergleich gemacht, wie sich das auf die Ladezeit der Website auswirkt?

Konkret:
a) Ladezeit nur mit RB-Cache
b) Ladezeit mit RB-Cache und WP Rocket

Würde mich noch interessieren, wie gross da bei dir die Differenz beim erstmaligen Laden der Website ist. Bei mir waren es lediglich rund 0.2 Sekunden.

Viele Grüsse
Michael

Sven
Sven

Hallo Michael,

nein, einen direkten Vergleich habe ich bzgl. des Caches nicht gemacht. Aber glaube, da geben sich beide nicht wirklich viel :-).

Sind beides super Tools!

VG
Sven

H
Hans

“Je mehr „Requests” gesendet werden, desto länger die Ladezeit. Um die Anzahl der Abfragen so gering wie möglich zu halten, und somit auch die Ladezeit der Website, solltest du die Dateien zusammenführen und komprimieren. ”

Sorry, aber ihr seid wohl nicht ganz auf dem aktuellen Stand. Mit http/2 können ohne Problem mehrere Abfragen gleichzeitig verarbeitet werden. In vielen Fällen mündet das in einem enormen Geschwindigkeitsvorteil. CSS-Dateien heute noch zusammenzufassen ist nicht mehr zeitgemäß und letztlich kontraproduktiv. 😉

Sven
Sven

Hallo Hans,

danke für dein Feedback.

Grundsätzlich hat die Aussage zu den Requests nach wie vor bestand. Aber es richtig, dass HTTP/2 mehrere Abfragen gleichzeitig verarbeiten kann und dies bereits ein deutlicher Vorteil ist.

Dennoch macht es nach wie vor Sinn, CSS-Dateien zu komprimieren – zumindest ist das meine Überzeugung :-).

VG

K
KARL

Einige Plugins sind quasi gleich in der Funktion. Ich habe nun alles erdenkliche versucht aber meine Seite wird einfach nicht schneller.
Java kann ich leider nicht deaktivieren. Ich habe keine Ahnung warum.
NAJA Wird schon,l… gruß KARL

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.