Optimierung der Performance dank Perfmatters

Da ich immer auf der Jagd nach dem bestmöglichen Score bei Google PageSpeed Insights und GTmetrix bin, habe ich selbstverständlich schon sehr viel ausprobiert und optimiert. Ich glaube in keine Aufgabe oder in keinen Beitrag habe ich so viel Zeit und Nerven investiert.

Das Ergebnis der bisherigen Arbeit waren mit dem neuen Theme Blogar und 22 aktiven Plugins (inklusive Elementor und Contact Form 7) ein Score von ganz knapp über 50 im mobilen Bereich und bei Desktop Geräten ein Score von etwas über 90.

Im Desktop Bereich war ich eigentlich zufrieden, allerdings bin ich der Meinung, dass gerade bei Smartphones noch etwas möglich ist! Im letzten Schritt möchte ich das überall gut beworbene Premium-Plugin Perfmatters* testen.

Ich erhoffe mir, dass ich mindestens die gleichen Ergebnisse bekomme, mir dafür aber einiges an Arbeit und Plugins spare. So habe ich eigene Scripts in der functions.php Datei meines Themes und nutze die Plugins Disable WP REST API, Pre* Party Resource Hints, Swap Google Fonts Display und WP-Optimize – Clean, Compress, Cache für die jeweiligen Optimierungen.

Also, selbst wenn ich nur die gleichen Ergebnisse einfahre, so spare ich mir immerhin 3 weitere Plugins, welche dafür nötig waren. Eines noch bevor wir loslegen! Zum einen bin ich mir durchaus bewusst, dass der Elementor Page Builder nicht wirklich die beste Wahl für eine „100/100“ Website ist, allerdings war das in diesem Theme nicht anders möglich.

Zum anderen habe ich keine Möglichkeit Plugins einzusparen. 4 Plugins von 22 gehören schon zum Core des Themes. Dazu kommen die 4 Plugins, welche ich nun deaktiviert habe. Dann bleiben noch 14 Plugins und ich versichere euch, jedes der 14 Plugins wird regelmäßig genutzt und hat eine wichtige Funktion!

Was Perfmatters verspricht

Perfmatters verspricht die Lösung für deine Performance-Probleme zu sein. Die Liste der eigentlichen Funktionen ist unglaublich lang. So kannst du Emojis, Embeds, Dashicons, Windows Live Writer, RSD, WP Version und mehr Scripts und Links deaktivieren.

Nebenbei kannst du Self Pingbacks deaktivieren und diverse APIs wie die WP REST-API oder die Heartbeat-API einschränken. Du kannst über den Script Manager einzelne Scripts auf bestimmten Seiten ausschließen oder nur auf bestimmten Seiten laden lassen, womit du zum Beispiel verhindern kannst, dass Contact Form 7 auf jeder deiner WordPress Seiten geladen wird, obwohl es nur auf der Kontakt Seite notwendig wäre.

Nebenbei bietet dir Perfmatters eine ganze Reihe an Datenbank Optimierungen und lässt dich Google Fonts lokal hosten oder ganz aus deiner WordPress-Website entfernen. Es gibt noch weitere Optimierungsoptionen, welche ich jetzt hier nicht anspreche, weil es sonst einfach zu lange dauern würde. Eine Liste sämtlicher Funktionen gibt es auf der Website des Plugins.

Diese Fülle an Funktionen hat natürlich seinen Preis. So kostet Perfmatters* 24,95 $ pro Jahr, was etwa 21 Euro nach aktueller Umrechnung (12.09.2021) entspricht. Bei einer Erneuerung der Lizenz sparst du dir weitere 15 %, sodass du bereits unter 20 Euro pro Jahr bist. Für die Fülle an Funktionen finde ich das vollkommen in Ordnung. Gerade wenn ich mir die Konkurrenz angucke, bezahlt man teilweise viel mehr und bekommt die gleichen Funktionen.

Score ohne Optimierungen

Selbstverständlich habe ich vor den Optimierungen durch Perfmatters.io sämtliche Optimierungen der bisherigen Plugins entfernt, den eigenen Code aus der functions.php des Themes entfernt und den Cache gelöscht (RAIDBOXES).

Nachdem ich ohne Optimierungen nochmal einen Test durchgeführt habe, muss ich ganz ehrlich anmerken, dass Optimierungen in WordPress echt einen großen Unterschied machen.

So bekomme ich im Mobile-Bereich gerade mal einen Score knapp über 30 und im Desktop-Bereich knapp über 80.  Bei GTmetrix merkt man einfach, dass der Test anders durchgeführt wird. So bekomme ich ein apfelgrünes A mit 94 % Performance. Auch die Web Vitals sind vollkommen im grünen Bereich.

