Categories
Wordpress

Wie man CSS/JavaScript-Dateien in WordPress verkleinert

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.

minifiy-css-js-in-wordpress

Was ist Minifizierung und wann brauchen Sie sie?

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:

  • Methode 1. CSS/JavaScript in WordPress mit WP Rocket minimieren (empfohlen)
  • Methode 2. CSS/JavaScript in WordPress mithilfe von SiteGround minimieren
  • Methode 3. CSS/JavaScript mit Autoptimize minimieren

Sind Sie bereit? Dann 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 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.

Minify CSS files in WP Rocket

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.

Activate CSS minify

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“.

WP Rocket minify JavaScript files

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.

Methode 2. CSS/JavaScript in WordPress mit SiteGround minifizieren

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.

SG Optimizer

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.

SiteGround frontend optimization

Auf dem nächsten Bildschirm müssen Sie das Kästchen neben der Option „CSS-Dateien minimieren“ aktivieren.

Minify CSS in SiteGround

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.

Methode 3. CSS/JavaScript mithilfe von Autoptimize verkleinern

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.

Autoptimize JavaScript options

Danach müssen Sie nach unten zu den CSS-Optionen scrollen und das Kästchen neben der Option „CSS-Code optimieren“ aktivieren.

Autoptimize CSS code

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.

Eigenes css in WordPress einbinden

Es kann vorkommen, dass Sie auf Ihrer WordPress-Website benutzerdefinierte CSS hinzufügen müssen. Für die meisten ...

Die 6 besten WordPress CDN Services 2022

Sind Sie auf der Suche nach dem besten WordPress CDN-Service für Ihre Website? Ein CDN-Service ...