WordPress Performance-Optimierung an einem Praxis-Beispiel

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.


Anzeige:









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.
WP Super Cache – Banner

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!
Cachify Logo

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.



Ähnliche Artikel:
Angriffe auf Admin-Konten von WordPress-Systemen Aufzeichnung
WordPress Webinar – WordPress Vorstellung
Suchmaschinenoptimierung (SEO) für WordPress