Natürlich bin ich – gerade wegen der mobilen Ergebnisse – unzufrieden und bin gespannt, was ich mit Perfmatters jetzt rauskitzeln kann. Plugin aktiviert und los!

Perfmatters muss jetzt zaubern

Was mir direkt auffällt ist, die besonders dezente Auftreten des Plugins. Alles ist mit Toggles steuerbar und das Plugin verzichtet auf starke Animationen oder Farben. Das geht sogar so weit, dass man sich gegen die Best Practices der WordPress Dokumentation für Plugin-Entwicklung entscheidet.

Dort steht nämlich geschrieben, dass man nur Plugins dazu rät das Submenü zu nutzen, sofern man nur eine einzelne Seite hat. Das ist bei Perfmatters aber mit 3 Seiten nicht der Fall. Allerdings belastet ein eigenes Top-Level-Menü deine WordPress Installation mehr. Für mich ist das ein klarer Pluspunkt für das Plugin!

Optionen -> Allgemein

Fangen wir jetzt aber endlich mit den Optimierungen an. In den Optionen aktiviere ich unter Allgemein die Toggles der Emojis, Dashicons, Embeds, WP-Version, Windows Live Writer (wlwmanifest-Link), RSD-Link, RSS-Feed-Links, Self-Pingbacks, Rest-API-Links, Google Maps und Passwortstärke.

Bitte beachtet, dass ich hier zum Beispiel nur die Links des RSS-Feeds deaktiviert habe und nicht die RSS Funktion als solche. Ebenfalls habe ich die REST-API nur für Besucher deaktiviert, was vorher das Plugin Disable WP REST API für mich erledigt hat.

Ebenfalls brauche ich im Plugin die XML-RPC Funktion und die jQuery-Migrate Datei nicht deaktivieren, da im ersten Fall mein Hoster (RAIDBOXES) das serverseitig für mich übernimmt und im 2. Fall bei der Nutzung des Elementor Plugins davon abgeraten wird.

Die Heartbeat-API habe ich nur bei der Bearbeitung von Beiträgen und Seiten zugelassen und die Frequenz der Abfragen von 15 Sekunden auf das Doppelte erhöht. Die Beitrags-Revisionen habe ich direkt mal auf 15 begrenzt.

Auf eine Änderung der Login-URL verzichte ich bewusst. Ich habe über RAIDBOXES eine Login-Sperre ab dem 3. Loginversuch aktiviert. Mit einer Umleitung auf meine 404 Seite würde ich nur unglaublich viele 404 Fehler für Rank Math SEO erzeugen und trotzdem den Server nicht entlasten.

Optionen -> Assets

Jetzt folgt echte Fummelarbeit! Als Erstes müssen wir den Script-Manager aktivieren. Im nächsten Schritt müssen wir jetzt die einzelnen Seiten besuchen und über die Admin-Bar den Script Manager aufrufen.

Ich gehe also auf meine Homepage und klicke in der Admin-Bar auf Script Manager. Ich muss ganz ehrlich sagen, dass ich sehr positiv überrascht von der Oberfläche des Script Managers bin. Jedes Plugin wird einzeln aufgeführt. Dazu sieht man den Link der Datei, die Größe des Scripts und (muss in den Einstellungen aktiviert werden) die Dependencies.

Natürlich werde ich jetzt erstmal Contact Form 7, Robo Gallery, FooGallery, Let’s Review, sowie die Elementor Scripts elementor-dialog und elementor-icons deaktivieren. Dadurch sollte ich mir schon 7 Requests und 136,9 KB an Daten sparen, welche über meine Startseite geladen werden müssen.

Übrigens! Wenn du Contact Form 7 nur auf deiner Kontaktseite aktiviert haben willst (so sollte es sein), musst du diese Seite besuchen und den Script Manager öffnen. Anschließend deaktivierst du Contact Form 7, klickst auf Überall und setzt bei Ausnahme -> Aktuelle URL einen Haken.

Im Menüreiter Globale Übersicht bekommen wir übrigens genau das. Eine sehr cleane Übersicht darüber, wo Scripts deaktiviert und wo welche aktiviert sind. Im nachfolgenden Bild kann man klar erkennen, dass die Plugins RoboGallery, Foo Gallery und Let’s Review nur auf Beitragsseiten geladen werden, Contact Form 7 nur auf einer Seite (der Kontaktseite) geladen wird und die Elementor Scripts überall deaktiviert wird. PS: Ja ich wechsle gerade von einem Galerie-Plugin zu einem Anderen.

Zu einem späteren Zeitpunkt widmen wir uns eventuell der Funktion Defer / Delay Javascript. Das kommt ganz darauf an, wie unsere Render-Blocking Bewertung später ausfällt.

Optionen -> Preloading

Über die Preloading-Einstellungen kann man DNS-Prefetches, Preconnects und Preloads definieren. Dadurch spart man sich nicht nur Ladezeit, sondern kann im letzten Fall auch Ressourcen beseitigen, die das Rendern blockieren.

Da ich natürlich nicht im Voraus weiß, welche Ressourcen das Rendern blockieren, habe ich meine Seite bei PageSpeed Insights getestet.

Da ich mit der Optimierung noch lange nicht fertig bin, werde ich euch das vorläufige Ergebnis natürlich noch nicht mitteilen.

Render blockierende Ressourcen waren in meinem Fall diverse CSS Dateien. Das ist auch vollkommen normal, da eine Website ohne CSS nicht so aussehen und vor allem funktionieren würde, wie mit. Dazu hat Google im Übrigen einen sehr interessanten Beitrag geschrieben, den ich euch nur empfehlen kann.

Ich habe also die dort angegebenen Ressourcen bei Perfmatters eingetragen. Wichtig finde ich hierbei, dass man theoretisch diese Einstellungen auch je nach Gerät separieren kann. Ich zum Beispiel habe nur auf Mobilgeräten starkes Render-Blocking CSS. Achtung! Bitte beachte hierbei den Hinweis von Perfmatters, dass man dazu separaten Cache ausliefern muss.

Durch das Preloaden der Dateien konnte ich mein Ergebnis von 4,1 Sekunden auf 0,6 Sekunden verbessern und mein Score im mobilen Bereich ungemein verbessern.

Theoretisch hast du noch die Möglichkeit instant.page zu aktivieren. Dadurch würdest du durch intelligentes Prefetching schnelleren Seitenaufbau durch die interne Verlinkung erreichen. Allerdings lädst du auch ein etwa 6 KB großes JS-Script extra, welches ich unbedingt vermeiden möchte.

Optionen -> Lazy Loading

Im Reiter Lazy Loading aktivieren wir selbstverständlich die Optionen für Bilder, iFrames und Videos. Dadurch werden diese Ressourcen erst geladen, wenn diese in den für den Nutzer sichtbaren Bereich rücken.

Eines brauche ich allerdings nicht zu aktivieren. YouTube Preview Thumbnails macht bei mir keinen Sinn, da YouTube Videos sowieso von dem Borlabs Cookie Plugin geblockt werden und über einen extra klick geladen werden müssen. Dementsprechend wird so oder so kein Thumbnail angezeigt.

Durch die Aktivierung der Lazy Loading Option erhältst du einen weiteren Block in deinem WordPress Beitragseditor, über den du theoretisch das Lazy Loading für jeden Beitrag einzeln deaktivieren könntest.

Optionen -> Fonts

Viele Besitzer von Webseiten vergessen, dass es einige Optimierungsmöglichkeiten für Google Fonts gibt. So bekommen sicherlich die ein oder anderen Blogger die Meldung „Ensure text is user-visible while webfonts are loading“ über PageSpeed Insights angezeigt.

Dieser Fehler entsteht, wenn Text theoretisch schon darstellbar ist, aber die von dir genutzte Schriftart noch nicht heruntergeladen ist. Zum Glück kannst du das durch die CSS declaration font-display: swap; beheben. Dadurch nutzt deine Website eine Fallback-Schriftart. Aktiviere dazu den 2. Toogle.

Ebenfalls werden wir Local Google Fonts aktivieren. Dadurch sparen wir uns den Verbindungsaufbau zu fonts.googleapis.com, was uns einerseits mehr Speed und andererseits mehr Datenschutz gewährleistet. Kleiner Funfact – die Google Fonts wurden seit deren Einführung im Jahre 2010 über 54 Billionen Mal aufgerufen. Du hast richtig gehört – Billionen!

Optionen -> CDN & Analytics

Da ich weder einen CDN Dienst, noch Google Analytics nutze, sind beide Optionen für mich nicht wirklich interessant. Hier lasse ich alles unberührt. Ihr müsstet selbstverständlich hier noch ein paar Sachen einstellen.

Werkzeuge -> Plugin

Unter Werkzeuge -> Plugin erhalten wir noch weitere Management-Tools und eine für viele Admins wichtige Einstellungsmöglichkeit. Die Saubere Deinstallation erlaubt es uns – sofern wir das Plugin irgendwann mal deinstallieren sollten – sämtliche Plugin-Dateien aus der Datenbank zu entfernen.

