Minimieren / Kombinieren von WordPress CSS + Javascript-Dateien = Schnellere Site

WordPress minimiert JS- und CSS-Dateien

Eines der besten Dinge, die wir bei der Recherche für unseren Artikel über gelernt haben wie man die Joomla-Website schnell lädt (1.29 Sekunden um genau zu sein)entdeckten wir ein großes Juwel eines Werkzeugs. 

Wie viele Menschen, die sich bemühen, das Laden einer Website zu beschleunigen, verweisen sie auf die Google PageSpeed-EmpfehlungsseiteUnd das zu Recht, denn wenn Google eine Erklärung abgibt, lohnt es sich normalerweise, sie anzuhören. Manchmal ist es jedoch ziemlich umständlich, alle Optimierungen vorzunehmen, und Sie verfügen möglicherweise nicht über die erforderlichen Fähigkeiten, um diese Änderungen vorzunehmen.

Inhalt[Anzahl Artikel]

Wie Sie vielleicht wissen, müssen Sie eine Reihe von Optimierungen vornehmen, um Ihre WordPress-Site schneller zu machen. Eine davon ist das Wissen, wie man das Browser-Caching in WordPress richtig nutzt. etwas, dass CollectiveRay hat hier einen tollen Artikel.  

Dies reicht jedoch bei weitem nicht aus, wenn die CSS- und Javascript-Dateien recht groß sind. Darum geht es bei der Minifizierung. 

Was ist Minifizierung? (und wie es Ihrer Website zugute kommen kann)

Bei der Minimierung wird ein Teil der Codierung verwendet und alle Zeichen (z. B. Leerzeichen, Zeilenumbrüche, Tabulatoren usw.) entfernt, die keine Bedeutung haben, außer um den Text besser lesbar zu machen. Minimierte WordPress-Dateien führen aus auf die gleiche Weise wie der ursprüngliche Code, mit dem einzigen Unterschied, dass sie ein wenig in Anspruch nehmen less Platz, weil sie zusätzliche Informationen ausschneiden. Aus diesem Grund wird die Datei beim Herunterladen kleiner, was zu einer insgesamt schnelleren Website führt.

Die Minimierung ist besonders wichtig und nützlich für Skripte (wie Javascript-Dateien), CSS-Stylesheets und andere ähnliche Website-Komponenten.

Lesen Sie mehr: So stellen Sie (GROSSE) Javascript-Entwickler ein - Top 5-Websites, klicken Sie hier - https://www.collectiveray.com/hire-javascript-developer

Der Hauptgrund dafür und die Vorteile für Ihre Website sind:

  • Reduzieren Sie die Ladezeiten und beschleunigen Sie Ihre Website insgesamt. Angesichts der Tatsache, dass die meisten Websites mehrere Skripte und Stylesheet-Dateien verwenden, entsteht viel zusätzlicher Speicherplatz. Während Sie vielleicht denken, dass das Entfernen von Leerzeichen nicht zu vielen Änderungen führt, kann der vollständige Minimierungsprozess aller Dateien einer WordPress-Installation zu einem erheblichen Vorteil führen.
  • Verschleierung des Codes durch Gelegenheitsleser. Die resultierende Minimierung verbirgt zwar nicht den Code Ihrer Site (dh dies unterscheidet sich von der Codeverschleierung), macht es jedoch für Gelegenheitsbenutzer etwas schwieriger zu verstehen, ob dies etwas ist, das Sie betrifft. 

Während der Minimierung Ihres Codes ist es unwahrscheinlich, dass ein riesig Unterschied zu den Ladezeiten Ihrer Website, als Teil einer vollständigen Optimierungsstrategie gesehen, wäre dies eines der vielen Dinge, die Sie tun sollten. Es kann die Ladezeiten Ihrer Seite um einige Prozentpunkte verkürzen, was es zu einer guten Taktik macht, nichtsdestotrotz zu implementierenless.

Was passiert während des Minimierungsprozesses?

