Lektion 10: 11 Tipps wie Du die Geschwindigkeit deiner Nischenseite steigerst.

Neben der Sicherheit aus Lektion 09, ist die Optimierung der Geschwindigkeit ein einflussreicher Hebel für den Erfolg der Nischenseite. Bereits eine Handvoll Maßnahmen verkürzen die Ladezeit spürbar. Die Ladegeschwindigkeit hat übrigens auch Einfluss auf deine Rankings in Google. Wenn Du die Tipps aus diesem Artikel anwendest, wirst Du folgende Ergebnisse erzielen. Kürzere Ladezeiten, geringere Absprungrate, höhere Seitenaufrufe, längere Besucherzeiten und zwangsläufig mehr Einnahmen.

Einen schnellen Hoster

Den größten Einfluss auf die Geschwindigkeit deiner Nischenseite hat dein Hoster. Wenn der nichts taugt, sind weitere Optimierungen zwecklos. Manche Anbieter veröffentlichen technische Daten zu ihren verbauten Prozessoren und Arbeitsspeicher. Ein anderer Richtwert ist die Anzahl von Kunden je Server. HIER habe ich eine Liste für dich mit seriösen Hostern. Ich verwende übrigens Alfahosting* und bin auch nach vielen Jahren sehr zufrieden. Der neueste Trend ist das sogenannte SSD Hosting.

Ich bin in Lektion 04 bereits kurz darauf eingegangen. Mach bitte einen großen Bogen um Free Hoster oder irgendwelche billig Hoster. Das bringt dich und deine Nischenseite nicht weiter.

Ein schnelles WordPress Theme

Schlecht programmierte oder mit tausenden Funktionen vollgestopfte Themes sind träge und erhöhen die Ladezeit. In Lektion 07 findest Du alles, was Du über gute Themes wissen musst. Schau dich bei den verschiedenen Premium Theme Entwicklern intensiv um.

Geschwindigkeit deiner Nischenseite analysieren

Vor der Optimierung musst Du eine Bestandsanalyse deiner Nischenseite durchführen. Ich verwende das Google PageSpeed Tool und den Dienst Pingdom. Du solltest mit deiner Seite bei dem Tool von Google definitiv versuchen in den grünen Bereich zu kommen. Es geht nicht darum, um jeden Preis 100 Punkte zu erreichen. Bereits ab ca. 80 Punkten ist Google zufrieden und gibt dir grünes Licht. Du kannst davon ausgehen, dass der Algorithmus der Suchmaschine im Hintergrund ähnlich arbeitet und bewertet. Ein schlechter Pagespeed wird sich zwangsläufig negativ auf deine Rankings auswirken. Beschäftige dich bitte auf jeden Fall mit der Geschwindigkeitsoptimierung.

Die Funkklingel Nischenseite vor der Optimierung

Gut, ich muss sagen, die Werte lassen sich schon vor der Optimierung sehen. Die Seite ist noch nicht fertig erstellt, die MH Themes* sind gut und mein Hoster Alfahosting* trägt auch positiv dazu bei. Trotzdem will ich noch ein bisschen mehr aus der Seite rausholen.

Optimierte Dateien aus dem Google Pagespeed Tool

Nachdem Du deine Seite über das Google Pagespeed Tool analysiert hast, bietet dir Google unten optimierte Bild, Javascript und CSS Dateien zum Download an. Ersetze die Original Dateien über das WordPress Backend oder über FileZilla.

Wenige und performante Plugins

Vermeide alle sinnlosen Plugins. Nicht nur das jedes zusätzliche Plugin ein potenzieller Angriffspunkt ist. Zu viele Plugins erhöhen die Abfragen auf deinem Server und verlangsamen deine Nischenseite. Mit dem Plugin P3 – Plugin Performance Profiler untersuchst Du die Geschwindigkeit deiner aktivierten Plugins. Damit kannst Du langsame Krücken finden und eventuell durch flinkere Plugins ersetzen. Leider gibt es aber nicht immer einen Ersatz. Wie im Screenshot zu sehen, bemängelt das Tool die Plugins BackWPup, EWWW Image Optimizer und WordPress SEO. Auf alle drei Plugins kann und will ich nicht verzichten. Vielleicht sehen bei dir die Ergebnisse anders aus und Du kannst was mitnehmen. Probier es zumindest mal aus.

Vermeide die offiziellen Social Media Plugins

Mit Sicherheit kennst Du die berühmten Facebook Boxen, um eine Webseite mit einem Like zu markieren. Diese Social Boxen, egal von welchem Netzwerk, haben zwei Probleme. Die Ladezeit dieser Plugins ist katastrophal und datenschutzkonform sind sie in Deutschland auch nicht nutzbar. Besser sind statische Social Buttons. Diese kommunizieren nicht dauerhaft mit den sozialen Netzwerken. Sondern nur, wenn wirklich bewusst darauf geklickt wird. Ich nutze im Moment das Plugin Shariff Wrapper.

Alternativen zum Shariff Wrapper

• Revive old Posts

Bildgröße und Dateiformat

