So gruppieren und minifizieren Sie Ressourcen in WordPress

Die bestmögliche Leistung zu erzielen, ist der Traum aller, die eine Website verwalten. Ressourcen in WordPress zu gruppieren und zu minimieren, ist eine der besten Maßnahmen, die wir dafür ergreifen können, aber es kann wirklich schwierig sein. Alle Ihre Ressourcen (hauptsächlich CSS- und JS-Dateien) zu gruppieren, kann Ihre Website gefährden, wenn Sie kein Entwickler sind, da dies zu Konflikten führen kann.

WP Speed of Light ist die beste Lösung, um deine WordPress-Website zu beschleunigen, denn es bietet viele Optionen, um deine Website mit einem wirklich benutzerfreundlichen Dashboard schnell laden zu lassen, und ja, eine dieser Optionen ist das Gruppieren und Minimieren von Ressourcen. Das Ein- und Ausschließen einzelner Dateien aus dem Gruppierungs- und Minimierungsprozess ist der Schlüssel für eine individuelle Optimierung ohne Konflikte.

Für diesen Blogbeitrag verwenden wir eine Beispiel-WordPress-Website und lernen, wie man das macht, damit der Prozess zur Konfiguration von allem einfacher wird.

Wie man eine WordPress-JS- und CSS-Minifizierung durchführt

Lernen wir, wie man eine WordPress-JS- und CSS-Minifizierung durchführt, aber zuerst müssen wir wissen, was Minifizierung bedeutet: „Minifizierung bezeichnet den Prozess des Entfernens unnötiger oder redundanter Daten, ohne die Verarbeitung der Ressource durch den Browser zu beeinträchtigen – z. B. Codekommentare und Formatierungen, das Entfernen ungenutzten Codes, die Verwendung kürzerer Variablen- und Funktionsnamen und so weiter“.

Jetzt werden wir einen Geschwindigkeitstest für unsere Seite durchführen, um die Änderungen zu sehen. Für dieses Beispiel verwenden wir eine Website mit WooCommerce und einigen Produkten, sodass sie beim ersten Mal etwas langsam lädt.

Ja, 2,79 Sekunden zum Laden der Seite, nicht schlecht, aber es könnte besser sein. Lass uns einfach das JS und CSS minifizieren und den Unterschied sehen. Gehe zu WP Speed of light > SpeedUp > Group & Minify, dort siehst du das Menü mit allen Optionen zum Minifizieren. Die kostenlose Version des Plugins enthält die Option zum Gruppieren und Minifizieren, aber der visuelle Dateiausschluss ist nur in der PRO-Addon-Version verfügbar.

Die Optionen des PRO-Addons sind: Inline-Skript ausschließen (Inline-Skript von der Minifizierung ausschließen), Skripte in den Footer verschieben (ermöglicht es Ihnen, Ihre Website zu beschleunigen, indem alle minifizierten Skripte in den Footer verschoben werden), Schriftarten und Google Fonts gruppieren (lokale Schriftarten und Google Fonts in einer einzigen Datei gruppieren, um sie schneller auszuliefern) und erweiterter Dateiausschluss.
 
Sie haben die Möglichkeit, wie Sie sehen, JS, CSS und auch das HTML zu minifizieren. Aktivieren Sie einfach diese Optionen, klicken Sie auf Speichern und alle Ihre Ressourcen werden sofort minifiziert. Es könnte Probleme geben, da es sich um eine erweiterte Konfiguration handelt, aber alles kann durch den Ausschluss einiger Codes und Dateien behoben werden (mit dem Pro-Addon).

Jetzt ist die gesamte Entwicklerarbeit, die Stunden dauern könnte, in nur wenigen Sekunden erledigt.

Nächster Schritt: CSS und JS in WordPress optimieren

Mit diesem Plugin lassen wir WordPress CSS und JS optimieren, indem wir einfach die Gruppenoptionen im Dashboard aktivieren. Gehen Sie zu WP Speed of Light > SpeedUp > Group & Minify, wo Sie ein Dashboard mit den Optionen zum Gruppieren von CSS und JS sehen werden.

Mit diesen Optionen können Sie:

• JS gruppieren: Das Zusammenfassen mehrerer JavaScript-Dateien in einer einzigen Datei minimiert die Anzahl der HTTP-Anfragen
• CSS gruppieren: Das Gruppieren mehrerer CSS-Dateien in einer einzigen Datei minimiert die Anzahl der HTTP-Anfragen.

