Cuando se trabaja en un proyecto de desarrollo de WordPress con una docena o más plugins instalados, es habitual encontrar problemas de rendimiento. Sin embargo, encontrar la causa del problema de rendimiento no siempre es fácil.
Has eliminado los sospechosos habituales: el alojamiento es adecuado, aparentemente no hay errores de JavaScript o PHP, y no hay nada más que falle. Sospechas que uno o varios de los plugins que has instalado son los culpables, pero ¿cómo puedes averiguar qué plugin está causando el problema?
El método habitual para identificar un plugin problemático es desactivar los plugins hasta encontrar el cuello de botella del rendimiento.
Sin embargo, hay una forma más rápida y eficaz. Para este caso se creó el plugin gratuito Query Monitor. Puede ayudarte a depurar problemas de rendimiento, a desarrollar sitios de forma más eficiente y a controlar mejor tu sitio de WordPress.
En esta guía, aprenderás todo lo que necesitas saber sobre Query Monitor: qué es, qué hace y cómo utilizarlo.
¿Qué es Query Monitor?
Query Monitor es un plugin 100% gratuito que te ayuda a depurar el rendimiento y el desarrollo de tu sitio WordPress.
Es como las herramientas de desarrollo de Chrome, pero específicamente para WordPress. Puedes investigar las queries a la base de datos, los scripts, la sincronización y mucho más. Y también puedes ver un montón de información útil, como información general del entorno y detalles de páginas específicas.
Query Monitor presenta toda esta información de una manera fácilmente accesible a la que puedes acceder desde cualquier lugar de tu sitio.
El mantenimiento de Query Monitor corre a cargo de John Blackbourn, ingeniero web principal de Human Made. También tiene otros plugins útiles, como WP Crontrol (estupendo para la depuración de wp-cron) y User Switching (estupendo para depurar las experiencias de diferentes roles de usuario).
John es muy activo y trabaja constantemente en el mantenimiento y la mejora de Query Monitor. Automattic y otros sponsors financian su trabajo.
Si al terminar este post te parece que el plugin es de utilidad, puedes apoyar a Query Monitor patrocinando el proyecto en GitHub por tan sólo 1 dólar al mes.
¿Qué Hace Query Monitor?
Query Monitor puede ayudarte a depurar algo más que las consultas a la base de datos de WordPress, a pesar de su nombre.
No nos malinterpretes — depurar las consultas a la base de datos es algo que Query Monitor hace bien y una de las ventajas más significativas del plugin.
Sin embargo, también profundiza en muchas otras áreas, incluyendo la depuración centrada en el rendimiento y simplemente la depuración general del desarrollo.
Aquí tienes una muestra de los muchos detalles que Query Monitor puede ayudarte a analizar y depurar:
- Consultas a la base de datos, incluso mostrando las consultas de determinados plugins
- Errores de PHP
- Uso de la memoria
- Llamadas a la API HTTP
- Scripts y estilos en cola, incluyendo dependencias
- Hooks y actions
- Archivos de plantillas de temas
- Idiomas y traducciones
- Reglas de reescritura
- Bloques del editor de bloques
- Información general del entorno
- Pantallas de administración de WordPress
Una notable limitación del Query Monitor es que sirve principalmente para la depuración «en el momento». Cuando te muestra las queries a la base de datos, los tiempos, etc., sólo lo hace para la carga de la página actual.
Por lo general, no rastrea ni muestra información/tendencias históricas, aunque John dice que esta función está prevista para futuras versiones.
Cómo Utilizar Query Monitor para Depurar WordPress y Mejorar el Rendimiento
Ahora que sabes qué es Query Monitor y qué hace, vamos a entrar en cómo puedes utilizar Query Monitor para depurar el rendimiento de tu sitio y algunas de las otras herramientas para la depuración general del desarrollo.
Te daremos una introducción general a la interfaz del Query Monitor y a su funcionamiento. Luego, profundizaremos en cada área de la interfaz.
Hay más de 12 áreas diferentes de la interfaz de alto nivel, así que hay mucho que abarcar. Sin embargo, el número exacto de menús de la interfaz que veas dependerá de la página que estés analizando.
Vamos a profundizar.
Una Introducción a la Interfaz del Query Monitor
Query Monitor no tiene su propia área de interfaz separada. En su lugar, muestra nueva información dentro de la barra de administración de WordPress, tanto en el frontend como en el backend.
Query Monitor muestra inicialmente un resumen rápido con cuatro elementos de información:
- Tiempo de generación de la página — 0,05 s en la captura de pantalla.
- Pico de uso de memoria — 7,7 MB en la captura de pantalla.
- Tiempo total de las query SQL (en segundos) — 0,00 s en la captura de pantalla.
- Número total de query SQL — 54 en la captura de pantalla.
Si haces clic en este resumen, abrirás toda la interfaz de Query Monitor, que se muestra como una ventana superpuesta en la página del frontend o del backend que estés viendo en ese momento.
Todas las funciones e información que ofrece el Query Monitor están recogidas en esta ventana superpuesta.
Si prefieres cambiar el diseño de la ventana superpuesta, puedes hacer clic en el botón de la esquina superior derecha para cambiarla a una interfaz de barra lateral. También puedes utilizar la función de arrastrar y soltar para cambiar el tamaño de la ventana.
La interfaz de Query Monitor y su información sólo son visibles para los Administradores (o Superadministradores en los multisitios de WordPress).
También hay una opción para establecer una cookie de autenticación para seguir viendo los resultados obtenidos por Query Monitor, incluso cuando no se ha iniciado la sesión (o se ha iniciado la sesión como un usuario con un rol de usuario inferior). Más adelante compartiremos cómo hacer esto.
Repasemos cada pestaña de la interfaz y expliquemos cómo puedes utilizarla para depurar tu sitio de WordPress.
Overview
La pestaña Overview muestra más detalles del resumen de la barra de administración y alguna información general del entorno.
Por ejemplo, en lugar de ver sólo el pico de uso de la memoria, la pestaña Overview va un paso más allá para ver cómo ese pico de uso se compara con los límites de memoria de tu servidor y de WordPress.
Aquí no hay nada demasiado detallado, es sólo una visión general (de ahí el nombre).
Queries
La pestaña Queries te permite profundizar en cada consulta de la base de datos de la página que estás viendo. Es una de las áreas más ricas en información de Query Monitor, lo que tiene sentido si tenemos en cuenta el nombre del plugin.
Para cada consulta, puedes ver la siguiente información:
- La query completa
- La llamada a la query
- Componente de la query (por ejemplo, si proviene del core, de un tema o de un plugin)
- Número de filas
- El tiempo que duró la query
Entre las tareas de depuración general, puedes utilizarlo para encontrar las queries de carga lenta que están entorpeciendo el rendimiento de tu sitio.
Query Monitor desglosará las queries por tema y por plugins individuales para que puedas ver el impacto de cada extensión.
Supongamos que un plugin específico está causando muchas queries de carga lenta. En ese caso, tendrás que encontrar una forma de solucionarlo, ya sea optimizando algo en la configuración del plugin o de tu servidor (por ejemplo, utilizando la base de datos o el almacenamiento en caché de objetos) o cambiando a un plugin diferente que sea más eficiente.
En la pestaña principal, puedes ver toda la información de alto nivel de cada consulta.
Si quieres saber más sobre una consulta concreta, haz clic en el icono del signo más para ampliar la información detallada.
Si aquí ves números anormalmente bajos, podría deberse a algún tipo de almacenamiento en caché — por ejemplo, el almacenamiento en caché de la página o un plugin que almacena en caché sus consultas a la base de datos. Por esta razón, puede ser útil desactivar el almacenamiento en caché mientras depuras las cosas.
También hay algunos submenús en esta área que te ayudan a encontrar tipos específicos de queries:
- Duplicate Queries
- Queries by Caller
- Queries by Component
Duplicate Queries
El área de Duplicate Queries destaca las queries duplicadas y enumera las «potencialmente problemáticas» para ayudarte a depurarlas y racionalizar las cosas.
Queries by Caller
El área de Queries by Caller te permite ver todas las llamadas de esta página. Si haces clic en uno de ellos, puedes ver una lista de consultas para ese caller.
Queries by Component
El área de Queries by Component muestra una lista de todos los componentes que han realizado consultas, incluyendo el core de WordPress, tu tema y los plugins individuales.
Puedes hacer clic en un componente concreto para ver todas sus queries.
De nuevo, este es uno de los informes más valiosos porque te permite encontrar plugins específicos que reducen el rendimiento de tu sitio con queries lentas.
Lee Esto Si No Ves las Queries by Component
Si no ves la información del componente en Query Monitor, es probable que se deba a que Query Monitor no puede establecer un enlace simbólico con su archivo db.php. En estas situaciones verás un mensaje de error como el que aparece a continuación.
Aquí hay dos causas probables:
- Los permisos de los archivos de la carpeta wp-content de tu sitio.
- El archivo wp-content/db.php ya existe (quizás debido a un plugin de caché como W3 Total Cache).
Puedes ver algunas correcciones y soluciones en este artículo de GitHub. Si te sientes cómodo conectándote a tu servidor mediante SSH, puedes arreglar el problema con un comando WP-CLI (aunque hay otros métodos).
La mayor parte de la funcionalidad de Query Monitor seguirá funcionando con este problema, pero no podrás ver ninguna información de los componentes hasta que lo arregles.
Logs
La pestaña Logs es una pestaña avanzada que te permite configurar los mensajes y las variables a registrar. Esto puede ayudarte a depurar problemas técnicos o a vigilar tu sitio para detectar problemas.
Cuando instales por primera vez Query Monitor, esta pestaña no mostrará nada porque no habrás configurado ninguna variable de registro.
Sin embargo, si quieres configurar variables de registro personalizadas, puedes hacerlo utilizando una sintaxis sencilla como ésta.
do_action( 'qm/debug', 'This happened!' );
Query Monitor admite las siguientes acciones, que te permiten registrar los problemas a diferentes niveles:
- qm/emergency
- qm/alert
- qm/critical
- qm/error
- qm/warning
- qm/notice
- qm/info
- qm/debug
Si quieres saber más y ver algunos ejemplos, consulta la página Variables de registro de Query Monitor.
Request
La pestaña principal Request muestra las variables de la query para la solicitud actual.
También hay submenús para ver las Cabeceras de la Solicitud (Request Headers) y las Cabeceras de la Respuesta (Response Headers), que probablemente sean más útiles para la depuración del rendimiento.
Por ejemplo, tal vez quieras depurar el comportamiento de la caché o del CDN. En el submenú de Response Headers, puedes ver el comportamiento de Cache-Control, que te permite depurar el almacenamiento en caché del navegador en tu sitio.
Blocks
La pestaña Blocks sólo es visible si miras una página construida con el editor de bloques nativo de WordPress (también conocido como Gutenberg).
En esas situaciones, esta página mostrará cada bloque individual de la página, junto con información detallada sobre ese bloque.
Una cosa inteligente aquí es que te dirá si el bloque proviene del core de WordPress o de un plugin diferente.
Template
La pestaña Template sólo será visible si utilizas Query Monitor en el frontend de tu sitio. Te ayuda a ver y depurar la jerarquía de plantillas de la página que estás viendo.
Puedes ver el archivo del template específico de esa página y las distintas partes del template y las clases del cuerpo.
Esto no tiene nada que ver con el rendimiento, pero puede ser beneficioso para el desarrollo de temas personalizados.
Admin Screen
La pestaña Admin Screen sólo será visible si utilizas Query Monitor en el panel de administración de WordPress. Probablemente no la utilizarás con mucha frecuencia, pero puede ser útil si necesitas depurar el comportamiento de una pantalla de administración personalizada.
Si observas una pantalla de administración con una tabla de listados, te mostrará los filtros y acciones de las columnas personalizadas. También te mostrará el estado de get_current_screen.
Scripts
Después de la pestaña de Queries, la pestaña de Scripts probablemente es la siguiente área de depuración de rendimiento más útil en Query Monitor.
Esta pestaña muestra todos los scripts de JavaScript puestos en cola en la página y sus dependencias y dependientes. También dispone de filtros para encontrar rápidamente scripts de un host específico o con dependencias/dependientes explícitos.
Como norma general, más scripts equivalen a un sitio web más lento porque aumentan el tamaño de la página y añaden peticiones HTTP.
Puedes utilizar esta área para descubrir el impacto de diferentes extensiones y encontrar formas de reducir el número de scripts en cola que se cargan en cada página.
Sin embargo, Query Monitor no te muestra el tiempo de carga de todos estos scripts. Si quieres ver eso, tendrás que utilizar una herramienta de prueba de velocidad y profundizar en el análisis de cascada — Pingdom y GTmetrix son dos opciones excelentes.
Si necesitas ayuda para utilizar estos detalles para optimizar los scripts de tu sitio, tenemos muchas guías de gran utilidad para optimizar JavaScript en WordPress:
- Cómo diferir el análisis de JavaScript
- Cómo eliminar el JavaScript que bloquea la visualización
- Cómo hacer menos peticiones HTTP
Styles
La pestaña Styles es como la pestaña Scripts, pero muestra el CSS en cola en lugar del JavaScript. Es otra pestaña muy útil para depurar el rendimiento de tu sitio.
Al igual que ocurre con los scripts, cargar más hojas de estilo en una página hace que, por regla general, el sitio se cargue más lentamente.
En esta área, puedes descubrir el impacto de las diferentes extensiones en tu sitio. Puedes utilizar esta información para reducir el número de hojas de estilo que deben cargarse en la página, lo que reducirá el tamaño del archivo y las peticiones HTTP necesarias para cargar la página.
Al igual que con los scripts, Query Monitor no te dará un análisis en profundidad de cómo se carga tu CSS y si está bloqueando la carga de partes críticas de tu sitio. Para eso, tendrás que volver a utilizar el análisis en cascada.
Tenemos algunas publicaciones útiles para ayudarte a optimizar el CSS de tu sitio:
Hooks & Actions
La pestaña Hooks & Actions enumera todos los hooks y acciones de la página actual, junto con su prioridad.
En el caso de las acciones, puedes expandir una acción individual para ver el archivo y la línea de código reales asociados a esa acción. También puedes filtrar las acciones por componente para encontrar acciones del core de WordPress, de los plugins y de los temas.
Esta área no se centra realmente en el rendimiento, pero es conveniente para el desarrollo personalizado.
Languages
La pestaña Languages te muestra los dominios de idioma y texto de tu sitio y el archivo de idioma utilizado para cada extensión.
Esto no es muy útil si tienes un sitio con un solo idioma en inglés. Sin embargo, esta pestaña puede ser útil si tienes un sitio multilingüe y/o tu sitio está en un idioma que puede no tener una cobertura completa de paquetes de traducción.
HTTP API Calls
La pestaña HTTP API Calls te muestra todas las peticiones HTTP del lado del servidor que se produjeron durante la carga de la página, incluyendo los detalles de la petición, el tiempo y el código de estado HTTP.
Si un plugin o un tema hace llamadas HTTP API lentas, a menudo puede ser una causa «oculta» de un mal rendimiento, y querrás encontrar una forma de solucionarlo, ya sea cambiando algo en la configuración de la extensión o cambiando a una extensión diferente.
Para muchas páginas, deberías ver «Sin llamadas a la API HTTP» ( “No HTTP API calls»), lo cual es una buena señal, ya que significa que no hay nada que obstaculice el rendimiento de tu sitio.
Capability Checks
El área Capability Checks te permite ver qué capacidades de usuario pueden acceder al contenido actual que estás viendo. Esto puede ser útil para ver si diferentes usuarios pueden acceder a ciertos contenidos del frontend o del backend.
Sin embargo, esta función está desactivada por defecto por razones de rendimiento. Si quieres activarla, tendrás que editar el archivo wp-config.php de tu sitio y añadir el siguiente fragmento de código:
define( 'QM_ENABLE_CAPS_PANEL', true );
Environment
La pestaña Environment proporciona un resumen detallado de los entornos de tu sitio, incluyendo:
- PHP
- Database
- WordPress
- Server
Puedes ver detalles importantes, límites, números de versión, ajustes de configuración, etc.
Esto también puede informar de decisiones importantes sobre el rendimiento.
Por ejemplo, si ves que el límite de memoria de tu sitio es limitado, quizá quieras aumentar el límite de memoria para evitar errores relacionados con el límite de memoria.
Del mismo modo, si ves que utilizas una versión antigua de PHP, tal vez quieras actualizarla a la última versión para mejorar el rendimiento.
Conditionals
La pestaña Conditionals te ayuda a ver qué declaraciones de condición se aplican a la página que estás viendo, lo que puede ser útil en el desarrollo personalizado.
Puedes ver las condicionales «Verdadero» y las condicionales «Falso».
Cómo Ver la Información de Query Monitor como Usuario No Administrador
Es posible que quieras ver la información de Query Monitor como un rol de usuario diferente o como un usuario desconectado en algunas situaciones. Esto puede ser muy útil para tiendas de WooCommerce, sitios de membresía y sitios similares.
Necesitas establecer una cookie de autenticación en tu navegador para conseguirlo. Una vez que hayas establecido esa cookie, podrás ver la información del Query Monitor siempre que visites el sitio, incluso si has cerrado la sesión.
Para establecer la cookie de autenticación, haz clic en el icono del engranaje situado en la esquina superior derecha del panel de Query Monitor. A continuación, haz clic en el botón Set authentication cookie.
Si alguna vez quieres desactivar esta funcionalidad, puedes volver a esta interfaz y hacer clic en el botón Clear authentication cookie para eliminar la cookie.
Si combinas esto con User Switching, otro útil plugin del mismo desarrollador, puedes cambiar rápidamente entre diferentes roles de usuario en tu sitio.
Cómo Ampliar Query Monitor con Add-Ons
Hasta ahora nos hemos centrado exclusivamente en las funciones y opciones de análisis del plugin principal de Query Monitor. Sin embargo, varios add-ons de terceros pueden ampliar Query Monitor aún más.
Estos pueden añadir soporte para tecnologías de rendimiento específicas, como Memcached y Redis, así como para plugins específicos de WordPress, como WooCommerce o GiveWP.
Query Monitor también es compatible con todos los add-ons del plugin Debug Bar, que añade integraciones para ElasticPress, Elementor, Cache Lookup y muchos más.
Puedes ver una lista completa de complementos de Query Monitor en esta página de GitHub.
Otras Herramientas Útiles para Depurar y Mejorar el Rendimiento de WordPress
Aunque Query Monitor es una herramienta gratuita muy útil para depurar el rendimiento de WordPress, no lo cubre todo. Hay otras herramientas útiles que deberías tener en cuenta para analizar diferentes áreas del rendimiento de WordPress.
Kinsta APM (Monitorización del Rendimiento de las Aplicaciones)
Si alojas tu sitio en Kinsta, tienes acceso gratuito a Kinsta Application Performance Monitoring (APM).
Una herramienta APM como Kinsta APM profundiza aún más que Query Monitor con los siguientes tipos de análisis:
- Procesos PHP lentos
- Queries a la base de datos lentas
- Largas llamadas a la API
- Peticiones de URL externas largas
- Rastreos de todo el stack en las áreas problemáticas
También puedes ver cómo cambia esta información a lo largo del tiempo, algo que Query Monitor no puede hacer. Además, puedes analizar todo tu sitio en lugar de ir página por página.
Para un tutorial general, puedes seguir nuestra guía de Kinsta APM.
También tenemos guías específicas sobre el uso de APM para optimizar los sitios de WordPress que consumen muchos recursos:
New Relic
New Relic es otra útil herramienta de monitorización del rendimiento similar a Kinsta APM.
Si no estás alojado en Kinsta, puede ser una gran manera de acceder a tipos de análisis similares. Incluso si te alojas en Kinsta, puedes habilitar el seguimiento de New Relic si lo necesitas, aunque necesitas tener tu propia licencia.
Para aprender a utilizar New Relic, puedes seguir nuestro tutorial de rendimiento de New Relic.
Una Herramienta de Prueba de Velocidad de Calidad
Lo hemos mencionado antes al hablar del análisis en cascada, pero una buena herramienta de prueba de velocidad puede ser inestimable para depurar lo que carga tu sitio y cómo lo carga.
Para ayudarte a utilizar cualquier herramienta que elijas, tenemos una guía dedicada a la forma correcta de realizar una prueba de velocidad. También tenemos posts centrados en algunas de las herramientas más populares:
Modo de Depuración de WordPress
WordPress incluye su propio modo de depuración integrado para ver todos los errores, avisos y advertencias de PHP. También tienes la opción de guardar estos problemas en un archivo de registro.
Para más detalles, consulta nuestra guía completa sobre el modo de depuración de WordPress.
Herramientas para Desarrolladores de Navegadores Web
Chrome incluye herramientas para desarrolladores muy detalladas que pueden ayudarte a depurar el rendimiento de tu sitio, al igual que otros navegadores.
Por ejemplo, la pestaña Red te permite ver los tiempos de cada petición HTTP de tu sitio, así como un análisis en cascada. La pestaña Rendimiento te ofrece un análisis de rendimiento muy detallado.
También puedes ejecutar auditorías Lighthouse desde la pestaña Lighthouse. Es el mismo algoritmo de prueba de rendimiento que utiliza PageSpeed Insights.
Si quieres aprender a utilizar las Herramientas para desarrolladores de Chrome para depurar el rendimiento, este centro de ayuda es un buen lugar para empezar.
Resumen
Si quieres depurar problemas de rendimiento y desarrollo en tu sitio de WordPress, el plugin Query Monitor es una de las mejores herramientas gratuitas.
Para analizar el rendimiento de tu sitio, probablemente querrás centrarte más en estas áreas de la interfaz:
- Visión general
- Queries
- Logs (para usuarios más avanzados)
- Scripts
- Estilos
- Llamadas a la API HTTP
- Entorno
Sin embargo, las otras áreas también pueden ser convenientes si desarrollas sitios de WordPress.
Prueba hoy mismo Query Monitor y verás cómo te ayuda. Si no quieres instalarlo en tu sitio en producción, siempre puedes crear un sitio de staging e instalarlo allí para ver lo que ocurre detrás de tu sitio.
Jon es el Director de Operaciones de Kinsta y colabora a diario con los equipos de ventas, atención al cliente y soporte técnico de Kinsta. Jon es un hombre de familia. Así que cuando no está golpeando frenéticamente las teclas de su portátil, suele estar ayudando a uno de sus hijos a arreglar una bicicleta o configurando Netflix para un niño impaciente en edad preescolar.
Deja una respuesta