So gruppieren und minimieren Sie Ressourcen in WordPress
Die bestmögliche Leistung zu erzielen, ist der Traum aller, die eine Website verwalten, Ressourcen in WordPress gruppieren und minimieren. Dies ist eines der besten Dinge, die wir dafür tun können, aber es könnte sehr schwierig sein. Das Gruppieren aller Ihrer Ressourcen (hauptsächlich CSS- und JS-Dateien) kann Ihre Website verfügbar machen, wenn Sie kein Entwickler sind, da dies zu Konflikten führen kann.
WP Speed of Light ist die beste Lösung, um Ihre WordPress-Site auszuführen, da es viele Optionen bietet, um Ihre Site mit einem wirklich benutzerfreundlichen Dashboard schnell zu laden, und ja, eine dieser Optionen ist das Gruppieren und Minimieren von Ressourcen. Der Einschluss/Ausschluss einer einzelnen Datei aus dem Gruppen- und Minimierungsvorgang ist ein Schlüssel für eine benutzerdefinierte Optimierung ohne Konflikte.
Wir werden eine Beispiel-WordPress-Site für diesen Blog-Beitrag verwenden und lernen, wie dies gemacht wird, damit der Prozess zum Konfigurieren von allem einfacher wird.
So führen Sie eine WordPress JS- und CSS-Minimierung durch
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 die Verarbeitung der Ressource durch den Browser zu beeinflussen - z. B. Codekommentare und Formatieren, Entfernen von nicht verwendetem Code, Verwenden kürzerer Variablen- und Funktionsnamen usw. “.
Jetzt werden wir einen Geschwindigkeitstest auf unserer Seite durchführen, um die Änderungen zu sehen. In diesem Beispiel verwenden wir eine Website mit Woocommerce und einigen Produkten, damit sie beim ersten Mal etwas langsam geladen wird.
Ja, 2,79 Sekunden zum Laden der Seite, nicht schlecht, aber es könnte besser sein, lasst uns einfach das js und CSS minimieren und den Unterschied sehen, gehe zu WP Speed of light > SpeedUp > Group & Minify , du wirst in der Lage sein um das Menü mit allen Optionen zum Minimieren anzuzeigen. Die Plugin-freie Version enthält die Gruppierungs- und Minimierungsoption, aber der visuelle Dateiausschluss ist nur in der PRO-Addon-Version verfügbar.
PRO-Add-On-Optionen sind: Inline-Skript ausschließen (Inline-Skript von der Minimierung ausschließen), Skripte in die Fußzeile verschieben (damit können Sie Ihre Website beschleunigen, indem Sie alle minimierten Skripts in die Fußzeile verschieben), Gruppenschriftart und Google-Schriftarten (lokale Gruppenschriftarten und Google-Schriftarten) in einer einzigen Datei, um schneller bereitgestellt zu werden) und Erweiterter Dateiausschluss.
Sie haben die Möglichkeit, JS, CSS und auch den HTML-Code zu minimieren, aktivieren Sie jetzt 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 mit dem Ausschluss einiger Codes und Dateien behoben werden (mit dem Pro-Addon).
Jetzt ist der gesamte Entwicklerjob, der Stunden dauern kann, in nur wenigen Sekunden erledigt.
Im nächsten Schritt optimiert WordPress CSS und JS
Mit diesem Plugin lassen wir WordPress CSS und js optimieren, indem Sie einfach die Gruppenoptionen auf dem Dashboard aktivieren, zu WP Speed of Light > SpeedUp > Group & Minify gehen, Sie können ein Dashboard mit den Optionen zum Gruppieren sehen CSS und js.
Mit diesen Optionen können Sie:
- JS gruppieren: Durch Gruppieren mehrerer Javascript-Dateien in einer einzigen Datei wird die Anzahl der HTTP-Anforderungen minimiert
- CSS gruppieren: Durch Gruppieren mehrerer CSS-Dateien in einer einzigen Datei wird die Anzahl der HTTP-Anforderungen minimiert.
HTTP-Anforderungen: Dies sind Anforderungen, die jedes Mal an den Server gesendet werden, wenn wir etwas auswählen oder eine andere Seite auf derselben Site aufrufen. Wenn wir diese Anforderungen reduzieren können, verringert sich die Ladezeit.
Um zu überprüfen, wie viele Dateien und Skripte Sie auf Ihrer Website gruppieren können, öffnen Sie einfach Ihre Browserkonsole (Rechtsklick > Inspizieren oder F12) und öffnen Sie das Netzwerkfenster .
Sie können dann alle nach Typ geladenen Dateien auflisten. In diesem Beispiel habe ich nur auf die JS-Dateiliste geklickt.
Nachdem wir diese Einstellungen vorgenommen haben, aktivieren Sie einfach die Gruppenoptionen (Group CSS und Group 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 dies zu Konflikten führen kann .
Lassen Sie uns ernst werden und die Schriftgröße optimieren
Was? Andere Optimierung? Ja! Sie können das Schriftgewicht optimieren und es ist so einfach wie die Aktivierung der Option in den Einstellungen, gehen Sie einfach zu WP Speed of Light > SpeedUp > Group & Minify > Group Fonts and Google Fonts Option.
Mit der Option „Gruppieren von Schriftarten“ und „Google-Schriftarten“ können Sie sie in einer einzigen Datei gruppieren, damit sie schneller bereitgestellt werden können. Dies ist ziemlich praktisch, da die meisten WordPress-Designs und -Layouts standardmäßig mit 2 oder Schriftarten mit allen Deklinationen (normal, fett, kursiv) geliefert werden ...)
Aktivieren Sie einfach diese Option, klicken Sie auf Speichern und alle Schriftarten werden gruppiert.
Nachdem wir alle Optionen zum Minimieren und Gruppieren der Ressourcen aktiviert haben, sollten wir einen Unterschied in der Ladezeit unserer Site feststellen. Überprüfen wir die Geschwindigkeit.
Was für ein Unterschied, von 2,8 bis 0,56 Sekunden! Wie wir Ihnen zu Beginn dieses Beitrags gesagt haben, können wir die Ladezeit verbessern;)
Verwendung des Ausschlusses für die Dateiminimierung
Die Minimierung kann Probleme auf Ihrer Website verursachen. Dies geschieht hauptsächlich, wenn Sie bestimmte Dateien gruppieren, die einen Syntaxfehler oder einen ähnlichen Variablen-, Klassennamen enthalten. Aus diesem Grund können Sie mit der Option „Dateiminimierungsausschluss“ Dateien aus dem Minimierungs- und Gruppierungsprozess ausschließen, gehen Sie zu WP Speed of Light > SpeedUp > Group & Minify , Sie können die „Erweiterter Dateiausschluss .
Um den erweiterten Ausschluss von Dateien verwenden zu können, müssen Sie zuerst einen Scan ausführen. Aktivieren Sie die Option und klicken Sie auf Scan ausführen.
Um das auf Ihrer Website geladene Skript auflisten zu können, muss WP Speed of Light Ihren Ordner scannen, um sie aufzulisten. Sie sind normalerweise alle in deinem /wp-content-Ordner enthalten, der alle deine Plugins und Themes gruppiert. Wählen Sie (mindestens) diesen Ordner 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.
Unten sollte eine Liste von Dateien angezeigt werden, die nach Typ (Alle, JS, CSS, Schriftart) klassifiziert sind. Wenn Sie eine Datei identifiziert haben, die beim Aktivieren der Dateigruppe und Minifizierung Probleme verursacht, können Sie sie hier ausschließen, indem Sie einen einfachen EIN/AUS-Umschalter .
Dies wird Ihnen dabei helfen, Dateien auszuschließen und auf diese Weise problemlos alle Probleme zu lösen, die beim Minimieren von Ressourcen auftreten können. Der Gruppierungs- und Minimierungsvorgang erfordert immer noch einige Arbeit, insbesondere beim Testen, aber die Mühe lohnt sich auf jeden Fall, und das werden Sie auch tun. Sie können jederzeit testen, wie es funktioniert, 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
Wenn Sie den Blog abonnieren, senden wir Ihnen eine E-Mail, wenn es neue Updates auf der Website gibt, damit Sie sie nicht verpassen.
Bemerkungen