WordPress Performance Optimierung – Tipps, Tricks & Tools

 

Die Website Performance hat sich über die letzten Jahre zu einem der wichtigsten Erfolgsfaktoren im Online Business entwickelt. In unserer schnelllebigen Zeit haben die Website Besucher immer weniger Geduld, darauf zu warten, bis sich die aufgerufene Webseite aufgebaut hat. Diese Ungeduld kann zu niedriger Conversion, Kaufabbrüchen oder negativen SEO Signalen führen.

 

Deshalb gehört die Performance Optimierung einer WordPress Website bzw. einer Website im Allgemeinen auf die ToDo-Liste aller Website Betreiber. In diesem Artikel findest du Tipps und Empfehlungen, wie du einen Performance Test durchführen und wie du die Ladezeiten deiner Website ganz einfach selbst verbessern kannst.

Inhaltsverzeichnis:

Wichtiger Hinweis:

Bevor du die Performance Optimierung auf deiner Website durchführst, solltest du unbedingt ein komplettes Backup deiner Seite erstellen. Allen WordPress Usern empfehlen wir für diese Aufgabe das Plugin UpdraftPlus.

Warum eine gute Website Performance wichtig ist

Direkter Ranking Faktor bei Google

Die Website Geschwindigkeit (Site Speed) ist ein direkter Ranking Faktor bei Google. Das bedeutet, dass der Google Algorithmus die Reaktionszeit, die eine Website benötigt, um eine Anfrage zu bearbeiten, auswertet und diesen Wert für die Berechnung der Website Positionierung in den Suchergebnissen berücksichtigt. Seit Juli 2018 ist die Website Geschwindigkeit auch ein Rankingfaktor für die mobile Suche.

Positive User Signals

Schnelle Ladezeiten führen in der Regel zu einer besseren User Experience und damit zu zufriedenen Usern. Die zufriedenen User senden positive User Signals indem sie länger auf der Webseite verweilen, andere Unterseiten der gleichen Web-Präsenz aufrufen und nicht wieder zu der Suchergebnisliste zurückkehren. Neben der technischen Umsetzung sind die User Signals für Google die wichtigsten Faktoren, um das Ranking einer Website zu bestimmen.

Besseres Crawling

Je schneller die Ladezeit einer Website, desto höher ist die Wahrscheinlichkeit, dass sie öfters und genauer gecrawlt wird. Das ist wichtig, um eine möglichst genaue Indexierung deiner Seite zu gewährleisten. Schließlich sollte das Ziel eines jeden Website-Betreibers sein, dass seine Seite richtig indexiert wird und die neuen Inhalte möglichst schnell den Google-Anwendern zur Verfügung stehen.

Kostenlose Tools für einen Website Performance Test

GTmetrix

Eins der bekanntesten Tools, um die Performance einer Website zu analysieren, ist GTmetrix.com. Das Web-Tool überzeugt durch eine angenehme Oberfläche und liefert zu jedem Checkpunkt weiterführende Erläuterungen sowie Optimierungsempfehlungen. Indem man mit der Maus über die kleinen Pfeile neben den Kennzahlen fährt, erhält man als Orientierung den Durchschnittswert aller getesteten Websites. Das Tool verwendet zwar 7 verschiedene Server Standorte, es ist jedoch leider nicht möglich, diese zu verändern. Gerade für Webseiten mit einer deutschen Zielgruppe sind die Ladezeiten nicht wirklich aussagekräftig, da kein Server-Standort in Deutschland zur Verfügung steht. Für eine Vorher/Nachher-Aufnahme oder einen Vergleich mit einem Wettbewerber eignet sich die Kennzahl „Fully Loaded Time“ sehr wohl auch für deutschsprachige Websites.

Website Performance Test und Analyse mit dem Tool GTmetrix
Website Performance Test und Analyse mit dem Tool GTmetrix

Da die Chancen groß sind, dass auch du die Performance deiner WordPress Website mit GTmetrix analysierst, zeigen wir dir in diesem Artikel welche GTmetrix Kennzahlen du mit der jeweiligen Optimierungsempfehlung verbessern kannst. Wir werden deshalb bei einigen Optimierungsvorschlägen Bezug auf die Checkpunkte von GTmetrix nehmen.

