Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

HTML Minify

HTML Minify

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 | http://fastwp.de/2044/ | 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.



Wordpress Performance eBook