CSS reduzieren

CSS, Javascript & HTML in WordPress reduzieren

Im letzten Beitrag haben wir bereits alle CSS-, Javascript- & HTML-Dateien mit Hilfe des Apache Moduls “mod_deflate” komprimiert. Heute geht es darum diese Ressourcen weiter zu reduzieren.

Unter Reduzieren verstehen wir hier das Entfernen unnötiger Bytes bspw. durch Weglassen unnötiger Leerzeichen, Zeilenumbrüche & Einzüge oder aber auch das Umbenennen von Variablen ohne dabei die Funktionalität des Codes zu beeinträchtigen. Durch die verkürzten Codes können die Daten schneller vom Nutzer geladen & ausgeführt werden.

Um zu verdeutlichen, was genau mit der Reduzierung gemeint ist hier ein Beispiel anhand eines CSS-Codes:

.wp-core-ui .btn-upgrade {background: none #5cb85c;border-color: #4cae4c;box-shadow: none;color: #fff;margin-top: 10px;}.wp-core-ui .btn-upgrade:hover,.wp-core-ui .btn-upgrade:focus  {background: none #449d44;border-color: #398439;box-shadow: none;color: #fff;}#catchbox_upgrade {display: block;float: left;width: 100%;}

Nach Reduzierung aller unnötigen Leerzeichen, Zeilenumbrüche & Einzüge sieht der Code folgendermassen aus:

.wp-core-ui .btn-upgrade{background:none #5cb85c;border-color:#4cae4c;box-shadow:none;color:#fff;margin-top:10px}.wp-core-ui .btn-upgrade:hover,.wp-core-ui .btn-upgrade:focus{background:none #449d44;border-color:#398439;box-shadow:none;color:#fff}#catchbox_upgrade{display:block;float:left;width:100%}

Die Funktionalität des Codes wurde dadurch in keinster Weise beeinträchtigt, die Dateigröße konnte durch Weglassen aller unnötigen Zeichen aber um mehr als ⅓ reduziert werden.

Um die Codes der gewünschten Dateien nicht alle manuell bearbeiten zu müssen gibt es im Netz eine Vielzahl an Webseiten die einem die Arbeit abnehmen:

Hier muss lediglich der gewünschte Code per Copy & Paste eingetragen und per Mausklick verkleinert werden. Anschliessend gegen den Code der originalen Datei austauschen und wieder auf den Webspace laden.

CSS, Javascript & HTML mit Autoptimize reduzieren

Da die Reduzierung der Codes einiges an Zeit in Anspruch nehmen kann, stelle ich allen WordPress Nutzern hier ein Plugin vor, das einem die Arbeit ungemein erleichtert. Das Plugin nennt sich “Autoptimize” und kann hier heruntergleaden werden. Das Plugin reduziert alle Codes der CSS-, Javascript und HTML-Dateien nach obigem Muster automatisch. Ausserdem fasst es alle Dateien zusammen, sodass bspw. nicht x CSS-Files beim Webseitenaufruf geladen werden, sondern nur die von Autoptimize zusammengefasste CSS-Datei.

Screenshot Einstellungen Plugin Autoptimize - Plugin AutoptimizeScreenshot Einstellungen Plugin Autoptimize – Plugin Autoptimize

Das Plugin ist dabei eigentlich selbsterklärend, nach Download & Aktivierung müssen lediglich 3 Häkchen bei “Optimize HTML Code” (1), “Optimize JavaScript Code” (2) & “Optimize CSS Code” (3) gesetzt werden. Sollte auf Ihrer Webseite Google Adsense eingesetzt werden muss unter Optimize HTML Code noch zusätzlich ein Haken bei “Enable this if you want HTML comments to remain in the page, needed for e.g. AdSense to function properly.” gesetzt werden. Damit wird gewährleistet, dass trotz Reduzierung des HTML-Codes die Funktionalität des Adsense-Codes nicht beeinträchtigt wird.

Neben der Reduzierung & Zusammenfassen der CSS-, Javascript- & HTML-Codes übernimmt das Plugin ebenfalls die Komprimierung dieser Ressourcen. Dazu wird vom Plugin eine eigene htaccess-Datei angelegt, die die Funktionalität der hier eingetragenen Komprimierungsmassnahmen sozusagen überlagert! Die vom Plugin angelegte htaccess-Datei liegt im Verzeichnis “wp-content” –> “cache” –> “autoptimize” der WordPress-Installation. Wer also in seiner eigenen htaccess-Datei weitere Regelungen bezüglich der Komprimierung festgelegt hat, sollte hier die von Autoptimize angelegte htaccess-Datei in der FilesMatch-Anweisung dementsprechend anpassen!

Alle Artikel der Serie

4 Comments

Leave a Comment