Query Monitor - Debug WordPress and increase website performance

While doing work on an WordPress development project that has dozens or more plugins installed It's not uncommon to experience difficulties with performance. But, determining the root of the issue with performance isn't always easy.

The usual method of identifying the problem with a plugin is to disable plugins until you discover the issue that is causing the performance issues.

There's an easier and more efficient way. This is the scenario which the no-cost Query Monitor was designed to address. It will help you identify performance issues, develop sites better, and also get more control over the performance of your WordPress website.

In this tutorial will teach you all you'll need to know about Query Monitor -- what it is, what it can do, and the best way to utilize it.

What is Query Monitor?

query Monitor is a 100% free application that will help users to test your WordPress site's performance and growth.

You can think of it as a version of Chrome Developer Tools, but specifically for WordPress. The database tools allow you to look up queries, scripts, timing as well as other. And you can also view numerous useful information, such as general environment information and details for specific pages.

Query Monitor then presents all this data in an easily accessible manner which you are able to access any time on your website.

John is very responsive and constantly working on maintaining and making improvements to Query Monitor. Automattic and other sponsors support John's work.

If you find value in the application by the time you've completed this blog, you can support Query Monitor by sponsoring the project's on GitHub for as little as 1 dollar for a month.

What Does Query Monitor Do?

It also delve into other fields such as performance-focused debugging, as well as general debugging of development.

Here's a sampling of all the details Query Monitor can help you analyze and debug:

• Database queries, as well as the ability to display queries from certain plugins
• PHP errors
• Memory usage
• HTTP API API calls
• Queued scripts and styles including dependencies
• Hooks and actions
• Theme template files
• Translations and languages
• Rewrite rules
• Block editor blocks
• General environment information
• WordPress admin screens

The main drawback with Query Monitor is that it's designed for "in the present" troubleshooting. If it displays the database queries, timing etc however, it's doing so only in the context of the load on the page.

The software generally doesn't show historical trends or information however John claims that the feature will be added in future versions.

What is Monitor Query Monitor to debug WordPress and Improve the Performance of your website

Once you've figured out the basics of what Query Monitor can do and what it can do, let's dive to the way you can make use of Query Monitor to analyze your site's performance and some of the other tools for general development debugging.

In this article, we'll provide you with a basic overview of the Query Monitor interface and how it works. Then, we'll dig into every aspect of the interface.

There are 12+ different top-level interfaces, which means there's plenty of options to explore. But the number of interface menus you see is contingent on the web webpage you're looking at.

Let's dig in.

An Introduction to the Monitor Interface for Query Monitor Interface

Query Monitor doesn't have an individual interface. It instead displays the latest information within the WordPress administration bar, both on the backend as well as frontend.

Query Monitor initially displays a quick summary with the following information:

• Time to generate page is 0.05 S in the image.
• Memory usage at peak- 7.7 MB on the image.
• Time taken by SQL queries(in seconds) + 0.00 seconds in the screenshot.
• The total amount of SQL queries54 as shown in the image.

If you click on this overview, you'll be able to be able to access the entire Query Monitor interface, which is displayed as an overlay window either on the backend or frontend page you're viewing currently.

Each feature as well as the information Query Monitor offers are contained within this overlay window.

If you'd prefer to change the layout of the overlay window it is possible to press the button at the top right corner to change it into the sidebar-like interface. Drag-and-drop is another option to change the dimensions and size of your window.

Let's look at every tab of the interface and discuss how you can make use of it to test your WordPress site.

Overview

Overview tab displays a summary of the admin bar. Overview tab provides more information from the admin bar summary along with general information on the environment.

As an example, instead of simply displaying the maximum memory consumption, the Overview tab is a step further and shows how that peak usage compares with your server's and WordPress limit on memory.

The information isn't too thorough It's a simple overview (hence the name).

Queries

The queries tab lets you look through every query in the database to determine the page you're looking at. This is one of the most information-rich areas in Query Monitor. It seems logical given the name of the plugin.

Each time you query the site, you can see the following information:

1. The full inquiry
2. Query caller
3. A query component (e.g. whether it comes from the base, a theme or plugin)
4. Number of rows
5. The time that the query was asked for

In general debugging, you are able to pinpoint the slow loading queries that can be causing bottlenecks to the speed of your website.

Query Monitor can break down queries by theme as well as individual plugins so that you can see the impact of each plugin.

The main tab is where you can see all the details that are high-level for every query.

If you want to learn more about a specific query, click the plus icon for more details.

There are also sub-menus within this category to help you search for particular types of inquiries:

• Duplicate Queries
• Questions by a the caller
• Questions through Component

Duplicate Queries

The Duplicate Queries section highlights duplicate queries as well as lists "potential troublespots" for you to debug them and streamline things.

Queries by Caller

The Questions by Caller section lets you see every caller that are listed on this page. When you click on a caller, you can see a list of queries about that specific contact.

Components and Queries

The Queries by Componentarea lists every component that contributed to inquiries, such as the WordPress foundation, your theme, and specific plugins.

Click on one of the components to display all of its questions.

This is, in fact, one of the best report because it allows you to discover specific plugins that slow your site's performance with slow requests.

Check This Out If You Can't Have Questions by Component

If you do not see the details of the component within Query Monitor, it's likely due to the fact that Query Monitor cannot symlink its db.php file. The error message will appear similar to the one shown below in the above situations.

Two possible explanations for this issue:

The majority of the Query Monitor's features is still functional in this case, however you'll not be able to see any of the components' information until you resolve this.

Logs

Its Logs tab is a tab with advanced features that lets you set up the variables and messages you want to record. This can help you debug technical issues , or be on the lookout for your website to spot issues.

