So minimieren Sie CSS-/JavaScript-Informationen in WordPress (3 Strategien)

Möchten Sie Dokumente auf Ihrer WordPress-Webseite minimieren?

Das Minimieren Ihrer WordPress CSS- und JavaScript-Informationen kann dazu führen, dass sie schneller geladen werden und Ihre WordPress-Site beschleunigen.

In diesem Handbuch zeigen wir Ihnen, wie Sie CSS/JavaScript-Dateien in WordPress einfach verkleinern können, um die Leistung und Geschwindigkeit zu verbessern.

Was ist Minifikation und wann brauchen Sie sie?

Der Ausdruck „minimieren“ wird verwendet, um ein System zu beschreiben, das die Dateigröße Ihrer Website verringert. Dies geschieht, indem Leerzeichen, Linien und unerwünschte Personen aus dem Ressourcencode entfernt werden.

Hier ist eine Instanz des Standard-CSS-Codes:

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

Nach dem Minimieren des Codes sieht es so aus:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

Im Allgemeinen wird empfohlen, nur Dokumente zu minimieren, die an die Browser der Benutzer gesendet werden. Dies umfasst HTML-, CSS- und JavaScript-Dateien.

Sie können PHP-Dokumente auch minimieren, aber das Minimieren wird die Seitenladegeschwindigkeit für Ihre Kunden nicht erhöhen. Das liegt daran, dass PHP eine serverseitige Programmiersprache ist, das heißt, sie arbeitet auf Servern, bevor etwas an den Internetbrowser des Besuchers gesendet wird.

Der Vorteil der Minimierung von Datendateien ist eine verbesserte WordPress-Geschwindigkeit und Gesamtleistung, wenn man bedenkt, dass kompakte Informationen schneller geladen werden können.

Nichtsdestotrotz denken einige Gurus, dass der Funktionsfortschritt für die meisten Websites ziemlich gering und der Schwierigkeit nicht würdig ist. Durch die Minifizierung werden auf den meisten WordPress-Websites nur mehrere Kilobyte an Daten entfernt. Sie können viel mehr Seitenladezeit minimieren, indem Sie Bilder für das World Wide Web optimieren.

Wenn Sie versuchen, eine Bewertung von 100/100 bei Google Pagespeed oder GTMetrix-Software zu erreichen, dann wird die Minimierung von CSS und JavaScript Ihre Punktzahl deutlich erhöhen.

Nachdem wir das erwähnt haben, werfen wir einen Blick darauf, wie Sie CSS/JavaScript auf Ihrer WordPress-Webseite mühelos minimieren können.

Wir gehen über 3 verschiedene Auswahlmöglichkeiten hinaus, für die Sie sich entscheiden können:

Alles bereit? Beginnen wir mit unserem besten vorgeschlagenen Prozess.

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

Diese Technik ist einfacher und wird allen Verbrauchern empfohlen. Es 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 unserem Phase-by-Move-Leitfaden zur Einrichtung eines WordPress-Plugins.

WP Rocket ist das beste WordPress-Caching-Plugin auf dem Markt. Es ermöglicht Ihnen, Caching ganz einfach in WordPress einzufügen und die Geschwindigkeit der Website und die Ladezeiten der Website erheblich zu erhöhen.

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

Nach der Aktivierung sollten Sie die Webseite Einstellungen » WP Rocket aufrufen und zur Registerkarte „Dateioptimierung“ wechseln.

Von hier aus müssen Sie sich die Minify CSS Documents-Lösung ansehen.

WP Rocket zeigt Ihnen dann eine Warnung an, dass dies Punkte auf Ihrer Website spalten könnte. Fahren Sie fort und klicken Sie einfach auf die Schaltfläche „Minify CSS aktivieren“. Sie können diese Auswahl jederzeit deaktivieren, wenn sie Probleme mit Ihrer Internetseite auslöst.