Die Reduzierung der Dateigröße bei guter Bildqualität ist schwierig, aber möglich. Zuerst musst Du schauen, welche Bildgröße in deinem Theme verwendet wird. Wenn dein Theme bei einem Artikelbild eine Breite von 940 Pixel fordert, dann muss dein Bild auch 940 Pixel breit sein. Ein größeres Bild wird zwar automatisch auf die passende Größe skaliert, hat aber unnötigerweise eine viel höhere Dateigröße.

Welche Dateigröße darf ein Bild nun maximal haben? Pauschal kann ich das nicht beantworten. Aber ein guter Richtwert für Artikelbilder sind 50 bis 100 KB. Hintergrundbilder sollten nicht größer als 250 KB sein. Wenn Du niedrigere Werte erreichen kannst – nur zu. Verwende aber niemals Bilder mit 500 KB und mehr. Das geht gar nicht!

Die drei am weitesten verbreiteten Dateiformate sind JPG, PNG und GIF. Das PNG Dateiformat eignet sich für Screenshots oder Grafiken mit wenig Farben und viel Text. Auch ein transparenter Hintergrund ist bei diesem Format möglich. Die Komprimierung ist zwar nicht so stark möglich, dafür aber verlustfrei. Das JPG Format ist besser für normale Fotos. Die Dateien lassen sich enorm komprimieren. Allerdings musst Du hierbei immer die Qualität im Auge behalten. Mehr zu den beiden Formaten findest Du HIER.

Bevor Du deine Bilder bei WordPress hochlädst, solltest Du die Bilder zuschneiden und so gut wie möglich optimieren. Ich verwende dafür FotoSizer, TinyPic oder Gimp. Bei FotoSizer fahre ich mit einer Qualitätsstufe von 80% sehr gut.

Optimiere alle Bilder und Grafiken

Außerdem solltest Du unbedingt das Plugin EWWW Image Optimizer installieren. Dieses Plugin optimiert automatisch alle Bilder, die Du bei WordPress hochlädst. Das Beste ist aber, dass Du mit einem Klick auch alle bereits verwendeten Bilder optimieren kannst.

Alternativen zum EWWW Image Optimizer

• Optimus
• EWWW Pro*
• Imsanity
• kraken.io
• WP Smush.it

Verwende ein Caching Plugin

Vereinfacht gesagt, wandelt ein Caching Plugin die dynamischen Inhalte von WordPress in eine statische Seite um. Dadurch werden die Abfragen auf der Datenbank reduziert und die Ladezeit wird gewaltig reduziert.

Caching Plugins gibt es viele für WordPress. Die geläufigsten sind W3 Total Cache, WP Fastest Cache, WP Super Cache, Hyper Cache oder den Cache Enabler. Die Plugins machen vom Prinzip her alle das gleiche, aber hinter den Einstellungsmöglichkeiten verbergen sich teilweise echte Monster, die kaum zu bändigen sind. Der Zeitaufwand ist enorm. Schließlich musst Du jede Veränderung im Anschluss messen. Es gibt nämlich viele Konfigurationen, die dein System eher langsamer machen als schneller.

Ganz anders läuft das bei Cachify. Hier gibt es nicht mal fünf Einstellungen. Diese sind verständlich auf Deutsch erklärt und dokumentiert. Der Witz ist, dass Du mit diesem schlanken Caching Plugin genauso gute Ergebnisse erzielst wie mit den oben genannten.

Die Option Cache Minimierung entfernt alle unnötigen Zeichen aus den HTML und JavaScript Dateien. Sollte es Probleme bei der Darstellung deiner Nischenseiten geben, dann verwende nur die Minimierung von HTML oder schalte sie komplett ab.

Der Cache Aufbewahrungsort Festplatte erzielt bei mir eine bessere Ladezeit. Um diesen zu Aktivieren, musst Du folgenden Code in deine .htaccess Datei eintragen.

# BEGINN CACHIFY

 # ENGINE ON
 RewriteEngine On

 # GZIP FILE
 
 RewriteCond %{REQUEST_URI} /$
 RewriteCond %{REQUEST_URI} !^/wp-admin/.*
 RewriteCond %{REQUEST_METHOD} !=POST
 RewriteCond %{QUERY_STRING} =""
 RewriteCond %{HTTP_COOKIE} !(wp-postpass|wordpress_logged_in|comment_author)_
 RewriteCond %{HTTP:Accept-Encoding} gzip
 RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/cachify/%{HTTP_HOST}%{REQUEST_URI}index.html.gz -f
 RewriteRule ^(.*) /wp-content/cache/cachify/%{HTTP_HOST}%{REQUEST_URI}index.html.gz [L]

 AddType text/html .gz
 AddEncoding gzip .gz
  
 # HTML FILE
 RewriteCond %{REQUEST_URI} /$
 RewriteCond %{REQUEST_URI} !^/wp-admin/.*
 RewriteCond %{REQUEST_METHOD} !=POST
 RewriteCond %{QUERY_STRING} =""
 RewriteCond %{HTTP_COOKIE} !(wp-postpass|wordpress_logged_in|comment_author)_
 RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/cachify/%{HTTP_HOST}%{REQUEST_URI}index.html -f
 RewriteRule ^(.*) /wp-content/cache/cachify/%{HTTP_HOST}%{REQUEST_URI}index.html [L]

