Wie man Ressourcen in WordPress gruppiert und minimiert

Die bestmögliche Performance zu erzielen, ist der Traum jedes Website-Betreibers. Ressourcen auf WordPress zu gruppieren und zu minimieren ist eine der besten Möglichkeiten, dies zu erreichen, kann aber sehr schwierig sein. Das Gruppieren aller Ressourcen (hauptsächlich CSS- und JS-Dateien) kann die Website angreifbar machen, wenn man kein Entwickler ist, da dies zu Konflikten führen kann.

WP Speed of Light ist die beste Lösung für die Performance Ihrer WordPress-Website, da es zahlreiche Optionen zur Beschleunigung der Ladezeiten bietet und über ein benutzerfreundliches Dashboard verfügt. Eine dieser Optionen ist das Gruppieren und Minimieren von Ressourcen. Das Ein- und Ausschließen einzelner Dateien im Rahmen dieses Prozesses ermöglicht eine individuelle Optimierung ohne Konflikte.

Wir werden für diesen Blogbeitrag eine WordPress-Beispielseite verwenden und lernen, wie das geht, damit die Konfiguration aller Komponenten einfacher wird.

Wie man WordPress JS und CSS minimiert

Lasst uns lernen, wie man WordPress-JS und CSS minimiert, aber zuerst müssen wir wissen, was Minimierung bedeutet: „Minimierung 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 Formatierung, Entfernen von ungenutztem Code, Verwendung kürzerer Variablen- und Funktionsnamen usw.“.

Als Nächstes werden wir einen Geschwindigkeitstest unserer Seite durchführen, um die Änderungen zu sehen. In diesem Beispiel verwenden wir eine Website mit WooCommerce und einigen Produkten, daher wird die Seite beim ersten Mal etwas langsam laden.

Ja, 2,79 Sekunden zum Laden der Seite – nicht schlecht, aber es geht besser. Minimieren wir einfach mal den JS- und CSS-Code und sehen wir uns den Unterschied an. Gehen Sie dazu auf WP Speed of light > SpeedUp > Gruppieren & Minimieren . Dort finden Sie das Menü mit allen Minimierungsoptionen. Die kostenlose Version des Plugins bietet die Option zum Gruppieren und Minimieren, die visuelle Dateiausschließung ist jedoch nur in der PRO-Add-on-Version verfügbar.

Die PRO-Add-on-Optionen umfassen: Inline-Skripte ausschließen (Inline-Skripte von der Minifizierung ausschließen), Skripte in die Fußzeile verschieben (beschleunigt Ihre Website durch Verschieben aller minifizierten Skripte in die Fußzeile), Schriftarten und Google Fonts gruppieren (lokale Schriftarten und Google Fonts in einer einzigen Datei gruppieren, um eine schnellere Auslieferung zu gewährleisten) und Erweiterte Dateiausschlüsse.
 
Wie Sie sehen, können Sie nun JS, CSS und auch HTML minifizieren. Aktivieren Sie einfach diese Optionen, klicken Sie auf „Speichern“, und alle Ihre Ressourcen werden sofort minifiziert. Da es sich um eine erweiterte Konfiguration handelt, können Probleme auftreten, die sich jedoch durch den Ausschluss bestimmter Codeabschnitte und Dateien (mit dem PRO-Add-on) beheben lassen.

Die gesamte Entwicklerarbeit, die früher Stunden dauern konnte, ist nun in wenigen Sekunden erledigt.

Nächster Schritt: WordPress optimiert CSS und JS

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

Diese Optionen ermöglichen Ihnen Folgendes:

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

HTTP-Anfragen: Dies sind Anfragen, die jedes Mal an den Server gestellt werden, wenn wir etwas auswählen oder auf eine andere Seite derselben Website wechseln. Wenn wir diese Anfragen reduzieren können, verkürzt sich die Ladezeit.

Um zu überprüfen, wie viele Dateien und Skripte Sie auf Ihrer Website gruppieren können, öffnen Sie einfach die Browserkonsole (Rechtsklick > Untersuchen oder F12) und öffnen Sie 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.

Nachdem wir uns nun in diesen Einstellungen befinden, aktivieren Sie einfach die Gruppenoptionen (Gruppen-CSS und Gruppe-JS) und klicken Sie auf Speichern. Beachten Sie, dass diese Optionen mit Vorsicht zu verwenden sind und Sie Ihre Seite testen müssen, da es zu Konflikten kommen kann.

Jetzt aber ernst und optimieren wir die Schriftstärke

Was? Weitere Optimierungen? Ja! Sie können die Schriftstärke optimieren. Aktivieren Sie dazu einfach die entsprechende Option in den Einstellungen: WP Speed of Light > SpeedUp > Gruppieren & Minimieren > Schriftarten und Google Fonts gruppieren .
Mit dieser Option können Sie Ihre Schriftarten in einer einzigen Datei zusammenfassen und so die Ladezeit verkürzen. Das ist besonders praktisch, da die meisten WordPress-Themes und -Layouts standardmäßig nur zwei oder mehr Schriftarten mit allen Varianten (normal, fett, kursiv usw.) enthalten.

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

Nachdem wir nun alle Optionen zur Minimierung und Gruppierung der Ressourcen aktiviert haben, sollte sich die Ladezeit unserer Website verkürzen. Überprüfen wir die Geschwindigkeit.

Was für ein Unterschied! Von 2,8 auf 0,56 Sekunden! Wie wir Ihnen bereits am Anfang dieses Beitrags mitgeteilt haben, können wir die Ladezeit noch weiter verbessern ;)

Wie man den Ausschluss der Dateiminimierung verwendet

Die Minifizierung kann Probleme auf Ihrer Website verursachen, insbesondere wenn Sie Dateien gruppieren, die Syntaxfehler oder ähnliche Fehler in Variablen- oder Klassennamen enthalten. Mit der Option „Dateiminifizierungsausschluss“ können Sie Dateien vom Minifizierungs- und Gruppierungsprozess ausschließen. Gehen Sie dazu zu WP Speed of Light > SpeedUp > Gruppieren & Minifizieren . Dort finden Sie die erweiterten Optionen zum Dateiausschluss .

Um die erweiterten Dateiausschlüsse nutzen zu können, müssen Sie zuerst einen Scan durchführen, die Option aktivieren und auf „Scan ausführen“ klicken.

 Um die auf Ihrer Website geladenen Skripte aufzulisten, WP Speed of Light Ihre Ordner scannen. Diese befinden sich üblicherweise im Ordner `/wp-content`, in dem alle Ihre Plugins und Ihr Theme zusammengefasst sind. Wählen Sie (mindestens) diesen Ordner aus und klicken Sie auf „Jetzt scannen“.

Es wird ein Scan durchgeführt. Klicken Sie abschließend auf „Ergebnisse anzeigen“, wenn der Scan abgeschlossen ist.

Unten sollte eine Liste der nach Typ (Alle, JS, CSS, Schriftart) klassifizierten Dateien angezeigt werden. Falls Sie eine problematische Datei identifiziert haben, können Sie diese beim Aktivieren der Dateigruppe und der Minifizierung mithilfe eines einfachen Ein-/Ausschalters von der Liste .

Dies hilft Ihnen, Dateien auszuschließen und so eventuelle Probleme beim Minimieren von Ressourcen einfach zu beheben. Das Gruppieren und Minimieren erfordert zwar noch etwas Aufwand, insbesondere beim Testen, aber es lohnt sich definitiv. Sie können die Funktionsweise jederzeit überprüfen, indem Sie den Geschwindigkeitstest direkt in WP Speed of Light .
 
Probieren Sie WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light