How to debug WordPress Performance problems
Are you getting WordPress errors but unable to resolve them?
To detect WordPress errors, the developers usually work in reverse. They start by excluding sections of the code that might harbor the issue(s) and then start evaluating individual areas. In general, for WordPress websites, the major areas of concern are PHP settings, .htaccess file, wp-config file, database queries, and DNS settings.
Some time ago, I came across the WordPress Query Monitor plugin, a great dev tool for discovering what’s going on the website. The plugin offers detailed information that developers can use to narrow down the “troubled” areas of the code.
In this tutorial on the plugin, I will begin with a detailed introduction of the WordPress Query Monitor plugin and then go into a brief description of the common use case of the plugin.
What Is WordPress Query Monitor?
Query Monitor is a WordPress plugin that adds great value to the debugging phase and generally improves the overall performance of your WordPress dev workflows.
The plugin adds an entry in the top menu bar that acts as a dropdown list that contains the number of queries being executed on the current page, the loading time, filters by type of query, filters by components, etc. As a result, developers have a better idea of what could be causing the errors on the website.
It has been developed by John Blackbourn and is available at both the official WordPress Plugin Repository and from GitHub. Like every great WordPress plugin, Query Monitor is regularly updated and the development team provides excellent support and fixes for all reported bugs.
The installation is very simple and generally does not require additional steps (when compared to the installation process of similar plugins). After installation, this WordPress debug plugin does not need additional configuration. Right out of the box, it starts displaying the dropdown list in the admin toolbar.
By clicking the entries in the dropdown list, you can access details about the queries that are made to the database, the scripts, and CSS that is loaded, active hooks, and the HTTP API calls.
Features of WordPress Query Monitor
Here is a quick overview of the features of the Query Monitor plugin.
Theme Errors
Theme feature lists down all the queries triggered by the installed WordPress theme. It displays the file name of the theme template responsible for a specific query and shows the complete template hierarchy. Theme feature also highlights the unloaded theme parts and the name of the active WordPress theme.
PHP Errors
WordPress runs on PHP and whether the request is generated by a theme or a plugin it is in the form of a PHP code. PHP Errors feature highlights the source components and the location responsible for generating the query.
Note: Not all the queries listed inside the Query Monitor are serious. It is quite possible that it is just a warning.
AJAX Calls
Dynamic WordPress sites make a lot of Ajax calls for sending and fetching data in real-time without loading the complete web page. Query Monitor also shows these requests along with other useful debugging information. This information can help the developer in highlighting any errors.
REST API
If you have the permission to monitor the Query Monitor, you can debug the information presented inside the header of a request of an authenticated WordPress REST API. Currently, the plugin only supports PHP errors and memory usage.
Authentication
By default, only the admin of a single-site installation and the super admin of a WordPress Multisite can view the logs inside the Query Monitor. However, you can configure an authentication cookie that allows you to see the logs even when you are logged in as a user.
Privacy Statement
WordPress Query Monitor neither collects any data nor send any data to third parties.
I have also noticed that the FAQs indicate that Debug Bar add-ons can be used with Query Monitor, just deactivate Debug Bar first. And there are also add-ons for Query Monitor.
Why Query Monitor Is Useful for Developers?
With Query Monitor plugin, developers can have a fair idea of what areas to improve. More than that, developers can discover the plugin or other website assets that is consuming an abnormal volume of resources or (in worse cases) are conflicting with the rest of the core files.
For website owners and developers interested in improving Web Performance Optimization (WPO), Query Monitor is an ideal solution for identifying bottlenecks that can be rectified with improved code snippets, alternatives or in some cases complete replacement of scripts/plugins.
Let’s consider a simple dev task – finding out the page load time and the number of active queries on the page.
WordPress offers two simple functions: get_num_queries () and timer_stop(). As the name explains, the get_num_queries () returns the number of database queries generated during the execution and timer_stop() returns the number of seconds required to generate the page.
How to Use WordPress Query Monitor?
Once you have installed and activated Query Monitor, you need to go to Plugins → Installed Plugins → Query Monitor → Settings and then click on “Set authentication cookie” button. Now let’s see each section of the Query Monitor plugin in detail.
Overview
The first tab provides you an overview of your website. It shows you page generation time, peak memory usage, database query time, and database queries.
Database Queries
Whenever a user requests for any information or tries to submit the information, a database query is triggered. Query Monitor tracks this query and displays it inside the logs so that you as a user can see which queries were executed successfully and which were not. And could also filter by the type and component of the query.
Request
Request feature shows the query variable for the current user and highlights the custom query. It also shows the associated query strings present inside a request.
Admin Screen
This section shows the activities happening on the WordPress admin panel. It lists down the components that are being accessed from the admin panel and shows an error due to the unavailability of any PHP file.
Scripts
When you visit the Scripts tab inside the Query Monitor, it lists down all the queued scripts and styles enclosed within the request. It also highlights any broken or unresponsive script due to an external dependency.
Styles
It is quite possible that at times due to an external dependency a certain CSS file does not load and breaks the layout of your web page. This section deals with the CSS Style sheets and helps you identify the source files behind any query.
Hooks and Actions
Hooks and actions play an important part in any WordPress site as they allow you to create a custom functionality using the predefined controls provided by WordPress itself. Doing so, can sometimes break your website and troubleshooting the error could be a tiring job.
Thanks to Query Monitor which has a built-in tool to identify errors caused by hooks and actions. This allows you to filter actions and hooks by core, theme or plugin. And also give you the complete name and reference which can be found easily inside the code for debugging purposes.
Languages
In case of a multilingual website, Language tab identifies any broken or unavailable files and also displays the language settings.
HTTP API Calls
This tab shows all the server-side queries and also shows the response code, timeout log, and failed requests. It is a useful feature as it enables you to see the response in real-time and help you to debug the server-side code efficiently.
Transient Updates
WordPress is capable of caching the API response in its database as some APIs only allow a certain number of requests at a given time. Transient Updates shows these transients and also displays the size and the component.
Capability Checks
By default, this is inactive and can be activated by placing the code inside the wp-config.php file. Capability Checks performs capability checks for each user on the page and displays the parameters along with the result.
Environment
This is a complete overview of the WordPress environment and contains three sections for PHP, Database, and WordPress. Inside each section, useful information about the environment is displayed such as MySQL version, PHP memory limit, WordPress version, etc.
Conditionals
Shows all WordPress conditionals on the current request.
Wrapping up!
WordPress Query Monitor plugin focuses on debugging and provides all pertinent information in an easy-to-understand way. The plugin is ideal for quickly identifying the plugins, themes or functions that are affecting the website performance.
The plugin integrates a menu in the admin toolbar that shows a general description of the current page, with complete data displayed in a panel (once you select a menu item). Which of these components do you use most often to keep your site healthy? Any suggestions?