Wie man CSS/JavaScript-Dateien in WordPress minimiert (3 Wege)

Vor einiger Zeit haben wir festgestellt, dass die Minifizierung von CSS- und JavaScript-Dateien die Ladezeiten drastisch reduzieren kann. Nachdem wir es auf einigen WordPress-Websites getestet hatten, waren wir von den Ergebnissen begeistert. Seiten, die 5-6 Sekunden zum Laden benötigten, fielen plötzlich auf 2-3 Sekunden.

Die Wahrheit ist, jede zusätzliche Sekunde Ladezeit kostet Sie Besucher und potenzielle Kunden. Wenn Ihre CSS- und JavaScript-Dateien mit unnötigen Leerzeichen, Kommentaren und Formatierungen aufgebläht sind, verlangsamen sie buchstäblich Ihr Geschäft.

Minifizierung entfernt all diesen zusätzlichen Code, ohne die Funktionsweise Ihrer Website zu verändern.

Deshalb haben wir diesen Leitfaden zusammengestellt, der Ihnen zeigt, wie Sie Ihre WordPress-Dateien minimieren können. Wir führen Sie durch verschiedene Ansätze, damit Sie wählen können, was für Ihre Website am besten funktioniert.

Was ist Minifizierung und wann brauchen Sie sie?

Der Begriff „Minifizieren“ beschreibt eine Methode, die die Dateigrößen Ihrer WordPress-Website verkleinert. Dies geschieht durch das Entfernen von Leerzeichen, Zeilen und unnötigen Zeichen aus dem Quellcode.

Hier ist ein Beispiel für normalen CSS-Code:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Nach der Minifizierung des Codes sieht er so aus:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Normalerweise wird empfohlen, nur Dateien zu minimieren, die an die Browser des Benutzers gesendet werden. Dazu gehören HTML-, CSS- und JavaScript-Dateien.

Sie können auch PHP-Dateien minimieren, aber dies wird die Seitenladezeit für Ihre Benutzer nicht verbessern. Das liegt daran, dass PHP eine serverseitige Programmiersprache ist, was bedeutet, dass sie auf Servern ausgeführt wird, bevor etwas an den Webbrowser des Besuchers gesendet wird.

Der Vorteil der Minimierung von Dateien ist verbesserte WordPress-Geschwindigkeit und -Leistung, da kompakte Dateien schneller geladen werden.

Einige Experten glauben jedoch, dass die Leistungsverbesserung für die meisten Websites sehr gering ist und sich nicht lohnt. Minifizierung entfernt bei den meisten WordPress-Sites nur wenige Kilobytes an Daten. Sie können die Seitenladezeit stärker reduzieren, indem Sie Bilder für das Web optimieren.

Wenn Sie versuchen, eine Punktzahl von 100/100 bei Google PageSpeed Insights oder dem GTMetrix-Tool zu erreichen, wird die Minifizierung von CSS und JavaScript Ihre Punktzahl erheblich verbessern.

Nichtsdestotrotz wollen wir uns ansehen, wie Sie CSS/JavaScript auf Ihrer WordPress-Website einfach minimieren können. Wir werden 3 verschiedene Optionen durchgehen, aus denen Sie wählen können:

1. CSS/JavaScript in WordPress mit WP Rocket minimieren
2. CSS/JavaScript in WordPress mit SiteGround minimieren
3. CSS/JavaScript mit Autoptimize minimieren
4. Häufig gestellte Fragen zur Minifizierung

Bereit? Beginnen wir mit unserer am meisten empfohlenen Methode.

Methode 1. CSS/JavaScript in WordPress mit WP Rocket minifizieren

Diese Methode ist einfacher und wird für alle Benutzer empfohlen. Sie funktioniert unabhängig davon, welches WordPress-Hosting Sie verwenden.

Zuerst müssen Sie das WP Rocket Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

WP Rocket ist das beste WordPress-Caching-Plugin auf dem Markt. Es ermöglicht Ihnen, Caching einfach zu WordPress hinzuzufügen und die Website-Geschwindigkeit und Seitenladezeiten erheblich zu verbessern.

Für weitere Details siehe unser Tutorial zum Einrichten und Konfigurieren von WP Rocket in WordPress unter WP Rocket.

Nach der Aktivierung müssen Sie die Seite Einstellungen » WP Rocket besuchen und zum Tab „Dateioptimierung“ wechseln.

Von hier aus müssen Sie die Option Minify CSS-Dateien aktivieren.

WP Rocket zeigt Ihnen dann eine Warnung an, dass dies Dinge auf Ihrer Website beschädigen könnte. Klicken Sie auf die Schaltfläche „Minify CSS aktivieren“. Sie können diese Option jederzeit deaktivieren, wenn sie Probleme mit Ihrer Website verursacht.

Als Nächstes müssen Sie zum Abschnitt JavaScript-Dateien unten scrollen.

Hier aktivieren Sie einfach das Kontrollkästchen neben der Option „JavaScript-Dateien minifizieren“.

Wieder sehen Sie eine Warnung, dass dies Ihre Website beschädigen könnte. Klicken Sie auf die Schaltfläche 'Minify JavaScript aktivieren'.

Vergessen Sie danach nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

WP Rocket beginnt nun mit der Minifizierung Ihrer CSS- und JavaScript-Dateien. Sie können Ihren Cache löschen in den Plugin-Einstellungen, um sicherzustellen, dass die minifizierten CSS- und JavaScript-Dateien für den nächsten Website-Besucher verwendet werden.

Methode 2. CSS/JavaScript in WordPress mit SiteGround minimieren

Wenn Sie SiteGround als Ihren WordPress-Hosting-Anbieter nutzen, können Sie CSS-Dateien mit SiteGround Optimizer minimieren.

