Möchten Sie Ihre CSS-, HTML- und Javascript-Dateien auf WordPress komprimieren?

Wenn Sie die CSS-, HTML- und Javascript-Dateien Ihrer Website komprimieren, können Sie wertvolle Zeit beim Laden der Seite Ihrer Website sparen. Jetzt geht es nicht darum, die Geschwindigkeit beim Laden von Seiten zu halbieren oder so, aber wenn es um die Geschwindigkeit Ihrer Website geht, zählt ein bisschen.

Die Ladegeschwindigkeit Ihrer Website ist nicht nur für neue Besucher wichtig, sondern auch für Suchmaschinen-Rankings.

Der BegriffminifyIn der Programmiersprache wird der Vorgang des Entfernens unnötiger Zeichen aus dem Quellcode beschrieben. Diese Zeichen umfassen Leerzeichen, Zeilenumbrüche, die Kommentare und Blocktrennzeichen, die für uns Menschen nützlich, aber für Maschinen nutzlos sind.

Wir minimieren die Dateien einer Website, die CSS-, HTML- und Javascript-Code enthalten, damit Ihr Webbrowser sie schneller lesen kann.

Lesen Sie auch unseren Artikel über 10 Wordpress-Plugins, die Geschwindigkeit von Ihrem Blog zu verbessern

Hier ist ein Beispiel für die CSS-Minifizierung.

CSS vor der Minifizierung