Im Wesentlichen durchläuft der Minimierungsprozess solche Textdateien und entfernt alles, was nur für den menschlichen Verzehr bestimmt ist, da der Computer, der die Datei analysiert, die Datei nicht für den Menschen lesbar macht. Der WordPress-Minimierungsprozess entfernt alle Elemente wie zusätzliche Leerzeichen (Leerzeichen, Zeilenumbrüche, Tabulatoren), Kommentare oder anderen Text, der die Größe der Datei erhöht, ohne die "Semantik" der Datei für den Browser zu verringern. Die Bedeutung ist immer noch da, die Dateien sind nur kleiner.

So würde beispielsweise eine normale CSS-Datei aussehen:

Körper {
Rand: 30px;
padding: 30px;
color: # FFFFFF;
Hintergrund: # f7f7f7;
}
h1 {
font-size: 12px;
Farbe # 222222;
Rand-unten: 5px;
}

Während die minimierte Version dieses Codes so aussehen würde:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Sie können sehen, dass die Textinformationen genau gleich sind, sondern nur aus Gründen der Lesbarkeit entfernt werden. Das gleiche Konzept gilt für Javascript-Dateien.

Das Endergebnis der Verwendung von Plugins oder Mitteln zur Minimierung von Javascript WordPress wäre, dass die HTML-Ausgabe zusammen mit den von Ihrer Website verwendeten CSS- und JS-Dateien und den Plugins ungefähr so ​​aussehen würde:

minimierter Code

Obwohl dies wie ein Haufen Müll aussieht, ist die gesamte Bedeutung immer noch vorhanden - es wurde nur "minimiert", um unnötiges Material zu entfernen, das seine Größe aufbläht.

Es gibt viele Plugins, die Ihnen dabei helfen können, diesen Prozess zu erreichen.

Minimieren Sie Javascript WordPress

Der Prozess zum Minimieren von Javascript WordPress ist recht einfach. Sie müssen lediglich eines der folgenden Plugins installieren. Möglicherweise möchten Sie auch beachten, dass die zentralen WordPress-Javascript-Dateien bereits standardmäßig minimiert sind.

Wenn Sie sich den Quellcode Ihrer WordPress-Website ansehen, sehen Sie die Erweiterung .min.js, die anzeigt, dass die tatsächlichen Dateien bereits minimiert sind.

Kern minimieren Javascript WordPress-Dateien

Dies ist bei Plugins und Themes von Drittanbietern nicht unbedingt der Fall.

Möglicherweise möchten Sie auch den zusätzlichen Schritt ausführen, zusätzliche Plugins zu entfernen und Skripte zu generieren, die Sie möglicherweise nicht benötigen.

Wenn Sie absolut auf die Leistung fixiert sind, können Sie auch Versionen der Javascript-Dateien erstellen, die NUR das von Ihrer Website verwendete Skript enthalten. Standardmäßig enthalten die meisten Skriptdateien zusätzlichen Code, der "nur für den Fall" enthalten ist, dass er benötigt wird.

Vielleicht möchten Sie etwas darüber lernen wie das hier geht.

Minimieren Sie CSS WordPress

Wieder einmal ist der Prozess von Minify CSS WordPress unkompliziert. Sie können einfach ein Plugin installieren, wodurch die Minimierung Ihrer CSS-Dateien automatisch durchgeführt wird. Während die meisten WordPress-Kerndateien eine verkleinerte Version der CSS-Dateien haben, gilt dies nicht unbedingt für alle Plugins und Themes.

Auch hier empfehlen wir die Durchführung einer CSS-Code-Coverage-Übung, um überflüssigen CSS-Code zu entfernen, bei dem es sich einfach um Eigengewicht handelt.

Wir werden im nächsten Abschnitt eine Reihe von Plugins erwähnen, die CSS WordPress minimieren. 

5 besten WordPress Minify Plugins

Wir werden sowohl generische Produkte diskutieren, die im Allgemeinen verwendet werden, um Ihre Website durch Minifizierung schneller zu machen, als auch bestimmte Plugins, deren einzige Funktion der Minimierungsprozess ist.

1. WP Rakete

Dies ist bei weitem unser Lieblings-Plugin.

