So gruppieren und minimieren Sie Ressourcen in WordPress

Eine möglichst gute Leistung ist der Traum aller, die eine Website verwalten. Das Gruppieren und Minimieren von Ressourcen auf WordPress ist eines der besten Dinge, die wir dafür tun können, aber es kann wirklich schwierig sein. Das Gruppieren aller Ressourcen (hauptsächlich CSS- und JS-Dateien) 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 Ihre WordPress-Website zu optimieren, da sie viele Optionen bietet, um Ihre Website mit einem wirklich benutzerfreundlichen Dashboard schnell zu laden, und ja, eine dieser Optionen ist die Gruppierung und Minimierung von Ressourcen. Der Einbezug/Ausschluss einzelner Dateien in den Gruppen- und Minimierungsprozess ist ein Schlüssel für eine maßgeschneiderte Optimierung ohne Konflikte.

Wir werden eine Beispiel-WordPress-Website für diesen Blogbeitrag verwenden und lernen, wie man dies macht, damit der Konfigurationsprozess einfacher wird.

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

Lassen Sie uns lernen, wie man eine WordPress-JS- und CSS-Minimierung durchführt, aber zuerst müssen wir wissen, was die Minimierung bedeutet „Minimierung bezieht sich auf den Prozess des Entfernens unnötiger oder redundanter Daten, ohne dass dies Auswirkungen darauf hat, wie die Ressource vom Browser verarbeitet wird - z. B. Codekommentare und Formatierung, Entfernen ungenutzten Codes, Verwenden kürzerer Variablen- und Funktionsnamen und so weiter“.

Was wir jetzt tun werden, ist ein Geschwindigkeitstest für unsere Seite, um die Änderungen zu sehen. Für dieses Beispiel verwenden wir eine Site mit WooCommerce und einigen Produkten, daher wird es beim ersten Mal ein bisschen langsam geladen.

Ja, 2,79 Sekunden zum Laden der Seite, nicht schlecht, aber es könnte besser sein, einfach die JS- und CSS-Dateien minimieren und den Unterschied sehen, gehen Sie zu WP Speed of light > SpeedUp > Gruppieren & Minimieren, Sie werden das Menü mit allen Optionen zum Minimieren sehen. Die kostenlose Version des Plugins enthält die Option zum Gruppieren und Minimieren, aber der visuelle Dateiausschluss ist nur in der PRO-Addon-Version verfügbar.

PRO-Addon-Optionen sind: Inline-Skript ausschließen (Inline-Skript von der Minification ausschließen), Skripte in den Fußbereich verschieben (dadurch können Sie Ihre Site beschleunigen, indem Sie alle minimierten Skripte in den Fußbereich verschieben), Schriftarten und Google-Schriftarten gruppieren (lokale Schriftarten und Google-Schriftarten in einer einzigen Datei zusammenfassen, um sie schneller bereitzustellen) und Erweiterte Dateiausnahmen.
 
Sie haben die Möglichkeit, wie Sie sehen, JS, CSS und auch HTML zu minimieren. Aktivieren Sie einfach diese Optionen, klicken Sie auf Speichern und alle Ihre Ressourcen werden sofort minimiert. Es könnte Probleme geben, da es sich um eine erweiterte Konfiguration handelt, aber alles kann durch Ausschluss einiger Codes und Dateien behoben werden (mit dem Pro-Addon).

Jetzt ist die gesamte Entwicklerarbeit, die stundenlang dauern könnte, in nur 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 > Gruppieren & Verkleinern. Dort finden Sie ein Dashboard mit den Optionen zum Gruppieren von CSS und JS.

Diese Optionen ermöglichen Ihnen:

• JS gruppieren: Durch das Gruppieren 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 an den Server gesendet werden, jedes Mal, wenn wir etwas auswählen oder zu einer anderen Seite auf derselben Website gehen, sodass wir, wenn wir diese Anfragen reduzieren können, die Ladezeit reduzieren würden.

Um zu überprüfen, wie viele Dateien und Skripte Sie auf Ihrer Website gruppieren können, öffnen Sie einfach die Browser-Konsole (Rechtsklick > Untersuchen oder F12) und öffnen Sie das Netzwerk-Panel.

Sie können dann alle geladenen Dateien nach Typ auflisten, hier in diesem Beispiel habe ich nur auf die JS-Dateiliste geklickt.

Da wir jetzt bei diesen Einstellungen sind, aktivieren Sie einfach die Gruppenoptionen (Gruppen-CSS und Gruppen-JS) und klicken Sie auf Speichern. Beachten Sie, dass diese Optionen mit Vorsicht verwendet werden müssen und Sie Ihre Seite testen müssen, da sie möglicherweise Konflikte verursachen.

Jetzt wird’s ernst: Optimieren wir die Schriftstärke

Was? Weitere Optimierung? Ja! Sie können das Schriftgewicht optimieren und es wird so einfach sein wie das Aktivieren der Option in den Einstellungen. Gehen Sie einfach zu WP Speed of Light > SpeedUp > Gruppieren & Verkleinern > Schriftarten und Google-Schriftarten Option.
Die Option 'Schriftarten und Google-Schriftarten gruppieren' ermöglicht es Ihnen, sie in einer einzigen Datei zu gruppieren, um sie schneller bereitzustellen. Dies ist ziemlich praktisch, da die meisten WordPress-Themes und -Layouts standardmäßig mit 2 oder mehr Schriftarten geliefert werden, einschließlich aller Varianten (regulär, fett, kursiv...).

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

Jetzt, da wir alle Optionen zum Minimieren und Gruppieren der Ressourcen aktiviert haben, sollten wir einen Unterschied in der Ladezeit unserer Seite sehen, Lasst uns die Geschwindigkeit überprüfen.

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

Wie man den Dateiminimierungsausschluss verwendet

Die Minifizierung kann Probleme auf Ihrer Website verursachen, sie tritt hauptsächlich auf, wenn Sie bestimmte Dateien gruppieren, die einen Syntaxfehler oder eine ähnliche Variable, einen Klassennamen enthalten. Deshalb können Sie mit der Option "Datei-Minification-Ausschluss" Dateien von der Minification und dem Gruppierungsprozess ausschließen, gehen Sie zu WP Speed of Light > SpeedUp > Gruppieren & Minifizieren, Sie werden die Erweiterte Datei-Ausschluss-Option sehen.

Um den erweiterten Datei-Ausschluss zu verwenden, müssen Sie zuerst einen Scan durchfü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 muss 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) und klicken Sie auf “Jetzt scannen”

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

Eine Liste von Dateien, die nach Typ klassifiziert sind (Alle, JS, CSS, Schriftart), sollte unten angezeigt werden. Wenn Sie eine Datei identifiziert haben, die Probleme verursacht, wenn Sie die Dateigruppierung und -minimierung aktivieren, können Sie sie hier mithilfe eines einfachen ON/OFF-Schalters ausschließen.

Dies hilft Ihnen, Dateien auszuschließen und auf diese Weise Probleme zu lösen, die bei der Minimierung von Ressourcen auftreten können… Der Gruppierungs- und Minimierungsprozess erfordert immer noch einige Arbeit, insbesondere beim Testen, aber es lohnt sich auf jeden Fall, 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 versuchen Sie WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light