Springe zum Hauptinhalt

So komprimieren Sie Ihre CSS-, HTML- und Javascript-Dateien

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wenn Sie die CSS-, HTML- und Javascript-Dateien Ihrer Website komprimieren, können Sie wertvolle Zeit beim Laden Ihrer Webseiten 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 das Suchmaschinenranking.

Der BegriffminifyIn der Programmiersprache wird der Vorgang zum Entfernen 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 Dateien auf 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}

Dies ist natürlich nur ein kleines Beispiel für die Verwendung eines CSS-Snippets, aber Sie können sich vorstellen, wie viel Speicherplatz beim Reduzieren 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 und technisch tun möchten, können Sie dies tun. Sie haben jedoch ein hohes Fehlerrisiko und verschwenden unnötig wertvolle Zeit Ihres Lebens!

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 verringern. Minimierung ist in der Welt des Webdesigns eine gängige Praxis geworden. Sie sollten sich also nicht wundern, wenn Sie 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, mit denen Sie loslegen können. Da viele von ihnen mehrere Codetypen minimieren können, habe ich die Codetypoptionen in Klammern angegeben.

    • cssminifier.com et javascript-minifier.com (CSS und JS) - Diese beiden Minifahrer von Andrew Chilton sind einfach zu bedienen. Fügen Sie einfach Ihren Code ein und klicken Sie auf die Schaltfläche 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-Typen. 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 zum Kopieren und Einfügen komprimieren. Sie können jedoch auch mehrere JavaScript-Dateien gleichzeitig herunterladen. Es ist großartig, um JavaScript-Dateien in einer Datei zu kombinieren und so das Laden von Seiten zu beschleunigen.
    • Dan's Werkzeuge - Dans Werkzeuge vorschlagen un CSS minimieren 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 gemeinsame Minimierungsziele.
    • refresh-sf.com (HTML, CSS und JS) - Dieser Kompressor reduziert JavaScript-Codetypen, CSS und HTML. Es enthält auch alle Komprimierungsoptionen für jeden Codetyp, wenn Sie ihn benötigen.
    • Schließungs-Compiler (Nur JS) - Closure Compiler ist Teil von Closure Werkzeuge , eine Reihe von Tools von Google Developers. Sie können Ihr Javascript mit anderen nützlichen Optimierungen minimieren. Sie können Ihren Javascript-Code verwenden, indem Sie die URL zum Speicherort 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 Ihres HTML-, CSS- und JavaScript-Codes 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.

css style divi.jpg

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

Minifizierung css.jpg

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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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 alles!

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

So minimieren Sie HTML, CSS und JavaScript in WordPress mithilfe von Plugins

Der einfachste Weg, Ihren HTML-, CSS- und JavaScript-Code in WordPress zu minimieren, ist die Verwendung eines Plugins. Auf diese Weise können Sie Ihre WordPress-Website-Dateien automatisch optimieren, um die Ladezeiten von Seiten mit nur wenigen Mausklicks zu reduzieren.

Es gibt viele Plugins, die diese Aufgabe übernehmen, aber ich werde kurz einige Beispiele nennen.

Automatisch optimieren (KOSTENLOS)

autooptimize wp.png
Autoptimize ist wahrscheinlich das beliebteste WordPress-Minify-Plugin. Es ist beliebt, weil es einfach zu bedienen und mit leistungsstarken Funktionen ausgestattet ist. Es kann Ihren Code gruppieren (kombinieren), minimieren und zwischenspeichern. Als Bonus haben Sie zusätzliche Optionen zur Optimierung von Google-Schriftarten, 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 die Optimierung Ihres Codes weiter anzupassen.

CSS-Optionen advanced.jpg

Das war's auch schon! Ziemlich 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.

allgemeine parameter w3 gesamt cache.jpg

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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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-Seitenleiste des Dashboards. Unter der Registerkarte Einstellungenfinden Sie Optionen zum Kombinieren und Reduzieren von HTML- und CSS-Dateien. Das Minimieren von JavaScript ist zwar nur in der Pro-Version verfügbar.

wp schnellere Cache-Einstellungen.png

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 WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip 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.

Alle 404-Fehlerseiten werden auf die Homepage oder auf umgeleitet eine benutzerdefinierte URL. Mit diesem WordPress-Plugin können Sie Google erlauben, den PageRank Ihrer Website zu reduzieren, wenn es viele 404-Fehlerseiten gibt.

entdecken Sie auch Wie 413 Fehler in WordPress zu beheben

Dieses WordPress-Plugin leitet nicht nur weiter, sondern kann auch eine geeignete Lösung sein, um das Ranking Ihrer Website in den Suchmaschinenergebnissen zu verbessern.

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

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 zum Bereinigen der Datenbank Ihrer Website

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.

Download | Demo | Web-Hosting

3. Mehrsprachige Presse

Multilingual Press arbeitet mit einer Multisite-Installation von WordPress und ermöglicht Ihnen, Übersetzungen zu verknüpfen. Das Plugin wird mit 174-Sprachen geliefert, die im Sprachmanager eingebettet sind. Es unterstützt eine unbegrenzte Anzahl von Websites, sodass Sie so viele Übersetzungen erstellen und verknüpfen können, wie Sie möchten.

Das ist gut für SEO, da Sie so Ihre Sprachen auf separaten Posts und Seiten halten können. Wenn Sie sich jemals für eine andere Übersetzung als das Plugin entscheiden, 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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

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

Fazit

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren