Webdesign-Podcast.de

In diesem Artikel, mit dazugehöriger Video-Podcast Folge, möchte ich euch an einem Praxis-Beispiel einige Tipps und Tricks zur Performance-Optimierung einer WordPress Webseite bzw. eines WordPress Themes geben. Das Video findet ihr am Ende dieses Artikels.

Es gibt für Webseiten eine unglaubliche Menge an verschiedenen Tipps und Tricks um diese zu beschleunigen. Ein echtes Patentrezept, welches sich auf jede WordPress-Webseite anwenden lässt, gibt es jedoch nicht. Jedes Web-Projekt ist in der Regel individuell und sollte auch so behandelt werden.

Eine Technik, die bei der einen Seite funktioniert und einen guten Performance-Boost bringt, muss nicht auch zwangsweise bei einer anderen Webseite denselben Effekt hervorrufen.

In diesem Artikel und dem dazugehörigen Video möchte ich euch nun einige Techniken und Tricks vorstellen, die sich im Ansatz für fast jede WordPress basierende Webseite eignen.

Wer darüber hinaus Informationen zur Optimierung der Ladezeit sucht, kann sich gerne auch die weiteren Artikel im Blog ansehen, unter anderem zu finden in der Kategorie Webseitenoptimierung.

Kombinieren (combine), komprimieren (minify oder compress) und danach cachen

Combine, minify and cache – Diese drei Techniken lassen sich in WordPress verhältnismäßig einfach umsetzen, da es hier die verschiedensten Plugins gibt, die diese Arbeit übernehmen können.

Was verbirgt sich hinter den jeweiligen Techniken:

Kombinieren (combine)
Darunter versteht man das Zusammenlegen von Dateien. Nehmen wir einmal an, ihr benötigt für eure Webseite drei CSS-Dateien: Die style.css eures Themes und zwei weitere CSS-Dateien die von Plugins eingebunden werden.

Nun muss der Browser für alle drei Dateien jeweils eine neue Verbindung (HTTP-Request) zum Webserver aufbauen und diese Dateien einzeln herunterladen. Dieser Vorgang kostet wertvolle Zeit, welche vermieden werden könnte.

Um die HTTP-Requests nun von drei auf einen zu reduzieren, werden alle drei CSS-Dateien einfach in einer gemeinsamen Datei kombiniert und nur noch diese eine Datei geladen.

Komprimieren (minify oder compress)
Bei dem Vorgang der Kompression (compress) werden z.B. JavaScript, CSS und auch HTML Dateien um unnötige Zeilenumbrüche, Kommentare, Leerzeichen usw. bereinigt, dadurch sinkt die Dateigröße.

Bei der Kompression unterscheidet man in der Regel zwischen zwei Varianten, der gerade genannten und beschriebenen „normalen“ Kompression und dem Minifying oder auch Minification.

Bei diesem letzten Vorgang werden nicht nur unnötige Zeichen entfernt sondern Dateien aktiv umgestaltet. In JavaScript werden z.B. Variablen und Funktionsnamen gekürzt, Kurzschreibweisen zur Verkleinerung von Abfragen verbaut uvm. In CSS verläuft der Prozess ähnlich, hier werden ebenfalls Kurzschreibweisen verwendet um den Code zu verschlanken und z.B. auch Farbcodes verkleinert. So wird aus dem HexCode für rot #ff0000 z.B. die kurze Version #f00.

Caching
Der Prozess des Caching kann uns in den verschiedensten Varianten begegnen. In der Regel dient ein Cache-System dazu, dass dynamisch erzeugte Dateien statisch gespeichert werden und somit schneller darauf zugegriffen werden kann.

Im Fall von WordPress und den oben genannten Beispielen, wäre in unserem Fall z.B. ein Cache für die folgenden Systeme relevant:

1. Ein Cache zum Zwischenspeichern der dynamisch erzeugten komprimierten und kombinierten Dateien. Müssten diese mit jedem Seitenaufruf dynamisch neu erzeugt werden, so könnte und würde der Geschwindigkeitsvorteil aufgrund der längeren Verarbeitungszeit der Dateien verpuffen.

2. Um WordPress zu entlasten, können auch hier fertig gerenderten HTML-Ausgaben in einem Cache gespeichert werden. Diese setzen sich aus den Widgets, Plugins und Inhalten der verschiedenen Seiten zusammen.

Auf diese Art und Weise muss die gesamte Seite nicht jedes Mal erneut dynamisch generiert werden und die verschiedenen Plugins, Widgets und Seiteninhalte geladen werden.

WordPress Plugins zur Performance-Optimierung

Für die obigen Punkte gibt es in WordPress eine Vielzahl an verschiedenen Plugins, die diese Aufgaben übernehmen können. Einige sind umfangreicher als andere und bieten teilweise auch einen komplett unterschiedlichen Funktionsumfang.

Eine pauschale Aussage, welches Plugin aus dieser Liste besser oder schlechter als ein anderes ist, kann man so nicht treffen. Je nach Wechselwirkung mit anderen Plugins, den eigenen Bedürfnissen, dem eigenen Erfahrungsstand, der verfügbaren Server Hard- und Software, usw. kann und sollte die Wahl des Plugins beeinflusst werden. Hier gilt vor allem: Probieren geht über studieren!

Folgende Plugins sind relativ bekannt und gut gepflegt: Ich persönliche setze in den meisten Fällen auf Cachify, Autoptimize und den WP-Super-Cache (nicht alle drei kombinieren, zwei Cache-Plugins sind z.B. überflüssig), habe aber auch mit den meisten anderen Plugins bereits gearbeitet.

• Cachify (Cache-System)
• WP-Super-Cache (Cache-System)
• W3 Total-Cache (Cache, Minify, Combination und andere Optimierungen)
• Autoptimize (Minify & Combination)
• WP-Minify (Minify & Combination)
• WP Optimize (Cache, Minify, Combination und andere Optimierungen)
• Hyper Cache (Cache, Minify, und Combination)

Diese Liste könnte man nun um viele weitere Links erweitern, da das Angebot an Plugins hier nahezu unendlich erscheint. Daher kann ich jedem nur empfehlen, die Plugins zu testen und für sich selbst das Richtige zu finden.

JavaScript und CSS nicht blockierend einbinden und die Darstellung „above the fold“ optimieren

Dieses Thema lässt sich zum Teil in der Kombination Bild und Ton etwas verständlicher erklären, als hier in der Schriftform. Daher möchte ich an dieser Stelle kurz auf das Video am Ende des Artikels aufmerksam machen, in welchem dieses Thema ausführlich behandelt wird.

Zusätzlich befinden sich zum Thema „JavaScript und CSS nicht blockierend einbinden“ bereits zwei weitere Artikel in der Freischaltungsschleife des Blogs, daher möchte ich hier nur kurz darauf eingehen und werde die Artikel verlinken, sobald diese online verfügbar sind.

Tipp: Wenn du die Artikel nicht verpassen möchtest, dann folge uns doch einfach auf Twitter, Facebook oder abonniere unseren Blog via E-Mail (rechts in der Sidebar möglich). Selbstverständlich kannst du auch unseren RSS-Feed abonnieren oder unseren anderen Social Network Kanälen folgen.

• jQuery Lazy Load für Webseiten und speziell für WordPress-Systeme
• jQuery.getScript() – Scripte asynchron und nur bei Bedarf nachladen
• Zwei Tools um Bilder fürs Web zu komprimieren bzw. zu optimieren
• Scripte nicht blockierend einbinden – HTML5 Attribute defer und async

Im Normalfall arbeitet der Browser ein HTML-Dokument von oben nach unten der Reihe nach ab. Stößt dieser nun z.B. im Head-Tag auf mehrere CSS und JavaScript Dateien, so werden auch diese der Reihe nach geladen, bevor der Verarbeitungsprozess fortgesetzt wird.

Es empfiehlt sich daher Scripte und auch CSS-Dateien, die nicht unmittelbar benötigt werden nachzuladen. Damit wird der Verarbeitungsprozess des Browsers bis zur Darstellung der Webseite beschleunigt. Google empfiehlt alle wichtigen CSS-Angaben für den Bereich „above the fold“ (ohne scrollen sichtbarer Inhalt) via Inline-Styles einzubinden. Andere CSS-Dateien sollen nach dem schließenden HTML-Tag oder über JavaScript nachgeladen werden.

Für JavaScript gelten dieselben Empfehlungen. Diese können ebenfalls bei Bedarf nachgeladen oder asynchron beim Seitenaufbau geladen werden. In HTML5 gibt es die Attribute „defer“ und „async“. Mit beiden Attributen kann dem Browser mitgeteilt werden, dass die Scripte asynchron zu laden sind und der Ladevorgang das weitere Rendering nicht blockieren soll.

Alles weitere zu diesem Thema erfahrt ihr in ein paar Tagen detailliert in den weiteren Artikeln.

WordPress entschlacken – CSS und JavaScripte der Plugins entfernen

Plugin sind in WordPress Fluch und Segen zugleich, jeder Betreiber einer WordPress Webseite kann sich über die kinderleichte Erweiterbarkeit seiner Webseite freuen und über die mittlerweile weit über 35.000 Plugins, die kostenfrei im WordPress Plugin Directory zu haben sind.

Mit jedem Plugin wächst jedoch der Performancebedarf von WordPress. Weiterhin binden viele Plugins eigene JavaScripte und CSS-Dateien in die Seiten ein, welche diese dann zusätzlich verlangsamen und in vielen Fällen gar nicht benötigt werden.

Nehmen wir als Beispiel einmal die Newsletter Box, welche von dem Mailchimp Plugin erzeugt wird. Hier werden z.B. für einige Funktionen und für das Styling CSS und JavaScript eingebunden.

In meinem Fall wird beides nicht benötigt, da die CSS-Angaben z.B. mit eigenen Angaben überschrieben werden und das JavaScript bereits in ähnlicher Form vorhanden ist.

In solchen Fällen sollte man in Ruhe prüfen, welche Dateien von den Plugins wirklich benötigt werden und welche nicht. Diese lassen sich dann z.B. über WordPress Hooks wieder entfernen.

Hier sind ein paar Beispiele für Plugins bei denen ich CSS oder JavaScripte entfernt habe, diese könnt ihr in eure functions.php einbinden:

MailChimp Plugin:

add_action( 'wp_enqueue_scripts', function(){ wp_dequeue_script('jquery_scrollto'); wp_deregister_script('jquery_scrollto'); wp_dequeue_script('mailchimpSF_main_js'); wp_deregister_script('mailchimpSF_main_js'); wp_dequeue_script('datepicker'); wp_deregister_script('datepicker'); wp_dequeue_style('mailchimpSF_main_css'); wp_deregister_style('mailchimpSF_main_css'); wp_dequeue_style('mailchimpSF_ie_css'); wp_deregister_style('mailchimpSF_ie_css'); });

YARPP – Yet Another Related Posts Plugin

add_action( 'wp_print_styles', function(){ wp_dequeue_style('yarppWidgetCss'); wp_dequeue_style('yarppRelatedCss'); wp_deregister_style('yarppRelatedCss'); }, 1 ); add_action('wp_footer', function(){ wp_dequeue_style('yarppRelatedCss'); wp_deregister_style('yarppRelatedCss'); });

Jetpack:

add_filter( 'jetpack_implode_frontend_css', '__return_false' ); add_action( 'wp_footer', function(){ // subscriptions wp_dequeue_style('jetpack-subscriptions'); wp_deregister_style('jetpack-subscriptions'); wp_dequeue_style('grunion.css'); wp_deregister_style('grunion.css'); wp_dequeue_script('devicepx'); });

Da das Jetpack sehr umfangreich ist, gibt es eine umfangreiche Liste aller Komponenten, die Einzeln oder im Gesamten entfernt werden können (funktioniert zum Teil nur bei älteren Jetpack-Versionen):

add_action( 'wp_enqueue_scripts', function(){ wp_deregister_style('AtD_style'); // After the Deadline wp_deregister_style('jetpack-carousel'); // Carousel wp_deregister_style('grunion.css'); // Grunion contact form wp_deregister_style('the-neverending-homepage'); // Infinite Scroll wp_deregister_style('infinity-twentyten'); // Infinite Scroll - Twentyten Theme wp_deregister_style('infinity-twentyeleven'); // Infinite Scroll - Twentyeleven Theme wp_deregister_style('infinity-twentytwelve'); // Infinite Scroll - Twentytwelve Theme wp_deregister_style('noticons'); // Notes wp_deregister_style('post-by-email'); // Post by Email wp_deregister_style('publicize'); // Publicize wp_deregister_style('sharedaddy'); // Sharedaddy wp_deregister_style('sharing'); // Sharedaddy Sharing wp_deregister_style('stats_reports_css'); // Stats wp_deregister_style('jetpack-widgets'); // Widgets });

Verschiedene Optimierungen über die functions.php eures Themes

Über die functions.php eures Themes könnt ihr zusätzlich zu den bereits genannten Anpassungen noch ein paar weitere Optimierungen vornehmen, welche ich euch nun zeigen möchte:

Query-Strings am Ende von Datei-URL’s können das Caching verhindern, daher macht es Sinn diese zu entfernen:

add_filter( 'script_loader_src', 'remove_script_version', 15, 1 ); add_filter( 'style_loader_src', 'remove_script_version', 15, 1 ); function remove_script_version($src) { $parts = explode('?', $src); return $parts[0]; }

JPEG Kompression in WordPress festlegen:

add_filter( 'jpeg_quality', function($arg){return 80;} );

Scripte die von WordPress oder Plugins eingebunden werden um defer Attribut erweitern:

add_filter( 'script_loader_tag', function ( $tag, $handle ) { if( strstr($tag, 'syntaxhighlighter') ) { return $tag; } $tag = str_replace(' type=\'text/javascript\'', '', $tag); $tag = str_replace('\'', '"', $tag); return str_replace( ' src', ' defer="defer" src', $tag ); }, 10, 2);

Video-Podcast WordPress Performance-Optimierung

Zwar handelt es sich bei den gezeigten Tipps und Tricks nur um einen kleinen Teil einer schier unendlichen Liste an möglichen Optimierungen, mit diesen Basics seit ihr jedoch bereits gut gerüstet.

Wichtig ist vor allem, Erweiterungen bzw. Plugins mit Bedacht einzubinden und die Seite nicht zu überladen. Dies gilt nicht nur für WordPress Plugins sondern z.B. auch für jQuery Erweiterungen.

DigitalOcean $10 USD zum ausprobieren

Wer gerne etwas mit verschiedenen Server-Konfigurationen rumprobieren möchte, der kann dies z.B. mit den Cloud-Servern von DigitalOcean. Die Abrechnung erfolgt stundengenau, daher können VPS für wenige Stunden zum Testen genutzt werden und danach wieder abgeschossen werden.

Natürlich ist auch ein durchgehendes Hosting zu einem monatlichen Preis möglich. Wer DigitalOcean testen möchte, kann sich über diesen Link anmelden und erhält 10 USD Startguthaben.