Autor
26. April 2022
Autor
Möchten Sie Dateien auf Ihrer WordPress-Website minimieren?
Das Mining Ihrer WordPress-CSS- und JavaScript-Dateien kann dafür sorgen, dass sie schneller geladen werden und Ihre WordPress-Website schneller wird.
In dieser Anleitung zeigen wir Ihnen, wie Sie CSS/JavaScript-Dateien in WordPress einfach minifizieren können, um die Leistung und Geschwindigkeit zu verbessern.
Der Begriff „Minifizieren“ beschreibt eine Methode, mit der die Dateigröße Ihrer Website verringert wird. Zu diesem Zweck werden Leerzeichen, Zeilen und unnötige Zeichen aus dem Quellcode entfernt.
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 verkleinern, die an die Browser der Benutzer gesendet werden. Dazu gehören HTML-, CSS- und JavaScript-Dateien.
Sie können auch PHP-Dateien minifizieren, aber dadurch wird die Ladegeschwindigkeit der Seite für Ihre Benutzer nicht verbessert. 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 durch die Minifizierung nur einige Kilobyte an Daten entfernt. Durch die Optimierung von Bildern für das Web können Sie die Ladezeit einer Seite weiter verkürzen.
Wenn Sie versuchen, einen Wert von 100/100 bei Google Pagespeed oder GTMetrix zu erreichen, dann wird das Mining von CSS und JavaScript Ihren Wert erheblich verbessern.
Schauen wir uns also an, wie Sie CSS/JavaScript auf Ihrer WordPress-Website ganz einfach minifizieren können.
Wir gehen auf 3 verschiedene Optionen ein, aus denen Sie wählen können:
Sind Sie bereit? Dann fangen wir mit der von uns empfohlenen Methode an.
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 Einzelheiten 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 ganz einfach Caching hinzuzufügen und die Geschwindigkeit Ihrer Website und die Ladezeiten der Seiten erheblich zu verbessern.
Weitere Einzelheiten finden Sie in unserer Anleitung 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 zu Problemen auf Ihrer Website führen kann. 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“ weiter unten scrollen.
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 nun auf die Schaltfläche „JavaScript minieren“ 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 beim nächsten Website-Besucher verwendet werden.
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 der 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 Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Danach müssen Sie auf das SG Optimizer-Menü in Ihrer WordPress-Admin-Seitenleiste klicken.
Dies bringt Sie zu den SG Optimizer-Einstellungen.
Von hier aus müssen Sie auf die Schaltfläche „Go To Frontend“ unter „Andere Optimierungen“ klicken.
Auf dem nächsten Bildschirm müssen Sie das Kästchen neben der Option „CSS-Dateien minimieren“ aktivieren.
Als Nächstes müssen Sie zur Registerkarte „JavaScript“ wechseln und das Kästchen neben der Option „JavaScript-Dateien minimieren“ aktivieren.
Das war’s schon! Sie können nun Ihren WordPress-Cache leeren und Ihre Website besuchen, um die minimierten Versionen der CSS- und JS-Dateien zu laden.
Diese Methode wird für Benutzer empfohlen, die nicht bei 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 zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Einstellungen “ Autoptimize besuchen, um die Einstellungen des Plugins 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 scrollen und 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-Blockierungen von JavaScript und CSS in WordPress zu beheben.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, CSS und JavaScript auf Ihrer WordPress-Website zu minimieren.
Die beliebtesten Beiträge