Minification ist ein einfaches Konzept, das oft als Schritt zur Beschleunigung Ihrer Website empfohlen wird. Es frustriert aber in Wirklichkeit viele Website-Eigentümer ohne Ende, wenn sie versuchen, ihre Dateien zu verkleinern und ihre Website am Ende kaputt machen.
Warum also?
Die Minimierung erfordert oft viel Experimentieren. Es gibt zwar viele Lösungen, aber wie sie sich verhalten, ist von Website zu Website unterschiedlich, je nachdem, welches Thema und welche Plugins Sie verwenden.
In diesem Beitrag untersuchen wir, was Minifizierung ist, ihre Vorteile und einige der beliebtesten Minifizierungslösungen, die es gibt – sowohl manuell als auch mit Plugins -, um Ihnen zu helfen, die richtige Lösung für Ihre Site zu finden.
Auch lesen: Gzip-Komprimierung in WordPress
Inhalt
Was ist Minifikation?
Websites bestehen aus vielen verschiedenen Dateien. Wenn Sie die Geschwindigkeit Ihrer Website mit Google PageSpeed Insights testen, erhalten Sie möglicherweise die Empfehlung, Ihre HTML-, CSS- und JavaScript-Dateien zu minifizieren.
Was ist das Problem? Als Menschen schreiben wir den in diesen Dateien enthaltenen Code, damit wir sie lesen können, aber Computer kümmern sich nicht um Zeichen wie Kommentare, Formatierungen, Leerzeichen und Zeilenumbrüche. Wenn sie also auf diese unnötigen Zeichen in Website-Dateien stoßen, ignorieren sie sie.
An dieser Stelle kommt die Minifizierung ins Spiel. Minifizierung ist ein Programmierbegriff, der im Grunde genommen bedeutet, alle unnötigen Zeichen zu entfernen, die für die Ausführung von Code nicht erforderlich sind. Minification funktioniert durch die Analyse und Neuschreibung von Code, um die Gesamtgröße Ihrer Dateien zu verringern und dadurch die Gesamtgröße Ihrer Website zu reduzieren, damit sie schneller im Browser des Benutzers geladen wird.
Hier sind zum Beispiel einige CSS, die Sie in einem Stylesheet finden könnten:
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: rebeccapurple;
}
a:active {
color: teal;
}Und hier ist eine verkleinerte Version des obigen CSS-Beispiels:
a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}
Sehen Sie, um wie viel stärker der Code komprimiert ist.
Die Verkleinerung wird auf einem Webserver durchgeführt, bevor eine Responsive gesendet wird. Nach der Verkleinerung verwendet der Webserver die kleineren verkleinerten – und viel schnelleren – Dateien anstelle der Originaldateien, was zu einer geringeren Bandbreite führt, ohne die Funktionalität zu beeinträchtigen.
Wie der SEO-Experte Yoast erklärt, kann die Minifizierung von Dateien bis zu 30-40%, in manchen Fällen sogar 50% der Dateigröße einsparen.
Warum Sie Ihre HTML-, CSS- und JavaScript-Dateien verkleinern sollten
Eine schnelle Website macht nicht nur Google glücklich – und verhilft Ihrer Website zu einem höheren Ranking bei der Suche – Es bietet Ihren Website-Besuchern auch eine bessere Nutzererfahrung.
Es gibt viele Statistiken, die deutlich machen, warum die Geschwindigkeit der Website entscheidend ist: 40 % der Menschen werden nicht 3 Sekunden warten, bis Ihre Homepage geladen ist, und Google empfiehlt, dass Websites innerhalb von 2-3 Sekunden geladen werden sollten.
Die Minimierung hat viele Vorteile:
- Kleinere Dateien bedeuten, dass die Gesamtdownloadgröße Ihrer Website verringert wird,
- Website-Besucher können Ihre Seiten schneller laden und darauf zugreifen,
- Die Besucher der Website werden eine identische Benutzererfahrung haben, ohne größere Dateien herunterladen zu müssen, und
- Website-Eigentümer erhalten geringere Bandbreitenkosten, da weniger Daten über das Netzwerk übertragen werden.
Wie Sie Ihre HTML-, CSS- und JavaScript-Dateien verkleinern
Es ist eine gute Idee, ein Backup zu erstellen, bevor Sie die Dateien Ihrer Website minifizieren. Noch besser ist es, Ihre Dateien auf einer Staging-Website zu minifizieren, damit Sie überprüfen können, ob alles in Ordnung ist, bevor Sie Änderungen an Ihrer Live-Site vornehmen.
Es ist auch wichtig, die Geschwindigkeit Ihrer Seite vor und nach der Verkleinerung Ihrer Dateien zu messen, damit Sie die Ergebnisse vergleichen und sehen können, ob die Verkleinerung Wirkung gezeigt hat.
Meine Lieblingsseite für Geschwindigkeitstests ist GTmetrix. Es analysiert die Leistung Ihrer Seitengeschwindigkeit mit Google PageSpeed Insights und YSlow, einem Open-Source-Tool für Leistungstests. Es generiert dann Punkte und gibt Empfehlungen für Verbesserungen bei der Seitenoptimierung.
Zu den anderen großartigen Geschwindigkeitstesttools, die ich empfehlen kann, gehören Pingdom Website Speed Test und WebPageTest und Testen Sie Ihre mobile Geschwindigkeit.
Auch lesen: OptimizePress 3 Test & Erfahrungen
Dateien manuell verkleinern
Das manuelle Minifizieren von Dateien erfordert einen beträchtlichen Zeit- und Arbeitsaufwand. Ich meine, wer hat schon Zeit, einzelne Leerzeichen, Zeilen und unnötigen Code aus Dateien zu entfernen? Langweilig! Es lässt auch mehr Raum für menschliche Fehler. Daher würde ich diese Methode für das Minifizieren von Dateien nicht empfehlen.
Glücklicherweise gibt es viele kostenlose Online-Minifizierungswerkzeuge, mit denen Sie Code von und zu Ihrer Website kopieren und einfügen können. Hier ist eine kurze Liste von Werkzeugen, und ich möchte Sie ermutigen, nach anderen Optionen zu suchen, die für Ihre Site besser funktionieren könnten.
- Will Peavy’s HTML-Minifier
Der HTML-Minifier ist ein kostenloses Online-Tool zur HTML-Minifizierung, das mit PHP erstellt wurde. Um das Tool zu verwenden, fügen Sie einfach Ihren HTML-Code in den Textbereich ein, einschließlich aller CSS von JavaScript in Ihrem Markup, und klicken Sie auf die Schaltfläche „Minify“. Um sicherzustellen, dass Ihre Skripte nach der Minifizierung funktionieren, wird empfohlen, JavaScript-Anweisungen mit einem Semikolon zu beenden und die * *-Syntax für Kommentare zu verwenden.
- CSS-Minifier
Ein weiteres kostenloses Tool, CSS Minifier, funktioniert durch das Minifizieren von CSS, die Sie kopieren und in den Textbereich „Input CSS“ einfügen. Es gibt Optionen zum Herunterladen der verkleinerten Ausgabe als Datei. Für Entwickler bietet dieses Tool auch eine API.
- JSCompress
JSCompress ist ein Online-JavaScript-Komprimierer, mit dem Sie Ihre JS-Dateien um bis zu 80% ihrer ursprünglichen Größe komprimieren und verkleinern können. Es kann verwendet werden, indem Sie Ihren Code kopieren und einfügen oder mehrere Dateien hochladen und kombinieren und dann auf „JavaScript komprimieren“ klicken. Dieses Tool basiert auf UglifyJS 3 und ist babili-standalone.
Manuelle Minifizierungs-Tools für Entwickler
Für Entwickler, die nach fortgeschritteneren Optionen suchen, empfiehlt Google diese HTML-, CSS- und JavaScript-Minifikationsquellen:
- HTMLMinifier – Ein Javascript-basierter HTML-Komprimierer/Minifier (mit Node.js-Unterstützung).
- CSSNano – Ein modularer Minifier, der auf dem PostCSS-Ökosystem aufbaut.
- csso – Ein CSS-Minifier mit strukturellen Optimierungen.
- UglifyJS – Ein JavaScript-Parser, -Mangler, -Kompressor und „Verschönerungs“-Toolkit.
Der Closure Compiler von Google ist ein Optimierungswerkzeug für JavaScript. Es kompiliert nicht aus einer Quellsprache in Maschinencode, sondern aus JavaScript, um besseres JavaScript zu erzeugen. Es parst Ihren Code, analysiert ihn, entfernt toten Code und schreibt den verbleibenden Code neu und minimiert ihn. Dieses Tool überprüft auch die Syntax, Variablenreferenzen und Typen und warnt vor häufigen JavaScript-Fallen.
Auch lesen: Thrive Architect Test & Erfahrungsbericht
Dateien mit Plugins minimieren
Es gibt einige hervorragende Plugins, sowohl kostenlose als auch Premium-Plugins, die Ihre Dateien verkleinern können, ohne dass Sie manuelle Schritte ausführen müssen.
Hinweis: Für diese Liste habe ich nur kostenlose Plugins aufgenommen, die im WordPress Plugin Repository verfügbar sind, die aktuell und mit den neuesten Versionen von WordPress getestet und kompatibel sind. Für Premium-Optionen scrollen Sie bitte nach unten./
- HTML-Minify
Dieses einfache, leichte und problemlose Plugin ermöglicht es Ihnen, die HTML-Ausgabe Ihrer Website zu minimieren. Es muss nur installiert und aktiviert werden, und schon wird Ihr Markup automatisch verkleinert, ohne dass Sie irgendwelche Einstellungen vornehmen müssen.
- Minify HTML
Ich liebe die WordPress.org-Beschreibung für dieses Plugin: „Haben Sie sich jemals das HTML-Markup Ihrer Website angesehen und bemerkt, wie schlampig und amateurhaft es aussieht? Dieses Plugin räumt auf und verkleinert schlampiges Markup.
Im Gegensatz zum HTML-Minify-Plugin bietet dieses Tool mehr Optionen. Es enthält eine optionale Minifizierung für JavaScript und CSS, wobei es sich nicht mit Textbereichen oder vorformatiertem Text herumschlägt. Es gibt auch Optionen zum Entfernen von HTML-, CSS- und JavaScript-Kommentaren (wobei MSIE-bedingte Kommentare belassen werden), zum Entfernen unnötiger XHTML-Schluss-Tags aus HTML5-Leer-Elementen und zum Entfernen unnötiger relativer Schemata und Domänen aus Links.
- Merge + Minify + Refresh — WordPress Plugins
Dieses Plugin kann mehr als nur Ihren Code verkleinern. Es kombiniert Ihre CSS- und JavaScript-Dateien und verkleinert dann die generierten Dateien mit Hilfe von Minify (für CSS) und Google Closure (für JavaScript). Die Minifizierung wird über WP-Cron durchgeführt, so dass Es die Geschwindigkeit Ihrer Website nicht beeinträchtigt.
Wenn sich der Inhalt Ihrer CSS- oder JS-Dateien ändert, werden sie neu verarbeitet, so dass Sie Ihren Cache nicht leeren müssen. Multisite-Benutzer werden sich freuen zu wissen, dass dieses Plugin in Netzwerken gut funktioniert.
Auch lesen: Shortcodes in WordPress – die Anleitung
- JCH Optimize
JCH Optimize hat eine Menge netter Funktionen für ein kostenloses Plugin: Es kombiniert und verkleinert CSS und JavaScript, verkleinert HTML, es gibt GZip-Kompression für Kombinations-Dateien, Sprite-Generierung für Hintergrundbilder, und Sie können bestimmte Dateien von der Kombination ausschließen, um Konflikte aufzulösen.
Es ist eine Pro-Version mit weiteren Optimierungsfunktionen erhältlich, darunter asynchrones Laden von JavaScript, Optimierung der CSS-Bereitstellung zur Beseitigung von Render-Blockierungen, Unterstützung für CDNs/cookie-less Domains sowie träges Laden und Optimierung für Bilder.
- CSS-Minify
Das Minifizieren Ihres CSS mit diesem Plugin könnte nicht einfacher sein – einfach installieren, aktivieren, zu Einstellungen > CSS Minify gehen, um nur eine Option zu aktivieren: CSS-Code optimieren und verkleinern.
Der Code in diesem Plugin wurde von dem beliebten Autoptimize-Plugin abgezweigt (mehr zu diesem Plugin weiter unten). Der Autor des Plugins, Peter Pfeiffer, hat ein ähnliches Plugin für JavaScript verfügbar: Minify JavaScript.
- Fast Velocity Minify
Mit mehr als 20.000 aktiven Installationen und einer Fünf-Sterne-Bewertung ist dies eine der beliebtesten Optionen zum Minifizieren von Dateien. Um es zu verwenden, installieren und aktivieren Sie das Plugin und gehen Sie zu Einstellungen > Fast Velocity Minify. Dort finden Sie einen Stapel von Optionen zur Konfiguration des Plugins, darunter erweiterte Optionen für Entwickler, JavaScript- und CSS-Ausnahmen, CDN-Optionen sowie Serverinformationen. Die Standardeinstellungen funktionieren jedoch für die meisten Sites einwandfrei.
Das Plugin führt die Minifizierung in Echtzeit am Front-End und nur während der ersten nicht gecachten Anfrage durch. Sobald die erste Anfrage verarbeitet ist, werden alle anderen Seiten, die denselben Satz an CSS und JavaScript benötigen, mit derselben statischen Cache-Datei bedient.
- Autoptimize
Mit mehr als 400.000 aktiven Installationen ist Autoptimize mit Abstand das beliebteste Minifizierungswerkzeug im WordPress-Plugin-Repository.
Autoptimize kann Skripte und Stile aggregieren, minifizieren und zwischenspeichern, standardmäßig CSS in den Header der Seite injizieren und Skripte auch in den Footer verschieben und verschieben. Es stehen zahlreiche erweiterte Optionen für Entwickler und eine umfangreiche API zur Verfügung, so dass Sie Autoptimize an die spezifischen Anforderungen Ihrer Website anpassen können.
- Hummingbird Page Speed-Optimierung
Hummingbird ist ein relativ neues Plugin für das WordPress Plugin Repository, das als Premium-Plugin begonnen hat. Die kostenlose Version bietet eine große Sammlung von Werkzeugen zur Optimierung von Websites, einschließlich der Minifizierung, mit denen Sie Dateien für eine optimale Leistung verkleinern, positionieren und kombinieren können.
Außerdem gibt es eine großartige Scan-Funktion, mit der Sie die Leistung Ihrer Website testen können und direkt aus dem Plugin heraus umsetzbare Empfehlungen zur Verbesserung Ihrer Website erhalten.
Minifizierung als Funktion in WordPress-Caching-Plugins
Die Minifikation ist im Allgemeinen eine Standardfunktion, die Sie in Caching-Plugins finden. Hier sind die Plugins, die ich getestet habe und empfehlen kann:
- WP-Rocket
- W3 Total Cache
- WP-Super-Cache
Auch lesen: WordPress Footer bearbeiten
Fazit
Ich hoffe, dieser Artikel hat die Minifikation für Sie entmystifiziert und ein solides Verständnis dafür vermittelt, was Es ist und wie Sie es auf Ihre Website anwenden können.
Es ist wichtig, sich vor Augen zu halten, dass die Minifizierung eher ein Schritt zur Feinabstimmung ist – Sie werden vielleicht eine kleine Verbesserung der Geschwindigkeit Ihrer Website feststellen, aber es wird nicht signifikant sein. Es handelt sich jedoch um ein bewährtes Verfahren, das es wert ist, zusätzlich zu anderen Leistungs- und Optimierungstechniken wie dem Kombinieren von Dateien implementiert zu werden.
Stellen Sie außerdem sicher, dass Sie Ihre Dateien konfigurieren, testen, rekonfigurieren, erneut testen, optimieren und prüfen, was für Ihre Website am besten funktioniert, wenn Sie Ihre Dateien verkleinern, denn jede Website ist anders.