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

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.

RB Performance E Book Newsletter 02

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. 

linie infobox

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.

linie infobox

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 z. B. Google Fonts. Zudem ist das Plugin mit vielen bekannten Caching-Plugins kompatibel. 

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

Autoptimize

WP Speed
of Light

Kostenlos ja ja ja ja ja
Geeignet für Anfänger Anfänger Fortgeschrittene + Profis Anfänger + Fortgeschrittene Anfänger + Fortgeschrittene
HTML-Komprimierung nein nein ja ja ja
CSS-Komprimierung ja ja ja ja ja
JavaScript-Komprimierung ja ja ja ja ja
Bewertung 4/5 3/5 4/5 5/5 4/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.

Kennst du schon die aktuellen WordPress-News?

Erhalte alle zwei Wochen unsere neusten Blog-Artikel und Neuigkeiten rund um WordPress!

Ja, ich bin mit der Datenverarbeitung einverstanden.
Beitragsbild: Paula Schmidt | Unsplash