Der SiteGround Optimizer ist ein Performance-Optimierungs-Plugin, das auf seiner eigenen Plattform läuft. Es funktioniert gut mit ihrem Ultrafast PHP zusammen, um die Ladezeiten Ihrer Website zu verbessern.

Installieren und aktivieren Sie einfach das SiteGround Optimizer Plugin auf Ihrer WordPress-Website. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung unter wie man ein WordPress-Plugin installiert.

Danach müssen Sie im Admin-Seitenmenü Ihres WordPress auf das SG Optimizer-Menü klicken.

Dies führt Sie zu den SG Optimizer-Einstellungen.

Von hier aus müssen Sie unter 'Weitere Optimierungen' auf die Schaltfläche 'Zum Frontend gehen' klicken.

Auf dem nächsten Bildschirm können Sie das CSS-Frontend verwalten.

Sie müssen den Schalter neben der Option „CSS-Dateien minimieren“ umlegen.

Als Nächstes müssen Sie zum JavaScript-Tab wechseln und den Schalter neben der Option „JavaScript-Dateien minimieren“ aktivieren.

Das ist alles! Sie können nun Ihren WordPress-Cache leeren und Ihre Website besuchen, um minifizierte Versionen von CSS- und JS-Dateien zu laden.

Methode 3. CSS/JavaScript mit Autoptimize minimieren

Diese Methode wird für Benutzer empfohlen, die nicht bei SiteGround sind und WP Rocket nicht verwenden.

Zuerst müssen Sie das Autoptimize Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Einstellungen » Autoptimize besuchen, um die Plugin-Einstellungen zu konfigurieren.

Von hier aus müssen Sie zuerst die Option „JavaScript-Code optimieren“ unter JavaScript-Optionen aktivieren.

Danach müssen Sie zu den CSS-Optionen nach unten scrollen.

Dort angekommen, sollten Sie das Kästchen neben der Option „CSS-Code optimieren“ aktivieren.

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Dann können Sie auf die Schaltfläche Cache leeren klicken, um Ihre minimierten Dateien zu verwenden. Das Plugin kann auch verwendet werden, um render-blocking JavaScript und CSS in WordPress zu beheben.

Häufig gestellte Fragen zur Minifizierung

Hier sind Antworten auf einige der häufigsten Fragen, die Leute auch zum Minimieren von Dateien in WordPress stellen. Diese können Ihnen helfen, den Prozess und seine Vorteile für Ihre Website besser zu verstehen.

1. Was genau ist Minifizierung?

Minifizierung ist ein Prozess, der die Code-Dateien Ihrer Website kleiner macht, indem alle unnötigen Zeichen entfernt werden, ohne die Funktionsweise des Codes zu ändern. Dazu gehört das Entfernen von Leerzeichen, Kommentaren und Zeilenumbrüchen aus HTML-, CSS- und JavaScript-Dateien. Da die resultierenden Dateien kleiner und kompakter sind, kann der Browser eines Besuchers sie schneller herunterladen und verarbeiten, was zur Verbesserung der Gesamtgeschwindigkeit Ihrer Website beitragen kann.

2. Brechen die Minimierung von CSS- und JavaScript-Dateien meine Website?

Obwohl es bei modernen Plugins nicht üblich ist, kann die Minimierung manchmal zu visuellen oder funktionalen Problemen auf Ihrer Website führen. Deshalb zeigen Performance-Plugins oft eine Warnung an, bevor Sie die Funktion aktivieren. Es ist immer eine gute Idee, zuerst ein Backup zu erstellen und dann Ihre Website nach dem Aktivieren der Minimierung sorgfältig in einem Inkognito-Browserfenster zu testen. Wenn Sie Probleme feststellen, können Sie die Einstellung einfach deaktivieren oder die Funktionen des Plugins verwenden, um bestimmte Dateien auszuschließen, die den Konflikt verursachen könnten.

3. Macht die Minifizierung wirklich einen großen Unterschied?

Die Auswirkungen der Minimierung können je nach Website variieren. Bei vielen Websites werden nur wenige Kilobytes an Daten entfernt, und Sie sehen möglicherweise eine deutlichere Geschwindigkeitsverbesserung durch die Optimierung Ihrer Bilder. Wenn Ihr Hauptziel jedoch darin besteht, eine perfekte Punktzahl von 100/100 bei Geschwindigkeitstest-Tools wie Google PageSpeed Insights oder GTMetrix zu erreichen, dann ist die Minimierung Ihrer CSS- und JavaScript-Dateien ein wichtiger Schritt, der Ihre Punktzahl erheblich verbessern wird.

4. Benötige ich ein Plugin, um Dateien in WordPress zu minimieren?

Für fast alle WordPress-Benutzer ist der einfachste und am meisten empfohlene Weg, Dateien zu minimieren, die Verwendung eines Caching- oder Performance-Plugins wie WP Rocket oder Autoptimize. Diese Tools ermöglichen es Ihnen, die Minifizierung mit nur wenigen Klicks zu aktivieren. Einige Hosting-Anbieter, wie z. B. SiteGround, bieten auch eigene Optimierungs-Plugins mit diesen integrierten Funktionen an. Das manuelle Minifizieren von Dateien ist ein komplexer und riskanter Prozess, der für Anfänger nicht empfohlen wird.

Wir hoffen, dieser Artikel hat Ihnen geholfen, CSS und JavaScript auf Ihrer WordPress-Website zu minimieren. Möglicherweise möchten Sie auch unseren Leitfaden zur Optimierung der Core Web Vitals in WordPress und unsere Expertenauswahl der besten WordPress-Caching-Plugins zur Beschleunigung Ihrer Website sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.