WordPress Performance Optimierung – Werkzeuge zum Analysieren & Optimieren
Eine frische WordPress-Installation ist blitzschnell, wenn grob gesagt folgende Voraussetzungen erfüllt sind:
- Der Webserver / Webspace ist ausreichend schnell.
- Der Autor des verwendeten Themes hat seinen Code erfolgreiche auf Performance getrimmt.
- Alle verwendeten Plugins sind auf hohe Performance optimiert.
Doch ganze Sache wird rasch kompliziert, wenn einer der oben gelisteten Punkte nicht erfüllt ist, von allfälligen exotischen Problemchen und exotischen Server/Datenbank Kombinationen ganz zu schweigen. Erstes Mittel der Wahl zur Feststellung des Status Quo ist Googles PageSpeed Insights. Das Tool zeigt an, woran der schnellstmögliche Seitenaufbau scheitert und gibt Tipps fürs mobile und Desktop-Rendering.
Blitzartiger Seitenaufbau freut nicht nur die menschlichen Besucher, sondern auch den Google-Bot. Die Suchmaschine geht nämlich nicht zu Unrecht davon aus, dass niemand gerne länger wartet als unbedingt nötig und belohnt flinke Server mit einem Ranking Bonus. Die Geschwindigkeit Ihrer WordPress-Installation ist damit einer von etlichen Haupt-SEO-Faktoren, die über die Platzierung ihrer Links in Google Ergebnisseiten mitentscheiden.
Das Problem mit den gutgemeinten Optimierungsvorschlägen der PageSpeed Insights: Wer nicht äußert firm mit WordPress-php-Innereien ist, wird mit manchen der bemängelten Faktoren recht wenig anfangen können. Einige Vorschläge wie das Aktivieren der gzip-Komprimierung betreffen nämlich Servereinstellungen, andere wie die Festlegung von „Expired headers“ übernehmen gängige Cache-Plugins (siehe weiter unten) sowieso mit. Wenn hier was Gröberes im Argen liegt, dann muss gegebenenfalls ein Experte ran – die finden auch Hobbyblogger günstig in einschlägigen Facebook-Gruppen oder auf Fiverr.
Werkzeuge und Analysetools für ein schnelleres Blog
Linux-Distributionen stellen etliche Tools für Performance-Monitoring bereit. Ob Datenbank oder Server speicher-technisch unterernährt sind, verrät die Eingabe von „top“ via Kommandozeile. Möchte man WordPress genauer unter die Haube blicken, empfehlen sich diese drei Analyse-Plugins:
Website Speed Test von Dotcom-Monitor: Dieser kostenlose Speed-Test unterstützt nicht nur 24 Locations rund um den Erdball, sondern liefert neben den einzelnen Ladezeiten und den Mittelwert auch ein detailliertes Waterfall-Diagramm. Ebenfalls frei wählbar: der gewünschte Browser von IE über Safari bis Android. Die Pro-Version automatisiert die Testläufe.
► dotcom-tools.com/website-speed-test.aspx
Gmetrix for WordPress: Der Anbieter Gmetrix konzentriert sich ausschließlich auf Performance-Messungen und zeigt auf einen Blick verschiedene Parameter an, darunter auch die PageSpeed Insights und YSlow Wertungen. Zur Nutzung sind ein Gratis-Account sowie ein API Key erforderlich, kostenlos gibt’s maximal 20 Testläufe pro Tag.
► wordpress.org/plugins/gtmetrix-for-wordpress/
Query Monitor: Eigentlich ein Werkzeug für WordPress-Entwickler, das aber auch für die Performance-Optimierung wertvolle Daten liefert – sofern man weiß, wie man die viel Infos zu Datenbank-Abfragen, http Requests, WP Hooks und Co. interpretieren muss. Wichtig im zeitgenössischen Web: Query Monitor zeigt auch AJAx calls sowie REST API Requests und lässt sich auf einzelne Plugins einschränken.
► de.wordpress.org/plugins/query-monitor/
► wordpress.org/plugins/p3-profiler/
Die Sache mit den großen Bildern
Allerdings gibt es genügend Rädchen, an die auch technisch wenig versierte Blogger drehen können. Einen beträchtlichen Anteil der Ladezeit konsumieren Bilder und Multimedia-Inhalte. Weil 2016 Text-Only Blogs aber irgendwie nicht so mörderisch populär sind, lautet die logische Schlussfolgerung: Bilder dürfen so groß wie nötig und sollen so klein wie möglich sein.
Was keineswegs heißt, dass man Hochglanz-JPGs bis zur unschönen Verpixelung herunterkomprimieren soll. Wichtig sind passende Bildgrößen: Muss der Browser sich zuerst ein unnötig großes Bild holen und es dann für die Darstellung herunterskalieren, verschenkt man kostbare Ladezeit.
BEISPIEL: Wenn das eigene Template „featured images“, also das Hauptbild zu jedem Beitrag, in einer Größe von 600×400 Pixeln darstellt, sollte die eingebundenen Bilddateien auch exakt diese Maße haben. Die WordPress Medienverwaltung legt beim Bildupload automatisch verschiedene Größenvarianten an, über die Datei functions.php lassen sich zusätzliche Größen generieren. Bei Themes, die eine Einstellung der Breite ermöglichen, kann der Autor im Vorhinein natürlich nicht jede mögliche Größe definieren – hier Hand anzulegen lohnt auf jeden Fall.
Und dann sind da noch diverse Services, die versprechen, bereits verwendete Bilder on-the-fly durch optimierte Komprimierung weiter zu verkleinern. Wunder darf man von WP Smush & Co allerdings keine erwarten, wenn die Bilder bereits vor dem Upload in web-adäquat komprimiert wurden. Ich exportiere Bilder meist mittels Photoshops „Export for Web“ Tool – mehr als 1 bis 3 Prozent Platzersparnis sind dann mit Gratis-Werkzeugen nicht mehr drin. Aber erstens macht Kleinvieh bekanntlich auch Mist und zweitens liegt ja vielleicht doch noch das eine oder andere Riesenbaby im Upload-Ordner.
Welches Caching Plugin für WordPress?
Zu schnell gibt’s nicht: Selbst die flinksten Blogs profitieren zusätzlich von einem Caching-Plugin. Die verfügbaren Lösungen unterscheiden sich in Sachen Funktionsumfang und Komplexität der Konfiguration ganz gewaltig. Unter den folgend gelisteten vier Optionen sollte für jeden Webmaster etwas Passendes dabei sein:
- Simple Cache: Ein recht neues Caching Plugin von Taylor Lovett, das sich als „activate and forget“ Lösung speziell an Neulinge richtet. Umfangreiche Optionen sucht man hier vergebens, nach der Aktivierung verrichtet das Script seine Arbeit, wahlweise mit oder ohne Object Caching via Batcache oder Redis.
► wordpress.org/plugins/simple-cache/ - WP Super Cache: Dieses Plugin generiert statische HTML-Files für alle nicht eingeloggten Nutzer. Die kann der Webserver wesentlich rascher ausliefern, da „Umwege“ über php Skripte und Datenbank-Zugriffe entfallen.
► wordpress.org/plugins/wp-super-cache/ - W3 Total Cache: Das Funktionsmonster unter den Caching-Plugins. Nennt sich
selbst nicht Plugin, sondern Framework und inkludiert von CDNs und Minificaction so ziemlich jede denkbare Caching-Option. Die optimale Konfiguration fürs eigene Blog zu finden, erfordert Geduld und Bereitschaft zum ausgiebigen Testen.
► wordpress.org/plugins/w3-total-cache/ - WP Rocket: Für 39 Euro pro Jahr und Domain bekommt man hier die meiner Ansicht nach perfekte Mischung aus optimalem Funktionsumfang und flexibler Konfiguration. Inkludiert Profi-Features, die kein Konkurrent bieten kann wie DNS Prefetching, verzögertes Laden von Javasripts und Cache-Befüllung im Vorhinein.
► wp-rocket.me/de/
Eine Alternative bietet serverseitiges Caching. Wer vollen Rootzugriff auf den Hosting-Server hat, kann mit dem legendären Varnish Cache jedes CMS, also auch WordPress, zum Laufen bringen. Eine gewisse Trittsicherheit im Umgang mit der Kommandozeile ist dafür freilich unabdingbar.
Weitere Plugins & Services, die WordPress beschleunigen
Neben den genannten Werkzeugen gibt es noch weitere Möglichkeiten, Bits und Bytes schneller übers Netz zu schicken. Performance-Optimierung ist freilich ein recht komplexes Thema, weshalb die hier vorgestellten Tools starke Gemeinsamkeit mit Habanero-Chilipulver aufweisen: In den falschen Händen werden sie zu einer furchtbaren Waffe und machen im schlimmsten Fall die Mahlzeit ungenießbar.
- Adaptive Images for WordPress: Mobilweiche für Bilder: Anhand einstellbarer Bildschirm-Auflösungs-Grenzwerte schickt dieses Plugins Handys und Tablets kleinere Bildversionen und beschleunigt so den Aufbau der mobilen Page. Auf die Desktop-Variante hat das Plugin keinerlei Auswirkungen.
► wordpress.org/plugins/adaptive-images/ - BWP Minify Pro: Die „Minification“ von Javascript- und CSS Dateien sieht Google recht gerne. Dabei werden sämtlichen unnötigen Zeichen (mehrfache Leerzeichen, Line Breaks etc.) aus den betreffenden Dateien entfernt und gegebenenfalls mehrere Files zu einer Datei zusammengefasst. Allerdings überstehen erstens nicht alle Scripte diese Behandlung und zweitens haben manche Caching-Plugins Minifizierungs-Funktionen bereits eingebaut.
► wordpress.org/plugins/bwp-minify/ - Cloudflare: Die Kombination aus CDN (Content Delivery Network) und WordPress-Firewall verlangt tiefe Eingriffe in die Server-Konfiguration: Wer Cloudflare nutzen möchte, muss deren Nameserver verwenden und routet zukünftig alle Zugriffe über CF Server. Primär dient das der Abwehr diverser Attacken, allerdings verlangen die elaborierteren Schutzmechanismen einen bezahlten Pro-Account. Wer Cloudflare gratis nutzt, erhält immerhin ein robustes gratis CDN, das statische Ressourcen in der Regel effizienter cached als der eigene Server.
► wordpress.org/plugins/cloudflare/
Case Study Social Share Buttons: Welche laden am schnellsten?
Um meine Überlegungen zum Thema Performance Optimierung zu unterstreichen, möchte ich Ihnen abschließend eine kurze Case Study präsentieren. Im Zuge meiner Serverübersiedlung hab ich unter anderem auch mein bisheriges Sharing-Plugin Easy Share Buttons einer Performance-Analyse unterzogen – mit teils ernüchternden Ergebnissen.
Alle vier Plugins, nämlich DP WordPress Article Social Share, Easy Social Share Buttons, Fixed WordPress Social Share Buttons sowie Social Warfare sind kostenpflichtig und behaupten von sich, blitzschnell zu sein. Bei der Analyse mit P3 zeigt sich aber sofort, dass sich die Ladezeiten um mehr als den Faktor 10 unterscheiden!
Hier nochmal alle vier Plugins auf einer Grafik – im echten WordPress Leben sollte man selbstverständlich nie mehrere Sharing Plugins parallel installieren, um Javascript-Konflikte zu vermeiden.
Man sieht auf einen Blick, dass sich die Easy Social Share Buttons mehr Ressourcen genehmigen, als Theme und alle anderen (!) Plugins zusammen, während Social Warfare als einziger Kandidat das Versprechen High-Speed tatsächlich einhält und quasi keinerlei Verzögerung verursacht. Für die Messungen habe ich mein Caching-Plugin (WP Rocket, what else?) abgedreht, in der Praxis wirkt sich ESSB also nicht ganz so drastisch aus wie hier dargestellt.
Dennoch: Ja, wir sprechen hier von Unterschieden im Zehntelsekundenbereich. Aber Google hätte gern, dass der Webserver innerhalb von 200ms antwortet, und Sharing Buttons sind in der Regel ja nicht das einzig aktive Plugin. Diese kleinen Unterschiede addieren sich und entscheiden eben in Summe über die „Endgeschwindigkeit“ der Seite.
Damit also nochmal zurück an den Anfang dieses Beitrags: Ein WordPress-erfahrener, kompetenter Hoster, ein sauber programmiertes Template und eine sorgfältige Plugin-Auswahl sind die Zutaten der Wahl für ein flinkes WordPress. In Kombination mit einer sinnvoll konfigurierten Caching-Lösung und optimierten Bildgrößen steht rasanten Ladezeiten nichts mehr im Weg.
Hallo Richie,
Danke für den super Artikel!
Eine Frage: Was hältst du von dem Theme Enfold bezüglich Punkt 2 „Theme auf erfolgreiche Performance getrimmt“ ?
Lg
Hallo Michael, ich bin da sehr zufrieden mit Enfold – wird auch von Release zu Release noch ein bisschen flotter. Ich verwend allerdings zusätzlich den Rocket Cache.