If you're the first to install Query Monitor This tab won't display anything because it won't be able to establish any variables for logging.

But, if you wish to create your own logging variables for custom purposes, you can do so by using a basic syntax, such the following:

  do_action( 'qm/debug', 'This happened!' );

Query Monitor supports the following actions that allow you to record issues on different levels:

• qm/emergency
• qm/alert
• qm/critical
• qm/error
• qm/warning
• qm/notice
• qm/info
• qm/debug

If you'd like to learn more, and even see some example, check out the page on Query Monitor logging variables webpage.

Demand

The main Request tab displays the query variables of the present request.

Also, sub-menus are available for viewing the Headers of Request as well as the Response Headers and Response Headers, which could be useful for troubleshooting performance.

Blocks

The best part is that it tells you whether the block comes from the WordPress core or another plugin.

Template

Want to know the ways we have increased visitors by 1000 percent?

Join over 20,000 others to get our weekly newsletter with insider WordPress advice!

The specific template files for this page as well as the different template body classes and parts.

Screens for the Admin

When you view an admin screen with a listing table the screen will show the custom column filters and actions. Additionally, it will show the state of the get_current_screen.

Scripts

Following the Queries tab the Scripts tab will be the second most useful performance debugging area in Query Monitor.

As a rough rule, the more scripts means a slow site because they expand the size of the site and also add HTTP requests.

If you require assistance using these guidelines to enhance your site's scripts There are a number of helpful guides to optimize JavaScript for WordPress: WordPress:

Styles

Similar to the scripts, loading more stylesheets on the same page can result in a more slow-loading website according to a rough guideline.

Like scripts, Query Monitor will not offer a comprehensive review of the way your CSS loads, and whether or not it is preventing critical elements of your site from loading. For that, you'll need perform the waterfall analysis once more.

There are some posts on this site that can be helpful that will help you improve the CSS on your site:

Hooks and Actions

The Hooks and Actions tab displays all the actions and hooks on the current page, along with their priority.

For actions, you can extend an action in order to look at the specific file and the line of code that is related to that action. It is also possible to filter actions by component to identify actions within the WordPress base, the plugins and themes.

The focus of this area isn't on performance, but it is convenient to develop custom applications.

Languages

API calls for HTTP

If a plugin or theme has been slow in its HTTP API calls, that is often a "hidden" reason for poor performance, and you'll need to figure out a solution to address this via a change to the extensions settings, or by switching to another extension.

If you visit a large number of websites, you will see "No HTTP API calls," that's a positive indication that there is nothing getting in the way of your site's performance.

Capability checks

  define( 'QM_ENABLE_CAPS_PANEL', true );  

Environment

The Environment tab offers the complete overview of the site's environment, including:

• Database
• WordPress
• Server

You can see important details, limits, version numbers, configuration settings, etc.

It can also help inform crucial choices about the efficiency.

Conditional

The Conditionals tab helps you see what condition statements are applicable to the webpage you're viewing, and can aid in customizing your development.

It is possible to see both "True" conditions as well as "False" conditionals.

How to View Data from a Query Monitor as the non-Admin user

The first step is to establish an authenticating cookie within your browser in order for this to happen. When you've enabled that cookie, you'll be able to view Query Monitor data whenever you access the site even when you're not logged in.

To create the authentication cookie, just click the gear icon located in the upper right part of the Query Monitor panel. After that, press the Set authentication cookie button.

If you ever want to turn off this function then you are able to return to this website and press the Clear authenticating cookie button to delete the cookie.

How To Extend Query Monitor With Add-Ons

So far, we've focused solely on the features and analysis options in the core Query Monitor plugin. But, there are a variety of third-party extensions that are able to expand Query Monitor even further.

It is possible to see a full list of Query Monitor add-ons on this page on GitHub.

Additional useful tools to debug and Enhance WordPress Performance

Although Query Monitor can be a useful free tool that can help you debug WordPress functionality, it can't cover everything. Other useful tools to study different aspects in WordPress performance.

APM (Application Performance Monitoring)

• Slow PHP processes
• Slow database queries
• Long API calls
• Long external URL requests
• Full-stack traces into problematic areas

Additionally, you can see how the information is changing over time, which is something Query Monitor isn't able to accomplish. Furthermore, you can look at the whole site instead of having to going page-by-page.

We also have specific instructions on how to utilize APM to improve the efficiency of resource-intensive WordPress sites:

New Relic

New Relic is a useful instrument for monitoring performance that is similar to APM.

A Top Speed Test Tool

This was mentioned earlier in we talked about waterfall analysis. However, an effective speed test tool can prove invaluable in determining how you're loading on your website and the speed at which your site loads.

WordPress Debug Mode

WordPress includes its own built-in debug mode to see all PHP errors, notices and errors. You also have the option to save these issues to a log file.

Web Browser Developer Tools

The Network tab lets you see timings for every HTTP request on your site, as well as waterfall analysis. This tab is called the performance tab gives you a very detailed performance analysis.

If you're looking to understand how to use Chrome Developer Tools to debug the performance of your Chrome, this help center hub is an excellent starting point.

Summary

If you are looking to find out the cause of the performance or development problems in your WordPress website, the Query Monitor plugin is among the top tools for free.

To analyze your site's performance it is likely that you will want to focus the most on the following areas of your user interface:

• Overview
• Queries
• Logs (for more advanced users)
• Texts
• Styles
• API calls for HTTP
• Environment

The other sections could be useful too if you develop WordPress sites.

Save time, costs and improve site performance by:

• Help is available immediately 24/7 support from WordPress Hosting experts 24/7.
• Cloudflare Enterprise integration.
• The global reach of the audience is enhanced by 29 data centers around the world.
• Optimization through the built-in Application for Performance Monitoring.