Performance-Guide für WordPress

1 Einleitung

In diesem Guide zeigen und erklären wir Dir, wie Du die Performance Deiner Webseite, speziell aber Deiner WordPress-Seite verbesserst. Damit Du aber selbst besser verstehst was speziell für Dich nötig ist, solltest Du folgende Fragen für Dich selbst beantworten.

1.1 Fragen

1. Darf etwas an den grundlegenden Einstellungen verändert werden wie Server, Theme, WP-Installation etc.?
   1. Webseite steht und darf nicht mehr grundlegend verändert werden
   2. Webseite ist noch in Entwicklung oder grundlegende Dinge dürfen verändert werden
2. Welchen Weg möchtest Du gehen?
   1. Möglichst einfachster Weg
   2. Der Königsweg (mehr Arbeit & Kosten)
   3. der einfachste Weg, der aber nix kosten darf

1.2 Reihenfolge bei der Performance-Optimierung

Du solltest Dir darüber Gedanken machen, ob Du alles selbst machen willst oder Plugins für Dich die Arbeit machen lassen möchtest. Das hängt von mehreren Faktoren ab.

1. wie gut kennst du dich aus?
2. wie stark möchtest du die Performance rausholen
3. bist du bereit Geld für bessere Performance auszugeben

Die Performance basiert auf 4 Stufen in dieser Reihenfolge

1. Webserver
   1. Hosting, Server, Caches, Settings, Apache/NGINX, htaccess
2. WordPress / CMS
   1. Settings, WP-Config, WP-Version
3. Theme
   1. Theme-Auswahl, Settings, functions.php, Override
4. Plugin

Die Reihenfolge heißt: je weiter oben Du einen Optimierungsschritt durchführen kannst, desto performanter ist es.

Normalerweise macht es Sinn Aufgaben dem Webserver zu übergeben, bevor das WordPress/CMS aufgerufen wird. Falls es Aufgaben gibt, die Dein WordPress erledigen kann, so musst Du dafür nicht extra Funktionen im Theme definieren oder gar Dateien im Theme überschreiben. Jede geladene Datei kostet Ladezeit und Ressourcen.

Wenn Du Funktionen im Theme definieren kannst oder Dateien überschreiben kannst, bevor Du ein Plugin verwendest, ist das definitiv zu bevorzugen. Denn Plugins liefern immer Overhead mit und sind langsamer, als wenn du etwas direkt im Theme ausführst. Wir reden hier aber über Einsparpotential im ms Bereich. Natürlich macht es oft Sinn ein Plugin zu verwenden, wenn damit viele Aufgaben abgedeckt werden können. Denn die Verwendung eines Plugins ist oft einfacher als jede Änderung im Theme oder WordPress zu definieren

Idealerweise gehst Du in dieser Reihenfolge durch. Wenn Du aber weniger Arbeit und nicht alles selber machen möchtest, macht es viel Sinn, dass es nicht vom Webserver alles einzeln gemacht werden muss, sondern von einem Plugin! Hier zeigen wir die in unseren Augen besten Kombinationen, um die größtmögliche Performance aus Deiner Webseite herauszuholen.

Die einfachste und effektivste Methode, um Performance zu verbessern ist in unseren Augen das Plugin WP Rocket.

2 Performance-Tests

Performance-Tests untersuchen Deine Webseite und testen dabei vorher festgelegte Regeln. Diese Tests sind sehr hilfreich. Du solltest bei Performance-Tests im Durchschnitt gute bis sehr gute Resultate erzielen. Natürlich sieht es schön aus, wenn Du überall 100% hast. Dies ist jedoch nicht immer unbedingt nötig. Manche Punkte lassen sich nicht – oder nur mit sehr großem Aufwand – optimieren. Andere Punkte wiederum machen gar keinen Sinn in einer gewissen Konfiguration. Daher solltest Du wissen, was die einzelnen Aspekte bedeuten und wie Du die Performance-Tests richtig deutest.

Auf einzelne Hinweise der gängigsten Performance-Tests gehen wir am Ende dieses Beitrags ein.

Wichtig zu wissen: die vorgestellten Performance-Tests prüfen immer nur eine einzelne Unterseite, z.B. Deine Startseite. Daher solltest Du im ersten Schritt nur eine einzige Seite testen und wenn Du an das Feintuning gehst auch die wichtigsten Unterseiten bzw. Layouts in Betracht ziehen.

2.1 PageSpeed Insights

Die Pagespeed Insights von Google können zeigen Dir 24 verschiedene Tests an, die Performance-Marker Deiner Webseite testen. Du musst beim PageSpeed-Insights-Test nicht auf 100% landen, solltest aber einen sehr hohen Wert erreichen können. Die Tipps sind sehr hilfreich, um herauszufinden, wie Du die Performance Deiner Webseite noch erhöhen kannst.

Der Test zeigt mittlerweile zwei verschiedene Scores für die mobile und die Desktopansicht an.

Um zum PageSpeed Insights-Test zu gelangen, gehst Du einfach auf https://developers.google.com/speed/pagespeed/insights/?hl=de und gibst dort Deine URL ein.

Wichtig: Denk daran auch ab und zu mal Unterseiten zu testen.

2.2 GTmetrix

GTmetrix testet Deine Webseite direkt mit dem Google Pagespeed-Tool sowie dem YSlow-Tool von Yahoo. Es zeigt Dir die Ergebnisse von beiden Tools sowie Details wie Ladezeit, Anzahl an Requests und übertragenen Daten an. Das PageSpeed-Resultat unterscheidet sich leicht von den PageSpeed Insights. Daher macht es Sinn beide zu betrachten. YSlow liefert einige schöne neue Erkenntnisse. Leider sind die Ergebnisse nicht ganz aktuell und super genau, da HTTP2 gar nicht in Betracht gezogen wird. Die Tipps und Anleitungen dort sind aber natürlich immer noch relevant und gute Anhaltspunkte, um die Performance Deiner Webseite zu verbessern.

Zum Test gehst Du einfach auf https://gtmetrix.com/ und gibst dort die Adresse Deiner Seite an.

2.3 Chrome Audits

In den Google Chrome Entwickler-Tools lassen sich sog. Audits durchführen. Damit startet Chrome die Lighthouse-Analyse, die Deine Seite untersucht. Du bekommst die Ergebnisse blitzschnell im Browser angezeigt. Chrome Performance Audits liefern wertvolle Daten darüber, ob die Performance der Webseite gut ist und was noch verbessert werden kann.

2.4 Webpagetest.org

Webpagetest.org ist perfekt dafür geeignet, wenn Du etwas darüber erfahren möchtest, wie Daten von Deiner Webseite geladen werden. Das Wasserfall-Diagramm ist sehr aufschlussreich und Änderungen an Deiner Performance kannst Du darüber sehr gut wahrnehmen. Webpagetest.org bietet zudem sechs eigene Scores an. Hier solltest Du ebenfalls Resultate von A, schlechtestenfalls von B angezeigt bekommen.

2.5 Varvy.com

Varvy.com führt eine eigene Untersuchung Deiner Webseite durch. Ähnlich dem Google PageSpeed-Tool zeigt Dir varvy.com unterschiedliche Kategorien an und bewertet diese. Natürlich überschneidet sich viel mit anderen Tools, jedoch können die hier dargestellten Informationen immer nochmal ergänzend oder auch weiterführend sein. Das macht varvy.com zu einem hilfreichen Performance-Tool. Einfach auf https://varvy.com/pagespeed/ gehen und die Adresse Deiner Webseite eingeben.

2.6 Browser Network Tabs

Die Developer-Tools von Chrome bzw. Firefox liefern sehr genaue Informationen darüber, wie schnell Deine Webseite geladen wird. Sie zeigen z.B. die Größe übertragener Daten, Wasserfalldiagramme, Anzahl Requests, Ladezeit und vieles mehr. Diese Tools sind schnell über die Settings Deines Browsers aufgerufen und helfen Dir enorm, wenn Du etwas über die Performance Deiner Webseite herausfinden möchtest.

3 Performance-Plugins für WordPress

In diesem Kapitel zeigen wir Dir Plugins für WordPress, die Deine Performance enorm steigern können. Wir sortieren die Plugins dabei nach Relevanz. Das für uns wichtigste Plugin ist WP Rocket.

3.1 Das beste Plugin auf dem Markt: WP Rocket

Es gibt zahlreiche Performance-Plugins auf dem Markt. Diese nehmen grundlegende Einstellungen für Dich vor und verbessern somit die Geschwindigkeit Deiner WordPress-Installation enorm.

Das aus unserer Sicht mit Abstand beste Plugin ist WP Rocket. Ja es kostet etwas! Aber das ist es wert!

WP Rocket kostet einmalig 49 $. Das ist gut investiertes Geld. Kein Abo, immer Updates. Alles bestens.

WPRocket muss einfach nur installiert werden und schon funktioniert es. Die Einstellungen sind simpel und gut zu verstehen. WP-Rocket ist in unseren Augen das nonplusultra. Bevor Du ewig viel Zeit mit anderen Plugins oder Einstellungen verschwendest, solltest Du ganz einfach diese 49 $ einmalig investieren, WP-Rocket installieren und fertig. Deine Webseite läuft ab jetzt viel schneller.

WP Rocket verpasst Deiner Webseite einen enormen Geschwindigkeits-Boost. Es übernimmt sehr viele Aufgaben der Performance-Optimierung in ganz wenigen und einfachen Schritten, z.B.:

• Page Caching
• GZIP-Komprimierung
• Browser-Caching
• Datenbank-Optimierung
• LazyLoad
• Minimierung / Minify von CSS und JS
• CSS und JS zusammenführen
• Verzögertes Laden von JS
• CloudFlare Kompatibilität / CDN (dient der Steuerung, es ersetzt kein CDN)
• DNS Prefetching

WP Rocket kostet etwas Geld. Aber es lohnt sich. Denn im Gegensatz zu kostenlosen Plugins liefert WP Rocket nicht nur die besseren Ergebnisse. Die Einrichtung ist zudem kinderleicht.

3.2 SD SEO Performance Plugin

Das SD SEO Performance Plugin ist ein speziell von uns entwickeltes Plugin und hat eine ganze Reihe an nützlichen Funktionen. So räumt das Plugin den WordPress-Code massiv auf und entfernt unnötigen Code. Nicht benötigte Funktionen lassen sich über SD Seo Performance abschalten, sodass weniger JavaScript- und CSS-Dateien geladen werden müssen. So wird die Ausführungszeit von WordPress erhöht, der Quellcode verkleinert. Das sorgt dafür, dass die Webseite schneller geladen und übertragen wird.

Dank DNS-Prefetch und Preconnect kitzelst Du mit SD SEO Performance noch ein bisschen mehr Performance aus Deiner Webseite heraus. Die Adressen externer Webseiten werden per DNS-Prefetch und Preconnect vorzeitig aufgelöst, sodass die Übertragung von Google Fonts, Google Analytics oder Facebook-Dateien deutlich schneller von statten geht.

SD SEO Performance ist hochkompatibel mit WooCommerce und dem WordPress-Theme Enfold. Wenn Du eines der beiden nutzt, kannst Du enorm von unseren Performance-Boosts profitieren. Enfold ist bereits ein sehr performantes Theme. Jedoch gibt es zahlreiche Möglichkeiten die Geschwindigkeit des Themes zu erhöhen. WooCommerce verlangsamt Deine Webseite, indem es viele Dateien und Skripte lädt. Mit Hilfe von SD Seo Performance, kannst Du mit einem einzigen Klick WooCommerce-Skripte nur dort laden, wo Du sie wirklich brauchst.

Das Plugin enthält zudem einen integrierten Widget-Cache. Zwar wird über WP Rocket oder andere Pagecaches eine statische Kopie Deiner Webseite – der sog. Pagecache – abgelegt. Widgets verändern sich jedoch normalerweise selten und können daher deutlich länger im Cache gespeichert werden. Falls der Pagecache also nicht im Einsatz kommt oder neu erzeugt wird, laden Deine Widgets nun wesentlich schneller. Du bekommst zudem eine bessere Kontrolle über Deine Widgets und kannst diese bei Bedarf deaktivieren, was zu einer schnelleren Ausführung von PHP führt.

SD Seo Performance bietet noch einige WP-Rocket spezifische Optionen. So erlaubt Dir SD Seo Performance den WP-Rocket Pagecache auch für Suchergebnisseiten, den RSS-Feed und die REST-API zu nutzen, um die Performance Deiner Webseite noch stärker zu erhöhen. Individuelle Einstellungen für LazyLoading führen dazu, dass Du noch stärker von der WP Rocket Lazy Loading Funktion profitierst.

Du solltest SD SEO Performance einsetzen, egal welches andere Performance-Plugin Du nutzt, da es Funktionen zur Verfügung stellt, die helfen Deine Performance zu optimieren.

3.3 ShortPixel Image Optimizer

Der ShortPixel Image Optimizer optimiert Deine Bilder OnTheFly. Das heißt bereits hochgeladene Bilder können von diesem Plugin optimiert werden. Im Normalfall kannst Du somit zwischen 50 – 80 % der Bildgröße einsparen. Und zwar ohne, dass Du qualitative Unterschiede bemerkst.

Shortpixel bietet Dir die Möglichkeit 100 Bilder pro Monat kostenlos zu optimieren. Da auch Thumbnails optimiert werden müssen ist das nicht gerade viel. Wenn Du nur eine kleinere Webseite hast, kann es eventuell genügen. Am sinnvollsten ist es in unseren Augen einmalig eine größere Menge an optimierenden Bildern zu kaufen. 10.000 Bilder sollten für die allermeisten Seiten ausreichen und kosten gerade einmal 9,99 €. Das Geld ist wirklich gut investiert, denn für neue Bilder reichen dann meist die kostenlosen 100 Bilder pro Monat von Shortpixel.
Du solltest also erst einmal Deine Webseite fertigstellen und dann vor dem Veröffentlichen die Bilder einmalig mit Shortpixel optimieren. Da Du dafür maximal 9,99 € sparst und somit noch weitere Credits übrig bleiben, wirst Du auch zukünftig keine weiteren Credits mehr kaufen müssen.

Das Plugin funktioniert einwandfrei und wird zudem noch stetig weiterentwickelt. So gibt es die Möglichkeit automatisch und kostenlos webp-Versionen Deiner Bilder zu erstellen. WebP ist ein neues Bildformat, dass eine bessere Qualität gleichzeitig aber auch bessere Kompression als das JPG-Dateiformat hat. Die Bilder sind also kleiner bei gleicher Qualität.

Bevor Du das Plugin kaufst, solltest Du Dir aber noch unser allgemeines Kapitel zu Bildern für WordPress ansehen.

Shortpixel Image Optimizer führt zu ganz hervorragenden Ladezeiten und sorgt dafür, dass Deine Bilder in optimaler Qualität aber mit maximaler Kompression zur Verfügung stehen.

3.4 Auto-Optimize + Cache Enabler

Auto-Optimize und Cache Enabler sind kostenlose WordPress-Plugins, die in Kombination sehr gute Resultate erreichen können. Wenn die Optimierung Deiner Performance wirklich gar nichts kosten darf, empfehlen wir Dir auf diese beiden Plugins zurückzugreifen. Mit ihnen kannst Du relativ schnell und einfach die Performance Deiner Webseite verbessern. Spitzenwerte wie mit WP-Rocket, SD Seo Performance und Shortpixel Image Optimizer wirst Du jedoch damit nicht erzielen.

3.5 Kostenlose Plugins für Bildverkleinerung

Du kannst WP Smush als kostenloses Tool nutzen, um die Bilder Deiner WordPress-Installation zu verkleinern und zu komprimieren. Wir empfehlen zwar auf ShortPixel Image Optimizer zurückzugreifen, da es in unseren Tests die besseren Resultate brachte, WP Smush ist als kostenlose Lösung aber ebenfalls ausreichend.

4 Caching

Caching bedeutet, dass Daten zwischengespeichert werden. Das kann beim Aufruf einer Webseite in vielen verschiedenen Instanzen passieren. So kann z.B. der Browser des Besuchers Bilder, Skriptdateien und Schriftarten zwischenspeichern, um beim nächsten Aufruf diese nicht erneut vom Server laden zu müssen.
Doch auch auf dem Server gibt es verschiedene Möglichkeiten Caching einzusetzen.

Caching führt zu einer enormen Leistungssteigerung und erhöht die Performance massiv. Vermutlich gibt es keine weitere Technologie, die Deine Webseiten-Performance so maßgeblich beeinflusst wie Caching.

Wichtig ist aber auch, dass Du nicht einfach blind alle Caches anschaltest, die zur Verfügung stehen. Du solltest immer Dein gesamtes System betrachten. Welche Seiten und Abschnitten müssen gecached werden? Was darf nicht gecached werden? Dynamische Teile Deiner Webseite, wie Ajax-Calls, Warenkörbe, Mitgliederbereiche oder dynamische Produktvergleiche sollten z.B. nicht gecached werden. Statische Abschnitte wie Artikel, Seiten, Kategorien, Tags und Deine Startseite sollten unbedingt lange im Cache behalten werden.

Moderne und gute Plugins wie WP Rocket schließen automatisch dynamische Seiten wie WooCommerce- & Mein-Konto-Seiten direkt vom Caching aus.

4.1 Caching auf Serverebene

Falls Dein Webhoster bereits Caching auf Serverebene anbietet, solltest Du das in den meisten Fällen nutzen. Die Caches von Server und Webanwendung überschneiden sich nur in seltenen Fällen. Jedoch kommt es vor, dass der Server einen integrierten Pagecache hat. Ist das der Fall, solltest Du kein Pagecaching-Plugin mehr auf Deiner Webseite ausführen. Als Anbieter dafür ist z.B. Kinsta-Hosting zu nennen, die sogar vier Arten von Caches serverseitig nutzen.

• Bytecode caching
• Object caching
• Page caching
• CDN caching

Die Vorteile liegen auf der Hand. Wenn der Server bereits das Caching übernimmt, musst Du Dich um nichts kümmern. Das erspart Dir Zeit und Arbeit.

4.2 Page-Cache

Page-Cache ist einer der wichtigsten Caches überhaupt. WordPress ist ein dynamisches System. Bei jedem Seitenaufruf, werden Deine Plugins und Dein Theme geladen und alles was aufgerufen soll wird durch viele Verarbeitungsschritte gejagt, bevor am Ende eine statische HTML-Seite dabei herauskommt. Diese Seite wird an den Browser gesendet und der zeigt sie an. Da sich viele Webseiten jedoch zwischen einzenen Seitenaufrufen nicht großartig ändern, kann das Endergebnis – die statische HTML-Seite – zwischengespeichert werden. Diesen Vorgang nennt man PageCache. Pagecache erzielt super Resultate, da WordPress nicht dauernd neu aufgerufen werden muss.

Es gibt viele Plugins, die Pagecache anbieten. Die wichtigsten sind WP Rocket, W3 Total Cache, Das Plugin Cache Enabler und WP Fastest Cache bieten Dir eine kostenlose Alternative um dem Page-Cache zu aktivieren. Beide sind ebenfalls recht einfach zu bedienen, kommen aber nicht an die Ergebnisse von WP Rocket heran.

4.3 Browser-Cache

Den Browser-Cache kannst du auch manuell über die .htaccess-Datei konfigurieren. Die Plugins machen auch nichts anderes als den Code automatisiert in die Datei zu schreiben.

Du kannst z.B. folgenden Code nutzen und in Deiner .htaccess-Datei einfügen.

4.4 Objekt Caching

Object-Caching wird standardmäßig von WordPress unterstützt. Das heißt nur,dass Ergebnisse von Datenbankabfragen nicht jedes Mal neu generiert werden müssen, sondern im Cache abgelegt werden. Beim nächsten Aufruf muss Dein PHP weniger Arbeit verrichten und bekommt das Ergebnis direkt aus dem Object-Cache. Bei statischen Webseiten ist der Vorteil nur gering, da diese das statische HTML sowieso aus dem Page-Cache lesen.

Bei hoch dynamischen Webseiten oder Unterseiten, die nicht mit Pagecache gecached werden können, ist Object-Caching aber ein wahrer Performance-Booster. Mitgliederseiten, Shopsysteme (Warenkorb, Kasse, etc.), Foren, dynamische Rechner etc. Können alle vom Einsatz von Object-Caching profitieren.

Object-Caching entlastet nicht nur Deine Datenbank, sondern erhöht auch die Ausführungszeit von PHP. Mit WordPress gibt es verschiedene Möglichkeiten Object-Caching einzusetzen. Diese sind folgende:

1. WordPress Object-Cache
2. Redis
3. Memcached

Ob Dir diese verschiedenen Object-Cache-Möglichkeiten überhaupt zur Verfügung stehen hängt von Deiner Serverkonfiguration ab.

4.4.1 Standard-Objektcache im Shared Hosting

Der Standard-Objektcache befindet sich beim Shared Hosting in der Datenbank oder auf der Festplatte. Redis und Memcached stehen im Shared Hosting normalerweise nicht zur Verfügung.

Das Problem ist, dass Redis und Memcached den Object-Cache im Arbeitsspeicher des Servers ablegen. Dieser ist rasend schnell und kann Ergebnisse viel schneller lesen, als von Festplatte oder Datenbank. Bei einem Shared-Hosting teilst Du Dir jedoch den Server mit anderen Kunden. Wenn die Anbieter nun erlauben würden, dass jeder Kunde beliebige Daten in den Arbeitsspeicher schreibt, wäre der schnell voll. Deshalb stehen Dir bei einem Shared-Hosting nur die Möglichkeiten zur Verfügung den Object-Cache in Datenbank oder auf die Festplatte zu schreiben. Üblicherweise werden bei WordPress die Daten in die Datenbank geschrieben.

4.4.2 Redis und Memcached

Redis und Memcached sind Speichermechanismen, die Dateien im Arbeitsspeicher ablegen. In WordPress können sie genutzt werden, um die vom Object-Cache erzeugten Daten im Arbeitsspeicher abzulegen und so wahnsinnig schnell zwischen mehreren Seitenaufrufen wieder darauf zugreifen zu können. Solch ein Speicher erhöht die Performance enorm.

Caches wie Redis und Memcached sorgen dafür, dass Ergebnisse von zwischengespeicherten Operationen sehr schnell aus dem RAM-Cache geladen werden können, anstatt die Datenbank ein weiteres Mal nach dem gleichen Objekt zu fragen. Somit wird die Last Deiner Datenbank reduziert, während die Ladezeit enorm verbessert wird. Bei stark frequentierten Webseiten verbessert sich auch die Geschwindigkeit bei mehreren Anfragen gleichzeitig.

Alle Seiten, die viele dynamische Elemente enthalten sind perfekt für Redis und Memcached geeignet. Dazu zählen Shopsysteme wie WooCommerce, Mitgliederseiten, interaktive Rechner, Produktvergleichsseiten mit dynamischen Elementen, Foren etc.

4.5 Varnish-Cache

Varnish-Cache ist ein weiterer serverseitiger Cache, auch Reverse Proxy genannt. Ein Varnish-Cache wird vor den Webserver geschaltet und verarbeitet die Anfragen bevor sie an den Webserver weitergeleitet werden. Damit können statische Seiten enorm schnell geladen werden. Zudem dient der Varnish Cache als Loadbalancer, da er die Last verteilt, die auf den Webserver trifft. WP Rocket unterstützt Varnish-Cache.

Varnish-Cache kann extrem effizient sein, ist jedoch nur für Webserver-Besitzer geeignet. Im Shared Hosting gibt es für Seitenbetreiber leider keinen Varnish-Cache.

4.6 Fragment-Cache

Fragment-Cache funktioniert ähnlich wie Object-Cache, speichert aber das Ergebnis größerer Blöcke im Cache ab. Fragment-Cache profitiert dort am meisten, wo kein Page-Cache zum Einsatz kommen kann, z.B. bei hochdynamischen Mitgliederseiten.

Während Object-Cache nur einzelne Objekte, z.B. berechnete Summe oder ähnliches speichert, werden beim Fragment-Caching ganze Blöcke abgelegt. Das können z.B. die statischen HTML-Ausgaben einzelner Widgets oder komplexe Menüs sein.

Technisch setzt Fragment-Caching auf dem Object-Cache auf.

4.6.1 Widget-Cache

SD SEO Performance bietet die Möglichkeit Widgets im Object-Cache zu speichern. Dadurch müssen Widgets nicht bei jedem Aufruf neu generiert werden. Falls Du z.B. einen Mitgliederbereich besitzt, der dynamisch ist, jedoch statische Widgets enthält ist der Widget-Cache perfekt für Dich geeignet. Wenn Du dynamische Widgets nutzt wie Werbeanzeigen, Warenkorb oder Live-Statistiken, solltest Du den Wigdet-Cache für diese Widgets ausschalten oder gar nicht nutzen.

Neben SD Seo Performance gibt es noch weitere Plugins, die ebenfalls Widget-Cache anbieten.

4.6.2 Fragment-Cache für Funktionen

Für Theme- und Pluginsdeveloper gibt es die Möglichkeit Rückgabewerte von Funktionen im Fragment-Cache zu speichern. Eine Anleitung dazu folgt!

4.6.3 Menü-Cache

Menü-Cache kann für viele Anwendungen hilfreich sein, die komplizierte oder Mega-Menüs haben.

Menüs können sehr unterschiedlich sein. Es gibt einfache Menüs und dann aber auch wieder komplizierte Mega-Menüs, die bereits eine Menge an Daten laden. Je nach Umsetzung kostet die Erstellung von Menüs einiges an Rechenzeit. Auf dynamischen Seiten, die keinen Page Cache nutzen, lohnt es sich ggf. das komplette Menü im Fragment-Cache abzulegen.

5 Dateien komprimieren

Eines der wichtigsten Ziele bei der Performance-Optimierung Deiner Webseite ist es die Anzahl an Bytes zu verringern, die übertragen werden müssen. Das führt zu einer schnelleren Ladezeit, gerade auf langsamen Verbindungen. Wenn Du mit den technischen Grundlagen von Performance-Optimierungen nicht vertraut bist, schau Dir zu aller erst unseren Grundlagenguide an.

Eine einfache Technik zur Reduzierung von Daten ist die Kompression dieser Datei. Das kennst Du bereits von sogenannten ZIP-Dateien auf Deiner Festplatte. Dein Webserver hat die Möglichkeit verschiedene Dateiformate zu komprimieren. Dazu zählen HTML-Dateien, CSS-Stylesheets und JavaScript-Dateien.

Die Änderungen können über ein Plugin vorgenommen werden oder selbst in die htaccess geschrieben werden. Da sich bei der Komprimierung von Dateien in der Regel auch zukünftig nicht viel ändert, kannst Du problemlos auf die htaccess-Variante zurückgreifen. Damit werden in etwa 50-70% der übertragenen Daten von komprimierbaren Dateien eingespart.

Es gib verschiedene Methoden zur Überprüfung, ob gZIP bei dir läuft. Die einfachsten sind:

• https://varvy.com/tools/gzip/
• auf content-encoding in den Chrome Entwickler-Tools achten

In den Netzwerktools siehst Du neben übertragenen Daten immer zwei Werte. Der schwarze Wert sind die Daten, die über die Leitung übertragen wurden. (übertragene Größe etwas größer als Dateigröße wegen Übertragungsheadern)
In grau wird angezeigt wie groß die Datei wirklich ist.

Auch hier kannst du den benötigten Code manuell in der .htaccess-Datei manuell einfügen, den ansonsten dein Caching-Plugin automatisiert in der Datei anpasst.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/shtml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

6 Schriftarten

Schriftarten auf Webseiten haben sich mit dem Einsatz von Webfonts massiv verändert. Während früher nur Systemschriftarten genutzt werden konnten, werden heutzutage immer mehr Webfonts genutzt. Doch Webfonts müssen von der Webseite geladen werden. Das verlangsamt den Aufbau und die Auslieferung der Seite. Zudem müssen mehr Daten über eine ggf. langsame mobile Verbindung geladen werden. Wir zeigen Dir in diesem Kapitel einige Tricks, wie Schriftarten nicht die Performance Deiner Webseite verlangsamen.

6.1 Wenige externe Schriftarten verwenden

Die einfachste Regel ist: Verwende so wenig Webfonts wie möglich und greife stattdessen auf Standardschriftarten zurück. Es ist wichtig schon beim Design darauf zu achten nicht zu viele verschiedene Schriftarten zu vernwenden. Oft können manche Webfonts mit sehr ähnlichen Systemschriftarten ausgetauscht werden. Die Stärke der Schriftart ist ebenfalls wichtig. Designer wissen oft nicht, dass Schriftarten theoretisch 9 verschiedene Stärken haben können. Im CSS werden diese mit den Werten 100 – 900 festgelegt. Jede einzelne Abstufung muss geladen werden und sorgt für mehr Datenvolumen und Übertragungszeit. Daher ist es enorm wichtig bereits beim Design aufzupassen. Auch bei bestehenden Webprojekten sollte darauf geachtet werden, ob nicht ggf. Schriftarten weggelassen oder minimiert werden können.

6.2 Unnötige Schriftarten deaktivieren

Plugins & Themes laden evtl. Schriftarten und Iconfonts, die gar nicht benötigt werden. Beliebt bei vielen Plugins ist die Iconbibliothek Fontawesome, die unter Umständen gar nicht gebraucht werden. Wir empfehlen über die Netzwerktools von Google Chrome zu schauen welche Schriftarten geladen werden. Falls unklar ist, woher diese Schriftart kommt solltest Du schauen von welchem Plugin die Sektion kommt, an der die Schriftart angezeigt wird.

Auch im Customizer oder den Theme-Einstellungen lassen sich Schriftarten oft einstellen. Da Themes gerne für verschiedene Bereiche wie Überschriften, Sektionen, Footer etc. die Möglichkeit geben benutzerdefinierte Schriftarten einzubinden, kann es schnell passieren, dass Du mehrere Webfonts lädst, obwohl Du es gar nicht benötigst.

6.3 Google Fonts deaktivieren

Falls Du statt Google Fonts lieber auf Systemschriftarten zurückgreifst, kannst Du das in Deinem Theme im Normalfall einstellen. Manchmal gibt es jedoch Plugins und Themes, die Google Fonts laden, ohne dass Du die Chance hast etwas dagegen zu unternehmen. Falls Du das nicht möchtest, solltest Du das Laden von Google Fonts generell verbieten. Dazu gibt es eine Funktion in unserem SD Seo Performance Plugin. Im WordPress-Repository gibt es jedoch noch einige weitere Plugins, die das Deaktivieren von Google Fonts anbieten.

Nachdem Du Google Fonts deaktiviert hast, solltest Du die entsprechenden CSS-Anweisungen setzen, damit die Bereiche, die eigentlich mit Google Fonts angezeigt werden sollten zum einheitlichen Schriftbild passen.

Das kannst Du über die style.css in Deinem Child-Theme durchführen.

6.4 Schriftarten lokal laden

Um externe Requests zu reduzieren, kannst Du Schriftarten wie Google Fonts auch lokal laden.

6.5 Externe Schriftarten mit display=swap

Google Fonts & externe Schriftarten sollten immer mit der CSS-Anweisung display=swap geladen werden.

Das ist manchmal gar nicht so einfach, da Du nur begrenzt Möglichkeiten zur Verfügung hast das Laden von Google Fonts über Theme und Plugins zu Beeinflussen.

Bei Google Fonts, musst Du an den Parameter nur den Aufruf &display=swap dranhängen.

Zudem kannst Du Google Fonts im Footer laden lassen. Diese werden dann asynchron mit Javascript nachgeladen und werden verspätet mit Display Swap angezeigt. Das spart Ressourcen und verbessert die Ladezeit des sichtbaren Bereichs Deiner Webseite.

6.6 Google Fonts nur einmal aufrufen

Google Fonts werden in Aufrufen an den Google-Server geladen. Wenn Du mehr als eine Schriftart von Google lädst, werden also mehrere Aufrufe gestartet. Doch das ist nicht nötig. Mehrere Google Fonts können in einem Aufruf zusammengefasst werden. Das reduziert Requests und verbessert somit Deine Performance. Google Fonts in einen Aufruf zusammenfassen kannst Du z.B. mit WP Rocket.

7 Quelltext und geladene Dateien optimieren

Der WordPress Code enthält ein paar Funktionen, die eher in speziellen Situationen genutzt werden. In den meisten Fällen können diese Funktionen entfernt werden um den HTML Code zu entschlacken und somit noch etwas an PageSpeed zu gewinnen.

Außerdem gibt es ein paar Javascript-Dateien, die beim Aufbau deiner Seite nicht sofort benötigt werden und daher im Footer deiner Seite besser aufgehoben sind als im Header. Dadurch werden die Ressourcen für den Seitenaufbau nicht unnötig belastet. In diesem Kapitel konzentrieren wir uns darauf CSS, Javascript und HTML so stark es geht zu komprimieren und die Anzahl der Requests zu verringern.

Durch das Entschlacken werden weniger Daten übertragen, was sich bei langsamen Verbindungen bezahlt macht und die Ladezeit Deiner Webseite erhöht. Prima Kandidaten dafür sind WP Rocket, SD Seo Performance, W3 Total Cache, Autoptimize, etc.

Die besten Ergebnisse haben wir in der Kombination von WP Rocket und SD Seo Performance erhalten.

7.1 CSS optimieren

7.1.1 CSS minifizieren

CSS-Code enthält Leerzeichen, Tab-Stopps, Kommentare und sonstige Whitespaces. Die sind zwar für den Entwickler schön, aber für den Browser unwichtig. Daher solltest Du CSS immer minifiziert ausliefern. Dafür gibt es Bibliothemen und Online-Tools, die Deine CSS-Dateien verkleinern.

7.1.2 CSS zusammenfassen

Unzählige CSS-Dateien werden von Theme, WordPress und Plugins erzeugt und geladen. Das sorgt für zahlreiche Requests vom Browser an Deinen Webserver. Bei HTTP 1.1 können diese Anfragen nicht zeitgleich übertragen werden. Für jede Anfrage entsteht Overhead, der Zeit und Datenvolumen kostet. Bei HTTP 2 ist das zwar besser geworden, da dank Multiplexing mehrere Dateien über einen geöffneten Kanal geschoben werden können. Trotzdem empfiehlt es sich in den meisten Fällen mehrere CSS-Dateien zu einer großen Datei zusammenzufassen.

Das kann in WordPress von beinahe allen gängigen Performance-Plugins durchgeführt werden.

Bei Gutenberg scheint es ein Problem zu geben, wenn eine CSS-Datei mit zusammengefasst wird. Du solltest daher die Datei /wp-includes/css/dist/block-library/editor.min.css vom Zusammenfassen ausschließen.

7.1.3 CSS nachladen + kritisches CSS

CSS kann man asynchron nachladen. Das hat den Vorteil, dass die Webseite bereits angezeigt wird, bevor die CSS-Datei heruntergeladen wurde. Das sorgt dafür, dass Deine Webseite schneller angezeigt wird und der Benutzer somit eine bessere Besuchererfahrung hat.

Das Problem dabei: CSS ist wichtig für das Aussehen Deiner Seite. Damit diese nicht wie Kraut und Rüben aussieht gibt es die Technik kritisches CSS (für den Headbereich) auszulagern. Dieses wird direkt beim Laden der Seite zur Verfügung gestellt und ist somit render-blocking. Das wird darüber realisiert, dass dieses CSS inline zur Verfügung steht. Das restliche CSS, was evtl. Später mal benötigt wird, wird dann asynchron nachgeladen.

Das perfekte Handling haben wir im Verhalten von WP-Rocket gehabt. Das Plugin erkennt automatisch kritisches CSS und setzt es inline in den Header des Quelltextes. Alles weitere CSS wird asynchron mit defer nachgeladen.

7.1.4 CSS @import vermeiden

https://varvy.com/tools/css-delivery/ oder gtmetrix nutzen
@import einfach rauskopieren und in andere Datei einfügen oder WP Rocket

In der Vergangenheit war es üblich die Stylesheets des Parent-Themes mit @import Befehlen in dein Child-Theme zu importieren. Aber der WordPress Codex besagt mittlerweile, dass dies nicht mehr die beste Methode ist, da hierdurch unter anderem die Ladezeit der Stylesheets erhöht wird.

Besser ist es die Stylesheets mit Hilfe von Enqueue in deiner functions.php zu „laden“. Im WordPress Codex findest du eine ausführliche Anleitung hierzu.

7.1.5 Optimierung der Bereitstellung von CSS-Ressourcen

Die Optimierung der Bereitstellung von CSS bedeutet im Wesentlichen, dass man herausfinden muss, wie man es nicht Rendering blockierend einstellt.

Identifiziere die Stile, die erforderlich sind, um Inhalte übersichtlich darzustellen, und stelle diese Stile in Einklang mit dem HTML ein.

Verwende CSS auf Geräten nur bei Bedarf

Verbleibendes CSS asynchron laden

All das zu tun, kann manchmal ein kniffliger Prozess sein und nimmt definitiv einige Optimierungen vor, basierend auf den Skripten, die Du auf Deiner Webseite geladen hast. Hier sind ein paar WordPress-Plugins, die helfen können:

Autoptimize

Async JavaScript

Hummingbird

Für eine detailliertere Erklärung und einen Leitfaden empfehlen wir Dir, unseren Beitrag über die Beseitigung von Render-Blocking von JavaScript und CSS zu lesen.

Eine Warnung vor Rendering-Blocking von JavaScript und CSS kann erscheinen, wenn Du Dateien hast, die das schnellstmögliche Laden der Seite verhindern. Spezifische JS und CSS sind manchmal bedingt, d.h. sie sind nicht erforderlich, um Inhalte above the fold anzuzeigen. Du kannst verhindern, dass sie zum Rendering-Blocking werden, indem du async und defer Attribute verwendest.

WP Rocket macht das automatisch und packt das kritische CSS inline in den Header. Der Rest kommt in die CSS-Datei, die asynchron nachgeladen wird.

7.1.6 Server-Push

Serverpush nutzen für Stylesheet-Dateien mit der zusätzlichen Anweisung as=“style“.

7.2 JavaScript optimieren

JavaScript kann exakt wie CSS optimiert werden. Hierbei helfen Dir wieder die klassischen Plugins WP Rocket und Autoptimize. Wir konnten die besten Resultate wieder mit WP Rocket erzielen.

7.2.2 jquery Migrate

Jquery Migrate ist eine JavaScript-Bibliothek, die in den meisten Fällen nicht benötigt wird. Du kannst jQuery-Migrate über SD Seo Performance deaktivieren, sodass übertragene Daten gespart und die Ausführungszeit Deiner WordPress-Installation erhöht wird.

Viele Themes, wie z.B. Enfold bieten die Möglichkeit direkt in den Theme-Einstellungen an.

7.2.3 JavaScript minifizieren

JavaScript kann genauso wie CSS minifiziert werden. Kommentare, Whitespaces und Leerstellen werden vom Browser nicht benötigt, um das JavaScript korrekt auszugeben. Daher sollte JavaScript immer minifiziert werden. Plugins wie WP Rocket, W3 Total Cache oder Autoptimizer sorgen dafür, dass Deine JavaScript-Dateien deutlich kleiner werden.

7.2.4 JavaScript zusammenfassen

Damit nicht unzählige JavaScript-Dateien über das Netz übertragen werden müssen, lohnt es sich die einzelnen Dateien zu einer großen Datei zusammenzufassen.

Hierbei sollte jedoch darauf geachtet werden, dass jQuery vor den anderen Skripten geladen wird. WP-Rocket nennt dies den jquery safe mode. So wird sichergestellt, dass keine Probleme bei Jquery-abhängigen JavaScript-Dateien auftreten.

Die Deaktivierung des Safe Modes führt dazu, dass auch jQuery mit den anderen Plugins zusammengepackt wird. Hier gilt die Maßnahme: einfach ausprobieren, ob es auch ohne geht.

7.2.6 JavaScript-Dateien in den Footer verschieben

Als Alternative zum obigen Kapitel kannst Du auch das Laden von JavaScript-Dateien in den Footer verschieben. Dadurch wird das JavaScript später geladen und blockiert nicht das Rendering. Die optimale Lösung ist es jedoch JavaScript-Dateien, die beim Rendering nicht benötigt werden mit defer asynchron nachladen zu lassen. WP Rocket ist die komfortabelste Lösung und geht folgendermaßen vor.

Skripte des Google Tag Managers werden von WP Rocket asynchron im Header geladen. Das restliche JavaScript wird dann per defer-Anweisung im Footer nachgeladen. So kannst Du die optimale Performance für Deine Webseite herausholen.

Mit folgendem Code-Schnippsel kannst du die Javascript Dateien in den Footer befördern:

function remove_head_scripts() {
	remove_action('wp_head', 'wp_print_scripts');
	remove_action('wp_head', 'wp_print_head_scripts', 9);
	remove_action('wp_head', 'wp_enqueue_scripts', 1);
	add_action('wp_footer', 'wp_print_scripts', 5);
	add_action('wp_footer', 'wp_enqueue_scripts', 5);
	add_action('wp_footer', 'wp_print_head_scripts', 5);}
	add_action('wp_enqueue_scripts', 'remove_head_scripts');
}

7.3 HTML

7.3.1 HTML minifizieren

Wie JavaScript und CSS kann natürlich auch der reine HTML-Quelltext minifiziert werden. Das spart wieder wertvolle Kilobyte und sorgt dafür, dass die Performance Deiner Seite steigt und die Ladezeit kleiner wird.

WP Rocket oder Autoptimize nutzen. Falls Du statische Seiten hast, gibt es Online-Tools, die Deinen Quelltext verkleinern können.

7.3.2 HTML Quelltext aufräumen

Der HTML-Quelltext ist bei WordPress oft vollgemüllt. Dort stehen standardmäßig sehr viele Zeilen drin, die in Wahrheit gar nicht benötigt werden. SD Seo Performance bietet eine Reihe an Optimierungen an, um den HTML-Quelltext zu entschlacken.

7.3.2.1     REST API Link entfernen

In Deinem Quelltext findest Du einen Link zur REST-API. Diese stellt externen Programmen INhalte Deiner Webseite über die REST-API zur Verfügung. Die REST-API kann natürlich auch angesprochen werden, wenn dieser Link nicht mehr vorhanden ist. In den meisten Fälen benötigt man den Link nicht, weshalb er problemlos entfernt werden kann.

remove_action('wp_head', 'rest_output_link_wp_head');

7.3.2.2     RSD und WLW Links entfernen

Wenn du deine WordPress Beiträge nicht mit dem Windows Live Writer oder anderen externen Programmen in deine Seite einpflegst kannst du die Links mit folgendem Code-Schnippsel entfernen.

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

7.3.2.3     WordPress Meta Generator entfernen

Durch den Meta Generator steht im HTML Code deiner Seite die WordPress Version, die du aktuell nutzt. Da dies sonst keinen weiteren Sinn macht und auch als Sicherheitslücke angesehen wird kannst du den Generator mit folgendem Code-Schnippsel entfernen.

remove_action('wp_head', 'wp_generator');

7.3.2.4     WordPress Shortlinks entfernen

Mit folgendem Code-Schnippsel kannst du die Shortlinks aus dem HTML Code entfernen. Es macht keinen wirklichen Sinn, dass die Links im Code stehen.

remove_action('wp_head', 'wp_shortlink_wp_head');

7.3.2.5     WP-Version von Scripts & Styles entfernen

WordPress hängt an den Dateinamen von Skript- und Stylesheet-Dateien die aktuelle WordPress-Version an. Das soll dafür sorgen, dass die Dateien bei einem WordPress-Update nicht im Cache des Browsers liegen bleiben. Da es aber nicht wirklich nötig ist und zudem ein Sicherheitsrisiko darstellt, empfehlen wir die WP-Version zu entfernen.

7.3.2.6     HTTP-Header aufräumen

Der HTTP-Header ist bei jedem WordPress-Aufruf mit nicht benötigten Informationen vollgestopft. Wir empfehllen den HTTP-Header zu entschlacken, um übertragene Daten zu reduzieren. SD Seo Performance liefert mehrere Optionen, um den HTTP-Header klein zu halten.

7.4 Query-Strings entfernen

Query-Strings sind ähnlich unnötig wie die WordPress-Version. Sie sorgen in diesem Fall sogar noch dafür, dass die Dateien nicht richtig gecached werden können. Wir empfehlen Query-Strings von JavaScript- und Stylesheet-Dateien zu entfernen.

Eine bessere Alternative wäre die Verwendung eines kostenlosen Plugins wie Code Snippets, um den Code hinzuzufügen. Auf diese Weise musst du dein Theme nicht direkt bearbeiten.

function remove_query_strings() {
	if(!is_admin()) {
		add_filter('script_loader_src', 'remove_query_strings_split', 15);
		add_filter('style_loader_src', 'remove_query_strings_split', 15);
	}
	function remove_query_strings_split($src){
		$output = preg_split("/(&ver|\?ver)/", $src);
		return $output[0];
	}
	add_action('init', 'remove_query_strings');
}

7.5 Requests reduzieren

Die Anzah an Requests ist bei einer Standard-Wordpress-Installation einfach zu hoch. Zahlreiche unnötige Dateien werden angefordert und müssen übertragen und verarbeitet werden Daher empfehlen wir einige unnötige Requests zu reduzieren. Das bringt erstaunlicherweise direkt einiges an Performance.

7.5.1 WordPress Emojis entfernen

WordPress liefert eigene Emojis mit. Diese sehen den Emojis auf modernen Geräten aber in vielen Fällen sehr ähnlich. Sie sind daher unnötig, denn wieso sollten Deine Besucher Emojis laden, die sich sowieso schon (in ähnlicher Form) auf ihren Geräten befinden.

Optimierungsplugins wie SD Seo Performance und WP Rocket entfernen lediglich die Aufrufe. Die Emojis bleiben weiterhin physikalisch auf dem Server liegen, was absolut in Ordnung ist.

Die Plugins Autoptimize und WP Rocket bieten jeweils eine Option um das für dich zu übernehmen.

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
add_filter( 'emoji_svg_url', '__return_false' );
remove_action('wp_head', 'wp_resource_hints', 2);

7.5.2 WP-Embed entfernen

Mit WP-Embed kannst Du andere WordPress-Beiträge in Deinen Beiträgen einbetten. Dazu kopierst Du einfach den Link in das Editor-Feld und schon lädt WordPress eine Vorschau der Webseite. Falls Du diese Funktion nicht nutzt, solltest Du WP-Embeds deaktivieren. Denn WP-Embedes lädt eine zusätzliche JavaScript-Datei, die Du Dir sparen kannst.

function delete_wpembed() {
wp_deregister_script( 'wp-embed' );
}
add_action('wp_enqueue_scripts', 'delete_wpembed', 9999);
remove_action('wp_head', 'wp_oembed_add_discovery_links' );

7.5.3 Dashicons im Frontend

Dashicons sind das WordPress eigene Iconfont. Das ist zwar im Backend schön anzusehen, wird aber im Frontend nicht benötigt und das Laden kann daher deaktiviert werden.

8 Externe Requests reduzieren

Externe Requests verzögern das Laden Deiner Seite. Durch DNS-Auflösung, Verbindungsaufbau und Datenübertragung können externe Requests sehr leicht zum Flaschenhals werden. Dank HTTP 2 ist dieser Nachteil nicht mehr so groß. Dennoch macht es Sinn externe Requests zu reduzieren.

8.1 Externe Skripte lokal hosten

Externe Skripte wie Google Analytics, Google Tag Manager und Facebook-Skripte sollten lokal gehostet werden. Das hat den Vorteil, dass ein externer Request beim Aufruf gespart wird. Zudem können die Skripte vom Browser gecached werden.

WP Rocket bietet Dir an Google Tag Manager-, Google Analytics- und Facebook Trackingpixel-Skripte lokal zu hosten und von Deinem Webserver auszuliefern, statt die Dateien von externen Servern zu laden.

8.2 Google Fonts

Dazu gibt es ein eigenes Kapitel weiter oben. In der Regel gilt es Google Fonts lokal zu hosten oder mehrere Schriften in einem Aufruf zu laden.

8.3 Vermeide die offiziellen Social Media Plugins

Die offiziellen Social Media Plugins sind in Deutschland nicht unbedingt datenschutzkonform. Zudem werden beim Laden schon eine Menge Daten übertragen, die den Aufbau und die Ladezeit Deiner Webseite verlangsamt. Besser sind statische Social Media Buttons, die erst dann eine Verbindung mit dem sozialen Netzwerk aufrufen, wenn sie angeklickt werden. Ideal dafür geeignet ist das Plugin Shariff Wrapper.

9 Lazyload – allgemein

Lazy Load sorgt dafür, dass Bilder und Videos, die sich nicht im sichtbaren Bereich befinden, erst geladen werden wenn man an die entsprechende Stelle scrollt. Das gilt auch bei eingebetteten YouTube Videos. WP Rocket bietet Lazy Loading für Bilder, Iframes und Videos an. Wenn Du WP Rocket nicht kaufen möchtest, kannst Du das Lazy Load by WP Rocket Plugin nur für Lazy Loading nutzen. Im Chrome gibt es mittlerweile ein neues Attribut für Bilder und IFrames. Das loading-Attribut kann den Wert lazy annehmen. Damit wird dem Browser mitgeteilt, dass Bild erst zu laden, wenn er es benötigt. In anderen Browsern ist das leider noch kein Standard, wird aber ggf. in Zukunft noch wichtig werden.

Als weitere Plugins kannst Du Lazy Load oder a3 Lazy Load verwenden. Als Threshold bezeichnet man die Entfernung ab wann ein Element geladen werden soll. Standardmäßig sind 200 – 300 Pixel. Sobald der Bildausschnitt also sich diesem Wert dem Bild oder Video genähert hat, wird es vom Plugin geladen. Hier solltest Du eine individuelle Einstellung wählen können, um den Wert zu verbessern. Idealerweise sogar einen eigenen Wert für mobil, da sich hier Abstände ganz anders verhalten und Bilder eventuell erst später geladen werden müssen. SD Seo Performance erlaubt Dir den Threshold für WP-Rocket einzustellen und bei einem aktivierten mobilen Cache auch den Wert für Mobilgeräte anzupassen.

10 Plugins optimieren

Plugins haben WordPress erst zu dem gemacht was es ist. Erweitern der Funktionalität per Knopfdruck. Genial. Es gibt Plugins für unzählige Anwendungsfälle, verschiedene Lösungen und Probleme.

Doch Plugins haben einen ganz entscheidenen Nachteil. Sie verlangsamen die Performance! Immer! Denn Plugins werden (fast) immer und überall geladen.

10.1 Typische Plugins vermeiden

Brauchst Du überhaupt ein Plugin? Kann die Aufgabe nicht auch vom Webserver, WordPress oder Deinem (Child)-Theme erledigt werden? Achte genau darauf, ob Du nicht Schnittmengen zwischen Plugins findest, die evtl. Ein Plugin ganz alleine erledigen könnte. Oder ob eine Aufgabe anderweitig durchgeführt werden kann. Manche Plugins sind wirklich sehr simpel und erledigen nur ganz einfache Funktionalität, die jedoch problemlos auch an anderer Stelle gemacht werden kann. Ohne Plugin-Overhead und wesentlich schneller!

10.1.1 Minimiere Weiterleitungen und füge sie auf Serverebene hinzu

Zu viele Weiterleitungen sind immer etwas, auf das man achten muss. Einfache Weiterleitungen wie eine einzelne 301 Weiterleitung, HTTP zu HTTPS oder www zu non-www (oder umgekehrt) sind in Ordnung. Und oft werden diese in bestimmten Bereichen Deiner Webseite benötigt. Allerdings kommt jede mit einem Preis bezüglich der Leistung Deiner Webseite. Und wenn Du anfängst, Weiterleitungen übereinander zu stapeln, ist es wichtig zu erkennen, wie sie sich auf Deine Website auswirken. Dies gilt für Seiten- und Postverlinkungen, Bildverlinkungen, alles.

Eine Weiterleitung erzeugt ein 301 oder 302 auf dem Status des Antwortheaders.

10.1.2 Skripte selbst in Header einbinden

Skripte laden:

• Google Tag Manager
• Analytics
• Facebook-Skripte usw

Etwas umständlicher, aber dafür schneller

Jedes Plugin, dass du auf deiner Seite installierst, macht deine Seite etwas langsamer. Daher solltest du nur wirklich benötigte Plugins installieren. Außerdem solltest du nicht einfach das erstbeste Plugin nutzen, denn oft gibt es Alternativen, die einen besseren Job machen was deinen PageSpeed angeht.

Das lässt sich am einfachsten durch Testen und Vergleichen herausfinden.

Aber es gibt natürlich auch Plugins, die deine Ladezeit verbessern.

10.1.3 Backups

Prüfe, ob es möglich ist Backups von Deinen Dateien und Datenbanken vom Webhoster vornehmen zu lassen. So brauchst Du kein unnötiges Backup-Plugin, dass im Zweifel die Last Deiner Webseite erhöht.

10.1.4 Sicherheit

Sicherheit sollte eigentlich von Deinem Webserver vorgenommen werden. Aktuelle Plugin-, Theme- und WordPress-Versionen sind wichtig. Ansonsten kannst Du auch noch CDNs wie Cloudflare oder Sucuri davor schalten.

10.1.5 Kontaktformular

Ggf. Bietet Dein Theme bereits ein ausreichendes Kontaktformular, sodass Du gar kein eigenes Plugin benötigst.

10.1.6 Cookie-Bar

Es gibt mehrere Plugins, die die Cookie-Bar und Google Analytics zusammen einbinden, sodass Du ein Plugin sparst.

Oder Dein Theme bietet Dir an direkt eine Cookie-Bar anzuzeigen.

10.2 Plugins organisieren

Es gibt verschiedene Plugins, die zwar immer geladen werden, aber nur auf einzelnen Seiten oder manchen Typen angezeigt werden müssten. Ein gutes Beispiel ist WooCommerce. In den meisten Fällen sollte WooCommerce nur auf Produkt- oder Kategorieseiten, dem Warenkorb und Checkout geladen werden. Es wird jedoch immer geladen, verzögert so die Ausführungszeit von WordPress und lässt den Besucher unnötige Dateien und Skripte herunterladen.

10.2.1 Plugin Organize

Mit Hilfe des Plugins Plugin Organize, kannst Du einzelne Plugins auf diversen Unterseiten ausblenden. Somit hast Du die volle Kontrolle über Deine Plugins. Sei Dir dem Risiko aber bewusst, dass Deine Seite im Zweifel Fehler werfen kann oder nicht mehr richtig funktioniert, wenn Du wichtige Plugins auf den falschen Seiten ausschaltest.

10.2.2 Asset CleanUp

Auch das Asset CleanUp-Plugin sorgt dafür, dass Code nur da geladen wird, wo Du es einstellst. Die Funktionalität von Asset CleanUp entspricht leider nicht ganz der granularen Einstellung von Plugin Organize.

10.3 Plugin Auto-Updates

WordPress-Plugins starten regelmäßig Requests und fragen nach, ob es Updates für sie gibt. Das kann zu langsamen WordPress Admin-Dashboards führen. In mehreren uns bekannten Fällen lagen Fehler im Programmcode vor, sodass viel zu viele Anfragen ausgeführt wurden. Doch auch wenn alles nach Plan läuft, können die Update-Checks dafür sorgen, dass Deine Seite langsamer wird.

Es gibt mehrere Plugins, die Dir erlauben Einstellungen zu den Auto-Updates vorzunehmen. Wir empfehlen Dir auf keinen Fall Update-Benachrichtigungen einfach auszuschalten, da viele Updates Sicherheitslücken und Bugs schließen. Es kann jedoch ab und zu empfehlenswert sein für einzelne Plugins die Updates auszuschalten. Folgende Plugins kannst Du nutzen:

• Deactivate all WordPress Updates: deaktiviert alle WordPress-Updates, kostenlos.
• Simple Update-Manager: per Auswahl entscheiden welche Updates deaktiviert werden sollen, Basisversion kostenlos.

Falls Du Updates deaktivierst, solltest Du regelmäßig manuell nach Updates suchen. Stell Dir dafür eine Erinnerung.

10.4 nicht empfohlene Plugins wegen Performance

Es gibt eine Reihe von Plugins, die nicht empfehlenswert sind, da sie sich negativ auf die Performance auswirken. Eine Liste folgt!

10.5 Overhead von Plugins entfernen

Viele Plugins schreiben Overhead in den Quellcode oder laden unnötige Dateien. So kommt es häufiger vor, dass Optimierungsplugins einen Hinweis auf sich selbst im Quelltext (oder gar im HTTP-Header) verstecken. Das ist nicht nur unnötig, verlangsamt den Seitenaufbau, sondern kann im Zweifel auch eine Sicherheitslücke sein.

Achte darauf, dass keine unnötigen Skripte geladen werden, Output, Kommentare oder ähnliches in Deinem Quelltext landet.

11 WordPress-Performance BilderGuide

Wer an Performance von Webseiten denkt, sollte in aller erster Linie Bilder im Kopf haben. Denn Bilder sind mit die größten Performance-Bremsen überhaupt. Bei Bildern kann man viel falsch machen, was zu einer schlechten Performance führt. Auf der anderen Seite lassen sich Bilder hervorragend optimieren.

Wenn möglich die Anzahl an Bildern reduzieren so gut es nur geht. Wenn Bilder nicht reduziert werden können, dann möglichst optimiert ausgeben.

11.1 richtige Dateigrößen ausgeben

Du solltest bereits die richtigen Dateigrößen ausgeben, die Dein Besucher nachher auch angezeigt bekommt. Achte daher bei der Erstellung schon darauf, die Bildgrößen im WordPress zu optimieren. In den Medienoptionen kannst Du die Standardgrößen für Deine Webseite festlegen.

11.2 Plugins für die Bildkomprimierung

Es gibt zahlreiche großartige Plugins, die Bildkomprimierung automatisiert vornehmen. Unser Favorit ist der ShortPixel Image Optimizer. Zwar zahlst Du hier (für größere) Webseiten einmalig 9,99 €, solltest danach aber immer genügend Credits für Deine Bilder haben. Folgende Plugins kannst Du nutzen:

• ShortPixel
• Imagify
• WP Smush
• Optimole
• EWWW Cloud

11.3 Bildgrößen

Um deinen Server nicht unnötig zu belasten solltest du die Bilder in der Größe hochladen in der sie auch tatsächlich angezeigt werden.
Dazu kannst du neben dem bekannten Photoshop aber auch kostenlose Programme wie Gimp nutzen. Kamera und Handy nehmen Bilder mittlerweile in riesigen Größen auf. Fürs Web benötigst Du aber selten Bilder mit 16 MP oder mehr. Reduziere die Bilder daher, bevor sie auf Deinen Webspace gelangen. Ein weiteres kostenloses super Tool für Windows ist der grandiose Bildverkleinerer. Einfach zu bedienen und kostenlos und tut was er soll.

11.4 Bilder komprimieren

Nicht nur die Bildgröße ist wichtig, sondern auch die richtige Komprimierung. Denn in den meisten Fällen können Bilder – ähnlich wie Texte beim ZIP-Verfahren – verkleinert werden ohne, dass Du qualitativ einen Unterschied erkennst. Bei der Komprimierung werden zudem unnötige Daten aus dem Bild entfernt. Shortpixel macht beides. Passt die Bildgrößen an und komprimiert die Bilder entsprechend.

11.5 Bilder in modernen Formaten anzeigen

WebP ist eines der modernen Bild-Formate. WebP bietet kleinere Dateigrößen bei besserer Qualität als JPEG. Daher solltest Du Deine Bilder möglichst AUCH in modernen Formaten zur Verfügung stellen. Shortpixel erzeugt kostenlos eine WebP-Version Deiner Bilder und gibt diese nach Möglichkeit auch aus, was zu einer deutlich besseren Performance führt.

11.6 Lazyload für Bilder

Nutze unbedingt Lazy Loading für Bilder.

11.7 Anzahl der Bilder reduzieren

11.7.1 CSS-Effekte

CSS-Effekte können dafür genutzt werden, um gewisse graphische Sachen darzustellen. Dazu gehören folgende CSS-Effekte:

• Shadows
• Roundes Corners
• Gradient

Da diese Prozesse Rechenzeit beanspruchen, nur benutzen, wenn sie wirklich gebraucht werden.

11.7.2 Unicodes nutzen

Unicodes werden sowieso mitgeladen und stellen schon etliche Symbole dar. Über 110.000 Symbole können genutzt werden. Unicodes sind voll responsive, können wie Text gestyled werden und nehmen keine zusätzliche Ladezeit in Anspruch.

Auf unicode-table.com nachschauen und ggf. Bilder durch Icons ersetzen.

11.7.3 Image-set für Background-Images

Background-Images laden via CSS Bilder. Diese sind bereits für responsive Webseiten gut zu handeln. Um Speicherplatz zu sparen, sollten nur für Retina-Displays hochauflösende Bilder geladen werden. Dafür kann das CSS-Attribut image-set für das background-image-Attribut verwendet werden. Falls der Browser image-set nicht kann, wird auf das Fallback (nicht Retina-Bild) zurückgegriffen.

11.7.4 Iconfonts nutzen

Iconfonts können selbst zusammengestellt werden. Idealerweise nutzt man das und sucht sich aus den besten Iconfonts die Icons heraus, die man selbst benutzt. Alle weiteren Icons lässt man weg, um Platz zu sparen. Es gibt Online-Tools, mit denen Du Deinen eigenen Iconfont erstellen kannst.

11.7.5  SVG + Data-URIs

SVG und Data-URIs sollte man nutzen, wenn man einfache, leicht skalierbare Grafiken hat, wie z.B. einfache Logos. SVGs können massiv reduziert werden, wie z.B. über https://www.svgminify.com/de.html

SVG und Data-URIs können auch inline genutzt werden. Das ist sinnvoll für alle Elemente, die nicht mehrfach auf der Seite auftauchen. Taucht ein Element mehrfach auf der Seite auf, wie Logos, dann sollten diese nicht inline geladen werden, damit der Browser sie cachen kann. Nutze vermehrt SVGs und Data-URIs, da wo es möglich ist und Sinn macht.

12 Datenbank bereinigen und optimieren

Du solltest definitiv die Datenbank Deiner Installation im Auge behalten. Nebem Plugin-Rückständen, Spam, Revisionen wird Deine Datenbank von zahlreichen Plugins und Funktionen im Laufe der Zeit regelrecht zugemüllt. Nutze das Plugin Optimizing Database after deleting revisions oder WP-Optimize, um Deine Datenbank aufzuräumen.

WP Rocket bietet ebenfalls eine Optimierungsfunktion für Datenbanken an. Falls Du sowieso schon WP Rocket nutzt (was Du solltest!), benötigst Du kein weiteres Plugin.

12.1 Revisionen reduzieren

Revisionen sind Entwürfe Deiner Beiträge und Seiten, die in der Datenbank abgespeichert werden. WordPress speichert unzählige davon ab, wenn Du sie nicht manuell löschst. Wenn Du viele Beiträge und Seiten hast und oft Sachen änderst, wirst Du vermutlich hunderte Revisionen in Deiner Datenbank haben, die Du gar nicht benötigst. Daher solltest Du die Anzahl der gespeicherten Revisionen reduzieren.

12.2 Add Index To Autoload

Die Tabelle wp_options speichert die Einstellungen von WordPress, Themes und Plugins. Dort findest Du zahlreiche Werte und Daten. Bei großen und alten Installationen kann diese Tabelle sehr groß werden. Die Tabelle hat eine Spalte autoload, die besagt, ob das Wert auf jeder Deiner WordPress-Seiten geladen werden soll. Dieser Wert ist standardmäßig auf ja gesetzt. Doch mitnichten sollten alle Daten von allen Plugins immer und überall geladen werden. Da diese Daten bei jedem Seitenaufruf geladen werden und somit explizit nach dem autoload-Attribut gefiltert wird, empfiehlt es sich der Spalte einen Index zu geben.

12.3 Datenbank richtig konfigurieren

Die Datenbank ist in vielen WordPress-Installationen ein Flaschenhals und wirkt sich somit negativ auf die Performance aus. Eine optimierte Datenbank ist immer Grundlage für eine schnelle Webseite.

12.3.1 Verwende den InnoDB MySQL Storage Engine

Datenbanken können unterschiedliche Speicher-Mechanismen nutzen. Lange Zeit war MyISAM der Standard für MySQL. Doch mittlerweile hat sich herausgestellt, dass InnoDB als Speicher-Mechanismus zuverlässiger und performanter ist. Zudem hat InnoDB zahlreiche weitere Vorteile. Deshalb empfehlen wir alle Datenbanktabellen auf InnoDB umzustellen.

12.3.2 Alle Tabellen und Columns in utf8 ändern

Wenn Du eine normale einsprachige Webseite hast, solltest dort standardmäßig die Zeichen-Kodierung UTF-8 eingestellt sein. Daher sollte auch Deine Datenbank UTF-8 verwenden. Nutze folgende Befehle, um Deine Tabellen und Spalten zu UTF-8 zu konvertieren. Wichtig: mache vorher ein Backup Deiner Datenbank. Ersetze den Namen Deiner Datenbank im SQL-Befehl mit dem Platzhalter DATENBANK-NAME

Tabellen:

SELECT CONCAT("ALTER TABLE ", TABLE_SCHEMA, '.', TABLE_NAME," COLLATE utf8_general_ci;") AS output FROM INFORMATION_SCHEMA.TABLESWHERE TABLE_SCHEMA="DATENBANK-NAME"AND TABLE_TYPE="BASE TABLE";

Als Output erhältst Du eine Liste von SQL-Befehlen, die Du dann noch ausführen musst.

Spalten:

SELECT CONCAT('ALTER TABLE `', TABLE_NAME,'` CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci;') AS output
FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA= "DATENBANK-NAME" AND TABLE_TYPE="BASE TABLE";

Auch hier erhältst Du eine Liste von SQL-Befehlen. Vor diese Liste solltest Du unbedingt noch folgende Zeile kopieren.

SET foreign_key_checks = 0;

Diese Zeile sorgt dafür, dass Fremdschlüsselbeziehungen bei den Änderungen ignoriert werden. Kopiere die Zeile vor den Output und führe die Befehle aus, damit alle Deine Spalten ebenfalls UTF-8 kodiert sind.

12.4 Bereinigung von Transienten

Transients sind Daten aus dem WordPress Object-Cache. Sie haben normalerweise ein Ablaufdatum. Im Laufe der Zeit kann es aber passieren, dass Deine Datenbank mit Transients zugemüllt wird. Daher solltest Du bereits abgelaufene Transients löschen. Du kannst jedoch problemlos alle Transients löschen, da diese Daten dann beim nächsten Mal einfach neu erzeugt werden.

WP Rocket bietet die Möglichkeit Deine Datenbank aufzuräumen. Dabei werden auch Transients gelöscht. Ansonsten kann Du auf kostenlose Plugins wie Transient Cleaner oder Delete Expired Transients zurückgreifen.

12.5 WordPress Sitzungen bereinigen

Normalerweise sollte der WordPress Cronjob die WordPress Sitzungen in der Datenbank bereinigen. Manchmal passiert das jedoch nicht, sodass Deine Datenbank größer und größer wird. In diesem Fall macht es Sinn ab und zu alle Sessions zu entfernen. Folgender SQL-Befehl entfernt alle Sessions aus der Datenbank. Wie immer solltest Du vor Datenbank-Operationen ein Backup machen:

SELECT *FROM `wp_options`WHERE `option_name` LIKE '_wp_session_%'DELETE FROM `wp_options`WHERE `option_name` LIKE '_wp_session_%'

13 WordPress-Einstellungen

13.1 Self-Pingback und Pingbacks deaktivieren

Pingbacks sind Kommentare, die automatisiert erstellt werden, wenn ein anderer WordPress-Blog auf einen Artikel von Dir verlinkt. Diese werden dann ähnlich wie Kommentare unter Deinem Beitrag angezeigt. Pingbacks sorgen in vielen Fällen für unnötige Seitenaufrufe und Last auf Deinem Server. Zudem haben sie relativ großes Spam-Potential. Wenn Du also keine Pingbacks möchtest, solltest Du sie einfach deaktivieren.

Self-Pingbacks werden erstellt, wenn Du auf einen Artikel in Deinem eigenen Blog verlinkst. Wir empfehlen diese ebenfalls zu deaktivieren, da in unseren Augen Related Post-Plugins bessere Ergebnisse beim internen Linkbuilding erzielen.

13.1.1 Pingbacks deaktivieren

Pingbacks kannst Du ganz einfach über Dein WordPress Dashboard deaktivieren. Klicke dafür auf Einstellungen und Diskussion. Dort findest Du die Option Link-Benachrichtigungen […] zulassen. Deaktiviere diese Option.

13.1.2 Schritt 2 – Self-Pingbacks

Self-Pingbacks können über das Plugin SD SEO Performance deaktiviert werden. Alternativ kannst Du folgende Funktion in die functions.ph Deines Child-Themes einfügen:

add_action('pre_ping', function (&$links ) {
	foreach ( $links as $l => $link ) {
		if ( 0 === strpos( $link, get_option( 'home' ) ) ) {
			unset($links[$l]);
		}
	}
});

13.2 weniger Beiträge in Listen anzeigen

Falls Du irgendwo Listen Deiner Beiträge oder irgendeines Custom Post Types aufführst, solltest Du diese begrenzen und über Paginations oder Ajax-Calls nachladen bzw. weiterladen. Denn je mehr Beiträge angezeigt werden, desto schlechter ist die Performance. Zudem ist es nicht gerade förderlich für die Usability. Wenn ein User bei 10 angezeigten Beiträgen schon nicht weiß worauf er klicken muss, wird er es bei 25 nicht leichter haben. Versuche Deine Besucher besser zu leiten und ihnen nicht unendlich lange Listen anzuzeigen. Das erhöht nicht nur die Conversion-Rate, sondern auch die Performance.

13.3 Datenbankintensive Einstellungen und Funktionen deaktivieren

Plugin- und Themeeinstellungen können sehr datenbankintensiv sein. Wir empfehlen Dir die Einstellungen der einzelnen Plugins und Deines Themes exakt durchzugehen und zu schauen, was Du weglassen kannst. Deaktiviere alle was Du nicht benötigst, da dies im Zweifel dafür sorgt, dass weniger Daten geladen werden. Besonders ressourcenfressend sind Related-Post-Plugins.

14 WordPress-Theme

Dein Theme entscheidet massiv darüber, ob Du eine gute oder schlechte Performance hast. Je nach Komplexität werden unter Umständen etliche Daten geladen, die Deine Seite langsam machen. Wir empfehlen daher bei der Theme-Auswahl auf wirklich performante Themes zu achten. Wir nutzen Enfold für unsere Projekte, mit dem wir bisher sehr gut gefahren sind. Enfold wird auch von unserem SD Seo Performance-Plugin unterstützt, sodass wir noch etwas mehr Performance aus Enfold kitzeln.

Wichtig ist es Grundregeln zu beachten. Es sollten wenig Google Fonts geladen werden oder die Einstellung zumindest konfigurierbar sein. Einstellungen die große Mengen an Daten laden sollten deaktiviert werden. Das Theme sollte generell möglichst schlank sein oder entsprechende Performance-Einstellungen mitbringen.

Hol Dir jetzt hier Enfold!

15 Design

15.1 Mobile First

Beim mobile first Ansatz denkt man klein und vergrößert dann nur Stück für Stück, was man auf dem Tablet oder Desktop braucht. Der Ansatz ist ressourcenschonend, da Du für das Smartphone viel weniger Elemente brauchst. Bist Du also gerade in der Entwicklung Deiner Webseite, solltest Du Dich mit mobile First beschäftigen und nur Stück für Stück mehr Inhalte auf dem Desktop hinzufügen. So bleiben sowohl deine mobile Version, als auch deine Desktop-Version schlank.

Wir haben bereits Webseiten gesehen, bei denen die Desktop-Version extrem detailliert und designtechnisch aufgearbeitet worden ist mit unzähligen Bildern, Hintergrundgrafiken etc. In der mobilen Version wurde das alles mit geladen, obwohl die mobile Variante ganz simpel aussah.

15.2 Schriftarten weglassen etc.

Benötigt Deine Webseite wirklich 6 verschiedene Schriftarten? Nutzt Du evtl. Zwei verschiedene Schriftarten, die in Wahrheit sehr ähnlich aussehen. Kannst Du Schriftarten reduzieren? Kannst Du evtl. Mobil Schriftarten reduzieren?

Nutze so viel wie absolut nötig, aber so wenig wie möglich!

15.3 Bilder Iconfonts, Unicode etc.

Kannst Du beim Design Deiner Webseite evtl. Grafiken weglassen und dafür auf Unicode zurückgreifen? Bevor Du viele Grafiken für einfache Sachen nutzt, stelle Dir einen eigenen Iconfont zusammen. Dieser lädt schneller und ist besser skalierbar als Grafiken.

16 Serverseitige Einstellungen

Serverseitig lassen sich einige Verbesserungen Deiner Performance herbeiführen. In erster Linie ist es schon einmal wichtig einen schnellen Webhoster bzw. Server zu haben. Da die meisten Webseiten auf einem Shared-Hosting laufen, gibt es dort leider nicht all zu viel Optimierungspotential.

16.1 PHP-Version

Bei nahezu allen uns bekannten Webhostern kannst Du die PHP-Version einstellen. Das ist von großer Bedeutung, denn PHP ist in den letzten Jahren viel viel schneller geworden. Im Gegensatz zu PHP 5.6 ist die neuste Version PHP 7.3 in vielen Tests beinahe doppelt so schnell. PHP wird aktuell auch immer weiter entwickelt und mit jeder Version wird PHP etwas performanter. Daher solltest Du wenn möglich immer die höchste PHP-Version eingestellt haben. Vergewissere Dich aber, dass Deine Webseite nach einer PHP-Umstellung noch funktioniert, da nicht alle Themes und Plugins mit den neusten Versionen klar kommen.

Falls Du bei Deinem Webhoster keine Möglichkeit findest PHP einzustellen, kontaktiere den Support. Dieser wird die Einstellung für Dich vornehmen können oder Dir zeigen wie es geht.

16.3 HTTP2

HTTP 2 ist eine Weiterentwicklung des HTTP-Protokolls, auf dem ein Großteil des Internet basiert. HTTP 2 hat einen großen Vorteil. Es kann mehrere Dateien gleichzeitig übertragen. HTTP kann das nicht, was dazu führt, dass die Übertragung bei vielen Requests blockiert bzw. verzögert ist. Mit HTTP2 läuft das Ganze nun flüssiger. Ein Umstieg kann zu einer enormen Performancesteigerung führen. Beachte aber, dass HTTP2 eine SSL-Verschlüsselung voraussetzt. Deine Webseite muss also mit HTTPS laufen.

Meistens wirst Du hier meistens selbst keine Änderung vornehmen können. Falls Du Dir nicht sicher bist, ob Dein Server schon mit HTTP2 läuft, kannst Du Deine Webseite hier eingeben und testen: https://tools.keycdn.com/http2-test

Falls Dein Server noch nicht auf HTTP2 läuft, frage bei Deinem Webhoster nach. Wenn es keine Anleitung gibt, beim Support anrufen.

Wir empfehlen auf lange Sicht den Webhoster zu wechseln, wenn er kein HTTP2 unterstützt, da dies in unseren Augen eine Schlüsseltechnologie ist und Dein Webhoster somit keinen großen Wert auf Performance zu legen scheint.

16.4 Opcache

Opcache ist eine prima Möglichkeit die Performance Deiner WordPress-Installation zu verbessern.

Opcache kannst du über deinen Webserver, Deinen Hoster einstellen. Frage dort nach, bzw. schaue in der php.ini nach, ob Du bereits Opcache aktiviert hast. Hast Du Zugriff auf Deine php.ini kannst Du Opcache auch selbst aktivieren:

zend_extension=opcache.so;
opcache.enable=1;
opcache.memory_consumption=64;
opcache.interned_strings_buffer=8;
opcache.max_accelerated_files=3000;
opcache.revalidate_freq=180;
opcache.fast_shutdown=0;
opcache.enable_cli=0;
opcache.revalidate_path=0;
opcache.validate_timestamps=2;
opcache.max_file_size=0;
opcache.file_cache=/pfad/zu/opcache/ordner;
opcache.file_cache_only=1;
nly=1;

16.5 HTTP Server-Push

Mit HTTP2 bekommst Du die Möglichkeit Server-Push zu nutzen. Das bedeutet, dass der Server proaktiv Dateien senden kann und nicht auf die Anfrage des Besuchers warten muss. Das kann die Ladezeit Deiner Webseite weiter verbessern. Vergewissere Dich, dass bei Deinem Server HTTP Server-Push aktiviert ist. WP-Rocket nutzt die Technologie um wichtige Dateien direkt an den Browser des Besuchers zu senden.

16.6 Pagespeed Module

Das Pagespeed-Modul sitzt als Schicht zwischen Deiner Webseite und dem Webserver und optimiert die Webseite falls nötig. Prüfe, ob Du die Möglichkeit bei Deinem Webhoster hast das Pagespeed-Modul zu aktivieren.

16.7 Sonstiges

• PHP Memory Limit: das PHP Memory-Limit sollte so hoch wie möglich sein, da es aktiv Deine Performance verbessert. WordPress sollte Zugriff auf mindestens 256 MB haben
• APCu ist ein weiterer Object-Cache. Manche Webhoster bieten diesen für ihre Benutzer an.

17 Langsame Plugins oder Themes finden

17.1 Query Monitor

Mit Hilfe des kostenlosen Plugins Query Monitor kannst Du langsame Plugins oder Themes finden.

18 Lazyload für Videos

Auch Videos können über Lazy Loading geladen werden. WP-Rocket bietet dies bereits an. Somit werden unzählige externe Requests, Ladezeit und Datenvolumen gespart.

19 DNS-Prefetch & Preconnect

Nutze DNS-Prefetch und Preconnect, um externe Verbindungen bereits vorzeitig aufzulösen. So sparst Du wertvolle Milisekunden beim Laden Deiner Seite. Gehe dazu auf Webpagetest.org. Schaue Dir im Wasserfall-Diagramm mehrere Seiten und deren externe Requests an. Bilde eine Schnittmenge der externen Seiten und füge diese in den Header Deines Quelltexts ein. Du kannst den Code dafür entweder in der functions.php Deines Child-Themes oder aber in SD Seo Performance eintragen.

20 Plain-HTML-Seiten verwenden

In manchen Fällen macht es Sinn auf Plain-HTML-Seiten zurückzugreifen. Diese enthalten zwar keine Dynamik mehr, sind dafür aber super schnell. Der Aufwand ist jedoch extrem hoch, als überlege gut, ob es Dir das wirklich wert ist.

21 AMP oder PWA

21.1 AMP für News-Seiten

News-Seiten profitieren von Googles AMP-Technik für schlanke Internetseiten. Falls Du Betreiber einer News-Seite bist, solltest Du AMP auf Deinen Seiten aktivieren.

21.2 PWA

Alle anderen Seiten können von PWAs profitieren. Falls Du Deine Seite zu einer Progresse Webapp ausbaust, kann die Performance von Service-Worker und Co. profitieren.

22 Einstellungen und Best Practices

Es gibt viele verschiedene Einstellungen und Best Practices, die sich über Deine WordPress-Installation, das Theme und die Plugins, die Du nutzt, ziehen. Du solltest ein grundlegendes Verständnis dafür haben, wie sich gewisse Dinge auf die Performance Deiner Webseite auswirken.

Viele Seiten werden für eine wunderbare Desktop-Ansicht mit mehreren Google Fonts optimiert. Mobil werden die Inhalte dann lediglich zusammengeschoben, sodass die grafischen Effekte verschwinden. So gibt es z.B. die Möglichkeit benutzerdefinierte Schriftarten auf dem Smartphone auszuschalten, um so mobil die Ladezeit zu erhöhen.

22.1 Keine Slider

Horizontale Slider sind out! Sowohl von Usability als auch von Performance lohnen sich Slider nicht mehr wirklich. Zum einen können Slider sehr unperformant sein, wie z.B. das Slider Revolution Plugin. Zudem überfordern Slider den Besucher oft.

Falls Du unbedingt Slider auf Deiner Webseite einbinden möchtest, solltest Du darauf achten, dass die Slides dynamisch nachgeladen werden, um die Performance zu erhöhen.

22.2 Tracking-Tools, Iframes, etc.

Tracking-Tools verlangsamen Deine Webseite. Wir empfehlen daher nur so viel wie nötig, so wenig wie möglich solcher Tools einzubinden. Google Analytics, Piwik, Facebook-Pixel, Hotjar etc. liefern zwar wertvolle Daten, können aber auch Deine Webseite enorm verlangsamen. Die wichtigsten könntest Du z.B. über WP-Rocket lokal hosten. YouTube-Videos und andere IFrames solltest Du per Lazy Loading dynamisch nachladen.

22.3 WordPress Heartbeat reduzieren

Der WordPress Heartbeat wird regelmäßig ausgeführt und macht z.B. den Ajax-Request im Backend, der für das Auto-Save Deiner Beiträge sorgt. Wir raten dringend davon ab den Heartbeat komplett zu deaktivieren. Jedoch lassen sich die Aufrufe reduzieren, sodass weniger Last auf dem Webserver entsteht. Das kann z.B. dafür sorgen, dass Dein Backend flüssiger läuft. Reduziere die Heartbeat-Aktivität im Backend, im Frontend und im Editor.

Du kannst das über WP Rocket, SD Seo Performance oder aber auch in der WP-Config vornehmen.

22.4 Selbstgehostete Audio- und Videofunktion deaktivieren

Bei WordPress wird standardmäßig eine Javascript-Datei geladen, die dafür da ist selbstgehostete Audio- und Video-Dateien abzuspielen. Falls Du das nicht vor hast, lässt sich die Daten problemlos deaktivieren.

22.5 PDF-Previews deaktivieren

PDF-Previews in der Mediathek fressen in den meisten Fällen nur unnötig Rechenzeit und sollten daher deaktiviert werden.

22.6 RSS-Feeds deaktivieren

Falls Du keine RSS-Feeds benötigst, kannst Du deren Erstellung ebenfalls problemlos deaktivieren.

22.7 REST-API deaktivieren

Die REST-API ist eine sehr mächtige API im WordPress. Viele Plugins greifen darauf zurück. Wenn Du keine externen Anfragen an Deine REST-API hast und sicher bist, dass kein installiertes Plugin diese nutzt, dann kannst Du die REST-API problemlos deaktivieren.

22.8 Unnötige Widgets deaktivieren

Manche Widgets führen Datenbankabfragen durch. Auch dann, wenn Du sie nicht verwendest. Daher solltest Du nicht benötigte Widgets, wie z.B. das Kalender-Widget deaktivieren. Templates und Plugins bringen ebenfalls oft zahlreiche Plugins mit. Falls Du diese nicht benötigst, kannst Du sie ebenfalls deaktivieren. Nutze dafür das SD Seo Performance-Plugin.

23 CDN

CDNs können Dir helfen die Performance Deiner Webseite zu beschleunigen. Da ihre Server oft näher am Besucher sind und auf neuster Technik basieren, können sie Bilder, Videos und weitere Medien-Dateien deutlich schneller ausliefern, als Dein Server das kann. Gute CDNs sorgen zudem noch für eine bessere Sicherheit. Empfehlenswert sind Cloudflare und Sukuri, die beide mit WP Rocket kompatibel sind.

24 Webhosting

Das Webhosting spielt ebenfalls eine bedeutende Rolle, wenn es um Performance geht. Wichtig sind, dass Dein Webhoster die wichtigsten Einstellungsmöglichkeiten wie PHP-Version und Opcache bietet (siehe oben!). Die Hardware des Webhosters ist ebenfalls wichtig. So wirst Du bei einem kostenlosen Webspace vermutlich nicht die gleiche Power haben, wie bei einem teuren Webserver. Finde das richtige Hosting für Deine Anwendung.

25 Fehlerprotokolle anschauen

Fehlerprotokolle können Aufschluss darüber geben, was in Deinem System schief läuft. Oft sorgen solche Fehler auch dafür, dass Deine Installation langsamer läuft und die Performance leidet. Überprüfe regelmäßig die Fehlerprotokolle Deines Webservers.

26 Kommentare

Kommentare sind unter Umständen Performance-Bremsen. Damit Du das Optimum aus Kommentaren holst, haben wir dieses Kapitel geschrieben.

Falls Du keine Kommentare nutzt, solltest Du sie im WordPress-Backend deaktivieren. Um die Anzahl der geladenen Kommentare zu reduzieren, kannst Du die Kommentare in einer Pagination ausgeben. Beachte jedoch, dass Du dadurch weniger Content auf Deiner Webseite hast, was ggf. schlecht für Dein SEO ist. Kommentare kannst Du unter Umständen auch extern laden. Wir haben jedoch keine guten Erfahrungen mit Disqus und Co. gemacht. Eine vierte Möglichkeit ist es Kommentare per Lazy Loading zu laden. Dafür gibt es folgendes Plugin: Lazy Load for Comments

26.2 Gravatar deaktivieren

Die enge Verknüpfung von Gravatar und WordPress sorgt dafür, dass Kommentatoren- und Autorenbilder zu externen Requests führen. In den meisten Fällen ist das unnötig. Du solltest daher Avatare im WordPress-Backend deaktivieren.

27 WP-Cron deaktivieren

Der WP-Cronjob kann bei stark frequentierten Webseiten dazu führen, dass sehr viel Last auf der Webseite ist. Wir empfehlen daher den WP-Cron zu deaktivieren und die wp-cron.php per serverseitigem Cronjob zu starten. Teste ganz genau ob das wirklich funktioniert, da der Cronjob enorm wichtige Funktionen durchführt und nicht komplett deaktiviert werden sollte.

28 Dynamische Inhalte anzeigen

Was wäre, wenn Du Deinen Besuchern spezifische Inhalte auf Basis von Ereignissen oder gesammelten Daten (User Agent, Herkunft, Sprache, etc) anzeigen könntest? Das wäre grandios, da Du so Deinem Besucher so nicht nur bessere Inhalte anzeigen kannst. Du kannst auch noch unnötige Inhalte weglassen. Das ist besonders nützlich, wenn dadurch Bilder, Videos oder Gallerys nicht geladen werden müssen.