Anschließend müssen Sie zum Abschnitt „JavaScript-Dokumente“ weiter unten scrollen.

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

Auch hier sehen Sie eine Warnung, dass dies Dinge auf Ihrer Website knacken könnte. Fahren Sie fort und klicken Sie einfach auf die Schaltfläche „JavaScript minimieren“.

Vergessen Sie danach nie, auf die Schaltfläche Anpassungen beibehalten zu klicken, um Ihre Konfigurationen beizubehalten.

WP Rocket beginnt nun mit der Minimierung Ihrer CSS- und JavaScript-Informationen. Sie können Ihren Cache in den Plugin-Einstellungen löschen, um sicherzustellen, dass er das minimierte CSS und JavaScript für den zukünftigen Webseitenbesucher verwendet.

Technik 2. Minimieren Sie CSS/JavaScript in WordPress mit SiteGround

Wenn Sie SiteGround als Ihren WordPress-Webhosting-Dienstleister anwenden, können Sie CSS-Dateien minimieren, die mit SiteGround Optimizer arbeiten.

SiteGround Optimizer ist ein allgemeines Plugin zur Leistungsoptimierung, das auf ihrem eigenen System ausgeführt wird. Es funktioniert gut mit seinem ultraschnellen PHP, um die Ladezeiten Ihrer Website zu verbessern.

Richten Sie einfach das SiteGround Optimizer-Plugin auf Ihrer WordPress-Website ein und aktivieren Sie es. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Einfügen eines WordPress-Plugins.

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

Dies bringt Sie nur zu den SG Optimizer-Einstellungen.

In diesem Artikel müssen Sie weniger auf die Schaltfläche „Gehe zum Frontend“ als auf „Andere Optimierungen“ klicken.

Auf dem nächsten Monitor müssen Sie den Schalter neben der Lösung „CSS-Dateien minimieren“ umschalten.

In Kürze müssen Sie zur Registerkarte JavaScript wechseln und den Schalter umschalten, der zur Auswahl „JavaScript-Dateien minimieren“ führt.

Das ist alles! Sie können jetzt Ihren WordPress-Cache leeren und einen Blick auf Ihre Website werfen, um minimierte Versionen von CSS- und JS-Dokumenten zu laden.

Ansatz 3. Minimieren Sie CSS/JavaScript mithilfe von Autoptimize

Diese Methode wird für Verbraucher vorgeschlagen, die nicht auf SiteGround sind und nicht mit WP Rocket arbeiten.

Zunächst müssen Sie das Autoptimize-Plugin einrichten und aktivieren. Weitere Einzelheiten finden Sie in unserer Phase-by-Action-Richtlinie zur Installation eines WordPress-Plugins.

Bei der Aktivierung müssen Sie einen Blick auf die Webseite Optionen » Autoptimize werfen , um die Plugin-Optionen zu konfigurieren.

In diesem Artikel müssen Sie zunächst die Option „JavaScript-Code optimieren“ unter den JavaScript-Optionen aktivieren.

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

Vergessen Sie nie, auf die Schaltfläche Conserve Adjustments zu klicken, um Ihre Konfigurationen zu speichern.

Dann können Sie einfach auf die Schaltfläche Vacant Cache klicken, um mit der Arbeit mit Ihren minimierten Datendateien zu beginnen. Das Plugin kann auch verwendet werden, um JavaScript und CSS in WordPress zu blockieren.

Wir hoffen, dass dieser Beitrag Ihnen geholfen hat, CSS und JavaScript auf Ihrer WordPress-Webseite zu minimieren. Vielleicht möchten Sie auch unser Tutorial zur Optimierung der Core-Net-Vitals in WordPress sehen und unser bestes allgemeines WordPress-Performance-Tutorial befolgen.

Wenn Ihnen dieser Beitrag gefallen hat, abonnieren Sie unbedingt unseren YouTube-Kanal für WordPress-Film-Tutorials. Sie können uns auch auf Twitter und Facebook begegnen.