Die \u00fcbliche Methode, um ein problematisches Plugin zu identifizieren, besteht darin, Plugins zu deaktivieren, bis du den Leistungsengpass gefunden hast.<\/p>\n
Es gibt jedoch einen schnelleren und effizienteren Weg. Genau f\u00fcr dieses Szenario wurde das kostenlose Plugin Query Monitor entwickelt. Es kann dir helfen, Leistungsprobleme zu beheben, Webseiten effizienter zu entwickeln und deine WordPress-Webseite besser im Griff zu haben.<\/p>\n
In diesem Leitfaden erf\u00e4hrst du alles, was du \u00fcber Query Monitor wissen musst – was es ist, was es kann und wie du es benutzt.<\/p>\n
Was ist Query Monitor?<\/h2>\n![\"Das](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-plugin-card-1024x450.jpg\")
Das Query Monitor Plugin<\/figcaption><\/figure>\nQuery Monitor<\/a> ist ein 100% kostenloses Plugin, das dir hilft, die Leistung und Entwicklung deiner WordPress-Webseite zu \u00fcberpr\u00fcfen.<\/p>\nDu kannst es dir wie die Chrome Developer Tools vorstellen, aber speziell f\u00fcr WordPress. Du kannst Datenbankabfragen, Skripte, das Timing und vieles mehr untersuchen. Au\u00dferdem kannst du viele hilfreiche Informationen einsehen, z. B. allgemeine Umgebungsinformationen und Details zu bestimmten Seiten.<\/p>\n
Query Monitor stellt all diese Informationen in einer leicht zug\u00e4nglichen Form dar, auf die du von \u00fcberall auf deiner Webseite zugreifen kannst.<\/p>\n
Query Monitor wird von John Blackbourn, einem leitenden Webentwickler bei Human Made<\/a>, gepflegt. Er hat noch weitere n\u00fctzliche Plugins entwickelt, z. B. WP Crontrol<\/a> (ideal zum Debuggen von wp-cron<\/a>) und User Switching<\/a> (ideal zum Debuggen der Erfahrungen verschiedener Benutzerrollen<\/a>).<\/p>\nJohn ist sehr reaktionsschnell und arbeitet st\u00e4ndig an der Wartung und Verbesserung von Query Monitor. Automattic und andere Sponsoren unterst\u00fctzen seine Arbeit.<\/p>\n
Wenn dir das Plugin gef\u00e4llt, wenn du diesen Beitrag liest, kannst du Query Monitor unterst\u00fctzen, indem du das Projekt auf GitHub f\u00fcr nur $1 pro Monat sponserst<\/a>.<\/p>\n\nWas macht Query Monitor?<\/h2>\n
Query Monitor kann dir helfen, mehr als nur Abfragen an die WordPress-Datenbank<\/a> zu debuggen, trotz des Namens.<\/p>\nVersteh uns nicht falsch – das Debuggen von Datenbankabfragen<\/a> ist etwas, das Query Monitor gut kann und einer der wichtigsten Vorteile des Plugins ist.<\/p>\nEs kann aber auch in vielen anderen Bereichen eingesetzt werden, z. B. beim Debuggen der Leistung und beim allgemeinen Debuggen der Entwicklung.<\/p>\n
Hier ist eine Auswahl der vielen Details, mit denen Query Monitor dich bei der Analyse und Fehlersuche unterst\u00fctzen kann:<\/p>\n
\n- Datenbankabfragen, einschlie\u00dflich der Anzeige der Abfragen von bestimmten Plugins<\/li>\n
- PHP-Fehler<\/li>\n
- Speichernutzung<\/li>\n
- HTTP-API-Aufrufe<\/li>\n
- Eingereihte Skripte und Stile, einschlie\u00dflich Abh\u00e4ngigkeiten<\/li>\n
- Hooks und Aktionen<\/li>\n
- Theme-Vorlagendateien<\/li>\n
- Sprachen und \u00dcbersetzungen<\/li>\n
- Rewrite-Regeln<\/li>\n
- Block-Editor-Bl\u00f6cke<\/li>\n
- Allgemeine Umgebungsinformationen<\/li>\n
- WordPress-Admin-Bildschirme<\/li>\n<\/ul>\n
Eine bemerkenswerte Einschr\u00e4nkung von Query Monitor ist, dass er in erster Linie f\u00fcr das Debugging „in the moment“ gedacht ist. Wenn er dir die Datenbankabfragen, das Timing und so weiter anzeigt, gilt das nur f\u00fcr den aktuellen Seitenaufbau.<\/p>\n
Historische Informationen\/Trends werden in der Regel nicht verfolgt oder angezeigt, obwohl John sagt, dass diese Funktion f\u00fcr zuk\u00fcnftige Versionen geplant ist.<\/p>\n
Wie du Query Monitor zum Debuggen von WordPress und zur Leistungsverbesserung nutzt<\/h2>\n
Nachdem du nun wei\u00dft, was Query Monitor ist und was es kann, wollen wir uns ansehen, wie du Query Monitor zum Debuggen der Leistung deiner Webseite und einiger anderer Tools f\u00fcr das allgemeine Debugging in der Entwicklung verwenden kannst.<\/p>\n
Wir geben dir eine allgemeine Einf\u00fchrung in die Oberfl\u00e4che von Query Monitor und wie sie funktioniert. Dann gehen wir auf die einzelnen Bereiche der Benutzeroberfl\u00e4che ein.<\/p>\n
Es gibt mehr als 12 verschiedene Bereiche der Benutzeroberfl\u00e4che, es gibt also eine Menge zu behandeln. Wie viele Men\u00fcs du genau siehst, h\u00e4ngt jedoch von der Seite ab, die du analysierst.<\/p>\n
Lass uns loslegen.<\/p>\n
Eine Einf\u00fchrung in die Query Monitor-Oberfl\u00e4che<\/h3>\n
Query Monitor hat keinen eigenen Interface-Bereich. Stattdessen werden neue Informationen in der WordPress-Administrationsleiste sowohl im Frontend als auch im Backend angezeigt.<\/p>\n
Query Monitor zeigt zun\u00e4chst eine kurze Zusammenfassung mit vier Informationen an:<\/p>\n
\n- Zeit f\u00fcr den Seitenaufbau<\/strong> – 0,05 s auf dem Screenshot.<\/li>\n
- Spitzenspeicherverbrauch <\/strong>– 7,7 MB im Screenshot.<\/li>\n
- Gesamtzeit f\u00fcr SQL-Abfragen <\/strong>(in Sekunden) – 0,00 s im Screenshot.<\/li>\n
- Gesamtzahl der SQL-Abfragen <\/strong>– 54 im Screenshot.<\/li>\n<\/ul>\n
![\"Die](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-summary-1024x740.png\")
Die Zusammenfassung von Query Monitor in der WordPress-Adminleiste<\/figcaption><\/figure>\nWenn du auf diese Zusammenfassung klickst, \u00f6ffnet sich die gesamte Query Monitor-Oberfl\u00e4che, die als Overlay-Fenster auf der Frontend- oder Backend-Seite angezeigt wird, die du gerade betrachtest.<\/p>\n![\"Die](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-interface-1024x837.png\")
Query Monitor-Oberfl\u00e4che<\/figcaption><\/figure>\nAlle Funktionen und Informationen, die Query Monitor bietet, sind in diesem Overlay-Fenster enthalten.<\/p>\n
Wenn du das Layout des Overlay-Fensters \u00e4ndern m\u00f6chtest, kannst du auf die Schaltfl\u00e4che in der oberen rechten Ecke klicken, um es in eine Seitenleiste umzuwandeln. Du kannst auch die Gr\u00f6\u00dfe des Fensters per Drag-and-Drop \u00e4ndern.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-interface-side-toggle-1024x846.png\")
So schaltest du auf eine Seitenleiste um<\/figcaption><\/figure>\nDie Query Monitor Oberfl\u00e4che und ihre Informationen sind nur f\u00fcr Administratoren (oder Superadministratoren auf WordPress Multisites<\/a>) sichtbar.<\/p>\nEs gibt auch die M\u00f6glichkeit, ein Authentifizierungs-Cookie zu setzen, damit du den Query Monitor auch dann sehen kannst, wenn du nicht eingeloggt bist (oder als Benutzer mit einer niedrigeren Benutzerrolle<\/a>). Wie du das machst, erf\u00e4hrst du etwas sp\u00e4ter in diesem Leitfaden.<\/p>\nGehen wir die einzelnen Registerkarten der Benutzeroberfl\u00e4che durch und erkl\u00e4ren, wie du sie zum Debuggen deiner WordPress-Webseite verwenden kannst.<\/p>\n
\u00dcbersicht<\/h3>\n
Auf der Registerkarte \u00dcbersicht<\/strong> werden weitere Details aus der Zusammenfassung der Verwaltungsleiste und einige allgemeine Umgebungsinformationen angezeigt.<\/p>\nAnstatt nur die maximale Speichernutzung zu sehen, geht die Registerkarte \u00dcbersicht einen Schritt weiter und zeigt an, wie die maximale Speichernutzung im Vergleich zu den Speichergrenzen deines Servers und von WordPress aussieht.<\/p>\n![\"Die](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-overview-tab-1024x573.png\")
Die Registerkarte \u00dcbersicht in Query Monitor<\/figcaption><\/figure>\nHier gibt es nichts allzu Detailliertes – es ist nur ein \u00dcberblick (daher der Name).<\/p>\n
Abfragen<\/h3>\n
Auf der Registerkarte Abfragen<\/strong> kannst du die einzelnen Datenbankabfragen f\u00fcr die Seite, die du gerade betrachtest, genauer betrachten. Es ist einer der informationsreichsten Bereiche in Query Monitor, was bei dem Namen des Plugins auch Sinn macht.<\/p>\nF\u00fcr jede Abfrage kannst du die folgenden Informationen sehen:<\/p>\n
\n- Die vollst\u00e4ndige Abfrage<\/li>\n
- Abfrageaufrufer<\/li>\n
- Abfragekomponente (z. B. ob sie aus dem Core, einem Theme oder einem Plugin stammt)<\/li>\n
- Anzahl der Zeilen<\/li>\n
- Die Zeit, die die Abfrage gebraucht hat<\/li>\n<\/ol>\n
Neben der allgemeinen Fehlersuche kannst du damit auch langsam ladende Abfragen aufsp\u00fcren, die die Leistung deiner Webseite beeintr\u00e4chtigen.<\/p>\n
Query Monitor schl\u00fcsselt die Abfragen nach deinem Theme und den einzelnen Plugins auf, sodass du die Auswirkungen der einzelnen Erweiterungen sehen kannst.<\/p>\n
Angenommen, ein bestimmtes Plugin verursacht viele langsam ladende Abfragen. In diesem Fall musst du einen Weg finden, das zu beheben – entweder indem du die Einstellungen des Plugins oder die Konfiguration deines Servers optimierst (z. B. durch Datenbank- oder Objekt-Caching<\/a>) oder indem du zu einem anderen Plugin wechselst, das effizienter ist<\/a>.<\/p>\nAuf der Hauptregisterkarte kannst du alle wichtigen Informationen zu jeder Abfrage sehen.<\/p>\n![\"Der](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-1024x708.png\")
Der Hauptreiter Abfragen zeigt eine Liste aller Abfragen<\/figcaption><\/figure>\nWenn du mehr \u00fcber eine bestimmte Abfrage erfahren m\u00f6chtest, klicke auf das Plus-Symbol, um detailliertere Informationen zu erhalten.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-detailed-information-1024x609.png\")
So siehst du erweiterte Details zu einer Abfrage<\/figcaption><\/figure>\nWenn du hier ungew\u00f6hnlich niedrige Zahlen siehst, k\u00f6nnte das an einer Art von Caching<\/a> liegen – z.B. Seiten-Caching oder ein Plugin, das seine Datenbankabfragen zwischenspeichert<\/a>. Aus diesem Grund kann es hilfreich sein, das Caching zu deaktivieren, w\u00e4hrend du die Fehlerbehebung durchf\u00fchrst.<\/p>\nIn diesem Bereich gibt es auch ein paar Untermen\u00fcs, die dir helfen, bestimmte Arten von Abfragen zu finden:<\/p>\n
\n- Doppelte Abfragen<\/li>\n
- Abfragen nach Aufrufer<\/li>\n
- Abfragen nach Komponente<\/li>\n<\/ul>\n
Doppelte Abfragen<\/h4>\n
Der Bereich Doppelte Abfragen<\/strong>\u00a0hebt doppelte Abfragen hervor und listet die „potenziellen St\u00f6renfriede“ auf, um dir bei der Fehlersuche zu helfen und die Abl\u00e4ufe zu optimieren.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-duplicates-1024x710.png\")
So siehst du eine Liste mit doppelten Abfragen<\/figcaption><\/figure>\nAbfragen nach Aufrufer<\/h4>\n
Im Bereich Abfragen nach Aufrufer<\/strong> kannst du dir alle Aufrufer auf dieser Seite ansehen. Wenn du auf einen Aufrufer klickst, siehst du eine Liste der Abfragen f\u00fcr diesen Aufrufer.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-by-caller-1024x683.png\")
So siehst du Abfragen nach Aufrufer<\/figcaption><\/figure>\nAbfragen nach Komponente<\/h4>\n
Der Bereich Abfragen nach Komponente <\/strong>zeigt eine Liste aller Komponenten, die Abfragen gestellt haben, darunter der WordPress-Kern, dein Theme und einzelne Plugins.<\/p>\nDu kannst auf eine bestimmte Komponente klicken, um alle ihre Abfragen zu sehen.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-by-component-1024x546.png\")
So siehst du Abfragen nach Komponenten<\/figcaption><\/figure>\nAuch dies ist einer der wertvollsten Berichte, weil du damit bestimmte Plugins finden kannst, die die Leistung deiner Webseite durch langsame Abfragen beeintr\u00e4chtigen.<\/p>\n
Lies dies, wenn du keine Abfragen nach Komponente siehst<\/h4>\n
Wenn du die Komponenteninformationen im Query Monitor nicht siehst, liegt das wahrscheinlich daran, dass Query Monitor die Datei db.php nicht verlinken kann. In diesem Fall erh\u00e4ltst du eine Fehlermeldung wie die folgende.<\/p>\n![\"Wenn](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-symlink-error-1024x620.png\")
Fehlermeldung<\/figcaption><\/figure>\nHier gibt es zwei wahrscheinliche Ursachen:<\/p>\n
\n- Die Dateiberechtigungen<\/a> des wp-content-Ordners<\/a> deiner Webseite.<\/li>\n
- Die Datei wp-content\/db.php ist bereits vorhanden (vielleicht wegen eines Caching-Plugins<\/a> wie W3 Total Cache<\/a>).<\/li>\n<\/ol>\n
In diesem GitHub-Artikel findest du einige L\u00f6sungen und Workarounds<\/a>. Wenn du dich \u00fcber SSH mit deinem Server verbinden<\/a> kannst, kannst du das Problem mit einem WP-CLI-Befehl<\/a> beheben (es gibt aber auch andere Methoden).<\/p>\nDie meisten Funktionen von Query Monitor funktionieren auch mit diesem Problem, aber du wirst keine Informationen \u00fcber die Komponenten sehen k\u00f6nnen, bis du das Problem behoben hast.<\/p>\n
Logs<\/h3>\n
Die Registerkarte Logs<\/strong> ist eine erweiterte Registerkarte, auf der du deine Meldungen und Variablen f\u00fcr die Protokollierung einrichten kannst. Dies kann dir helfen, technische Probleme zu beheben oder deine Webseite im Auge zu behalten, um Probleme zu erkennen.<\/p>\nWenn du Query Monitor zum ersten Mal installierst, wird auf dieser Registerkarte nichts angezeigt, weil du noch keine Protokollvariablen eingerichtet hast.<\/p>\n
Wenn du jedoch benutzerdefinierte Protokollierungsvariablen einrichten m\u00f6chtest, kannst du dies mit einer einfachen Syntax wie der folgenden tun:<\/p>\n
do_action( 'qm\/debug', 'This happened!' );<\/code><\/p>\nQuery Monitor unterst\u00fctzt die folgenden Aktionen, mit denen du Probleme auf verschiedenen Ebenen protokollieren kannst:<\/p>\n
\n- qm\/emergency<\/li>\n
- qm\/alert<\/li>\n
- qm\/critical<\/li>\n
- qm\/error<\/li>\n
- qm\/warning<\/li>\n
- qm\/Benachrichtigung<\/li>\n
- qm\/info<\/li>\n
- qm\/debug<\/li>\n<\/ul>\n
Wenn du mehr erfahren und einige Beispiele sehen m\u00f6chtest, schau dir die Seite Query Monitor Logging Variables<\/a> an.<\/p>\nAnfrage<\/h3>\n
Die Hauptregisterkarte Abfrage<\/strong> zeigt die Abfragevariablen f\u00fcr die aktuelle Abfrage an.<\/p>\n![\"Die](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-response-tab-1024x545.png\")
Die Hauptregisterkarte Anfrage<\/figcaption><\/figure>\nEs gibt auch Untermen\u00fcs, in denen du die Request Headers<\/strong> und Response Headers<\/strong> sehen kannst, die f\u00fcr das Debugging der Leistung wahrscheinlich hilfreicher sind.<\/p>\nVielleicht willst du zum Beispiel das Caching-Verhalten oder das CDN-Verhalten debuggen. Im Untermen\u00fc Response Headers<\/strong> siehst du das Cache-Control-Verhalten, mit dem du das Browser-Caching auf deiner Webseite<\/a> debuggen kannst.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-response-tab-headers-1024x568.png\")
So siehst du die Response-Header<\/figcaption><\/figure>\nBl\u00f6cke<\/h3>\n
Die Registerkarte Bl\u00f6cke<\/strong> ist nur sichtbar, wenn du eine Seite betrachtest, die mit dem nativen WordPress-Block-Editor (AKA Gutenberg)<\/a> erstellt wurde.<\/p>\nIn diesem Fall wird auf dieser Seite jeder einzelne Block<\/a> auf der Seite aufgelistet, zusammen mit detaillierten Informationen zu diesem Block.<\/p>\nDer Clou ist, dass du hier erf\u00e4hrst, ob der Block aus dem WordPress-Kern oder aus einem anderen Plugin stammt.<\/p>\n![\"Der](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-blocks-list-1024x468.png\")
Der Blocks-Bereich erscheint nur, wenn du den Inhalt mithilfe des Block-Editors erstellt hast<\/figcaption><\/figure>\nVorlage<\/h3>\n
Die Registerkarte Vorlage<\/strong> ist nur sichtbar, wenn du Query Monitor auf dem Frontend deiner Webseite verwendest. Hier kannst du die Vorlagenhierarchie<\/a> f\u00fcr die Seite, die du gerade betrachtest, anzeigen und debuggen.<\/p>\nDu kannst die spezifische Vorlagendatei f\u00fcr diese Seite und die verschiedenen Vorlagenteile und Body-Klassen sehen.<\/p>\n
Das hat zwar nichts mit der Leistung zu tun, kann aber bei der Entwicklung von benutzerdefinierten Designs<\/a> von Vorteil sein.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-template-1024x568.png\")
So siehst du die Vorlagenhierarchie<\/figcaption><\/figure>\nAdmin-Bildschirm<\/h3>\n
Der Reiter Admin Screen<\/strong> ist nur sichtbar, wenn du Query Monitor im WordPress Admin Dashboard<\/a> verwendest. Du wirst ihn wahrscheinlich nicht so oft benutzen, aber er kann hilfreich sein, wenn du das Verhalten in einem benutzerdefinierten Verwaltungsbildschirm debuggen musst.<\/p>\nWenn du dir einen Verwaltungsbildschirm mit einer Auflistungstabelle ansiehst, zeigt er dir die benutzerdefinierten Spaltenfilter und Aktionen an. Er zeigt dir auch den Status von get_current_screen an.<\/p>\n![\"Die](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-admin-screen-1024x592.png\")
Die Details des Admin-Bildschirms<\/figcaption><\/figure>\nScripts<\/h3>\n
Nach der Registerkarte Abfragen<\/strong> ist die Registerkarte Skripte<\/strong> wahrscheinlich der n\u00e4chst hilfreichere Bereich f\u00fcr das Debugging der Leistung in Query Monitor.<\/p>\nAuf dieser Registerkarte werden alle in der Warteschlange befindlichen JavaScript-Skripte<\/a> auf der Seite sowie ihre Abh\u00e4ngigkeiten und Abh\u00e4ngigen angezeigt. Du erh\u00e4ltst auch Filter, um schnell Skripte von einem bestimmten Host oder mit expliziten Abh\u00e4ngigkeiten\/Abh\u00e4ngigen zu finden.<\/p>\nIn der Regel bedeuten mehr Skripte eine langsamere Webseite, da sie die Seitengr\u00f6\u00dfe erh\u00f6hen und zus\u00e4tzliche HTTP-Anfragen verursachen.<\/p>\n
Du kannst diesen Bereich nutzen, um die Auswirkungen verschiedener Erweiterungen zu ermitteln und Wege zu finden, die Anzahl der Skripte<\/a> zu reduzieren, die auf jeder Seite geladen werden.<\/p>\n![\"Der](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-scripts-1024x668.png\")
Bereich Skripte<\/figcaption><\/figure>\nQuery Monitor zeigt dir allerdings nicht, wie diese Skripte geladen werden. Wenn du das sehen willst, musst du ein Geschwindigkeitstest-Tool verwenden<\/a> und eine Wasserfallanalyse durchf\u00fchren – Pingdom<\/a> und GTmetrix<\/a> sind hervorragende Optionen.<\/p>\nWenn du Hilfe brauchst, um die Skripte deiner Webseite zu optimieren, findest du bei uns viele wertvolle Anleitungen zur Optimierung von JavaScript in WordPress:<\/p>\n
\n- Wie man das Parsen von JavaScript aufschiebt<\/a><\/li>\n
- Wie man Rendering-blockierendes JavaScript eliminiert<\/a><\/li>\n
- Wie man weniger HTTP-Anfragen stellt<\/a><\/li>\n<\/ul>\n
Styles<\/h3>\n
Die Registerkarte Stile<\/strong> ist wie die Registerkarte Skripte<\/strong>, aber sie zeigt statt JavaScript die in der Warteschlange stehenden CSS<\/a> an. Dies ist ein weiterer praktischer Reiter, um die Leistung deiner Webseite zu \u00fcberpr\u00fcfen.<\/p>\nGenau wie bei den Skripten f\u00fchrt das Laden von mehr Stylesheets auf einer Seite in der Regel zu einer langsamer ladenden Seite.<\/p>\n
In diesem Bereich kannst du herausfinden, wie sich die verschiedenen Erweiterungen auf deine Seite auswirken. Du kannst diese Informationen nutzen, um die Anzahl der Stylesheets, die auf der Seite geladen werden m\u00fcssen, zu reduzieren, wodurch die Dateigr\u00f6\u00dfe und die zum Laden der Seite erforderlichen HTTP-Anfragen<\/a> verringert werden.<\/p>\n![\"Der](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-styles-1024x590.png\")
Bereich Styles<\/figcaption><\/figure>\nWie bei den Skripten kannst du auch mit Query Monitor nicht genau analysieren, wie dein CSS geladen wird und ob es wichtige Teile deiner Webseite beim Laden blockiert. Daf\u00fcr musst du wieder die Wasserfallanalyse verwenden.<\/p>\n
Wir haben einige hilfreiche Beitr\u00e4ge, die dir helfen, das CSS deiner Webseite zu optimieren:<\/p>\n
\n- Wie man CSS optimiert<\/a><\/li>\n
- Wie man den kritischen Rendering-Pfad optimiert<\/a><\/li>\n<\/ul>\n
Hooks & Aktionen<\/h3>\n
Auf der Registerkarte Hooks<\/strong> & Actions<\/strong> werden alle Hooks und Aktionen der aktuellen Seite mit ihrer Priorit\u00e4t aufgelistet.<\/p>\nBei Aktionen kannst du eine einzelne Aktion erweitern, um die Datei und die Codezeile zu sehen, die mit dieser Aktion verbunden sind. Du kannst Aktionen auch nach Komponenten filtern, um Aktionen aus dem WordPress-Kern, Plugins und Themes zu finden.<\/p>\n
Dieser Bereich ist nicht wirklich auf die Leistung ausgerichtet, aber er ist praktisch f\u00fcr die eigene Entwicklung.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-hooks-and-actions-tab-1024x592.png\")
Hooks und Aktionen<\/figcaption><\/figure>\nSprachen<\/h3>\n
Die Registerkarte Sprachen<\/strong> zeigt dir die Sprach- und Textdom\u00e4nen auf deiner Webseite und die Sprachdatei<\/a>, die f\u00fcr jede Erweiterung verwendet wird.<\/p>\nDas ist nicht sehr n\u00fctzlich, wenn du eine einsprachige Webseite auf Englisch hast. Diese Registerkarte kann jedoch hilfreich sein, wenn du eine mehrsprachige Webseite hast<\/a> und\/oder deine Webseite in einer Sprache verfasst ist, die m\u00f6glicherweise nicht vollst\u00e4ndig von einem \u00dcbersetzungspaket abgedeckt wird.<\/p>\nHTTP-API-Aufrufe<\/h3>\n
Die Registerkarte HTTP-API-Aufrufe<\/strong> zeigt dir alle serverseitigen HTTP-Anfragen, die beim Laden der Seite aufgetreten sind, einschlie\u00dflich der Anfragedetails, des Zeitplans und des HTTP-Statuscodes<\/a>.<\/p>\nWenn ein Plugin oder ein Theme langsame HTTP-API-Aufrufe t\u00e4tigt, kann das oft eine „versteckte“ Ursache f\u00fcr eine schlechte Leistung sein, und du solltest einen Weg finden, dies zu beheben, indem du entweder etwas in den Einstellungen der Erweiterung \u00e4nderst oder zu einer anderen Erweiterung wechselst.<\/p>\n
F\u00fcr viele Seiten solltest du „Keine HTTP-API-Aufrufe“ sehen. Das ist ein gutes Zeichen, denn es bedeutet, dass der Leistung deiner Webseite nichts im Wege steht.<\/p>\n
F\u00e4higkeitspr\u00fcfungen<\/h3>\n
Im Bereich Capability<\/strong> Checks<\/strong>\u00a0kannst du sehen, welche Benutzerf\u00e4higkeiten auf den aktuellen Inhalt zugreifen k\u00f6nnen, den du gerade betrachtest. Das ist praktisch, um zu sehen, ob verschiedene Nutzer auf bestimmte Inhalte im Frontend oder Backend zugreifen k\u00f6nnen<\/a>.<\/p>\nDiese Funktion ist jedoch aus Leistungsgr\u00fcnden standardm\u00e4\u00dfig deaktiviert. Wenn du sie aktivieren willst, musst du die Datei wp-config.php<\/strong> deiner Webseite<\/a> bearbeiten und den folgenden Codeschnipsel hinzuf\u00fcgen:<\/p>\ndefine( 'QM_ENABLE_CAPS_PANEL', true );<\/code><\/p>\nUmgebung<\/h3>\n
Auf der Registerkarte Umgebung<\/strong>\u00a0findest du eine detaillierte \u00dcbersicht \u00fcber die Umgebungen deiner Webseite, darunter:<\/p>\n\n- PHP<\/a><\/li>\n
- Datenbank<\/li>\n
- WordPress<\/li>\n
- Server<\/li>\n<\/ul>\n
Du kannst wichtige Details, Grenzen, Versionsnummern, Konfigurationseinstellungen usw. sehen.<\/p>\n
Dies kann auch wichtige Entscheidungen \u00fcber die Leistung liefern.<\/p>\n
Wenn du zum Beispiel siehst, dass der Arbeitsspeicher deiner Webseite begrenzt ist, solltest du den Arbeitsspeicher erh\u00f6hen<\/a>, um Fehler im Zusammenhang mit der Speicherbegrenzung zu vermeiden<\/a>.<\/p>\nWenn du feststellst, dass du eine \u00e4ltere Version von PHP<\/a> verwendest, solltest du auf die neueste Version upgraden<\/a>, um die Leistung zu verbessern<\/a>.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-environment-1024x761.png\")
Umgebungsinformationen<\/figcaption><\/figure>\nConditionals<\/h3>\n
Auf der Registerkarte Conditionals<\/strong> kannst du sehen, welche Bedingungsanweisungen f\u00fcr die Seite gelten, die du gerade betrachtest.<\/p>\nDu kannst sowohl „True“ Conditionals als auch „Wrong“ Conditionals sehen.<\/p>\n![\"Conditionals\"](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-conditionals-1024x497.png\")
Conditionals<\/figcaption><\/figure>\nWie man als Nicht-Administrator Informationen des Query Monitors anzeigt<\/h3>\n
In manchen Situationen m\u00f6chtest du die Query Monitor-Informationen mit einer anderen Benutzerrolle oder als ausgeloggter Benutzer anzeigen. Das kann f\u00fcr WooCommerce-Shops<\/a>, Mitgliederseiten<\/a> und \u00e4hnliche Seiten sehr n\u00fctzlich sein.<\/p>\nDazu musst du ein Authentifizierungs-Cookie in deinem Browser setzen. Sobald du dieses Cookie gesetzt hast, kannst du die Query Monitor-Informationen bei jedem Besuch der Webseite einsehen, auch wenn du abgemeldet bist.<\/p>\n
Um das Authentifizierungs-Cookie zu setzen, klicke auf das Zahnrad-Symbol in der oberen rechten Ecke des Query Monitor-Panels. Klicke dann auf die Schaltfl\u00e4che Authentifizierungs-Cookie setzen<\/strong>.<\/p>\n![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-set-authentication-cookie-1024x622.png\")
Authentifizierungs-Cookie<\/figcaption><\/figure>\nWenn du diese Funktion wieder deaktivieren m\u00f6chtest, kannst du zu dieser Oberfl\u00e4che zur\u00fcckkehren und auf die Schaltfl\u00e4che Authentifizierungs-Cookie l\u00f6schen<\/strong> klicken, um das Cookie zu entfernen.<\/p>\nWenn du diese Funktion mit User Switching<\/a>, einem anderen hilfreichen Plugin desselben Entwicklers, kombinierst, kannst du schnell zwischen verschiedenen Benutzerrollen<\/a> auf deiner Webseite wechseln.<\/p>\nWie du Query Monitor mit Add-Ons erweiterst<\/h3>\n
Bis jetzt haben wir uns ausschlie\u00dflich auf die Funktionen und Analyseoptionen des Query Monitor Plugins konzentriert. Mit verschiedenen Add-Ons von Drittanbietern kannst du Query Monitor jedoch noch weiter ausbauen.<\/p>\n
Diese k\u00f6nnen die Unterst\u00fctzung f\u00fcr bestimmte Leistungstechnologien wie Memcached und Redis<\/a> sowie f\u00fcr bestimmte WordPress-Plugins wie WooCommerce<\/a> oder GiveWP<\/a> hinzuf\u00fcgen.<\/p>\nQuery Monitor unterst\u00fctzt auch alle Add-ons f\u00fcr das Debug Bar Plugin<\/a>, das Integrationen f\u00fcr ElasticPress<\/a>, Elementor<\/a>, Cache Lookup und viele mehr bietet.<\/p>\nEine vollst\u00e4ndige Liste der Query Monitor Add-ons findest du auf dieser GitHub-Seite<\/a>.<\/p>\nAndere n\u00fctzliche Tools zum Debuggen und Verbessern der WordPress-Leistung<\/h2>\n
Query Monitor ist zwar ein praktisches kostenloses Tool zum Debuggen der WordPress-Performance, aber es deckt nicht alles ab. Es gibt einige andere n\u00fctzliche Tools, die du in Betracht ziehen solltest, um verschiedene Bereiche der WordPress-Leistung zu analysieren.<\/p>\n
Kinsta APM (Anwendungsleistungs\u00fcberwachung)<\/h3>\n![\"Das](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/kinsta-apm-1024x546.jpg\")
Das Kinsta APM Tool<\/figcaption><\/figure>\nWenn du deine Webseite bei Kinsta hostest<\/a>, erh\u00e4ltst du kostenlosen Zugang zum Kinsta Application Performance Monitoring (APM)<\/a>.<\/p>\nEin APM-Tool<\/a> wie Kinsta APM geht mit den folgenden Arten von Analysen noch tiefer<\/a> als Query Monitor:<\/p>\n\n- Langsame PHP-Prozesse<\/li>\n
- Langsame Datenbankabfragen<\/li>\n
- Lange API-Aufrufe<\/li>\n
- Lange externe URL-Anfragen<\/li>\n
- Full-Stack Traces in problematischen Bereichen<\/li>\n<\/ul>\n
Du kannst auch sehen, wie sich diese Informationen im Laufe der Zeit ver\u00e4ndern, was Query Monitor nicht kann. Au\u00dferdem kannst du deine gesamte Webseite analysieren, anstatt Seite f\u00fcr Seite zu betrachten.<\/p>\n
Eine allgemeine Anleitung findest du in unserem Kinsta APM-Leitfaden<\/a>.<\/p>\nWir haben auch spezielle Anleitungen f\u00fcr die Nutzung von APM zur Optimierung ressourcenintensiver WordPress-Webseiten:<\/p>\n
\n- Verwendung von APM zur Optimierung eines WooCommerce Shops<\/a><\/li>\n
- APM f\u00fcr die Optimierung einer Mitgliederseite<\/a><\/li>\n<\/ul>\n
New Relic<\/h3>\n
New Relic<\/a> ist ein weiteres hilfreiches Tool zur Leistungs\u00fcberwachung, das dem Kinsta APM \u00e4hnelt.<\/p>\nWenn du nicht bei Kinsta hostest, kann es eine gute M\u00f6glichkeit sein, auf \u00e4hnliche Analysen zuzugreifen. Auch wenn du bei Kinsta hostest, kannst du das New Relic-Tracking bei Bedarf aktivieren<\/a>, allerdings brauchst du daf\u00fcr eine eigene Lizenz.<\/p>\nWie du New Relic nutzt, erf\u00e4hrst du in unserem New Relic Performance-Tutorial<\/a>.<\/p>\nEin Tool zur Qualit\u00e4tspr\u00fcfung der Geschwindigkeit<\/h3>\n
Wir haben dies bereits bei der Wasserfallanalyse erw\u00e4hnt, aber ein gutes Geschwindigkeitstest-Tool kann von unsch\u00e4tzbarem Wert sein, um herauszufinden, was<\/em> deine Webseite l\u00e4dt und wie<\/em> sie l\u00e4dt.<\/p>\nUm dir bei der Nutzung des von dir gew\u00e4hlten Tools zu helfen, haben wir einen speziellen Leitfaden f\u00fcr die richtige Durchf\u00fchrung eines Geschwindigkeitstests<\/a>. Au\u00dferdem haben wir Beitr\u00e4ge zu einigen der beliebtesten Tools:<\/p>\n\n- GTmetrix-Anleitung<\/a><\/li>\n
- Pingdom-Anleitung<\/a><\/li>\n
- PageSpeed Insights-Anleitung<\/a><\/li>\n<\/ul>\n
WordPress Debug-Modus<\/h3>\n
WordPress verf\u00fcgt \u00fcber einen eingebauten Debug-Modus, der alle PHP-Fehler, Hinweise und Warnungen anzeigt. Du hast auch die M\u00f6glichkeit, diese Probleme in einer Logdatei zu speichern.<\/p>\n
Weitere Informationen findest du in unserem vollst\u00e4ndigen Leitfaden zum WordPress-Debug-Modus<\/a>.<\/p>\nWebbrowser-Entwickler-Tools<\/h3>\n
Query Monitor<\/a> ist ein 100% kostenloses Plugin, das dir hilft, die Leistung und Entwicklung deiner WordPress-Webseite zu \u00fcberpr\u00fcfen.<\/p>\n Du kannst es dir wie die Chrome Developer Tools vorstellen, aber speziell f\u00fcr WordPress. Du kannst Datenbankabfragen, Skripte, das Timing und vieles mehr untersuchen. Au\u00dferdem kannst du viele hilfreiche Informationen einsehen, z. B. allgemeine Umgebungsinformationen und Details zu bestimmten Seiten.<\/p>\n Query Monitor stellt all diese Informationen in einer leicht zug\u00e4nglichen Form dar, auf die du von \u00fcberall auf deiner Webseite zugreifen kannst.<\/p>\n Query Monitor wird von John Blackbourn, einem leitenden Webentwickler bei Human Made<\/a>, gepflegt. Er hat noch weitere n\u00fctzliche Plugins entwickelt, z. B. WP Crontrol<\/a> (ideal zum Debuggen von wp-cron<\/a>) und User Switching<\/a> (ideal zum Debuggen der Erfahrungen verschiedener Benutzerrollen<\/a>).<\/p>\n John ist sehr reaktionsschnell und arbeitet st\u00e4ndig an der Wartung und Verbesserung von Query Monitor. Automattic und andere Sponsoren unterst\u00fctzen seine Arbeit.<\/p>\n Wenn dir das Plugin gef\u00e4llt, wenn du diesen Beitrag liest, kannst du Query Monitor unterst\u00fctzen, indem du das Projekt auf GitHub f\u00fcr nur $1 pro Monat sponserst<\/a>.<\/p>\n\n Query Monitor kann dir helfen, mehr als nur Abfragen an die WordPress-Datenbank<\/a> zu debuggen, trotz des Namens.<\/p>\n Versteh uns nicht falsch – das Debuggen von Datenbankabfragen<\/a> ist etwas, das Query Monitor gut kann und einer der wichtigsten Vorteile des Plugins ist.<\/p>\n Es kann aber auch in vielen anderen Bereichen eingesetzt werden, z. B. beim Debuggen der Leistung und beim allgemeinen Debuggen der Entwicklung.<\/p>\n Hier ist eine Auswahl der vielen Details, mit denen Query Monitor dich bei der Analyse und Fehlersuche unterst\u00fctzen kann:<\/p>\n Eine bemerkenswerte Einschr\u00e4nkung von Query Monitor ist, dass er in erster Linie f\u00fcr das Debugging „in the moment“ gedacht ist. Wenn er dir die Datenbankabfragen, das Timing und so weiter anzeigt, gilt das nur f\u00fcr den aktuellen Seitenaufbau.<\/p>\n Historische Informationen\/Trends werden in der Regel nicht verfolgt oder angezeigt, obwohl John sagt, dass diese Funktion f\u00fcr zuk\u00fcnftige Versionen geplant ist.<\/p>\n Nachdem du nun wei\u00dft, was Query Monitor ist und was es kann, wollen wir uns ansehen, wie du Query Monitor zum Debuggen der Leistung deiner Webseite und einiger anderer Tools f\u00fcr das allgemeine Debugging in der Entwicklung verwenden kannst.<\/p>\n Wir geben dir eine allgemeine Einf\u00fchrung in die Oberfl\u00e4che von Query Monitor und wie sie funktioniert. Dann gehen wir auf die einzelnen Bereiche der Benutzeroberfl\u00e4che ein.<\/p>\n Es gibt mehr als 12 verschiedene Bereiche der Benutzeroberfl\u00e4che, es gibt also eine Menge zu behandeln. Wie viele Men\u00fcs du genau siehst, h\u00e4ngt jedoch von der Seite ab, die du analysierst.<\/p>\n Lass uns loslegen.<\/p>\n Query Monitor hat keinen eigenen Interface-Bereich. Stattdessen werden neue Informationen in der WordPress-Administrationsleiste sowohl im Frontend als auch im Backend angezeigt.<\/p>\n Query Monitor zeigt zun\u00e4chst eine kurze Zusammenfassung mit vier Informationen an:<\/p>\n Wenn du auf diese Zusammenfassung klickst, \u00f6ffnet sich die gesamte Query Monitor-Oberfl\u00e4che, die als Overlay-Fenster auf der Frontend- oder Backend-Seite angezeigt wird, die du gerade betrachtest.<\/p>\n Alle Funktionen und Informationen, die Query Monitor bietet, sind in diesem Overlay-Fenster enthalten.<\/p>\n Wenn du das Layout des Overlay-Fensters \u00e4ndern m\u00f6chtest, kannst du auf die Schaltfl\u00e4che in der oberen rechten Ecke klicken, um es in eine Seitenleiste umzuwandeln. Du kannst auch die Gr\u00f6\u00dfe des Fensters per Drag-and-Drop \u00e4ndern.<\/p>\n Die Query Monitor Oberfl\u00e4che und ihre Informationen sind nur f\u00fcr Administratoren (oder Superadministratoren auf WordPress Multisites<\/a>) sichtbar.<\/p>\n Es gibt auch die M\u00f6glichkeit, ein Authentifizierungs-Cookie zu setzen, damit du den Query Monitor auch dann sehen kannst, wenn du nicht eingeloggt bist (oder als Benutzer mit einer niedrigeren Benutzerrolle<\/a>). Wie du das machst, erf\u00e4hrst du etwas sp\u00e4ter in diesem Leitfaden.<\/p>\n Gehen wir die einzelnen Registerkarten der Benutzeroberfl\u00e4che durch und erkl\u00e4ren, wie du sie zum Debuggen deiner WordPress-Webseite verwenden kannst.<\/p>\n Auf der Registerkarte \u00dcbersicht<\/strong> werden weitere Details aus der Zusammenfassung der Verwaltungsleiste und einige allgemeine Umgebungsinformationen angezeigt.<\/p>\n Anstatt nur die maximale Speichernutzung zu sehen, geht die Registerkarte \u00dcbersicht einen Schritt weiter und zeigt an, wie die maximale Speichernutzung im Vergleich zu den Speichergrenzen deines Servers und von WordPress aussieht.<\/p>\n Hier gibt es nichts allzu Detailliertes – es ist nur ein \u00dcberblick (daher der Name).<\/p>\n Auf der Registerkarte Abfragen<\/strong> kannst du die einzelnen Datenbankabfragen f\u00fcr die Seite, die du gerade betrachtest, genauer betrachten. Es ist einer der informationsreichsten Bereiche in Query Monitor, was bei dem Namen des Plugins auch Sinn macht.<\/p>\n F\u00fcr jede Abfrage kannst du die folgenden Informationen sehen:<\/p>\n Neben der allgemeinen Fehlersuche kannst du damit auch langsam ladende Abfragen aufsp\u00fcren, die die Leistung deiner Webseite beeintr\u00e4chtigen.<\/p>\n Query Monitor schl\u00fcsselt die Abfragen nach deinem Theme und den einzelnen Plugins auf, sodass du die Auswirkungen der einzelnen Erweiterungen sehen kannst.<\/p>\n Angenommen, ein bestimmtes Plugin verursacht viele langsam ladende Abfragen. In diesem Fall musst du einen Weg finden, das zu beheben – entweder indem du die Einstellungen des Plugins oder die Konfiguration deines Servers optimierst (z. B. durch Datenbank- oder Objekt-Caching<\/a>) oder indem du zu einem anderen Plugin wechselst, das effizienter ist<\/a>.<\/p>\n Auf der Hauptregisterkarte kannst du alle wichtigen Informationen zu jeder Abfrage sehen.<\/p>\n Wenn du mehr \u00fcber eine bestimmte Abfrage erfahren m\u00f6chtest, klicke auf das Plus-Symbol, um detailliertere Informationen zu erhalten.<\/p>\n Wenn du hier ungew\u00f6hnlich niedrige Zahlen siehst, k\u00f6nnte das an einer Art von Caching<\/a> liegen – z.B. Seiten-Caching oder ein Plugin, das seine Datenbankabfragen zwischenspeichert<\/a>. Aus diesem Grund kann es hilfreich sein, das Caching zu deaktivieren, w\u00e4hrend du die Fehlerbehebung durchf\u00fchrst.<\/p>\n In diesem Bereich gibt es auch ein paar Untermen\u00fcs, die dir helfen, bestimmte Arten von Abfragen zu finden:<\/p>\n Der Bereich Doppelte Abfragen<\/strong>\u00a0hebt doppelte Abfragen hervor und listet die „potenziellen St\u00f6renfriede“ auf, um dir bei der Fehlersuche zu helfen und die Abl\u00e4ufe zu optimieren.<\/p>\n Im Bereich Abfragen nach Aufrufer<\/strong> kannst du dir alle Aufrufer auf dieser Seite ansehen. Wenn du auf einen Aufrufer klickst, siehst du eine Liste der Abfragen f\u00fcr diesen Aufrufer.<\/p>\n Der Bereich Abfragen nach Komponente <\/strong>zeigt eine Liste aller Komponenten, die Abfragen gestellt haben, darunter der WordPress-Kern, dein Theme und einzelne Plugins.<\/p>\n Du kannst auf eine bestimmte Komponente klicken, um alle ihre Abfragen zu sehen.<\/p>\n Auch dies ist einer der wertvollsten Berichte, weil du damit bestimmte Plugins finden kannst, die die Leistung deiner Webseite durch langsame Abfragen beeintr\u00e4chtigen.<\/p>\n Wenn du die Komponenteninformationen im Query Monitor nicht siehst, liegt das wahrscheinlich daran, dass Query Monitor die Datei db.php nicht verlinken kann. In diesem Fall erh\u00e4ltst du eine Fehlermeldung wie die folgende.<\/p>\n Hier gibt es zwei wahrscheinliche Ursachen:<\/p>\n In diesem GitHub-Artikel findest du einige L\u00f6sungen und Workarounds<\/a>. Wenn du dich \u00fcber SSH mit deinem Server verbinden<\/a> kannst, kannst du das Problem mit einem WP-CLI-Befehl<\/a> beheben (es gibt aber auch andere Methoden).<\/p>\n Die meisten Funktionen von Query Monitor funktionieren auch mit diesem Problem, aber du wirst keine Informationen \u00fcber die Komponenten sehen k\u00f6nnen, bis du das Problem behoben hast.<\/p>\n Die Registerkarte Logs<\/strong> ist eine erweiterte Registerkarte, auf der du deine Meldungen und Variablen f\u00fcr die Protokollierung einrichten kannst. Dies kann dir helfen, technische Probleme zu beheben oder deine Webseite im Auge zu behalten, um Probleme zu erkennen.<\/p>\n Wenn du Query Monitor zum ersten Mal installierst, wird auf dieser Registerkarte nichts angezeigt, weil du noch keine Protokollvariablen eingerichtet hast.<\/p>\n Wenn du jedoch benutzerdefinierte Protokollierungsvariablen einrichten m\u00f6chtest, kannst du dies mit einer einfachen Syntax wie der folgenden tun:<\/p>\n Query Monitor unterst\u00fctzt die folgenden Aktionen, mit denen du Probleme auf verschiedenen Ebenen protokollieren kannst:<\/p>\n Wenn du mehr erfahren und einige Beispiele sehen m\u00f6chtest, schau dir die Seite Query Monitor Logging Variables<\/a> an.<\/p>\n Die Hauptregisterkarte Abfrage<\/strong> zeigt die Abfragevariablen f\u00fcr die aktuelle Abfrage an.<\/p>\n Es gibt auch Untermen\u00fcs, in denen du die Request Headers<\/strong> und Response Headers<\/strong> sehen kannst, die f\u00fcr das Debugging der Leistung wahrscheinlich hilfreicher sind.<\/p>\n Vielleicht willst du zum Beispiel das Caching-Verhalten oder das CDN-Verhalten debuggen. Im Untermen\u00fc Response Headers<\/strong> siehst du das Cache-Control-Verhalten, mit dem du das Browser-Caching auf deiner Webseite<\/a> debuggen kannst.<\/p>\n Die Registerkarte Bl\u00f6cke<\/strong> ist nur sichtbar, wenn du eine Seite betrachtest, die mit dem nativen WordPress-Block-Editor (AKA Gutenberg)<\/a> erstellt wurde.<\/p>\n In diesem Fall wird auf dieser Seite jeder einzelne Block<\/a> auf der Seite aufgelistet, zusammen mit detaillierten Informationen zu diesem Block.<\/p>\n Der Clou ist, dass du hier erf\u00e4hrst, ob der Block aus dem WordPress-Kern oder aus einem anderen Plugin stammt.<\/p>\n Die Registerkarte Vorlage<\/strong> ist nur sichtbar, wenn du Query Monitor auf dem Frontend deiner Webseite verwendest. Hier kannst du die Vorlagenhierarchie<\/a> f\u00fcr die Seite, die du gerade betrachtest, anzeigen und debuggen.<\/p>\n Du kannst die spezifische Vorlagendatei f\u00fcr diese Seite und die verschiedenen Vorlagenteile und Body-Klassen sehen.<\/p>\n Das hat zwar nichts mit der Leistung zu tun, kann aber bei der Entwicklung von benutzerdefinierten Designs<\/a> von Vorteil sein.<\/p>\n Der Reiter Admin Screen<\/strong> ist nur sichtbar, wenn du Query Monitor im WordPress Admin Dashboard<\/a> verwendest. Du wirst ihn wahrscheinlich nicht so oft benutzen, aber er kann hilfreich sein, wenn du das Verhalten in einem benutzerdefinierten Verwaltungsbildschirm debuggen musst.<\/p>\n Wenn du dir einen Verwaltungsbildschirm mit einer Auflistungstabelle ansiehst, zeigt er dir die benutzerdefinierten Spaltenfilter und Aktionen an. Er zeigt dir auch den Status von get_current_screen an.<\/p>\n Nach der Registerkarte Abfragen<\/strong> ist die Registerkarte Skripte<\/strong> wahrscheinlich der n\u00e4chst hilfreichere Bereich f\u00fcr das Debugging der Leistung in Query Monitor.<\/p>\n Auf dieser Registerkarte werden alle in der Warteschlange befindlichen JavaScript-Skripte<\/a> auf der Seite sowie ihre Abh\u00e4ngigkeiten und Abh\u00e4ngigen angezeigt. Du erh\u00e4ltst auch Filter, um schnell Skripte von einem bestimmten Host oder mit expliziten Abh\u00e4ngigkeiten\/Abh\u00e4ngigen zu finden.<\/p>\n In der Regel bedeuten mehr Skripte eine langsamere Webseite, da sie die Seitengr\u00f6\u00dfe erh\u00f6hen und zus\u00e4tzliche HTTP-Anfragen verursachen.<\/p>\n Du kannst diesen Bereich nutzen, um die Auswirkungen verschiedener Erweiterungen zu ermitteln und Wege zu finden, die Anzahl der Skripte<\/a> zu reduzieren, die auf jeder Seite geladen werden.<\/p>\n Query Monitor zeigt dir allerdings nicht, wie diese Skripte geladen werden. Wenn du das sehen willst, musst du ein Geschwindigkeitstest-Tool verwenden<\/a> und eine Wasserfallanalyse durchf\u00fchren – Pingdom<\/a> und GTmetrix<\/a> sind hervorragende Optionen.<\/p>\n Wenn du Hilfe brauchst, um die Skripte deiner Webseite zu optimieren, findest du bei uns viele wertvolle Anleitungen zur Optimierung von JavaScript in WordPress:<\/p>\n Die Registerkarte Stile<\/strong> ist wie die Registerkarte Skripte<\/strong>, aber sie zeigt statt JavaScript die in der Warteschlange stehenden CSS<\/a> an. Dies ist ein weiterer praktischer Reiter, um die Leistung deiner Webseite zu \u00fcberpr\u00fcfen.<\/p>\n Genau wie bei den Skripten f\u00fchrt das Laden von mehr Stylesheets auf einer Seite in der Regel zu einer langsamer ladenden Seite.<\/p>\n In diesem Bereich kannst du herausfinden, wie sich die verschiedenen Erweiterungen auf deine Seite auswirken. Du kannst diese Informationen nutzen, um die Anzahl der Stylesheets, die auf der Seite geladen werden m\u00fcssen, zu reduzieren, wodurch die Dateigr\u00f6\u00dfe und die zum Laden der Seite erforderlichen HTTP-Anfragen<\/a> verringert werden.<\/p>\n Wie bei den Skripten kannst du auch mit Query Monitor nicht genau analysieren, wie dein CSS geladen wird und ob es wichtige Teile deiner Webseite beim Laden blockiert. Daf\u00fcr musst du wieder die Wasserfallanalyse verwenden.<\/p>\n Wir haben einige hilfreiche Beitr\u00e4ge, die dir helfen, das CSS deiner Webseite zu optimieren:<\/p>\n Auf der Registerkarte Hooks<\/strong> & Actions<\/strong> werden alle Hooks und Aktionen der aktuellen Seite mit ihrer Priorit\u00e4t aufgelistet.<\/p>\n Bei Aktionen kannst du eine einzelne Aktion erweitern, um die Datei und die Codezeile zu sehen, die mit dieser Aktion verbunden sind. Du kannst Aktionen auch nach Komponenten filtern, um Aktionen aus dem WordPress-Kern, Plugins und Themes zu finden.<\/p>\n Dieser Bereich ist nicht wirklich auf die Leistung ausgerichtet, aber er ist praktisch f\u00fcr die eigene Entwicklung.<\/p>\n Die Registerkarte Sprachen<\/strong> zeigt dir die Sprach- und Textdom\u00e4nen auf deiner Webseite und die Sprachdatei<\/a>, die f\u00fcr jede Erweiterung verwendet wird.<\/p>\n Das ist nicht sehr n\u00fctzlich, wenn du eine einsprachige Webseite auf Englisch hast. Diese Registerkarte kann jedoch hilfreich sein, wenn du eine mehrsprachige Webseite hast<\/a> und\/oder deine Webseite in einer Sprache verfasst ist, die m\u00f6glicherweise nicht vollst\u00e4ndig von einem \u00dcbersetzungspaket abgedeckt wird.<\/p>\n Die Registerkarte HTTP-API-Aufrufe<\/strong> zeigt dir alle serverseitigen HTTP-Anfragen, die beim Laden der Seite aufgetreten sind, einschlie\u00dflich der Anfragedetails, des Zeitplans und des HTTP-Statuscodes<\/a>.<\/p>\n Wenn ein Plugin oder ein Theme langsame HTTP-API-Aufrufe t\u00e4tigt, kann das oft eine „versteckte“ Ursache f\u00fcr eine schlechte Leistung sein, und du solltest einen Weg finden, dies zu beheben, indem du entweder etwas in den Einstellungen der Erweiterung \u00e4nderst oder zu einer anderen Erweiterung wechselst.<\/p>\n F\u00fcr viele Seiten solltest du „Keine HTTP-API-Aufrufe“ sehen. Das ist ein gutes Zeichen, denn es bedeutet, dass der Leistung deiner Webseite nichts im Wege steht.<\/p>\n Im Bereich Capability<\/strong> Checks<\/strong>\u00a0kannst du sehen, welche Benutzerf\u00e4higkeiten auf den aktuellen Inhalt zugreifen k\u00f6nnen, den du gerade betrachtest. Das ist praktisch, um zu sehen, ob verschiedene Nutzer auf bestimmte Inhalte im Frontend oder Backend zugreifen k\u00f6nnen<\/a>.<\/p>\n Diese Funktion ist jedoch aus Leistungsgr\u00fcnden standardm\u00e4\u00dfig deaktiviert. Wenn du sie aktivieren willst, musst du die Datei wp-config.php<\/strong> deiner Webseite<\/a> bearbeiten und den folgenden Codeschnipsel hinzuf\u00fcgen:<\/p>\n Auf der Registerkarte Umgebung<\/strong>\u00a0findest du eine detaillierte \u00dcbersicht \u00fcber die Umgebungen deiner Webseite, darunter:<\/p>\n Du kannst wichtige Details, Grenzen, Versionsnummern, Konfigurationseinstellungen usw. sehen.<\/p>\n Dies kann auch wichtige Entscheidungen \u00fcber die Leistung liefern.<\/p>\n Wenn du zum Beispiel siehst, dass der Arbeitsspeicher deiner Webseite begrenzt ist, solltest du den Arbeitsspeicher erh\u00f6hen<\/a>, um Fehler im Zusammenhang mit der Speicherbegrenzung zu vermeiden<\/a>.<\/p>\n Wenn du feststellst, dass du eine \u00e4ltere Version von PHP<\/a> verwendest, solltest du auf die neueste Version upgraden<\/a>, um die Leistung zu verbessern<\/a>.<\/p>\n Auf der Registerkarte Conditionals<\/strong> kannst du sehen, welche Bedingungsanweisungen f\u00fcr die Seite gelten, die du gerade betrachtest.<\/p>\n Du kannst sowohl „True“ Conditionals als auch „Wrong“ Conditionals sehen.<\/p>\n In manchen Situationen m\u00f6chtest du die Query Monitor-Informationen mit einer anderen Benutzerrolle oder als ausgeloggter Benutzer anzeigen. Das kann f\u00fcr WooCommerce-Shops<\/a>, Mitgliederseiten<\/a> und \u00e4hnliche Seiten sehr n\u00fctzlich sein.<\/p>\n Dazu musst du ein Authentifizierungs-Cookie in deinem Browser setzen. Sobald du dieses Cookie gesetzt hast, kannst du die Query Monitor-Informationen bei jedem Besuch der Webseite einsehen, auch wenn du abgemeldet bist.<\/p>\n Um das Authentifizierungs-Cookie zu setzen, klicke auf das Zahnrad-Symbol in der oberen rechten Ecke des Query Monitor-Panels. Klicke dann auf die Schaltfl\u00e4che Authentifizierungs-Cookie setzen<\/strong>.<\/p>\n Wenn du diese Funktion wieder deaktivieren m\u00f6chtest, kannst du zu dieser Oberfl\u00e4che zur\u00fcckkehren und auf die Schaltfl\u00e4che Authentifizierungs-Cookie l\u00f6schen<\/strong> klicken, um das Cookie zu entfernen.<\/p>\n Wenn du diese Funktion mit User Switching<\/a>, einem anderen hilfreichen Plugin desselben Entwicklers, kombinierst, kannst du schnell zwischen verschiedenen Benutzerrollen<\/a> auf deiner Webseite wechseln.<\/p>\n Bis jetzt haben wir uns ausschlie\u00dflich auf die Funktionen und Analyseoptionen des Query Monitor Plugins konzentriert. Mit verschiedenen Add-Ons von Drittanbietern kannst du Query Monitor jedoch noch weiter ausbauen.<\/p>\n Diese k\u00f6nnen die Unterst\u00fctzung f\u00fcr bestimmte Leistungstechnologien wie Memcached und Redis<\/a> sowie f\u00fcr bestimmte WordPress-Plugins wie WooCommerce<\/a> oder GiveWP<\/a> hinzuf\u00fcgen.<\/p>\n Query Monitor unterst\u00fctzt auch alle Add-ons f\u00fcr das Debug Bar Plugin<\/a>, das Integrationen f\u00fcr ElasticPress<\/a>, Elementor<\/a>, Cache Lookup und viele mehr bietet.<\/p>\n Eine vollst\u00e4ndige Liste der Query Monitor Add-ons findest du auf dieser GitHub-Seite<\/a>.<\/p>\n Query Monitor ist zwar ein praktisches kostenloses Tool zum Debuggen der WordPress-Performance, aber es deckt nicht alles ab. Es gibt einige andere n\u00fctzliche Tools, die du in Betracht ziehen solltest, um verschiedene Bereiche der WordPress-Leistung zu analysieren.<\/p>\n Wenn du deine Webseite bei Kinsta hostest<\/a>, erh\u00e4ltst du kostenlosen Zugang zum Kinsta Application Performance Monitoring (APM)<\/a>.<\/p>\n Ein APM-Tool<\/a> wie Kinsta APM geht mit den folgenden Arten von Analysen noch tiefer<\/a> als Query Monitor:<\/p>\n Du kannst auch sehen, wie sich diese Informationen im Laufe der Zeit ver\u00e4ndern, was Query Monitor nicht kann. Au\u00dferdem kannst du deine gesamte Webseite analysieren, anstatt Seite f\u00fcr Seite zu betrachten.<\/p>\n Eine allgemeine Anleitung findest du in unserem Kinsta APM-Leitfaden<\/a>.<\/p>\n Wir haben auch spezielle Anleitungen f\u00fcr die Nutzung von APM zur Optimierung ressourcenintensiver WordPress-Webseiten:<\/p>\n New Relic<\/a> ist ein weiteres hilfreiches Tool zur Leistungs\u00fcberwachung, das dem Kinsta APM \u00e4hnelt.<\/p>\n Wenn du nicht bei Kinsta hostest, kann es eine gute M\u00f6glichkeit sein, auf \u00e4hnliche Analysen zuzugreifen. Auch wenn du bei Kinsta hostest, kannst du das New Relic-Tracking bei Bedarf aktivieren<\/a>, allerdings brauchst du daf\u00fcr eine eigene Lizenz.<\/p>\n Wie du New Relic nutzt, erf\u00e4hrst du in unserem New Relic Performance-Tutorial<\/a>.<\/p>\n Wir haben dies bereits bei der Wasserfallanalyse erw\u00e4hnt, aber ein gutes Geschwindigkeitstest-Tool kann von unsch\u00e4tzbarem Wert sein, um herauszufinden, was<\/em> deine Webseite l\u00e4dt und wie<\/em> sie l\u00e4dt.<\/p>\n Um dir bei der Nutzung des von dir gew\u00e4hlten Tools zu helfen, haben wir einen speziellen Leitfaden f\u00fcr die richtige Durchf\u00fchrung eines Geschwindigkeitstests<\/a>. Au\u00dferdem haben wir Beitr\u00e4ge zu einigen der beliebtesten Tools:<\/p>\n WordPress verf\u00fcgt \u00fcber einen eingebauten Debug-Modus, der alle PHP-Fehler, Hinweise und Warnungen anzeigt. Du hast auch die M\u00f6glichkeit, diese Probleme in einer Logdatei zu speichern.<\/p>\n Weitere Informationen findest du in unserem vollst\u00e4ndigen Leitfaden zum WordPress-Debug-Modus<\/a>.<\/p>\nWas macht Query Monitor?<\/h2>\n
\n
Wie du Query Monitor zum Debuggen von WordPress und zur Leistungsverbesserung nutzt<\/h2>\n
Eine Einf\u00fchrung in die Query Monitor-Oberfl\u00e4che<\/h3>\n
\n
\u00dcbersicht<\/h3>\n
Abfragen<\/h3>\n
\n
\n
Doppelte Abfragen<\/h4>\n
Abfragen nach Aufrufer<\/h4>\n
Abfragen nach Komponente<\/h4>\n
Lies dies, wenn du keine Abfragen nach Komponente siehst<\/h4>\n
\n
Logs<\/h3>\n
do_action( 'qm\/debug', 'This happened!' );<\/code><\/p>\n\n
Anfrage<\/h3>\n
Bl\u00f6cke<\/h3>\n
Vorlage<\/h3>\n
Admin-Bildschirm<\/h3>\n
Scripts<\/h3>\n
\n
Styles<\/h3>\n
\n
Hooks & Aktionen<\/h3>\n
Sprachen<\/h3>\n
HTTP-API-Aufrufe<\/h3>\n
F\u00e4higkeitspr\u00fcfungen<\/h3>\n
define( 'QM_ENABLE_CAPS_PANEL', true );<\/code><\/p>\nUmgebung<\/h3>\n
\n
Conditionals<\/h3>\n
Wie man als Nicht-Administrator Informationen des Query Monitors anzeigt<\/h3>\n
Wie du Query Monitor mit Add-Ons erweiterst<\/h3>\n
Andere n\u00fctzliche Tools zum Debuggen und Verbessern der WordPress-Leistung<\/h2>\n
Kinsta APM (Anwendungsleistungs\u00fcberwachung)<\/h3>\n
\n
\n
New Relic<\/h3>\n
Ein Tool zur Qualit\u00e4tspr\u00fcfung der Geschwindigkeit<\/h3>\n
\n
WordPress Debug-Modus<\/h3>\n
Webbrowser-Entwickler-Tools<\/h3>\n