Pingdom

Ein weiteres sehr beliebtes Web-Tool, um den Website Speed zu testen, ist Pingdom. Ähnlich wie bei GTmetrix listet es alle Ressourcen in einen Waterfall Chart auf, jedoch mit zusätzlichen Filtermöglichkeiten. Ein großer Vorteil dieses Tools ist die Auswahl an verschiedenen Server Standorten. So erhält man für die deutschen Websites bei der Auswahl „Europe – Germany – Frankfurt“ Ladezeiten, die näher an der Realität liegen.

 

Im Gegensatz zu GTmetrix unterstützt Pingdom leider nicht das HTTP/2 Protokoll.

WebPageTest

Das Tool WebPageTest ist nicht wirklich benutzerfreundlich, dafür bietet es einige zusätzliche Funktionen für den Website Performance Test an. Darunter fallen Content Blocking, Vergleich erster Aufruf / wiederholter Aufruf, HTTP/2 Testing usw. Das Web-Tool punktet auch bei der Server-Auswahl: Die Tester können zwischen 50 verschiedenen Standorten wählen.

Google PageSpeed Insights

Wie stark der PageSpeed Score von GTmetrix angepasst ist, merkt man, wenn man seine URL bei dem Tool Google PageSpeed Insights eingibt. Nicht selten wird dem Tester hier ein komplett anderer Score angezeigt. Dieser weicht nach den letzten Updates zum Teil deutlich von GTmetrix und Pingdom ab und führt in der Regel zu einem schlechteren Ergebnis. Aber man sollte ohnehin nicht dem Score zu viel Aufmerksamkeit schenken, unabhängig davon um welches Tool es sich handelt und sich viel mehr auf die Optimierungsempfehlungen konzentrieren.

 

Leider unterstützt Google PageSpeed weder HTTP/2 noch bietet es eine Information, mit welchem Server-Standort der Test durchgeführt wurde.

WordPress Performance Optimierung auf dem Server

Der Server, auf dem die Website Ressourcen liegen, spielt eine entscheidende Rolle, wenn es darum geht, einen guten Score bei GTmetrix und anderen Test-Tools zu erreichen, der schnelle Ladezeiten der eigenen Website widerspiegelt.

HTTP/2

Mit dem HTTP/2 Protokoll können im Vergleich zum HTTP1.1 mehrere Anfragen gleichzeitig vom Server bearbeitet werden. Im Zuge deiner Optimierungsmaßnahmen kannst du mit diesem Protokoll sogar darauf verzichten, die Javascript- und CSS-Dateien zusammenzufassen. Warum es trotzdem Sinn machen kann, auch bei einen HTTP/2 Protokoll die Dateien zusammenzufassen, erfährst du weiter unten im Beitrag.

 

Ein weiterer Vorteil des HTTP/2-Protokolls ist, dass Dateien bereits vorgeladen werden, bevor sie vom User angefordert wurden. Die Folge davon ist eine schnellere Reaktionsfähigkeit des Servers.

Time To First Byte (TTFB)

Time To First Byte beschreibt die Zeit, die vergeht, bis das erste Byte vom Server zum Client (Browser) übertragen wurde. Bei manchen Billig-Hostern kann diese Zeit bereits über 2 Sekunden betragen. Das bedeutet, egal welche Bemühungen du bei der Performance Optimierung vornimmst, die Ladezeit deiner Website wird nie schneller als 2 Sekunden sein. Diesen Flaschenhals solltest du unbedingt durch die Wahl des richtigen Hosting Anbieters vermeiden.

 

Mit dem Tool bytecheck kannst du testen, wie lange es dauert bis das erste Byte deiner Website im Browser ankommt.

 

Time To First Byte Check mit bytecheck
Time To First Byte Test durchführen mit dem Tool bytecheck

PHP Version 7 und höher

Mit der PHP Version 7 und höher lassen sich im Vergleich zu der vorherigen Version (5.6) doppelt so viele Anfragen pro Sekunde bearbeiten.

 

Des Weiteren wird die PHP Version 5.6 seit Dezember 2018 von den Hostern nicht mehr unterstützt bzw. nur gegen kostenpflichtigen Support angeboten. Somit solltest du nicht nur aus Performance Gründen auf die PHP Version 7 wechseln.

 

