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

von | Letzte Aktualisierung

Werbung

Wir empfehlen sorgfältig ausgewählte Produkte. Bei einem qualifizierten Kauf über unsere Links erhalten wir eine kleine Provision von unseren Partnern, wie z. B. Amazon. Dies verursacht keine zusätzlichen Kosten für dich, ermöglicht es aber, unsere Arbeit zu unterstützen. Alle mit einem * markierten Links sind Affiliate-Links (Werbung).

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.

Google Pagespeed - vor der Optimierung
Google Pagespeed – vor der Optimierung
Pingdom - vor der Optimierung
Pingdom – vor der Optimierung

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.

Google Pagespeed - Optimierte Bild, JavaScript und CSS Ressourcen herunterladen
Google Pagespeed – Optimierte Bild, JavaScript und CSS Ressourcen herunterladen

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.

P3 - Plugin Performance Profiler - Scan Results
P3 – Plugin Performance Profiler – Scan Results

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

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.

Gimp - die kostenlose Photoshop alternative
Gimp – die kostenlose Photoshop alternative
FotoSizer
FotoSizer
TinyPic
TinyPic

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

EWWW Image Optimizer - Erweiterte Einstellungen - Optimierung Level
EWWW Image Optimizer – Erweiterte Einstellungen – Optimierung Level
EWWW Image Optimizer - Konvertierung Einstellungen - Aktiviere Konvertierung
EWWW Image Optimizer – Konvertierung Einstellungen – Aktiviere Konvertierung
EWWW Image Optimizer - Konvertierung Einstellungen - Lösche Originale
EWWW Image Optimizer – Konvertierung Einstellungen – Lösche Originale
EWWW Image Optimizer - Massenoptimierung
EWWW Image Optimizer – Massenoptimierung

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 CacheHyper 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.

Cachify - Einstellungen
Cachify – Einstellungen

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

Autoptimize - Einstellungen
Autoptimize – Einstellungen

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. 😉

Google Pagespeed - nach der Optimierung
Google Pagespeed – nach der Optimierung
Pingdom - nach der Optimierung
Pingdom – nach der Optimierung

Unsere Wordpress Hosting Empfehlung

Alfahosting
Werbung


Das könnte dich auch interessieren:


