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

Niemand will eine langsame Website. Langsame Ladezeiten frustrieren die Besucher und schaden den Suchergebnissen.

Als Spezialisten für WordPress-Performance-Optimierung haben wir festgestellt, dass das Mining von CSS- und JavaScript-Dateien dazu beitragen kann, eine schnellere und effizientere Website zu erstellen.

In dieser Anleitung zeigen wir Ihnen, wie Sie CSS- und JavaScript-Dateien in WordPress ganz einfach minifizieren können, um die Leistung und Geschwindigkeit zu verbessern und so die Benutzerfreundlichkeit und die Sichtbarkeit in Suchmaschinen zu erhöhen.

Was ist Minifizierung und wann brauchen Sie sie?

Der Begriff „minify“ wird verwendet, um eine Methode zu beschreiben, die die Dateigröße Ihrer WordPress-Website verringert. 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 Verkleinerung des Codes sieht er wie folgt aus:

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

In der Regel wird empfohlen, nur Dateien zu minifizieren, die an den Browser des Benutzers gesendet werden. Dazu gehören HTML-, CSS- und JavaScript-Dateien.

Sie können auch PHP-Dateien verkleinern, aber das wird die Ladegeschwindigkeit der Seite für Ihre Benutzer nicht verbessern. Das liegt daran, dass PHP eine serverseitige Programmiersprache ist, d. h. sie wird auf Servern ausgeführt, bevor etwas an den Webbrowser des Besuchers gesendet wird.

Der Vorteil des Minifying von Dateien ist die verbesserte Geschwindigkeit und Leistung von WordPress, da kompakte Dateien schneller geladen werden.

Einige Experten sind jedoch der Meinung, dass die Leistungsverbesserung bei den meisten Websites sehr gering ist und sich die Mühe nicht lohnt. Bei den meisten WordPress-Websites werden nur einige Kilobytes an Daten entfernt. Sie können die Ladezeit von Seiten stärker reduzieren, indem Sie Bilder für das Web optimieren.

Wenn Sie versuchen, bei Google PageSpeed Insights oder dem GTMetrix-Tool einen Wert von 100/100 zu erreichen, wird das Mining von CSS und JavaScript Ihren Wert erheblich verbessern.

Schauen wir uns nun an, wie Sie CSS/JavaScript auf Ihrer WordPress-Website einfach minifizieren können. Wir gehen auf 3 verschiedene Optionen ein, aus denen Sie wählen können:

Sind Sie bereit? Fangen wir mit der von uns empfohlenen Methode an.

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

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

Zunächst müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

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

Weitere Details finden Sie in unserem Tutorial zur Installation und Einrichtung von WP Rocket in WordPress.

Nach der Aktivierung müssen Sie die Seite Einstellungen “ WP Rocket besuchen und auf die Registerkarte „Datei-Optimierung“ wechseln.

Hier müssen Sie die Option CSS-Dateien minimieren aktivieren.

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

Als Nächstes müssen Sie zum Abschnitt JavaScript-Dateien weiter unten blättern.

Aktivieren Sie hier einfach das Kästchen neben der Option „JavaScript-Dateien minimieren“.

Auch hier wird eine Warnung angezeigt, die darauf hinweist, dass dies zu Problemen auf Ihrer Website führen kann. Klicken Sie auf die Schaltfläche „Minimieren von JavaScript aktivieren“.

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

WP Rocket beginnt nun mit dem Mining Ihrer CSS- und JavaScript-Dateien. Sie können Ihren Cache in den Plugin-Einstellungen leeren, 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 verwenden, können Sie CSS-Dateien mit SiteGround Optimizer minifizieren.

SiteGround Optimizer ist ein Plugin zur Leistungsoptimierung, das auf seiner eigenen Plattform arbeitet. Es arbeitet gut mit 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 für die Installation eines WordPress-Plugins.

Danach müssen Sie auf das Menü SG Optimizer in Ihrer WordPress-Admin-Seitenleiste klicken.

Dadurch gelangen Sie zu den SG-Optimierungseinstellungen.

Von hier aus müssen Sie auf die Schaltfläche „Go To Frontend“ unter „Other Optimizations“ klicken.

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

Sie müssen das Kästchen neben der Option „CSS-Dateien minimieren“ aktivieren.

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

Das war’s schon! Sie können jetzt Ihren WordPress-Cache leeren und Ihre Website besuchen, um die minimierten Versionen der CSS- und JS-Dateien zu laden.

Methode 3. CSS/JavaScript mit Autoptimize verkleinern

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

Zunächst müssen Sie das Autoptimize-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

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

Hier müssen Sie zunächst die Option „JavaScript-Code optimieren“ unter JavaScript-Optionen aktivieren.

Danach müssen Sie nach unten zu den CSS-Optionen blättern.

Dort 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 Rendering-blockierende JavaScript und CSS in WordPress zu beheben.

Wir hoffen, dieser Artikel hat Ihnen geholfen, CSS und JavaScript auf Ihrer WordPress-Website zu minimieren. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Optimierung von Core Web Vitals in WordPress und unsere Expertenauswahl der besten Drag-and-Drop-WordPress-Seitenerstellungsprogramme.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.