Der Grund ist einfach: Dies ist bei weitem das beste Produkt, das auf wirklich einfache Weise mehrere Aufgaben zur Geschwindigkeitsoptimierung ausführen kann, aber mit einem hervorragenden Ergebnis der Beschleunigung Ihrer Website, einschließlich der Minimierung von CSS- und Javascript-WordPress-Dateien.

Wirklich und wahrhaftig, es ist nur eines der Dinge, die dieses Plugin tut, aber sobald Sie es installiert haben, werden Sie feststellen, dass Sie nichts anderes mehr tun müssen.

Wie Sie unten sehen können, ist diese Minimierung eine der grundlegenden Optionen für die Optimierung. Damit sehen Sie, dass es zu einer Verkettung kommt. Dies ist ein sekundärer Optimierungsprozess, bei dem aus allen CSS- und JS-Dateien eine Datei erstellt wird (da dies auch das Herunterladen der Dateien beschleunigt).

Minimieren Sie Javascript CSS WordPress Plugin

Das Plugin ist nicht kostenlos, aber der Preis ist mit nur 49 US-Dollar sehr günstig. Angesichts der Zeitersparnis und des Ergebnisses, dass Ihre Website schneller und buchstäblich in wenigen Minuten geladen wird, empfehlen wir dringend, sich dafür zu entscheiden.

WP Rocket Testimonial

Wir installieren dieses Plugin auf jeder von uns eingerichteten WordPress-Website, einfach weil es uns so viel Optimierungszeit spart.

Klicken Sie hier für den niedrigsten Preis für WP Rocket

2. JCH Optimieren

 

Hier ist ein kleiner Trick, der Ihnen wirklich hilft - Verwenden Sie JCH Optimize - Dies ist ein Tool, das auf mehreren Plattformen wie WordPress, Joomla, Drupal und Magento funktioniert.

Das Tolle an JCH Optimize ist, dass es eine Vielzahl von implementiert Google PageSpeed und andere Empfehlungen, damit Ihre Website so schnell wie möglich geladen wird.

Es ist großartig, weil es fast keine Konfiguration und kein Eingreifen eines Benutzers erfordert.

Wenn Sie nach einem schnellen Hosting-Service suchen, schauen Sie sich unseren Host an. Wir haben ihn hier ausführlich überprüft: https://www.collectiveray.com/inmotion-hosting-review

JCH optimieren

Und Sie müssen nicht mit Code herumspielen, all dies wird vom Plugin erledigt - es behält Ihre gesamte ursprüngliche Codierung bei, sodass Sie nichts durch Herumspielen kaputt machen. Außerdem werden normalerweise die Optimierungen durchgeführt, die normalerweise am schwierigsten durchzuführen sind. Um nur einige zu nennen, dies sind diejenigen, die gut gemacht sind

  • Kombiniert CSS-Dateien aus all Ihren Vorlagen, Modulen und Plugins in einer einzigen Datei und reduziert so die Anzahl der an Ihre Website gesendeten Anforderungen
  • Kombiniert Javascript-Dateien, die normalerweise nur schwer zu kombinieren sind, ohne die Site zu beschädigen
  • Zippt CSS und Javascript so, dass sie kleiner werden und die Übertragungszeit verkürzt wird
  • Minimiert Javascript und CSS, um es kompakter zu machen und seine Größe noch weiter zu reduzieren (reduziert zusätzliche Leerzeichen, Kommentare usw.)
  • Fügt ein DEFER-Tag hinzu, sodass Ihre Seite zuerst geladen wird, und führt das Javascript aus, nachdem die Seite geladen wurde, sodass die Site schneller geladen werden kann. Da diese spezifische Implementierung für eine schnelle Website von entscheidender Bedeutung ist, haben wir dies hier ausführlich behandelt: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Erstellt IMAGE Sprites - dies reduziert auch die Anzahl der an Ihre Website gesendeten Anfragen um einen sehr großen Betrag und ist eine der am schwierigsten manuell zu erreichenden Optimierungen

Außerdem können Sie einige erweiterte Optionen optimieren, z. B. das Ausschließen bestimmter Dateien, um sicherzustellen, dass eine Erweiterung, die nach dem Ausführen über JCH Optimize nicht funktioniert, trotzdem funktioniert.