41 Gedanken zu „Lektion 10: 11 Tipps wie Du die Geschwindigkeit deiner Nischenseite steigerst.“

  1. Ein hervorragender und umfangreicher Artikel. Einige Tipps dabei die ich noch nicht kannte. Endlich mal alles in einem Artikel. Hut ab 🙂

    Klicke ich bei „Über Johannes auf facebook kommt „Seite nicht gefunden“. Im Widgetbereich unter „Folge mir“ funktionierts.

  2. Bin durch Eisy auf die Anleitung aufmerksam geworden und bin sehr begeistert! Bin gerade selber im Rahmen von Peer Wandingers WinterNischenCamp dabei meine Pagespeed zu optimieren und habe nach einigen Anleitungen und Plugins gesucht. Hier ist alles schön übersichtlich zusammengefasst 😉
    Werde mich im Laufe der Tage daran setzen, ein paar Tipps, die mir neu waren, abzuarbeiten! Danke!

  3. Fair verlinkt, das gefällt mir. Oft werden Code und Ideen ja nur geklaut und für eigene Zwecke verwendet 😉

    Stimme zwar nicht mit allem im Guide überein, aber grundsätzlich ein lohnenswerter Artikel zum Thema Performance 🙂

  4. Danke dir für den umfangreichen Artikel. Ich mache es in letzter Zeit so, dass ich die Bilder mit kraken.io komprimiere.

    Bei der letzten Nischenseite habe ich in den Einstellungen für die Medien den Haken rausgenommen, dass die Medien in Datumsbasierten Ordnern abgelegt werden sollen. Nach dem Aufbau der Seite habe ich mir die Bilder aus /uploads/ gezogen und alle in einem Rutsch mit kraken.io komprimiert. Ich bin selbst mit der lossy Komprimierung, die es dort zu Auswahl gibt, sehr zufrieden mit der Bildqualität am Ende.

  5. Hey Johannes,

    was soll ich sagen? Ein wirklich sehr guter Artikel. Einige Dinge kenne ich bereits und setze diese auch um. Zum Beispiel nutze ich für meine Bilder auf dem Server zusätzlich das Plugin Optimus.

    Aber andere Dinge, wie den Code für die .htaccess Datei kannte ich bisher so nicht. Das werde ich mir gleich mal anschauen.

    Vielen Dank dafür und weiter so!!!!

  6. Tolle Übersicht bezüglich der WordPress-Plugin-Performance! Da draußen gibt es wirklich eine große Anzahl an Plugins, welche dieselbe Aufgabe besitzen, aber dafür eine deutlich unterschiedliche Leistung erbringen sowie eine WordPress-Website deutlich verlangsamen. Daher sollte man sich ausführlich vor Installation eines bestimmten Plugins über dieses auch informieren, gerade weil viele Plugins miteinander nicht sonderlich gut kompatibel sind und zu Beeinträchtigungen einer Nischenseite führen können.

  7. Ich verwende für meine Portale nur noch eine Kombination aus TinyJPG (Website) und W3-Total-Cache.
    Damit erreiche ich immer ein grünes Niveau bei der Desktop-Analyse und darauf kommt es mir persönlich eigentlich immer an.
    Toller Beitrag!

  8. Hallo Johannes,
    das ist ein echt guter weil sehr gut strukturierter und ausführlicher Artikel! Ich habe wie Du im Screenshot zu sehen auch Probleme mit der mobile Version meiner Seite. Die ist immer langsamer als die Desktop Variante. Machst Du da was?

  9. Ich mache da auch nichts. Mehr ist aktuell nicht wirklich möglich, ohne den Funktionsumfang der Seite einzuschränken. Ich kenne kaum Seiten, die bei der mobilen Prüfung im grünen Bereich liegen. Rot sollte das Ergebnis nicht sein, aber mit Gelb und ca. 75 Punkten kann ich aktuell leben.

  10. Vielen Dank für den wunderbaren Guide. Ich lese nun schon den dritten Tag in Folge. 🙂 Eine Sache fiel mir grad zum Thema Ladezeit noch ein: Wenn neben Google Analytics noch weitere Tracking Scripte eingebunden werden sollen, empfiehlt sich der Einsatz von Google Tag Manager. Dadurch kann sich die Ladezeit ebenfalls verkürzen.

  11. Absolut coole und nützliche Tipps für eine WordPress-Webpräsenz. Ich bin nach einigem Ausprobieren bei Concrete5 gelandet, möchte jedoch ein neues Projet auf die Beine stellen und ddas wird definitiv wieder WordPress. Gebookmarkt, vielen Dank!

  12. warum gibst du das alles for free raus ? Find ich echt bewundernswert
    Danke für deinen Blog, ist mega guter Content. Vor allem die schreib Tipps fand ich gut.

  13. wie kann man dir Danke sagen ?
    Ich habe mich ja schon immer gefragt wie man hochwertigen Content schreibt,
    das mit den Frage/Antwort Portalen fand ich eine geniale Idee, werde ich in Zukunft beachten

  14. Bei Bildern das Wepb Format nutzen. Von Google entwickelt und verkleinert noch weiter JPG Bilder ohne Qualitätsverlust. Seiten laden da noch schneller. EWW Optimizer unterstützt die Umwandlung nach Wepb (PRO Version)

  15. Hey Johannes!
    Sinnvolle Auflistung etlicher Möglichkeiten, die eigene WordPress Webseite etwas schneller zu machen. Vielen Dank!

    In deinem Abschnitt „Alternativen zum EWWW Image Optimizer“ würde ich gerne noch Shortpixel und Imagify ergänzen. Beides Plugins die eine super Arbeit leisten, aber zusätzlich noch die Möglichkeit anbieten, Bilder zusätzlich im modernen WebP Format bereitzustellen. Das gibt nochmal eine bessere Komprimierung. Vielleicht magst du ja in deinem Artikel noch einen Abschnitt zu WebP ergänzen. Mehr Geschwindigkeit bietet sich schließlich auch aus Sicht der Suchmaschinenoptimierung für Nischenseiten an 😉

    Mehr zum Thema WebP:
    https://developers.google.com/speed/webp

    Mit lieben Grüßen aus Berlin,
    -Dominik

  16. Lieber Johannes,

    vielen Dank für deinen Artikel. Kleine Ergänzung zu deinem Beitrag, weil das Thema recht aktuell ist: Hast du die Veröffentlichung von dem WordPress Plugin „Google Site Kit“ mitbekommen? Ziemlich coole Sache, weil neben Analytics und Search Console Statistiken, auch eine API Schnittstelle zu Google Pagespeed Insights besteht. Bedeutet, man erhält im Backend immer Informationen dazu, welche Seite ggf. etwas langsamer lädt.

    Das Plugin findet man unter:
    https://sitekit.withgoogle.com/

    Schöne Grüße,
    Nils Cartsburg

Kommentare sind geschlossen.