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 für die Leistung Ihrer WordPress-Site, da es viele Optionen bietet, um das Laden Ihrer Site mit einem wirklich benutzerfreundlichen Dashboard zu beschleunigen, und ja, eine dieser Optionen ist das Gruppieren und Minimieren von Ressourcen. Der Einschluss/Ausschluss einzelner Dateien aus dem Gruppen- und Minimierungsprozess 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. Minimieren wir einfach die js und CSS und sehen den Unterschied. Gehen Sie zu WP Speed of light > SpeedUp > Group & Minify , dann können Sie es schaffen um das Menü mit allen Optionen zum Minimieren anzuzeigen. Die kostenlose Plugin-Version enthält zwar die Option zum Gruppieren und Minimieren, der visuelle Dateiausschluss ist jedoch nur in der PRO-Addon-Version verfügbar.
Die PRO-Add-on-Optionen sind: Inline-Skript ausschließen (Inline-Skript von der Minimierung ausschließen), Skripte in die Fußzeile verschieben (dadurch können Sie Ihre Website beschleunigen, indem Sie alle minimierten Skripte in die Fußzeile verschieben), Schriftarten gruppieren und Google Fonts (lokale Schriftarten und Google-Schriftarten gruppieren). in einer einzigen Datei, um schneller bereitgestellt zu werden) und erweiterter Dateiausschluss.
Sie haben, wie Sie sehen, die Möglichkeit, JS, CSS und auch HTML 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 durch den 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 ermöglichen wir WordPress, CSS und JS zu optimieren, indem wir einfach die Gruppenoptionen im Dashboard aktivieren. Gehen Sie zu WP Speed of Light > SpeedUp > Group & Minify , Sie werden ein Dashboard mit den Optionen zum Gruppieren sehen können 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 die Schriftstärke optimieren und müssen lediglich die Option in den Einstellungen aktivieren. Gehen Sie einfach zu WP Speed of Light > SpeedUp > Group & Minify > Group Fonts and Google Fonts Option.
Mit der Option „Schriftarten gruppieren“ und „Google-Schriftarten“ können Sie sie in einer einzigen Datei gruppieren, um sie schneller bereitstellen zu können. Dies ist sehr praktisch, da die meisten WordPress-Themes und -Layouts standardmäßig mit zwei Schriftarten und allen Deklinationen (normal, fett, kursiv) ausgeliefert 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 zu Problemen auf Ihrer Site führen. Dies geschieht hauptsächlich, wenn Sie bestimmte Dateien gruppieren, die einen Syntaxfehler oder einen ähnlichen Variablen- oder Klassennamen enthalten. Aus diesem Grund können Sie mit der Option „Ausschluss der Dateiminimierung“ Dateien vom Minimierungs- und Gruppierungsprozess ausschließen. Gehen Sie zu WP Speed of Light > SpeedUp > Group & Minify „Erweiterter Dateiausschluss angezeigt .
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 die auf Ihrer Website geladenen Skripte auflisten zu können, muss WP Speed of Light Sie sind normalerweise alle in Ihrem /wp-content-Ordner enthalten, in dem alle Ihre Plugins und Themes gruppiert sind. 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 der nach Typ (Alle, JS, CSS, Schriftart) klassifizierten Dateien angezeigt werden. Wenn Sie beim Aktivieren der Dateigruppe und Minimierung eine Datei identifiziert haben, die Probleme verursacht, können Sie sie hier mit einem einfachen EIN/AUS-Schalter .
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