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

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 > Group & Minify, dort sehen 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 Browserkonsole (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 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.

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, 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 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 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