/ * Eine Beispiel-CSS-Datei ---------------------------------- * / .user-profile-card { margin: 0px; Hintergrund: #33E43} .user-profile-description {border: 0; Position: absolut; Breite: Auto; Rand oben: 20px; }

CSS nach der Minimierung

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Natürlich ist dies nur ein kleines Beispiel für die Verwendung eines CSS-Snippets, aber Sie können sich vorstellen, wie viel Platz beim Schrumpfen von Tausenden von Codezeilen eingespart werden würde. 

Wie können Sie die Zeit in Ihrem WordPress-Blog verlängern? Finden Sie es heraus, indem Sie diesen Artikel konsultieren.

Wenn Sie dies also manuell tun möchten, können Sie dies technisch tun. Sie haben jedoch ein hohes Fehlerrisiko und verschwenden Ihre kostbare Zeit unnötig!

Befolgen Sie diese Tipps und verwenden Sie die Werkzeuge, die Ihnen zur Verfügung stehen.

Einige Tools zum Durchführen der Komprimierung

Glücklicherweise müssen Sie nicht unbedingt Entwickler sein oder eine der Programmiersprachen kennen, um die Dateigröße Ihrer Website zu reduzieren. Minimierung ist in der Welt des Webdesigns eine gängige Praxis geworden. Sie sollten sich also nicht wundern zu erfahren, dass es viele wunderbare (und kostenlose) Tools gibt, mit denen Sie Ihre Arbeit erledigen können.

Siehe auch unsere 6 WordPress-Plugins, um Ihren Artikeln neues Leben einzuhauchen

Hier finden Sie eine Liste nützlicher Tools für den Einstieg. Da viele davon mehrere Codetypen minimieren können, habe ich die Codetypoptionen in Klammern gesetzt.

    • cssminifier.com et javascript-minifier.com (CSS und JS) - Diese beiden Minifahrer von Andrew Chilton sind einfach zu bedienen. Sie müssen nur Ihren Code einfügen und dann auf die Schaltfläche klicken Verkleinern um den komprimierten Code anzuzeigen. Sie können den Exit-Code sogar bequem als Datei herunterladen.
    • htmlcompressor.com (HTML, CSS und JS) - Dieses Online-Komprimierungs- / Minimierungstool unterstützt HTML-, CSS- und JS-Codetypen. Es werden sogar verschiedene Kombinationen von Codetypen wie CSS + PHP und JavaScript + PHP unterstützt. Sie können den komprimierten Code sogar auf Fehler überprüfen.
    • csscompressor.net (Nur CSS) - Dieser Online-CSS-Kompressor ist schnell, einfach und kostenlos zu verwenden.
    • jscompress.com (Nur JS) - Mit diesem JavaScript-Komprimierungstool können Sie JavaScript-Code durch Kopieren und Einfügen komprimieren. Sie können jedoch auch mehrere JavaScript-Dateien gleichzeitig herunterladen. Dies ist ideal, um JavaScript-Dateien zu einer einzigen Datei zu kombinieren und so die Geschwindigkeit beim Laden von Seiten zu verbessern.
    • Dans Werkzeuge - Dans Werkzeuge vorschlagen un CSS minimieren Mittel und  JavaScript minimieren . Beide Tools haben eine wirklich saubere, einfach zu bedienende Benutzeroberfläche. Sie bieten keine erweiterten Optionen, eignen sich jedoch hervorragend für allgemeine Minimierungszwecke.
    • refresh-sf.com (HTML, CSS und JS) - Dieser Kompressor reduziert JavaScript-, CSS- und HTML-Codetypen. Es enthält auch alle Komprimierungsoptionen für jeden Codetyp, falls erforderlich.
    • Schließungs-Compiler (Nur JS) - Closure Compiler ist Teil von Closure Werkzeuge , eine Suite von Tools von Google Developers. Es ermöglicht Ihnen, Ihr JavaScript zusammen mit anderen nützlichen Optimierungen zu minimieren. Sie können Ihren Javascript-Code verwenden, indem Sie die URL des Speicherorts der js-Datei eingeben und dann auswählen, wie der Code optimiert und formatiert werden soll. 

Sie optimieren beispielsweise Ihren Code, um nur die Leerzeichen zu entfernen, wenn Sie möchten. Sobald Sie auf die Schaltfläche zum Kompilieren geklickt haben, wird der Code für Sie reduziert (oder kompiliert).

    • minifycode.com (HTML, CSS und JS) - Diese Website bietet Minifiers für JavaScript , CSS et HTML mit einer einfachen und sauberen Benutzeroberfläche, die Ihren Code mit einem einzigen Klick komprimiert. Es bietet auch ein "Verschönerungs" -Tool zum Dekomprimieren des minimierten Codes, um ihn besser lesbar zu machen (das Gegenteil von Minifizierung).

Wenn Sie nach Offline-Tools suchen, um Ihr CSS- oder JavaScript-HTML lokal zu minimieren, finden Sie hier einige Optionen:

So reduzieren Sie die Größe von HTML, CSS und JavaScript mithilfe eines Online-Tools

Viele dieser Online-Tools haben einen ähnlichen Prozess, der die folgenden Schritte umfasst:

  • Fügen Sie Ihren Quellcode ein oder laden Sie die Quellcodedatei herunter. 
  • Einstellungen für eine bestimmte Ausgabe optimieren (sofern Optionen verfügbar sind)
  • Klicken Sie auf eine Schaltfläche, um den Code zu komprimieren.
  • Kopieren Sie das Ergebnis des minimierten Codes oder laden Sie die Datei mit dem minimierten Code herunter.

In diesem Beispiel verwende ich die Minify-Tools von minifycode.com.

Siehe auch: Wie ein CSS-Code sicher auf Wordpress hinzufügen indem Sie diesen Link konsultieren.

Suchen Sie zunächst die CSS-Datei (allgemein als style.css bezeichnet) in Ihren Website-Dateien und öffnen Sie sie mit einem Seiteneditor. Kopieren Sie dann den gesamten CSS-Code in Ihre Zwischenablage.

komprimieren Sie Ihre CSS-, HTML- und Javascript-Dateien auf WordPress

gehe zu minifycode.com und klicken Sie auf die Registerkarte CSS-Minifier. Fügen Sie dann den CSS-Code in das Eingabefeld ein und klicken Sie auf die Schaltfläche CSS reduzieren.

Minifizierung css.jpg

Kopieren Sie den neuen minimierten Code, sobald er generiert wurde.

Kopieren Sie eine komprimierte code.jpg

Kehren Sie dann zur CSS-Datei Ihrer Website zurück und ersetzen Sie den Code durch die neue vereinfachte Version.

Das ist es!

Wiederholen Sie diesen Vorgang, um auch die JavaScript- und HTML-Datei (en) Ihrer Website zu reduzieren.

Minimieren von HTML, CSS und JavaScript in WordPress mithilfe von Plugins

Der einfachste Weg, um HTML, CSS und JavaScript in WordPress auf ein Minimum zu beschränken, ist die Verwendung eines Plugins. Auf diese Weise können Sie Ihre WordPress-Website-Dateien automatisch optimieren, um die Ladezeit der Seite mit nur wenigen Tastenklicks zu reduzieren.

Es gibt viele Plugins, die die Arbeit erledigen, aber ich werde kurz einige Beispiele nennen.

Automatisch optimieren (KOSTENLOS)

autooptimize wp.png
Autoptimize ist wohl das WordPress Plugin der beliebtesten minify. Es ist beliebt, weil es einfach zu bedienen und mit leistungsstarken Funktionen ausgestattet ist. Es kann Ihren Code bündeln (Skripte kombinieren), minimieren und zwischenspeichern. Als Bonus haben Sie zusätzliche Optionen zur Optimierung von Google Fonts, Bildern usw.

Um Autoptimize zu verwenden, können Sie das Plug-In vom WordPress-Dashboard unter herunterladen, installieren und aktivieren Plugin> Neu hinzufügen.

Weitere Informationen finden Sie in unserem Leitfaden zu:  Wie ein Plugin in Wordpress zu installieren

autoptimize.jpg

Sobald das Plugin aktiviert ist, gehen Sie zu Einstellungen> Automatische Optimierung. Überprüfen Sie dann auf der Registerkarte Hauptparameter den Code, den Sie optimieren möchten (HTML, CSS und / oder JavaScript), und klicken Sie auf E.Änderungen speichern.

Optimierung css.jpg

Sie können auch auf die Schaltfläche klicken Erweiterte Einstellungen anzeigen oben auf der Seite, um Ihre Codeoptimierung weiter anzupassen.

CSS-Optionen advanced.jpg

Es ist mehr oder weniger das! Ganz einfach und mächtig.

W3 Total Cache (KOSTENLOS)

v3 total cache.png
W3 Total Cache ist ein ausgezeichnetes Caching-Plugin, mit dem Sie Ihre HTML-, JS- und CSS-Dateien minimieren können.

Komprimieren Sie CSS-, HTML- und Javascript-Dateien

WP schnellster Cache (KOSTENLOS)

wp schnellste cache.png
WP Schnellste Cache - Dieses Plugin WordPress Caching ist sehr beliebt bei hohen Bewertungen. Es führt verschiedene Leistungsoptimierungen durch, einschließlich der Kombination und Reduzierung von HTML-CSS und JavaScript für eine bessere Leistung.

Lesen Sie auch unseren Artikel über 8 Wordpress-Plugins einen Live-Chat auf Ihrem Blog

Sobald das Plugin installiert ist, klicken Sie einfach auf die Registerkarte WP Schnellste Cache in der WordPress Dashboard Seitenleiste. Unter der Registerkarte Einstellungen finden Sie Optionen zum Kombinieren und Reduzieren von HTML- und CSS-Dateien. Das Minimieren von JavaScript ist zwar nur in der Pro-Version verfügbar.

Komprimieren Sie CSS-, HTML- und Javascript-Dateien

Um es zusammenzufassen

Wenn Sie Ihr Blog schneller und leistungsfähiger machen möchten, müssen Sie die Größe Ihrer HTML-, CSS- und JavaScript-Dateien reduzieren. Mit allen verfügbaren Online-Tools können Sie den Code jeder Website problemlos reduzieren. 

9 WordPress-Plugins, um den Inhalt Ihres Blogs auszublenden absolut zu entdecken

Für diejenigen, die WordPress verwenden, stehen leistungsstarke Plugins zur Verfügung, mit denen Sie diese Dateien mit wenigen Klicks automatisch minimieren können.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. 404-Fehlerseite Weiterleitung zur Homepage oder zur benutzerdefinierten Seite

Hier ist eine der besten Möglichkeiten, um auf einfache Weise eine 404-Fehlerseite hinzuzufügen, die den Besucher nach der Aktivierung dieses Plugins zur Startseite oder zur personalisierten Seite weiterleitet. WordPress Premium.

404 Fehlerseite auf Homepage oder benutzerdefinierte Seite umleiten. WordPress-Plugin

Alle 404-Fehlerseiten werden auf die Homepage oder auf umgeleitet eine benutzerdefinierte URL. Indem Sie dies verwenden WordPress Plugin, gestatten Sie Google, den Pagerank Ihrer Website zu reduzieren, wenn sie viele 404-Fehlerseiten enthält.

entdecken Sie auch Wie 413 Fehler in WordPress zu beheben

Ce WordPress Plugin führt nicht nur eine Weiterleitung durch, sondern kann auch eine geeignete Lösung sein, um das Ranking Ihrer Website in den Suchmaschinenergebnissen zu verbessern.

Herunterladen | Demo | Web-Hosting

2. Borlabs-Cache

WordPress ist eine Plattform, die von einer Datenbank angetrieben wird, die Inhalte dynamisch generiert. Je mehr Inhalte und Plugins Sie haben, desto mehr Datenbankabfragen werden ausgeführt. Dies kann die Leistung Ihrer Website beeinträchtigen, insbesondere wenn sich Ihre Datenbank auf einem anderen Server befindet.

Borlabs Cache WordPress Caching Plugin

Das WordPress Borlabs Cache-Plugin speichert dynamisch generierte Inhalte als statische Datei auf Ihrem Serverspeicher. Wenn die Seite angefordert wird, wird diese statische Datei geladen und an den Besucher gesendet. Dies ist erheblich schneller als bei üblichen Datenbankabfragen. Aber das ist noch nicht alles.

Siehe auch unsere 5 Wordpress-Plugins um Ihre Website-Datenbank zu bereinigen

Ihre Seiten enthalten viele unnötige Leerzeichen oder HTML-Kommentare, wodurch sich die Gesamtseitengröße erhöht. Borlabs Cache entfernt sie alle und komprimiert Ihre Seiten mit GZIP.

Entdecken Sie Wie alle Publikationen Ihre Wordpress auf einer einzigen Seite angezeigt werden

Viele Plugins haben ihre eigenen JavaScript- und CSS-Dateien, was zu mehr Anfragen auf Ihrem Server führt. Borlabs Cache kombiniert all diese JavaScript- und CSS-Dateien, sodass Ihr Besucher im besten Fall nur eine JavaScript-Datei und eine CSS-Datei laden muss.

Herunterladen Demo | Web-Hosting

3. Mehrsprachige Presse

Multilingual Press arbeitet mit einer Multisite-Installation von WordPress und ermöglicht es Ihnen, Übersetzungen zu verknüpfen. Das Plugin enthält 174 Sprachen, die in den Sprachmanager integriert sind, und unterstützt eine unbegrenzte Anzahl von Websites, sodass Sie so viele Übersetzungen erstellen und verknüpfen können, wie Sie möchten.

Mehrsprachiges Press-Ãœbersetzungs-Plugin WordPress-Plugin

Das ist gut für die SEO denn dadurch können Sie Ihre Sprachen auf separaten Beiträgen und Seiten behalten, und wenn Sie sich jemals entscheiden, eine andere Übersetzung des Plugins zu verwenden, bleibt Ihr Inhalt intakt (auch nach dem Deaktivieren oder Entfernen des Multilingual Press-Plugins). Darüber hinaus können Sie eine Übersetzung Widget hinzufügen leicht zwischen Übersetzungen zu wechseln.

Entdecken Sie So fügen Sie einen Codeausschnitt mit Gutenberg in WordPress hinzu

Multilingual Press ist eine großartige kostenlose Option zum Hinzufügen von Übersetzungen zu Ihrer WordPress-Site über Multi-Site. Wenn Sie jemals feststellen, dass Sie mehr Optionen benötigen, können Sie sich für die Pro-Version entscheiden, die 75 US-Dollar kostet.

Herunterladen Demo Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

Zusammenfassung