# END CACHIFY

CSS, JavaScript und HTML komprimieren

Autoptimize ist kein Caching Plugin, sondern eine nützliche Ergänzung. Mit dem Plugin werden CSS und Javascript Dateien automatisch zusammengelegt und komprimiert. Auch der HTML Code deiner Seite wird verkleinert. Unter anderem werden all unnötigen Leerzeichen und Kommentare entfernt. Die Dateien verschiebt Autoptimize außerdem vom Header in den Footer.

Es ist bekannt, dass die starke Komprimierung dieser Dateien Probleme mit Star Rating Plugins macht. Dessen solltest Du dir bewusst sein. Aktiviere Schritt für Schritt die Optionen von Autoptimize und überprüfe, ob deine Seite noch so läuft, wie sie soll.

Alternative zu Autoptimize

• Better WordPress Minify

Htaccess Datei aufbohren

Mit der .htaccess Datei kannst Du deinen Hoster konfigurieren und die Geschwindigkeit deiner WordPress Seite enorm steigern. Was eine htaccess Datei ist und wo Du sie findest oder erstellst, wird dir HIER erklärt.

Wie wird die Geschwindigkeit verbessert?

• Browser Caching wird aktiviert
• Komprimiert die Inhalte mit Gzip und deflate
• Keep Alive reduziert die Anfragen auf dem Server

Achtung: Im Code Beispiel unten ist meine Funkklingel Nischenseite an einer Stelle eingetragen. Diese musst Du durch deine Domain ersetzen.

Der Code stammt übrigens im Original von FastWP.de und basiert auf jahrelanger Erfahrung.

#BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

#END WordPress

SetOutputFilter DEFLATE

ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/ico "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"

Header append Cache-Control "public"
Header append Vary Accept-Encoding
Header set Connection keep-alive
Header unset ETag
FileETag None

Options -Indexes
<filesmatch "(^\.|.htaccess|wp-config\.php|readme\.html)"="">
Order deny,allow
Deny from all

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?funkklingel-ratgeber\.de(/.*)?$ [NC]
RewriteRule \.(jpg|jpeg|gif||png)$ - [F]

Datenbank regelmäßig aufräumen

Wenn Du mit WordPress eine Nischenseite erstellst, bleibt es nicht aus, dass die Datenbank im Hintergrund immer größer wird. Automatisch zwischengespeicherte Artikel, Spam, gelöschte Kommentare, verwaiste Metatags und Beziehungen machen die Datenbank langsamer. Dieser Datenmüll ist überflüssig und muss regelmäßig bereinigt werden. Ich mache das jeden Monat mindestens einmal.

Du kannst auch direkt in der MySQL-Datenbank aufräumen. Aber für Anfänger ist das nur schwer durchzuführen und benötigt Hintergrundwissen und Zeit. Natürlich gibt es auch für diesen Hausmeister Job ein Plugin. Die letzten Jahre hatte ich das bekannte WP-Optimize im Einsatz. Für die Recherche zu diesem Artikel bin ich aufgrund der Empfehlung von FastWP.de auf WP-Sweep aufmerksam geworden. Arbeitet noch sauberer, ist schlanker und die Oberfläche des Plugins ist aufgeräumter.

Lege zur Sicherheit vor jeder Ausführung des Plugins ein Datenbank Backup an. Ich hatte zwar noch nie ein Problem, aber falls was passiert hast Du wenigstens ein Fangnetz.

Meine Ergebnisse

Wie oben erwähnt ist die Seite schon sehr gut gestartet. Trotzdem konnte ich noch mehr raus holen. Im Google PageSpeed Tool ging es ein paar Punkte nach oben. Bei Pingdom konnte ich die Anfragen auf den Server deutlich reduzieren und 500 Millisekunden Ladezeit sind klasse. Natürlich ist die Funkklingel Nischenseite noch nicht komplett fertig. Aber mit den jetzigen Werten lässt sich gut arbeiten. Eventuell wird es nötig sein, nach der Fertigstellung die Optimierungen zu überprüfen.

Noch ein paar Worte zum Google PageSpeed Tool. Wie im Screenshot zu sehen wird mir weiterhin empfohlen, die Javascript und CSS Dateien für den sofort sichtbaren Bereich, Inline einzubinden. Ich hab mich daran versucht, hab es aber nicht hinbekommen. Falls Du eine Anleitung kennst, die wirklich funktioniert und einfach umzusetzen ist – bitte in die Kommentare damit. Der Punkt Browser Caching wir auch angezeigt. Ich nutze Caching, jedoch wird mir ein Script von Google Analytics bemängelt. Dieses wird extern geladen, ich habe also keinen Einfluss darauf. Hier frage ich mich, wieso Google nicht selbst mal seine Scripte und deren Auslieferung optimiert, statt mir das anzukreiden. 😉