Debug Performance issues using Query Monitor in WordPress

The Query Monitor plugin is a developer toolbar that sits at the bottom of the WordPress site. Developers like to see more information about their site to help identify errors, elements on the page, calls, accessing database queries to see if JavaScript and CSS tools are loaded, and other useful information of their site. Query monitor assists in presenting information about elements of the site while it is being built.

Getting Started

To get started, download and install Query Monitor.

Begin by navigating to Plugins on the dashboard and click Add New. From here, there are two options for installation.

Option 1: Search for Query Monitor. Click Install Now and Activate.

Option 2: Go to the plugin page, download the zip file, and upload into the designated section under Upload Plugin.

*Check if the plugin was successfully installed and activated under Installed Plugins.

Top Bar

Once the plugin is installed, you’ll see the page generation time, Peak memory usage, Database Queries, and Number of queries in the toolbar.

Query Monitor Tabs

Click on the query monitor numbers in the toolbar to open the tabs.

Overview

This page shows the URL in the “GET https://”  and expands on the top bar information.
Information includes: page generation time, peak memory usage, database queries, along with HTTP API calls and Object cache.

Queries

Information condensed into one view: Query, Caller, Component, Rows, and Time.This section shows how to expand on queries, queries by caller and by component.

Duplicate Queries: Query and count, Callers, Components (Plugin and Core), and Potential Troublemakers and number of calls. These queries may include slow or duplicate queries and allow filtering.

Queries by Caller: Caller, the type of query and the time it takes.

Queries by Component: Component (Core and Plugin), the type of query and their times. It will also show which plugins return the most queries.

Logs

Messages and variables can be logged using the Query Monitor plugin.

PHP errors will trigger notifications. Log shows the level of the notification(Debug, Error, Info), Message (information about the item), Caller, and the Component.

Request

Request is helpful in debugging requests and responses.

The Request is the page you are currently viewing; there is also more information about the rules, queries, variables, and response/request data for the user on the page.

  • Request Headers: header types (e.g. cookie, host, user agent) and the associated values.
  • Response Headers: header types (e.g. cache control, content type, link) and their values.
  • Hooks in Use: hook type, priority level, callback, component.

*The request shows the related hooks with filters or actions attached.

Blocks

When using WordPress 5.0+ or Gutenberg plugin, the Blocks will show the properties of the content on the page. Additional information such as inner HTML, Render Callback and Time, Context, and Attributes will be present for each block.

*Errors will be highlighted in red for each block

Template

Template: themes used, template file names and the template hierarchy, which templates were used and their classes, and parts or classes that were loaded and not loaded.

Scripts

Displays the loaded scripts on the page with more WordPress detail. Includes the location of the handles along with their dependencies and dependents.

Styles

*Similar to Scripts, it shows all the styles applied to the page.

Hooks & Actions

Shows the corresponding actions for each hook. Displays what is loaded on the site

Languages

Shows the text domain’s caller and translation file.

HTTP API Calls

Shows the request codes, time, and components of each API request.

Transient Updates

Transients temporarily store plugin and theme data. Managing transients can help optimize the speed and performance of the site.

Capability Checks

Results and parameters given to the capability checks.

Environment

Provides a synopsis of the PHP, Database, WordPress, and Server information for your site.

Conditionals

Returns all the true and false conditions that are set in the backend.

Summary

The Query Monitor plugin is a developer’s tool for debugging and monitoring your site. It provides information about every aspect of the site in a simple view; it includes information about plugins, themes, and functions so developers can determine how to optimize their site and fix potential problems.

Leave a Comment

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Sign up and get notified when the next WordPress tutorial is published.