HTTP-Anfragen: Dies sind Anfragen, die an den Server gesendet werden, jedes Mal wenn wir etwas auswählen oder zu einer anderen Seite derselben Website navigieren. Wenn wir diese Anfragen reduzieren können, würde sich die Ladezeit verringern.

Um zu prüfen, wie viele Dateien und Skripte du auf deiner Website gruppieren kannst, öffne einfach die Browser-Konsole (Rechtsklick > Untersuchen oder F12) und öffne das Netzwerk-Panel.

Anschließend können Sie alle geladenen Dateien nach Typ auflisten; in diesem Beispiel habe ich nur auf die JS-Dateiliste geklickt.

Da wir uns nun in diesen Einstellungen befinden, aktivieren Sie einfach die Gruppenoptionen (Group CSS und Group JS) und klicken Sie auf Speichern. Beachten Sie, dass diese Optionen mit Vorsicht verwendet werden sollten und Sie Ihre Seite testen müssen, da sie Konflikte verursachen können.

Machen wir es ernst und optimieren wir das Schriftgewicht

Was? Noch mehr Optimierung? Ja! Du kannst die Schriftstärke optimieren, und es ist so einfach wie das Aktivieren der Option in den Einstellungen. Gehe einfach zu WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts -Option.
Die Option „Group fonts and Google fonts“ ermöglicht es dir, sie in einer einzigen Datei zu bündeln, um sie schneller auszuliefern. Das ist sehr praktisch, da die meisten WordPress-Themes und -Layouts standardmäßig mit 2 oder mehr Schriftarten in allen Varianten (regular, bold, italic...) geliefert werden. 

Aktivieren Sie einfach diese Option, klicken Sie auf Speichern und alle Schriftarten werden gruppiert.

Nachdem wir nun alle Optionen zum Minimieren und Gruppieren der Ressourcen aktiviert haben, sollten wir einen Unterschied in der Ladezeit unserer Website sehen. Prüfen wir die Geschwindigkeit.

Was für ein Unterschied, von 2,8 auf 0,56 Sekunden! Wie wir Ihnen zu Beginn dieses Beitrags gesagt haben, können wir die Ladezeit verbessern ;)

So verwenden Sie den Ausschluss bei der Dateiminifizierung

Die Minifizierung kann auf Ihrer Website Probleme verursachen. Dies geschieht hauptsächlich, wenn Sie bestimmte Dateien gruppieren, die Syntaxfehler oder ähnliche Variablen- oder Klassennamen enthalten. Deshalb können Sie mit der Option „Datei-Minifizierungsausschluss“ Dateien vom Minifizierungs- und Gruppierungsprozess ausschließen. Gehen Sie zu WP Speed of Light > SpeedUp > Group & Minify, dort sehen Sie die Option Erweiterter Dateiausschluss .

Um den erweiterten Dateiausschluss zu verwenden, müssen Sie zuerst einen Scan ausführen, die Option aktivieren und auf Scan ausführen klicken.

 
Um die auf Ihrer Website geladenen Skripte auflisten zu können, WP Speed of Light Ihren Ordner scannen, um sie aufzulisten. Sie sind normalerweise alle in Ihrem /wp-content-Ordner enthalten, der alle Ihre Plugins und Themes gruppiert. Wählen Sie diesen Ordner (mindestens) aus und klicken Sie auf “Jetzt scannen”

Es wird ein Scan ausgeführt; klicken Sie abschließend auf Ergebnisse anzeigen, wenn der Scan abgeschlossen ist.

Darunter sollte eine Liste der Dateien nach Typ (Alle, JS, CSS, Font) sortiert angezeigt werden. Wenn Sie eine Datei identifiziert haben, die Probleme verursacht, wenn Sie die Dateigruppierung und -minifizierung aktivieren, können Sie sie hier mit einem einfachen ON/OFF-Schalter ausschließen.

Dies hilft Ihnen, Dateien auszuschließen und auf diese Weise jedes Problem, das beim Minifizieren von Ressourcen auftreten kann, einfach zu lösen… Der Prozess des Gruppierens und Minifizierens erfordert immer noch etwas Arbeit, insbesondere beim Testen, aber es lohnt sich definitiv, und Sie werden. immer in der Lage sein, zu testen, wie es funktioniert, indem Sie den Geschwindigkeitstest direkt von WP Speed of Light ausführen.
 
Probieren Sie es aus und testen Sie WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light