Das PRO-Version, das für mickrige 29 US-Dollar erhältlich ist, bietet Ihnen Zugriff auf mehrere andere Optimierungsoptionen, z Javascript asynchron, um das Laden der Site nicht zu blockieren.

Nehmen Sie mein Wort dafür, installieren Sie das Plugin, aktivieren Sie es und überprüfen Sie Ihre Vorher- und Nachher-Ergebnisse. Wenn Sie keine Verbesserung um einen guten Betrag erzielen, kommen Sie hierher zurück und beschweren Sie sich, aber ich bin mir ziemlich sicher, dass Sie nicht zurückkommen werden :)

Klicken Sie hier, um JCH Optimize herunterzuladen

3. W3 Total Cache

Dies ist ein weiteres Plugin, das Sie sehen werden. Es handelt sich um eine generische Software, die eine Reihe von Aufgaben erledigt, die mit der schnellen Erstellung von WordPress zusammenhängen, einschließlich der Minimierung von CSS-, JS- und HTML-Dateien.

Während Sie feststellen werden, dass dies sehr oft erwähnt wird, wenn es um solche Plugins geht, sollte beachtet werden, dass dieses Produkt absolut keine gute Idee für Leute ist, die nicht technisch sind.

Seiten-Cache-Einstellungen in W3 Total Cache

Es ist bekannt, dass es zu erheblichen Problemen kommt, wobei einige Fehler auch nach der Deinstallation und Löschung der Software von der Website bestehen bleiben.

uns bei CollectiveRay habe es mehrmals versucht, dieses Plugin zu verwenden, aber zum jetzigen Zeitpunkt empfehlen wir nicht mehr, dies zu Minimierungszwecken oder um Websites schneller zu machen, unless du weißt genau was du tust.

4. WP Super Minify

Dieses Plugin verwendet die Minimieren Sie das PHP-Framework Durch die Verwendung werden Inline-JavaScript- und CSS-Dateien bei Bedarf kombiniert, minimiert und zwischengespeichert, um das Laden von Seiten zu beschleunigen.

Indem Sie dies aktivieren Plugin, die Quelle Ihres HTML, Inline-JavaScript und CSS werden jetzt von zusätzlichen Dingen befreit, was dazu führt, dass ihre Größe kleiner ist.

Was sich von anderen hier erwähnten Plugins unterscheidet, ist, dass dieses Plugin NUR den Minimierungsprozess und keine anderen Optimierungen durchführt. Dies ist eine gute Wahl für diejenigen, die nur diese Funktion ausführen möchten und aus irgendeinem Grund nichts anderes.

5. Schnelle Geschwindigkeitsminimierung 

Es gibt zwar viele andere WordPress-Minify-Plugins, die wir empfehlen können, dies ist jedoch das letzte, das wir hier erwähnen. 

Das Fast Velocity-Plugin kombiniert alle CSS- und JavaScript-Dateien, sodass der Webserver weniger Anfragen bearbeiten muss. Gleichzeitig werden die Dateien minimiert und zwischengespeicherte Kopien für schnellere Ladezeiten erstellt.

Dieses Plugin aktiviert automatisch die Optionen zum Minimieren von HTML, JavaScript und CSS, aber Sie kann Deaktivieren Sie eine oder mehrere von ihnen manuell, indem Sie in die Einstellungen → Schnelle Geschwindigkeitsminimierung Tab.

Sie können festlegen, dass bestimmte Dateien nicht minimiert werden, wenn eines Ihrer Plugins nach der Aktivierung beschädigt wird.

 

Schnelle Geschwindigkeit minimieren

Nachbereitung 

Obwohl der Minimierungsprozess keine bahnbrechende Funktion ist, sollte er als eine von mehreren Aufgaben implementiert werden, um Ihr WordPress schneller zu machen. Wir empfehlen Ihnen dringend, eines der oben genannten Produkte zu implementieren.

Laden Sie die Liste der 101 WordPress-Tricks herunter, die jeder Blogger kennen sollte

101 WordPress-Tricks

Klicken Sie hier, um jetzt herunterzuladen

 

Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...