Falls dein WordPress Theme nicht mit der neuen Version kompatibel ist, solltest du den Theme Entwickler kontaktieren bzw. ein Redesign deiner Website mit einem neuen Theme in Betracht ziehen.

Caching aktivieren

Generell kann man zwischen Server und Browser Caching unterscheiden.

Server Caching

Wenn du auf der Suche nach einem neuen Laptop bist, sind zwei der entscheidenden Kaufkriterien der Arbeitsspeicher (RAM) und die Festplatten-Kapazität. Vereinfacht gesagt entspricht der Cache auf dem Server dem Arbeitsspeicher, während der Platz auf dem Server, wo z. B. die WordPress Dateien liegen, die Festplatte repräsentiert.

 

Solltest du eine WordPress Website betreiben, kannst du die Caching Funktion sowie auch viele der in diesem Artikel vorgestellten Optimierungsmaßnahmen bequem und einfach mit Hilfe von WordPress Plugins umsetzen. Das führende WordPress Caching Plugin ist WP Rocket. Auf unserem Blog findest du einen Artikel, der die verschiedenen Einstellungsoptionen des tollen Plugins beschreibt.

 

WordPress Performance Optimierung mit WP Rocket
Übersicht über die wichtigsten Einstellungen und Funktionen von WP Rocket

 

Es gibt aber auch kostenlose Alternativen, wie z. B. WP Super Cache oder WP Fastest Cache.

Leverage Browser Caching / Expires Header

Auch im Browser werden die einzelnen Seiten einer Website im Cache abgelegt. Jedes Mal wenn ein User eine Seite durch die Eingabe der URL auffordert, fragt der Browser beim Server nach, ob sich diese spezielle Ressource seit dem letzten Besuch des Users geändert hat. Falls das nicht der Fall ist, wird dem User die im Cache gespeicherte Seite angezeigt. Das Ergebnis ist eine schnellere Ladezeit und eine positive User Experience.

 

Noch schnellere Ladezeiten erreichst du, wenn dein Browser die initiale Abfrage an den Server gar nicht erst senden muss. Hier kommt die Optimierungsmaßnahme „Expires Header“ ins Spiel. Damit sagst du deinem Browser, wie lange er die gespeicherte Version einer Webseite, ohne einen vorherigen Abgleich mit dem Server, ausliefern kann. Da sich manche Ressourcen (z. B. CSS-Dateien) häufiger ändern als andere (z. B. Bilder), gehört es zum Best Practice das Ablaufdatum pro Datei-Typ festzulegen.

 

Hier siehst du ein Beispiel-Code für Expires Headers, der bei einer WordPress Website in die .htaccess Datei eingetragen wird. Solltest du diesen Code ebenfalls eintragen wollen, erstelle unbedingt vorher ein Backup deiner .htaccess Datei.

Code Beispiel für leverage browser caching und expires headers
Code Beispiel für Leverage Browser Caching und Expires Header – Quelle: GTmetrix
Optimierungspotentiale laut GTmetrix:
  • Leverage Browser Caching (PageSpeed)
  • Add Expires Header (YSlow)

GZIP Komprimierung

Bei der Gzip Komprimierung werden die Dateien, die vom Server zum Browser übertragen werden, komprimiert und dadurch die Dateigröße reduziert. Die Folge ist eine kürzere Übertragungsdauer der Inhalte, was wiederum zu einer schnelleren Ladezeit der Website führt.

 

Der erforderliche Quellcode für die Gzip Komprimierung kann entweder manuell in die .htaccess-Datei eingetragen oder mit einem Plugin umgesetzt werden. Die dafür notwendigen Einstellungen bietet das bereits erwähnte WP Fastest Cache oder das ebenfalls kostenlose W3 Total Cache Plugin an. WP Rocket bietet keine Gzip-Einstellung an, da der erforderliche Code automatisch nach der Aktivierung in der .htaccess Datei eingetragen wird.

 

Für alle nicht WP Rocket User stellt GTmetrix ebenfalls den passenden Code für Gzip Komprimierung zur Verfügung.

 

Es ist darauf zu achten, dass die Gzip Komprimierung auch auf dem Server vorgenommen werden muss, indem man das Apache Modul mod_deflate aktiviert. Falls du diese Einstellung auf dem Server nicht vornehmen kannst, solltest du deinen Hosting Anbieter kontaktieren.

 

Mit dem Tool Varvy kannst du überprüfen, ob die Gzip Komprimierung auf deiner Website richtig umgesetzt wurde.

Optimierungspotentiale laut GTmetrix:
  • Enable gzip compression (PageSpeed)
  • Compress components with gzip (YSlow)

Content Delivery Network (CDN) verwenden

Bei einem Content Delivery Network wird deine Website in einem globalen Server-Netzwerk zwischengespeichert. Dadurch lassen sich die Antwortzeiten des Servers verkürzen, da die Daten nun von einem Server aus dem Netzwerk des Anbieters heruntergeladen werden, welcher dem User am nächsten steht.

 

Da der Einsatz eines Content Delivery Netzwerks mit zusätzlichen Kosten verbunden ist, ist die Verwendung nur sinnvoll, wenn dein Online Angebot internationale Kunden anspricht, die auf der ganzen Welt verteilt sind.

Optimierungspotentiale laut GTmetrix:
  • Use a Content Delivery Network (CDN) (YSlow)

301-Weiterleitungen vermeiden

Jede Umleitung kostet Zeit. Das kennen wir schon aus dem Straßenverkehr. Auf einer Website ist es leider nicht anders. Deswegen solltest du 301-Weiterleitungen so selten wie möglich einsetzen. Das steht allerdings im Widerspruch zu der Suchmaschinenoptimierung einer Website. Denn immer wenn du eine URL änderst, solltest du eine 301 Weiterleitung einrichten, um 404-Seiten bzw. Duplicate Content zu vermeiden. Um die Anforderungen sowohl aus der SEO- als auch aus der Performance-Sicht zu erfüllen, solltest du immer wenn du deine Inhalte anpasst, die dazugehörige URL beibehalten oder nur in Ausnahmefällen anpassen.

 

Genauso wichtig ist die Festlegung einer URL-Variante (mit oder ohne www) sowie die richtige Umleitung auf die https-Version der Website. Wenn deine Website z. B. schon auf https umgestellt wurde, solltest du auch in deiner E-Mail Signatur, deinen Social Media Kanälen etc. die https-Variante deiner Website angeben, um deinen Besuchern eine unnötige Weiterleitung zu ersparen.

Folgendes solltest du unbedingt vermeiden:

http://www.deine-domain.de (User Eingabe) -> http://deine-domain.de (1. Weiterleitung) -> https://deine-domain.de (2. Weiterleitung)

Optimierungspotentiale laut GTmetrix:
  • Avoid URL redirects (YSlow)
  • Minimize redirects (PageSpeed)
  • Avoid landing page redirects (PageSpeed)

 

Der Beitrag Warum schlechtes Hosting deinem Business schaden kann, zeigt noch weitere wichtige Punkte, die du bei der Auswahl deines Hosting Anbieters beachten solltest, um eine hervorragende Basis für die Performance deiner Website zu schaffen.

Content Optimierung

So wenig WordPress Plugins wie möglich verwenden

Bevor man ein WordPress Plugin nach dem anderen installiert, sollte man sich die Frage stellen, ob die gewünschte Funktion unbedingt erforderlich ist und das Plugin den Geschwindigkeitsverlust rechtfertigt. Evtl. kann auch ein ähnliches Design-Ergebnis mit weniger Plugins oder mit ein paar Zeilen Code in der functions.php bzw. style.css Datei umgesetzt werden.

 

Neben dem Geschwindigkeitsverlust erhöhen zu viele Plugins sowohl das Sicherheitsrisiko als auch den Wartungsaufwand. Es besteht auch die Gefahr, dass durch Plugins Skripte hinzugefügt werden, die bereits im Theme oder in den installierten Plugins enthalten sind. Prominente Beispiel-Dateien, die gerne häufiger auf einer Website vorkommen, sind die gleichen Google Fonts oder die Icons von FontAwesome. Leider gehen viele Plugin-Entwickler den einfachen Weg und binden die Library ohne eine vorherige Prüfung, ob diese Library bereits zur Verfügung steht, ein. Dadurch kann es vorkommen, dass die gleichen Ressourcen von unterschiedlichen URLs geladen werden.

Optimierungspotentiale laut GTmetrix:
  • Serve resources from a consistent URL (PageSpeed)

Die schnellsten WordPress Themes

Die Wahl des richtigen WordPress Themes kann ebenfalls Auswirkungen auf die Performance deiner Website haben. Viele Website Betreiber machen leider den Fehler, sich für ein sogenanntes „Multi Purpose“-Theme zu entscheiden. Viele solcher Themes haben einen integrierten zum Teil langsamen Page Builder und unzählige Einstellungsoptionen, die eine Website langsam machen. Die Optimierungsmaßnahmen hinsichtlich Performance sind mit einem solchen Theme wesentlich schwieriger.

 

Auf dem WPConsultant Blog findest du einen Artikel über die schnellsten Elementor Themes. Auch wenn du nicht den führenden Page Builder verwendest, kannst du z. B. die Themes GeneratePress oder Astra verwenden, um eine gute Basis für schnelle Ladezeiten deiner Website zu schaffen.

Astra Theme gehört zu den schnellsten WordPress Themes
Astra Theme gehört zu den schnellsten WordPress Themes

Tipp für alle Elementor User

Bei den meisten Addons für Elementor lassen sich die Widgets, die nicht benötigt werden, bequem durch das Anklicken einer Checkbox ausschalten. Diese Funktion bieten z. B. Element Pack, Ultimate Addons for Elementor und JetPlugins, um nur drei zu nennen. Da manche Widgets zusätzliche Javascript- und CSS-Dateien benötigen, macht es Sinn nur die Dateien zu laden, die auch unbedingt erforderlich sind.

Bilder Optimierung

Die Bilder auf einer Website gehören natürlich auch zu dem Content sind aber für den größten Teil der gesamten Ladezeit einer Seite verantwortlich. Bei der Performance Optimierung solltest du deshalb den Fokus auf die Bildoptimierung legen. Alle WordPress User können auch hier auf die Hilfe von Plugins zählen. Für alle anderen gibt es auch die Möglichkeit, die Bilder manuell zu optimieren.

Bilder optimieren ohne WordPress Plugin

Bei der manuellen Bildoptimierung sind zwei Schritte erforderlich:

1. Bilder skalieren

Zuerst sollest du die Bilder auf die richtige Größe skalieren. Vielleicht fragst du dich gerade: Was ist die richtige Größe?

Bei den folgenden Bildgrößen handelt es sich nur um Orientierungswerte. Das Ergebnis sollte immer individuell überprüft und evtl. die Skalierung angepasst werden. Erstelle deshalb immer eine Kopie des Originalbildes, um notfalls zum Ausgangspunkt zurückkehren zu können.

Empfohlene Bildgrößen im Webdesign:
  • Volle Breite 100%: 1440 px
  • Volle Breite Boxed Layout: 1280 px
  • 2-spaltiges Layout: 640 px
  • 4-spaltiges Layout: 320 px

 

Bei bestimmten Arten von Websites (z. B. für Fotografen) könnte auch eine höhere Auflösung sinnvoll sein.

2. Bilder komprimieren

Sobald deine Bilder die richtigen Abmessungen besitzen, kannst du zum nächsten Schritt übergehen – die Komprimierung der Bilder. Dafür kannst du das kostenlose Web-Tool tinypng.com verwenden, mit dem man 20 Bilder pro Tag kostenlos komprimieren kann.

Bilder optimieren mit WordPress Plugin

Warum sollte man für die Bildoptimierung ein WordPress Plugin benutzen? Viele Plugins schaden doch der Performance und ein Plugin für die Bildoptimierung ist auf jeden Fall eins, auf das man verzichten kann. Oder etwa nicht?

Zum einen spart natürlich ein Plugin eine Menge Zeit, weil die manuelle Bildskalierung und -komprimierung wegfällt. Diese Aufgaben kann z. B. die Erweiterung Shortpixel für dich übernehmen.

Bilder optimieren in WordPress mit dem Plugin Shortpixel
Bilder optimieren in WordPress mit dem Plugin Shortpixel

Der wahre Grund, der aus Performance Sicht für die Bildoptimierung mit der Plugin-Methode spricht, ist folgender: Wenn ein Bild hochgeladen wird, erstellt WordPress automatisch 3 skalierte Varianten des Originalbildes: Vorschaubild, Mittel und Groß. Bei manchen Themes wie z. B. dem OceanWP Theme, werden sogar bis zu 8 weitere Versionen eines Bildes erstellt. Diese Varianten werden zwar nie größer sein als dein Originalbild, sind aber leider nicht optimiert. Hier kommt das Plugin ins Spiel. Mit Hilfe von Shortpixel kannst du alle Versionen deines Bildes optimieren lassen.

 

Das zuvor vorgestellte Web-Tool tinypng.com bietet ebenfalls ein passendes WordPress Plugin an: Compress JPEG & PNG images. Trotz weniger Einstellungsmöglichkeiten ist das Plugin eine vergleichbare Alternative zu Shortpixel.

Lazy Load

Bei lazy load werden nur die Bilder (und Videos) geladen, die im sichtbaren Bereich (above the fold) und knapp darunter liegen. Erst wenn der User nach unten scrollt werden die weiteren Bilder, die sich weiter unten auf der Seite befinden, nachgeladen. Das Ergebnis ist eine schnellere Ladezeit, weil nur die Komponenten geladen werden, die für die Darstellung im Sichtbereich benötigt werden. Diese Optimierungsmethode sollte man aber mit Vorsicht genießen.

 

Denn im Falle einer schlechten Internetverbindung, werden die Bilder verzögert nachgeladen, was die User Experience negativ beeinflusst. Und wozu das führen kann, haben wir am Anfang des Artikels bereits erwähnt. Ebenfalls aus SEO Sicht besteht die Gefahr, dass die Suchmaschinen die nachgeladenen Inhalte nicht richtig indexieren. Obwohl Google immer besser wird, um solche „versteckten“ Inhalte zu indexieren, solltest du auf Nummer sicher gehen und die wichtigen Keywords bei den Alt-Tags der initial geladenen Bildern verwenden.

Image Overlay für Videos

Endlich mal eine Maßnahme, die sowohl aus der Performance Sicht als auch aus der DSGVO Sicht sinnvoll ist. Denn wenn du ein Overlay Bild für YouTube Videos verwendest, wird beim Laden der Seite keine Verbindung zu den YouTube bzw. Google Servern aufgebaut. Das macht nicht nur die Datenschützer glücklich, es wirkt sich auch positiv auf die Ladezeiten aus. Erstelle einfach einen Screenshot von dem Video Vorschaubild und binde es anstelle des Videos auf deiner Seite ein. Mit dieser Maßnahme werden ca. 12 Ressourcen weniger geladen. Einziger Nachteil: Wenn du deine Besucher zu YouTube weiterleitest, könnte sich die Absprungrate auf deiner Website erhöhen.

Optimierungspotentiale laut GTmetrix:
  • Optimize images (PageSpeed)
  • Make fewer HTTP requests (YSlow)

Reduzieren der Dateigröße und Anfragen an den Server

HTML-, JS- und CSS-Dateien minimieren

Je kleiner die Dateien sind, die vom Server zum Browser gesendet werden, desto kürzer ist die Übertragungszeit und desto schneller die Website Ladezeit. Um möglichst kurze Übertragungsraten zu erreichen, solltest du die HTML-Dokumente die Javascript-Dateien und die Stylesheets (CSS) minimieren.

 

Vielleicht geht dir gerade die Frage durch den Kopf: Wie unterscheidet sich die Minimierung von HTML-, JS- und CSS Dateien von der Gzip Komprimierung? Beide Optimierungsmethoden reduzieren die Dateigröße, sie machen das aber auf unterschiedliche Weise. Bei der Minimierung werden alle Kommentare, Leerzeichen, Zeilenumbrüche und andere Textzeichen, die nicht für Ausführung des Quellcodes erforderlich sind, aus den Dateien entfernt. Während bei der Komprimierung die sich wiederholenden Textbausteine durch einen kürzeren String ersetzt werden und somit die Gesamtanzahl der Textzeichen um ein Vielfaches verringert wird.

 

Auch bei dem Minimierungsvorgang können WordPress User mit Hilfe von Plugins Zeit sparen. Falls du keine Caching Plugins, wie WP Fastest Cache, W3 Total Cache oder WP Rocket im Einsatz hast, kannst du auch die Plugins Autopimize oder Fast Velocity Minify verwenden, um die Dateien zu minimieren. Die Dateigrößen lassen sich aber auch mit Web-Tools wie Minify manuell reduzieren. Selbst GTmetrix gibt als Optimierungsvorschlag gleich die minimierte Version der entsprechenden Datei an („See optimized version“). Nach der manuellen Minimierung der Dateien müssen diese in das entsprechende HTML-Dokument eingebunden werden.

Optimierungspotentiale laut GTmetrix:
  • Minify HTML (PageSpeed)
  • Minify JavaScript (PageSpeed)
  • Minify CSS (PageSpeed)
  • Minify JavaScript and CSS (YSlow)

JS- und CSS-Dateien zusammenfassen

Wie zuvor erwähnt, hat die Optimierungsmaßnahme die JS- und CSS-Dateien zusammenzufassen, bei der Verwendung von HTTP/2 keine hohe Priorität mehr. Es kann jedoch durchaus Sinn machen, die Dateien trotzdem zusammenzuführen. Dann nämlich, wenn die Performance Optimierung zu deinem Angebot zählt und die Performance ein wichtiges Verkaufsargument für dein Produkt ist. Das trifft zum größten Teil auf alle Web-Agenturen, Webdesinger und Hosting Anbieter zu. Da leider die Performance Tools Pingdom und Google PageSpeed nicht berücksichtigen, über welches Protokoll eine Website ausgeliefert wird, ist die Maßnahme, die Skirpte und CSS-Dateien zusammenzufassen eine reine Kosmetik-Korrektur, die jedoch hilft, das Testergebnis positiver zu gestalten.

 

Ein weiterer Grund der dafür spricht, die JS- und CSS-Dateien trotz HTTP/2 zusammenzufassen, ist die Tatsache, dass noch nicht alle Browser(-Versionen) das neue Protokoll unterstützen. Es müssen aber sowohl der Server als auch der Browser über einen HTTP/2-Support verfügen, um eine Website über das neue Protokoll auszuliefern. Anderenfalls wird die Website weiterhin über HTTP1.1 ausgespielt.

WordPress Performance Optimierung im Adminbereich

Viele der Optimierungsvorschläge aus diesem Beitrag tragen auch zu einer besseren Performance im WordPress Adminbereich bei. Allen voran ein starker Hoster mit den oben erwähnten Vorteilen, wie neueste PHP-Version oder optimales Caching können die Inhaltserstellung im WordPress Backend erheblich beschleunigen. Darüber hinaus lassen sich die Ladezeiten im Adminbereich mit den folgenden Punkten verkürzen.

Langsame Plugins eliminieren

Um langsame Plugins ausfindig zu machen, muss man nicht unbedingt ein weiteres Plugin installieren. Es reicht schon ein Blick auf den Waterfall Chart bei GTmetrix. Dort kannst du die verschiedenen Ressourcen der einzelnen Plugins mit der dazugehörigen Ladezeit aufaddieren. Damit erhältst du bereits einen guten Überblick, welche Plugins die Ladezeiten deiner Website verlangsamen.

GTmetrix Waterfall Chart - langsame Plugins identifizieren
GTmetrix Waterfall Chart – langsame Plugins identifizieren

Fahre einfach mit der Maus über die Dateien und schon wird dir die volle URL der Ressource mit dem Plugin Namen angezeigt.

 

Allerdings können diese Kennzahlen nicht 1:1 auf den Backend Bereich übertragen werden. Bestimmte Dateien eines Plugins, die nur im Adminbereich benötigt werden, sollen auch nur dort geladen werden, zumindest wenn der Plugin Entwickler seinen Job richtig gemacht hat. Deshalb empfiehlt es sich das Plugin Query Monitor zu verwenden, um die langsam ladenden Plugins im Adminbereich ausfindig zu machen.

 

Sobald du die langsamen Plugins identifiziert hast, kannst du sie entweder entfernen, falls du auf die Funktion verzichten kannst oder sie durch nicht so ressourcen-hungrige Alternativen ersetzen.

Datenbank regelmäßig aufräumen

Wenn du bereits WP Rocket verwendest, brauchst du kein zusätzliches Plugin, um die Datenbank deiner WordPress Website aufzuräumen. Die nötige Einstellung findest du unter WP Rocket > Einstellungen > Datenbank. Solltest du das führende Caching Plugin nicht im Einsatz haben, empfehlen wir dir das Plugin WP-Optimize. Damit lassen sich nicht benötigte Einträge, wie Revisionsstände, gelöschte Elemente im Papierkorb etc. entfernen, was den Prozess, Daten aus der Datenbank zu holen, insgesamt beschleunigt.

WP-Optimize - WordPress Datenbank optimieren für bessere Performance
WP-Optimize – WordPress Datenbank optimieren für bessere Performance

Standard Editor (Gutenberg) anstatt Page Builder

Zugegeben, die Empfehlung, lieber den Standard WordPress Editor Gutenberg als einen Page Builder zu verwenden, kostet uns ein wenig Überwindung. Zum einen ist Gutenberg noch lange nicht so weit, um sich mit einem richtigen Page Builder messen zu können. Zum anderen lässt sich mit einem guten Page Builder wie z. B. Elementor ein schöneres Design-Ergebnis in kürzerer Zeit erzielen. Im Hinblick auf die Ladezeiten ist jedoch jeder Page Builder ein Dorn im Performance Auge und das sowohl im Frontend als auch im Backend einer Website.

Wenn schon Page Builder, dann Elementor

Möchtest du trotz Performance-Einbußen nicht auf einen Page Builder verzichten? Dann solltest du lieber Beaver Builder oder Elementor anstatt WP Bakery (früher Visual Composer) oder Divi Builder verwenden. Die beiden letzteren produzieren mehr überflüssigen Code und verlangsamen deine Webseite zusätzlich.

Standard Theme aktivieren

Wenn alle Optimierungsvorschläge versagen, kannst du ein Standard WordPress Theme aktivieren (zurzeit Twenty Nineteen). Damit lassen sich mögliche Ladezeitverzögerungen ausschließen, die durch das Theme verursacht werden. Wenn du damit das Theme als Performance-Bremse identifiziert hast, dann schlagen wir dir vor, ein schnelleres Theme wie die zuvor erwähnten Astra oder GeneratePress einzusetzen.

Extra Plugin-Tipp & Performance Formel

Zum Schluss haben wir noch einen Plugin-Tipp für dich: Asset CleanUp: Page Speed Booster! Mit diesem Plugin kannst du die Dateien bestimmen, welche auf einer Unterseite deiner Web-Präsenz geladen und welche abgeschaltet werden sollen. Die Anwendung des Plugins erfordert ein wenig Hintergrundwissen, welche Skripte und CSS-Dateien für die unterschiedlichen Website Elemente erforderlich sind. Als Faustregel gilt: Schalte keine JS- und CSS-Dateien ab, wenn du dir nicht sicher bist, ob die Dateien auf der jeweiligen Seite benötigt werden oder nicht.

Asset CleanUp - WordPress Performance Booster für deine Website
Asset CleanUp – WordPress Performance Booster für deine Website

Das Plugin hilft dir dabei, nur die Dateien zu laden, die für das Aussehen und die Funkion der Einzelseite erforderlich sind und verkürzt somit die Ladezeiten der einzelnen Unterseiten.

Optimierungspotentiale laut GTmetrix:
  • Make fewer HTTP requests (YSlow)

 

Wir hoffen die Optimierungsempfehlungen helfen dir, deine Website schneller zu machen. Zu guter Letzt haben wir noch einen weiteren Tipp für alle, die nicht die Zeit auffinden können, alle genannten Optimierungsvorschläge umzusetzen.

Unsere persönliche Express-Formel für die Website Performance Optimierung:

Top Performance = Schnelles Hosting (am besten von HostPress :-)) + WP Rocket + Shortpixel

 

Mit diesem Setup deckst du ca. 90 % der möglichen Performance Optimierung ab.