Dein WordPress Host kann blitzschnell sein, aber es ist nicht immer ein Zauberstab für schrecklich codierte oder nicht optimierte Plugins und Themes. Wir sehen das die ganze Zeit hier bei Kinsta. Manchmal kann schon ein einziges schlechtes Plugin oder Codeschnipsel der schlimmste Feind deiner Webseite sein, und alles zum Erliegen bringen. Deshalb überwachen wir die Seiten unserer Kunden mit dem Kinsta APM-Tool und haben sogar eine Liste verbotener Plugins. Heute werden wir einige praktische, weniger bekannte WordPress Performance Plugins mit dir teilen, die dir bei der Fehlerbehebung und Beschleunigung deiner Webseite helfen können.
7 WordPress Performance Plugins im Jahr 2024
Es mag ironisch klingen, ein Plugin oder Skript mit einem anderen Plugin zu beheben. Das ist vielleicht nicht der beste Weg, um ein Problem zu lösen. Aber für diejenigen, die keine WordPress-Entwickler sind, könnte dies in vielen Fällen das sein, worauf du zurückgreifen musst. Es gibt kein perfektes Plugin oder einen perfekten Entwickler, und so kann es manchmal ganz nützlich sein, ein paar Tricks in petto zu haben, um sie besser und schneller arbeiten zu lassen. Viele der unten aufgeführten Plugins sind nicht so populär, einige haben nur ein paar tausend Installationen, aber sie verdienen definitiv etwas mehr Anerkennung, zusammen mit ihren Entwicklern.
- Query Monitor
- Complete Analytics Optimization Suite
- Disqus Conditional Load
- Lazy Load for Comments
- Disable Emojis
- Disable Embeds
- perfmatters
Und denke daran, dass es nicht unbedingt schlecht ist, mehr Plugins hinzuzufügen, solange sie leichtgewichtig und richtig entwickelt sind. Wir haben viele Webseiten mit 60+ Plugins gesehen, die in weniger als einer Sekunde geladen werden. Es kommt darauf an, die richtigen auszuwählen und sie dann zu optimieren.
1. Query Monitor
Das erste WordPress Performance Plugin, das wir empfehlen, ist Query Monitor, ein kostenloses WordPress Debugging– und Entwicklungs Plugin. Du kannst es nutzen, um langsame Datenbankabfragen, AJAX-Aufrufe, REST API-Anfragen und vieles mehr zu identifizieren und zu debuggen. Außerdem meldet das Plugin Details zur Webseite zurück, wie z.B. Skriptabhängigkeiten und Abhängigkeiten, WordPress Hooks, die während der Seitengenerierung abgefeuert wurden, Details zur Hosting-Umgebung, bedingte Abfrage-Tags, die von der aktuellen Seite erfüllt werden, und vieles mehr.
Das Plugin wurde von John Blackbourn entwickelt, einem Core-WordPress-Committer, der derzeit als Entwickler bei Human Made tätig ist und zuvor bei WordPress VIP beschäftigt war. Zum Zeitpunkt des Schreibens dieses Artikels hat es über 20.000 aktive Installationen mit einer 5 von 5 Sternen Bewertung. Du kannst es aus dem WordPress Repository herunterladen oder indem du in deinem WordPress Dashboard unter „Add New“ Plugins danach suchst.
Du kannst es für alle möglichen Dinge verwenden. Entwickler werden dieses Plugin lieben, da du jede Abfrage, die auf einer Seite passiert, eingrenzen kannst. Wenn du ein Entwickler bist, kannst du sogar sehen, ob das Plugin die effizienteste Abfrage macht, die möglich ist. Und es ist nicht nur für das Frontend, du kannst es auch nutzen, um Fehlerbehebungen in deinem WordPress Dashboard vorzunehmen.
Hier ist ein Beispiel für das WordPress Dashboard einer größeren Webseite. Wir können sofort sehen, dass das Pretty Link Plugin der stärkste Hitter ist.
In unserem ausführlichen Tutorial erfährst du, wie du Query Monitor verwendest und welche Anwendungsszenarien es gibt.
2. Complete Analytics Optimization Suite (CAOS)
Das zweite Plugin, das wir empfehlen, ist die kostenlose Complete Analytics Optimization Suite, die von Daan van den Bergh entwickelt wurde. Mit diesem Plugin kannst du Google Analytics lokal auf deiner WordPress Webseite hosten.
Es hat derzeit über 10.000 aktive Installationen mit einer Bewertung von 5 von 5 Sternen. Du kannst die Complete Analytics Optimization Suite aus dem WordPress Repository herunterladen oder indem du unter „Add New“ Plugins in deinem WordPress Dashboard danach suchst. Das Plugin ermöglicht es dir, deine Google Analytics JavaScript Datei (analytics.js) lokal zu hosten und sie mit wp_cron() auf dem neuesten Stand zu halten. Weitere Features sind die Möglichkeit, die IP-Adresse deiner Besucher zu anonymisieren, eine angepasste Absprungrate einzustellen und die Platzierung des Skripts (Header oder Footer).
Einige Vorteile des lokalen Hostings deines Analyseskripts sind, dass du deine externen HTTP-Anfragen an Google von 2 auf 1 reduzierst und du nun die volle Kontrolle über das Caching der Datei hast. Du kannst auch die lästige Browser-Caching-Warnung loswerden, die ironischerweise von Googles eigenem Skript verursacht wird.
Installiere einfach das Plugin, gib deine Google Analytics Tracking ID ein und das Plugin fügt den notwendigen Tracking Code für Google Analytics zu deiner WordPress Webseite hinzu, lädt und speichert die analytics.js Datei auf deinem Server und hält sie über ein geplantes Skript in wp_cron() aktuell. Wir empfehlen, es auch für das Laden im Footer einzustellen. Hinweis: Dieses Plugin funktioniert nicht mit anderen Google Analytics WordPress Plugins und wird von Google nicht unterstützt oder empfohlen.
3. Disqus Conditional Load
Wenn du Disqus verwendest, ist es sehr wichtig, dass du Disqus-Kommentare mit einem Lazy Loading versiehst. Wenn du das nicht tust, kann Disqus ein echtes Hindernis für die Ladegeschwindigkeit deiner Webseite sein. Warum? Weil es standardmäßig jeden einzelnen Avatar und alle zusätzlichen Skripte laden muss, die aufgrund der Änderungen bei den Disqus-Anzeigen jetzt enthalten sind. Wir empfehlen dir daher, das kostenlose Disqus Conditional Load Plugin von Joel James auszuprobieren.
Dieses Plugin hat derzeit über 10.000 aktive Installationen mit einer Bewertung von 4,8 von 5 Sternen. Du kannst Disqus Conditional Load aus dem WordPress Repository herunterladen oder es unter „Add New“ Plugins in deinem WordPress Dashboard suchen. Bevor du dieses Plugin aktivierst, musst du das offizielle Disqus Plugin deaktivieren. Es lädt nicht nur alle Bilder (Avatare) Lazy Loading, sondern lässt dich auch das Count-Skript deaktivieren, wenn du es nicht verwendest. Also ein JavaScript-Aufruf weniger auf deiner WordPress Seite.
Wir haben ein paar schnelle Tests durchgeführt, damit du den Unterschied sehen kannst. In unserem Beispiel haben wir einen Blogpost mit 35 Kommentaren. Wir haben es zuerst mit dem offiziellen Disqus Plugin getestet und dann Tests mit dem Disqus Conditional Load Plugin durchgeführt.
Official Disqus Plugin
Wir haben zuerst 5 Tests in Pingdom durchgeführt und den Durchschnitt genommen. Wie du sehen kannst, war die Gesamtladezeit 917 ms mit 113 Anfragen.
Disqus Conditional Load Plugin
Wir sind dann auf das Disqus Conditional Load Plugin umgestiegen und haben wieder 5 Tests in Pingdom durchgeführt. Wie du sehen kannst, ist unsere Ladezeit auf 685 ms gesunken und wir haben jetzt nur noch 88 Anfragen! Das ist ein großer Unterschied mit einem kleinen, kostenlosen Plugin-Tausch. Für große Webseiten, die Disqus nutzen, kann dies Wunder bewirken.
4. Lazy Loading für Kommentare
Vielleicht bist du gar kein Fan von Disqus. Es hat definitiv seine Vor- und Nachteile. Wenn du es vorziehst, die nativen WordPress-Kommentare zu verwenden, hat auch dies ein ähnliches Problem. Standardmäßig lädt es alle Gravatare bei jedem Seitenaufruf. Die Möglichkeit des Lazy Loading von Kommentaren ist nicht im WordPress-Core eingebaut. Eine großartige, leichtgewichtige und kostenlose Lösung, die wir empfehlen, ist das Lazy Load for Comments Plugin. Dieses wurde ebenfalls von James Joel entwickelt.
Dies ist ein neueres Plugin und hat derzeit nur 100 aktive Installationen mit einer Bewertung von 5 von 5 Sternen. Du kannst Lazy Load for Comments aus dem WordPress Repository herunterladen oder indem du unter „Add New“ Plugins in deinem WordPress Dashboard danach suchst.
Es ist sehr einfach zu konfigurieren. Einfach installieren und unter den Diskussionseinstellungen gibt es zwei Optionen. Standardmäßig ist es auf „On Scroll“ eingestellt, was die meisten Leute wahrscheinlich bevorzugen werden. Du kannst es auch auf „On Click“ einstellen, was einen Button erstellt, auf den die Besucher klicken können, bevor die Kommentare geladen werden.
Wir haben ein paar schnelle Tests durchgeführt, damit du den Unterschied sehen kannst. In unserem Beispiel verwenden wir wieder denselben Blogpost mit 35 Kommentaren. Wir haben es zuerst mit den nativen Kommentaren getestet und dann Tests mit dem Lazy Load for Comments Plugin durchgeführt.
Native Kommentare
Wir haben zuerst 5 Tests in Pingdom durchgeführt und den Durchschnitt genommen. Wie du sehen kannst, war die Gesamtladezeit 827 ms mit 106 Anfragen.
Lazy Load für Comments Plugin
Wir sind dann auf das Lazy Load for Comments Plugin umgestiegen und haben wieder 5 Tests in Pingdom durchgeführt. Wie du sehen kannst, ist unsere Ladezeit auf 685 ms gesunken und wir haben jetzt nur noch 87 Anfragen! Das ist fantastisch. So ein kleiner Tweak für native Kommentare und sofort viel schneller.
Sieh dir auch unseren Beitrag über andere Möglichkeiten an, WordPress-Kommentare zu beschleunigen.
5. Disable Emojis
Als sie WordPress 4.2 veröffentlicht haben, haben sie den Support für Emojis in den Core für ältere Browser hinzugefügt. Das große Problem dabei ist, dass es eine zusätzliche HTTP-Anfrage auf deiner WordPress Seite erzeugt, um die Datei wp-emoji-release.min.js zu laden. Und diese wird auf jeder einzelnen Seite geladen. Während diese Datei nur 10,5 KB groß ist, summieren sich solche Dinge mit der Zeit. Und die meisten Unternehmen werden nie Emojis verwenden. Die gute Nachricht ist, dass es ein kostenloses Plugin namens Disable Emojis gibt, das von Ryan Hellyer entwickelt wurde.
Dieses Plugin ist super leicht, nur 9 KB um genau zu sein. Zum Zeitpunkt des Schreibens dieses Artikels hat es über 40.000 aktive Installationen mit einer 5 von 5 Sternen Bewertung. Du kannst es aus dem WordPress Repository herunterladen oder indem du in deinem WordPress Dashboard unter „Add New“ Plugins danach suchst. Emoticons und Emojis werden weiterhin in Browsern funktionieren, die einen eingebauten Support für sie haben. Dieses Plugin entfernt einfach die zusätzliche JavaScript-Datei, die verwendet wird, um den Support für Emojis in älteren Browsern hinzuzufügen. Es gibt nichts zu konfigurieren, einfach installieren, aktivieren und die zusätzliche JavaScript-Datei ist weg.
Unten siehst du ein Beispiel für das Skript, das es auf deiner WordPress Seite deaktiviert.
Du kannst dir auch unser Tutorial ansehen, wie du Emojis ohne Plugin deaktivieren kannst.
6. Disable Embeds
Dann haben wir noch Embeds. Als sie WordPress 4.4 veröffentlicht haben, haben sie das oEmbed Feature in den Core integriert. Du hast es wahrscheinlich schon einmal gesehen oder benutzt. Damit können Nutzer YouTube-Videos, Tweets und viele andere Ressourcen auf ihren Webseiten einbetten, indem sie einfach eine URL einfügen, die WordPress automatisch in eine Einbettung umwandelt und eine Live-Vorschau im visuellen Editor bereitstellt. Wenn du eine Facebook-Einbettung auf deiner Webseite hast, schau dir an, wie das neue Update von Facebook es beeinflussen kann und wie du es beheben kannst. Wenn du eine Facebook-Einbettung auf deiner Seite hast, schau dir an, wie sich das neue Facebook-Update auswirken kann und wie du es beheben kannst.
WordPress war schon lange ein oEmbed-Konsument, aber mit dem Update wurde WordPress selbst zum oEmbed-Anbieter. Diese Funktion ist für viele Leute nützlich, und du möchtest es vielleicht aktiviert lassen. Allerdings bedeutet dies, dass es nun auch eine zusätzliche HTTP-Anfrage auf deiner WordPress Seite erzeugt, um die wp-embed.min.js Datei zu laden. Und diese wird auf jeder einzelnen Seite geladen. Während diese Datei nur 1,7 KB groß ist, summieren sich solche Dinge mit der Zeit. Die Anfrage selbst ist manchmal eine größere Sache als die Größe des heruntergeladenen Inhalts.
Zum Glück gibt es ein kostenloses Plugin namens Disable Embeds, das von Pascal Birchler entwickelt wurde, der eigentlich einer der Kernmitarbeiter von WordPress ist.
Dieses Plugin ist super leicht, nur 3 KB um genau zu sein. Zum Zeitpunkt des Schreibens dieses Artikels hat es über 10.000 aktive Installationen mit einer Bewertung von 4,8 von 5 Sternen. Du kannst es aus dem WordPress Repository herunterladen oder indem du in deinem WordPress Dashboard unter „Add New“ Plugins danach suchst. Es gibt nichts zu konfigurieren, einfach installieren, aktivieren und die zusätzliche JavaScript-Datei ist weg. Enthält die folgenden Features:
- Verhindert, dass andere deine Webseite einbetten.
- Verhindert, dass du andere Webseiten einbettest, die nicht auf der Whitelist stehen.
- Verhindert, dass die JavaScript-Datei auf deiner WordPress Seite geladen wird.
Du kannst immer noch Dinge von YouTube und Twitter einbetten, indem du deren iframe Skripte benutzt. Du kannst auch in unserem Tutorial nachlesen, wie du Einbettungen ohne Plugin deaktivieren kannst.
7. perfmatters
Es gibt auch ein neues Plugin namens perfmatters, mit dem du tatsächlich drei der oben genannten Plugins kombinieren kannst. Das macht es viel einfacher, wenn es um die Verwaltung und Aktualisierung geht. Das Plugin perfmatters wurde von einem der Kinsta Teammitglieder entwickelt!
Dies ist ein Premium Plugin und ermöglicht es dir, zahlreiche Web-Performance-Optimierungen mit einem einzigen Klick einfach umzusetzen. Im Folgenden sind nur einige der vielen Optimierungen aufgeführt, die du vornehmen kannst:
- Emojis deaktivieren
- Einbettungen deaktivieren
- Query strings entfernen
- jQuery Migrate entfernen
- Post-Revisionen deaktivieren und oder begrenzen
- Autosave-Intervall ändern
- Pingbacks und Trackbacks abschalten
- XML-RPC deaktivieren
- WordPress Generator Tag entfernen
- RSS-Feed-Links entfernen
- WordPress Heartbeat API deaktivieren
- DNS Prefetching
- WooCommerce Skripte und Styles deaktivieren
- WooCommerce Warenkorb-Fragmente (AJAX) deaktivieren
Viele dieser Optimierungen helfen dabei, HTTP-Anfragen auf deiner Webseite zu reduzieren und die Datenbank zu entlasten. Es ist wichtig zu beachten, dass es keine Dateien von deiner Webseite entfernt, sondern sie einfach mit WordPress-Hooks deaktiviert. Dies ist vollkommen sicher.
Und eines der mächtigsten Features ist der Script Manager. Dieser erlaubt es dir, CSS und JS abhängig von der Seite, die du besuchst, zu laden. Es ist ein einfaches und leichtgewichtiges Plugin, das es erlaubt, unnötige CSS- und JS-Dateien loszuwerden, die von Themes und Plugins registriert wurden. Selbst wenn du über HTTP/2 läufst, kannst du damit etwas Zeit beim Laden deiner Seite einsparen.
Als kleines Beispiel für die Funktionalität des Skriptmanagers haben wir unsere Webseite gestartet und die folgenden Plugins installiert – typische Plugins, die du auf deiner Webseite oder deinem Blog finden könntest:
- Contact Form 7
- Disqus Comment System
- Q2W3 Fixed Widget
- Social Warfare
- Table of Contents Plus
- TablePress
Vor dem perfmatters Plugin
Wir haben dann 5 Tests in Pingdom durchgeführt und den Durchschnitt genommen. Wie du sehen kannst, ist unsere Gesamtseitengröße 264,4 kB, unsere Ladezeit beträgt 469 ms und wir haben insgesamt 24 Anfragen.
Perfmatters Plugin konfigurieren
Anschließend haben wir das Perfmatters Plugin konfiguriert. Dazu rufst du einfach eine Seite auf deiner Webseite auf, in diesem Fall die Startseite, und klickst in deiner WordPress-Adminleiste auf „Script Manager“.
Eines der größten Probleme mit vielen WordPress Plugins ist, dass sie ihre Skripte auf deiner gesamten Webseite laden. Selbst beliebte Plugins wie Contact Form 7 tun dies. Die meisten Leute brauchen nur die Skripte für Contact Form 7, die auf ihrer Kontaktseite geladen werden. Das Gleiche gilt für Plugins wie Social Warfare und Disqus. Social Warfare stellt Social Media Buttons zur Verfügung, die du wirklich nur auf deinen Blogbeiträgen laden möchtest. Und für Disqus gilt dasselbe. Mit Perfmatters kannst du die Buttons so konfigurieren, dass sie auf bestimmten Seiten, in bestimmten Beiträgen oder gar nicht geladen werden, etc. So ziemlich jede Konfiguration.
In diesem Beispiel deaktivieren wir die folgenden 12 Skripte auf unserer Startseite, da sie nicht benötigt werden. Deine Startseite ist schließlich eine der wichtigsten Seiten deiner Webseite, die Besucher in der Regel zuerst sehen. perfmatters lässt dich Skripte mit einem Klick deaktivieren.
/wp-content/themes/twentyseventeen/assets/js/html5.js
/wp-content/plugins/contact-form-7/includes/css/styles.css
/wp-content/plugins/table-of-contents-plus/screen.min.css
/wp-content/plugins/social-warfare/css/style.min.css
/wp-content/plugins/tablepress/css/default.min.css
/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js
/wp-content/plugins/contact-form-7/includes/js/scripts.js
/wp-content/plugins/table-of-contents-plus/front.min.js
/wp-content/plugins/social-warfare/js/script.min.js
/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js
/wp-content/plugins/disqus-comment-system/media/js/count.js
/wp-includes/js/wp-embed.min.js
Nach dem Perfmatters Plugin
Wir haben dann wieder 5 Tests in Pingdom durchgeführt und den Durchschnitt genommen. Wie du sehen kannst, ist unsere gesamte Seitengröße jetzt 231,7 kB, unsere Ladezeit ist 424 ms und wir haben insgesamt 12 Anfragen. Mit diesem Plugin haben wir die Gesamtzahl der Anfragen buchstäblich um die Hälfte reduziert! Und es wird keine Verkettung durchgeführt, was bedeutet, dass dies komplett innerhalb der Best Practices für eine bessere HTTP/2 Performance liegt. Es nutzt die nativen WordPress Hooks, so wie es gemacht werden sollte.
Das ist natürlich nur ein Beispiel für eine kleine Webseite. Auf viel größeren Webseiten könntest du bestimmte WooCommerce-Skripte deaktivieren, die nicht benötigt werden, EDD-Skripte, alle möglichen Dinge. Du bekommst wahrscheinlich eine Vorstellung davon, wie mächtig das ist. Generell gilt: Wenn etwas nicht genutzt oder benötigt wird, ist es die beste Praxis, es für den Nutzer nicht zu laden. Dies gewährleistet die bestmöglichen Ladezeiten. Und für diejenigen unter euch, die noch nicht über HTTP/2 unterstützte Server laufen, wirst du mit diesem Plugin noch größere Geschwindigkeitsgewinne sehen. Eine weitere kostenlose Alternative, die du ausprobieren kannst und die sehr ähnlich ist, ist das Plugin Organizer Plugin.
Zusätzliche Ressourcen zum Beschleunigen von WordPress
Neben den oben erwähnten Plugins gibt es noch einige weitere Ressourcen, die dir helfen können, deine Webseite zu beschleunigen.
- 19 Above And Beyond Tipps zur Beschleunigung von WordPress
- Ein Leitfaden für Anfänger zur Optimierung der Geschwindigkeit von Webseiten
Zusammenfassung
Wie du sehen kannst, sind viele der oben genannten WordPress Performance Plugins nur kleine Optimierungen. Aber wenn du anfängst, sie alle zu implementieren, können sie sich definitiv zu einer schnelleren Webseite summieren.
Brauchst du Kommentare überhaupt nicht? Dann kannst du einfach die Kommentare in WordPress deaktivieren.
Haben wir noch andere gute Performance Plugins verpasst? Wenn ja, lass es uns unten wissen. (Wir haben P3 Profiler nicht in diesen Beitrag aufgenommen, weil es Performance-Probleme gezeigt hat)
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar