HTML Minify

Inhaltsverzeichnis

Wordpress HTML Minify ohne Plugin

Wordpress ist zum Teil ein aufgeblähtes System und das liegt auch an den vielen Plugins und Snippets, die Nutzer immer wieder in ihren Websites aktivieren. Weniger ist mehr, sollte es bei Wordpress heißen, doch oft wird jedes noch so unwichtige Feature auch gleich umgesetzt. Wer das Weniger ist mehr Motto aber beachtet, der arbeitet stetig daran, dass Wordpress schnell und performant bleibt. Ein wichtiger Schritt dabei ist die Minimierung vom Quelltext, also ein HTML Minify. Solche Wordpress Minify-Plugins gibt es inzwischen wie Sand am Meer, auch Caching-Erweiterungen übernehmen diese Aufgabe mittlerweile häufig, doch meistens ist beides nicht perfekt oder nur bei Objekten im Cache in Verwendung. Abhilfe schafft das folgende HTML Minify Snippet für Wordpress, welches nach meinen Tests auch dann Sinn macht, wenn ihr bereits ein Minify via Cache-Plugin nutzt. In meinen kurzen, und damit zugegebenermaßen nicht repräsentativen, Tests, zeigte sich nämlich, dass das Snippet schlichtweg schneller und sauberer arbeitet, als die Minify-Methoden der bekannten Caching-Erweiterungen oder Plugins von Wordpress. Das mag mehrere Gründe haben, doch am Ende zählt nur, dass es schneller arbeitet und den eigenen Server oder Webspace nicht unnötig belastet.

Folgendes in die Functions.php eures Themes einfügen:

class WP_HTML_Compression {
    protected $compress_css = true;
    protected $compress_js = true;
    protected $info_comment = true;
    protected $remove_comments = true;
 
    protected $html;
    public function __construct($html) {
      if (!empty($html)) {
		    $this->parseHTML($html);
	    }
    }
    public function __toString() {
	    return $this->html;
    }
    protected function bottomComment($raw, $compressed) {
	    $raw = strlen($raw);
	    $compressed = strlen($compressed);		
	    $savings = ($raw-$compressed) / $raw * 100;		
	    $savings = round($savings, 2);		
	    return '<!-- HTML Minify | https://fastwp.de/magazin/html-minify/ | Größe reduziert um '.$savings.'% | Von '.$raw.' Bytes, auf '.$compressed.' Bytes -->';
    }
    protected function minifyHTML($html) {
	    $pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';
	    preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
	    $overriding = false;
	    $raw_tag = false;
	    $html = '';
	    foreach ($matches as $token) {
		    $tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
		    $content = $token[0];
		    if (is_null($tag)) {
			    if ( !empty($token['script']) ) {
				    $strip = $this->compress_js;
			    }
			    else if ( !empty($token['style']) ) {
				    $strip = $this->compress_css;
			    }
			    else if ($content == '<!--wp-html-compression no compression-->') {
				    $overriding = !$overriding;
				    continue;
			    }
			    else if ($this->remove_comments) {
				    if (!$overriding && $raw_tag != 'textarea') {
					    $content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content);
				    }
			    }
		    }
		    else {
			    if ($tag == 'pre' || $tag == 'textarea') {
				    $raw_tag = $tag;
			    }
			    else if ($tag == '/pre' || $tag == '/textarea') {
				    $raw_tag = false;
			    }
			    else {
				    if ($raw_tag || $overriding) {
					    $strip = false;
				    }
				    else {
					    $strip = true;
					    $content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
					    $content = str_replace(' />', '/>', $content);
				    }
			    }
		    }
		    if ($strip) {
			    $content = $this->removeWhiteSpace($content);
		    }
		    $html .= $content;
	    }
	    return $html;
    }
    public function parseHTML($html) {
	    $this->html = $this->minifyHTML($html);
	    if ($this->info_comment) {
		    $this->html .= "\n" . $this->bottomComment($html, $this->html);
	    }
    }
    protected function removeWhiteSpace($str) {
	    $str = str_replace("\t", ' ', $str);
	    $str = str_replace("\n",  '', $str);
	    $str = str_replace("\r",  '', $str);
	    while (stristr($str, '  ')) {
		    $str = str_replace('  ', ' ', $str);
	    }
	    return $str;
    }
}
function wp_html_compression_finish($html) {
    return new WP_HTML_Compression($html);
}
function wp_html_compression_start() {
    ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');

Minify ohne Wordpress Plugin ist schneller

HTML Minify in Wordpress macht schlussendlich immer Sinn, weil der Quelltext damit meist um einige Prozent schrumpft, also schneller an den Browser übertragen werden kann. HTML, Inline-CSS und Javascript – Alles wird mit dem Wordpress Snippet oben auf ein Minimum reduziert, unnötige Kommentare, die im Quelltext vielleicht Sinn ergeben und daher nicht gelöscht wurden, werden entfernt, können in der Datei selbst aber immer noch angesehen werden. Minify ist sehr praktisch und ihr solltet unbedingt eine Lösung dafür nutzen, am besten eben das Wordpress Snippet oben. Abraten kann ich euch von extra Plugins, die diesen Job übernehmen sollen, denn WP Minify und Konsorten verbrauchen ganz schön viele Ressourcen auf dem eigenen Server, was ich für unnötig halte. Das kleine Snippet macht es da schon einfacher, ist schnell und komfortabel. Mein Tipp: Schaltet Minify in eurem Caching-Plugin aus und aktiviert das Snippet oben. Testet dann mal mit einem Tool eurer Wahl, wie performant das Ganze ist und ob sich die Ladezeit nicht dezent erhöht hat. Oft war das in meinen Tests der Fall, weshalb das Snippet dann einen geringfügigen Leistungsschub bringt, der sich im Gesamtbild eurer Wordpress Installation wieder richtig gut macht. Minimieren sollten ihr den Quelltext aber auf jeden Fall, ganz egal ob mit dem HTML Minify Snippet oben, oder mit einer nicht ganz so schnellen Alternativen Methode eurer Wahl.

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

4 Antworten

  1. Ein super Tipp! Vielen Dank!
    Wir haben unseren gesamten Server für WordPress-Seiten optimiert und das gesamte Caching und Micro-Caching läuft über Nginx, also den Webserver. Unglaublich schnell, viel performanter als jegliches WP-Cache-Plugin.
    Mir hat nur noch die Minifizierung des HTML-Codes gefehlt, das haben wir mit deinem Vorschlag auch behoben. Vielen Dank!

  2. Guten Tag und ein Hallo

    Ich kannte diesen Tipp bereits aus früheren Projekten aber hier in diesem Beitrag wird es sehr gut erklärt.
    Vielen Dank!

    Beste Grüsse aus der Schweiz
    Silvester

  3. Alternativ könnte man auch einen CDN wie Cloudflare nutzen. Dort kann jede Datei automatisch umgewandelt werden. Das bringt zwar ehrlich gesagt nur ein paar Bytes – Kilobytes, aber warum nicht, wenn man die Möglichkeit hat. 🙂

  4. Eine richtig tolle Empfehlung. Arbeitet super zusammen mit WP Rocket. Ansonsten hätte ich noch Autoptimize nur für die HTML-Compression installiert. So ist das richtig klasse mit Child-Theme und functions.php.
    Danke und Gruß
    Ralf

Schreibe einen Kommentar

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

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian