Anfang Juli 2020 habe ich beim Bonner WordPress-Meetup (natürlich online) einen Vortrag über die Grundlagen der Performance-Optimierung in WordPress gehalten. Für die Übersichtlichkeit habe ich den Blogbeitrag in zwei drei Teile aufgeteilt. Im ersten Teil geht es um die generelle Frage, was Performance eigentlich ist und mit welchen Tools sich diese bewerten lässt.
Was ist Peformance?
Das Wort Performance ist in Bezug auf Webseiten inzwischen zu einem Buzzword geworden. Des Öfteren hört und liest man immer wieder, mit „welchem Plugin man diese verbessern kann“. Scheinbar wird oft davon ausgegangen, dass die Performance eine Einstellung irgendwo in WordPress ist, die mal eben verbessert werden kann.
Performance ist keine Einstellung.
Aber das ist sie nicht: mit Performance ist tatsächlich eine Optimierung aller Komponenten einer Website gemeint. Bei einer WordPress-Website sind das folgende Komponenten: Hosting, WordPress selbst, Theme, Plugins und Inhalte. Je nach Ausrichtung der Website kann der Fokus auf den einzelnen Komponenten unterschiedlich liegen. Von daher ist es wichtig, sich nicht nur auf eine Komponente zu konzentrieren, sondern einen ganzheitlichen Blick auf die Website zu werfen. Und das nicht nur zu einem bestimmten Zeitpunkt, sondern regelmäßig.
Welche Performance-Tools gibt es?
Damit man überhaupt ein Gefühl dafür bekommt, wie gut oder auch schlecht die eigene Website in Sachen Performance ist, gibt es verschiedene Möglichkeiten. Je nachdem, wo man seine Website mit prüft, erhält man unterschiedlichste Informationen. Am besten ist es, sich die Ergebnisse mehrerer Online-Tools anzuschauen, um sich nicht nur von einem Tool abhängig zu machen und die Website im schlimmsten Fall falsch zu optimieren. Gerne meckern die Tools gewisse Dinge an, die aber eigentlich unnötig für den eigenen Fall sind. Bei meiner Website ist das z. B. oft der Hinweis, das gar kein CDN genutzt wird – was aber einfach keinen Sinn bei meiner Website macht.
Google PageSpeed Insights
Das vermutlich bekannteste Tool ist Google PageSpeed Insights. Das von Google bereitgestellte Tool zeigt die Performance der eingegebenen Website mit einem Ampelsystem an, jeweils für Mobil und für Desktop. Der errechnete Wert setzt sich aus mehreren Tests zusammen, die unterschiedlich gewichtet werden. Inzwischen kann PageSpeed Insights auch mehr oder weniger konkrete Tipps in Bezug auf WordPress liefern.
Durch den errechnten Score kann man den Eindruck gewinnen, dass eine Website nur dann gut performt, wenn sie den höchstmöglichen Wert erreicht. Das ist allerdings nicht der Fall. Es ist völlig ausreichend, wenn der Score für Mobil und Desktop sich zwischen 90 und 100 befindet. Manchmal ist es aber auch so, dass aufgrund des Setups mit Theme und Plugin gar kein Score von 90 erreicht werden kann, ohne die Seite grundlegend zu verändern. Dann sollte abgewägt werden, ob ein Relaunch der Seite unbedingt nötig ist oder die Seite soweit optimiert wird, wie es eben nur möglich ist.
Pingdom Website Speed Test
Ein weiteres Tool, welches ich für einen schnellen Überblick verwende, ist der Pingdom Website Speed Test. In der Übersicht oben werden ein errechneter Performance Score, die Größe der Seite, die Ladezeit und die Anzahl der ermittelten Requests angezeigt. Darunter folgt eine Übersicht an verschiedenen Vorschlägen mit eigenen Scores. Außerdem bietet Pingdom eine prozentuale Übersicht der Größe und der Requests von Content-Typen, z. B. HTML, CSS, JavaScript, Bilder und Schriftarten. Damit lässt sich schnell erkennen, ob z. B. bei JavaScript unverhältnismäßig viele Dateien geladen werden.
WebPageTest
Wer eine sehr detaillierte Aufstellung verschiedenster Daten zu seiner Website sehen möchte, der sollte sich WebPageTest anschauen. Für Laien kann dieses Tool allerdings etwas erschlagend wirken und nicht so einfach zu interpretieren sein, wie z. B. bei Google PageSpeed Insights oder dem Pingdom Website Speed Test. Ich schaue mir hier z. B. die Werte für die First Byte (auch als TTFB, Time to First Byte bekannt), Start Render und First Contentful Paint an. Der Content Breakdown ist ähnlich zum Pingdom Website Speed Test. Auch die Übersicht unter Domains ist immer spannend, um zu sehen, von welchen Domains externe Daten geladen werden.
GTMetrix
Ein weiteres einfaches Tool ist GTMetrix, das ebenfalls auf verschiedene Optimierungsmaßnahmen prüft. Ohne Login ist es allerdings nur möglich, einen Test vom Server in Vancouver, Kanada starten zu lassen. Daher wird der Wert für „Fully Loaded Time“ immer höher liegen als bei anderen Tools, bei denen man die Location näher an seinen aktuellen Standort anpassen kann. Wer sich einen kostenfreien Account anlegt, kann dann London, UK als Test-Server auswählen.
DevTools in Chrome und Firefox
Für einen Webentwickler unumgänglich sind natürlich die DevTools im Browser. Ich nutze überwiegend Firefox, gelegentlich auch Chrome, um mir die Netzwerkanalysen in den Browsern anzuschauen. Auf dem Mac erreicht man diese in Firefox über Extras -> Webentwickler -> Netzwerkanalyse oder mit dem Shortcut Cmd + Option + E. In Chrome kann man die DevTools über Anzeigen -> Entwickler -> Entwicklertools oder mit dem Shortcut Cmd + Option + I aufrufen. Danach muss man noch einmal den Network Tab auswählen. Hat man die zu prüfende Website schon offen, ist ein Reload der Seite nötig, um die Netzwerkanalyse durchzuführen. Ich setzte auch immer das Häckchen bei „Cache deaktivieren“, um ungenaue Ergebnisse durch Browser-Caching zu vermeiden.
Kann ich meine Website selbst optimieren?
Die Peformance-Tools sind in jedem Fall eine große Hilfe für die Einschätzung, in welchem Zustand sich eine Website befindet. Sie geben mehr oder weniger detailliert Auskunft über verschiedenste Kennzahlen und Ladezeiten. Dennoch helfen die besten Tools nichts, wenn man mit den Ergebnissen nicht wirklich was anzufangen weiß. Daher ist mit eines der wichtigsten Tools meiner Meinung nach die Erfahrung in der Webentwicklung. Wer versteht, was die Werte bedeuten, wie das Internet und Server funktionieren und wie auch die einzelnen Komponenten auf einer Website zusammenspielen, der kann eine Website auch selbst performant optimieren. Aber auch Website-Betreiber ohne große Fachkenntnisse können die eigene Website so konfigurieren, dass sie grundsätzlich performant läuft. Was es da bei einer WordPress-Website in Sachen Hosting, WordPress und Themes zu beachten gilt, darum wird es im zweiten Teil dieser Serie gehen.