Diese Option oder gar die Programmierung fehlt bei vielen Plugins leider standardmäßig, sodass selbst nach Monaten und Jahren noch Restmüll in der Datenbank schlummern. Ich habe dazu vor ein paar Tagen einen kleinen Beitrag geschrieben.

Werkzeuge -> Database

Der letzte Menüpunkt betrifft die Datenbank. Hier hast du die Möglichkeit deine Datenbank effektiv aufzuräumen. Du kannst Post Revisionen, automatische Speicherungen der Posts (Auto-Drafts), Beiträge im Papierkorb, Spam- und gelöschte Kommentare, abgelaufene- und sämtliche transistente Optionen, sowie nicht optimierte Tabellen zu löschen oder zu optimieren.

Für diese Aufgabe habe ich zum Beispiel früher WP-Optimize genutzt, was ich nun sparen kann. Ein anderes Plugin dafür wäre WP-Sweep.

Score mit Optimierungen

Kommen wir zum spannendsten Teil! Ich habe nun sämtliche Optimierungen durchgeführt und das Plugin perfekt eingestellt. Anschließend habe ich Tests über PageSpeed Insights GTmetrix und WebPageTest durchgeführt und kann sagen… ich bin begeistert!

Meinen mobilen Score konnte ich bei PageSpeed Insights von 33 auf 59 verbessern. Diesen Wert habe ich nicht mal mit der Feinabstimmung sämtlicher Plugins und eigener Scripts in der functions.php Datei im Theme erhalten. Ich glaube das Beste, an das ich mich erinnere, waren 52 Punkte.

Besonders die DOM-Größe und die Bilder schlagen hier noch zu Buche. Auf Desktop Geräten erreiche ich trotz aufgeblähtem Theme grandiose 95 Punkte! Auch bei GTmetrix erhalte ich unglaubliche 99 % Performance und ein wunderschönes A als Note!

Besonders die Ladezeit hat sich stark verbessert. Meine optimierte Ladezeit betrug immer 3,5 bis 5 Sekunden. Ohne Optimierungen betrug diese sogar bis zu 7 Sekunden, was natürlich absolut unakzeptabel ist.

Laut GTmetrix war die Seite bereits nach 1,9 Sekunden vollständig geladen. Über den Service WebPageTest errechnete ich den Wert 2.844 Sekunden als vollständige Ladezeit. Eine kleine Abweichung ist so oder so immer dabei.

Was Perfmatters noch fehlt

Einige Funktionen fehlen mir persönlich aber doch! Interessant finde ich hier, dass die Macher Perfmatters mit Wünschen und Vorschlägen besonders offen umgehen und eine eigene Seite dafür erstellt haben. Ich erwähne jetzt nur schnell die Funktionen, welche ich mir noch wünsche und den aktuellen Kommentar der Entwickler dazu.

1. Wunsch: Lazy Load für Kommentare, da das gerade bei vielen (nicht umgebrochenen) Kommentaren die Ladezeit negativ beeinflusst  – Kommentar: Sie können bereits Gravatare mit Lazy Load laden

2. Wunsch: Minify HTML/CSS/JS – Kommentar: Die meisten HTML, CSS & JS Dateien werden bereits durch die Entwickler verkleinert und diverse Services wie Cloudflare erledigen dies auch für dich

Fazit

Ich bin begeistert! Das Plugin hält, was es verspricht und holt das letzte Fünkchen Leistung aus deiner Website heraus. Selbst bei einem aufgeblähten Theme mit vielen Integrationen wie meines eines ist (lädt Elementor, jQuery und Bootstrap) habe ich gute Ergebnisse und diverse Verbesserungen erreichen können.

Perfmatters ist dabei sehr effizient und lässt sich besonders leicht einstellen. Ich kenne kein einziges Plugin, welches so viele Funktionen unter einen Hut bringt. Dadurch war es mir möglich 4 Plugins zu deinstallieren. Ich spare mir nun für eine rundum bessere Performance 3 Plugins, was ich als vollen Erfolg bezeichne!

Mit einem wesentlich besser programmierten Theme würde ich hier mit Sicherheit 80 bis 90 Punkte bei mobilen Geräten und fast 100 bei Desktop Geräten erreichen. Das Plugin schlägt mit knapp 20 Euro pro Jahr dabei fast nicht zu Buche.

Ich kann jedem WordPress-Nutzer zum Kauf dieses Plugins raten. Sofern ihr eure Performance verbessern wollt, bekommt ihr mit Perfmatters die beste Lösung für euer Problem. Ich habe einige Performance Plugins getestet und kann ernsthaft sagen, dass kein einziges an Perfmatters herankommt.

Ich bedanke mich recht herzlich für eure Aufmerksamkeit und wünsche euch noch einen schönen Tag – euer Maurice!