Quando se trabalha em um projeto de desenvolvimento WordPress com dezenas ou mais plugins instalados, é comum encontrar problemas de desempenho. Entretanto, encontrar o que está causando o problema de desempenho nem sempre é fácil.
Se a hospedagem está boa, não há erros de JavaScript ou PHP visíveis e tudo parece estar bem, mas você ainda enfrenta problemas, é provável que um ou mais plugins que você instalou estejam causando o problema. Agora, como você pode descobrir qual desses plugins está causando o problema?
O método usual para identificar um plugin problemático é desativar os plugins um por um até encontrar o que está prejudicando o desempenho.
No entanto, há uma forma mais rápida e eficiente de resolver isso. É aqui que entra o plugin gratuito Query Monitor. Ele foi criado para ajudar a depurar problemas de desempenho, a desenvolver sites de forma mais eficiente e a ter um melhor controle sobre o seu site WordPress.
Neste guia, você aprenderá tudo o que precisa saber sobre o Query Monitor: o que é, o que faz e como utilizá-lo.
O que é Query Monitor?
O Query Monitor é um plugin 100% gratuito que ajuda você a depurar o desempenho e o desenvolvimento do seu site WordPress.
Você pode pensar nele como as Ferramentas de Desenvolvedor do Chrome, mas especificamente para o WordPress. Com ele, você pode investigar as consultas ao banco de dados, scripts, tempo de execução e muito mais. Além disso, você também pode visualizar uma tonelada de informações úteis, como detalhes sobre o ambiente geral e informações específicas de páginas.
O Query Monitor apresenta todas essas informações de maneira fácil e acessível, permitindo que você acesse de qualquer lugar em seu site.
O Query Monitor é mantido por John Blackbourn, um engenheiro web principal da Human Made. Ele também tem vários outros plugins úteis, incluindo WP Crontrol (ótimo para depuração do wp-cron) e User Switching (ótimo para depuração das experiências de diferentes funções do usuário).
John é muito responsivo e está constantemente trabalhando para manter e melhorar o Query Monitor. A Automattic e outros patrocinadores apoiam o seu trabalho.
Se você encontrar valor no plugin quando terminar este artigo, você pode apoiar o Query Monitor patrocinando o projeto no GitHub por apenas $1 por mês.
O que o Query Monitor faz?
O Query Monitor pode ajudá-lo a depurar mais do que as consultas ao banco de dados do WordPress, apesar do nome.
Não nos entenda mal – a depuração de consultas ao banco de dados é algo que o Query Monitor faz muito bem e é um dos principais benefícios do plugin.
No entanto, ele também se concentra em muitas outras áreas, incluindo a depuração focada no desempenho e apenas a depuração geral de desenvolvimento.
Aqui estão alguns exemplos das muitas informações que o Query Monitor pode ajudá-lo a analisar e depurar:
- Consultas de banco de dados, incluindo consultas de plugins específicos
- Erros PHP
- Uso de memória
- Chamadas API HTTP
- Estilos e scripts enfileirados, incluindo dependências
- Hooks e ações
- Arquivos de modelos de temas
- linguagens e traduções
- Reescrever regras
- Editor de blocos
- Informações gerais do ambiente
- Telas de administração do WordPress
Uma limitação importante do Query Monitor é que ele é principalmente para depuração “no momento”. Quando ele mostra as consultas ao banco de dados, o tempo de execução, e outras informações, isso acontece apenas para o carregamento da página atual.
Geralmente, ele não rastreia ou exibe informações, ou tendências históricas. No entanto, John afirma que essa funcionalidade está planejada para versões futuras do plugin.
Como usar o Query Monitor para depurar o WordPress e melhorar o desempenho
Agora que você sabe o que é o Query Monitor e o que ele faz, vamos entrar em como você pode usar o Query Monitor para depurar o desempenho do seu site e algumas das outras ferramentas para depuração geral de desenvolvimento.
Vamos lhe dar uma introdução geral à interface do Query Monitor e como ela funciona. Em seguida, exploraremos cada área da interface.
Existem mais de 12 áreas de interface diferentes, portanto, há muito o que cobrir. No entanto, o número exato de menus de interface que você verá dependerá da página que você está analisando.
Vamos começar!
Uma introdução à interface do Query Monitor
O Query Monitor não tem sua própria área de interface separada. Ao invés disso, ele exibe novas informações dentro da barra de administração do WordPress tanto no frontend quanto no backend.
O Query Monitor inicialmente exibe um resumo rápido com quatro partes de informação:
- Tempo de geração da página — 0,05 s na captura de tela.
- Pico de uso de memória — 7,7 MB na captura de tela.
- Tempo total de consultas SQL (em segundos) — 0,00 s na captura de tela.
- Número total de consultas SQL — 54 na captura de tela.
Se você clicar neste resumo, você abrirá toda a interface do Query Monitor, exibida como uma janela de sobreposição na página do frontend ou backend que você está visualizando no momento.
Todas as características e informações que o Query Monitor oferece estão contidas nesta janela de sobreposição.
Se você preferir mudar o layout da janela de sobreposição, você pode clicar no botão no canto superior direito para mudá-lo para uma interface de barra lateral. Você também pode usar o recurso de arrastar e soltar para mudar o tamanho da janela.
A interface do Query Monitor e suas informações são visíveis apenas para os Administradores (ou Super Administradores no WordPress multisite).
Há também uma opção para definir um cookie de autenticação para ainda visualizar a saída do Query Monitor, mesmo quando você não estiver logado (ou quando você estiver logado como um usuário com uma função de usuário inferior). Compartilharemos como fazer isso um pouco mais tarde no guia.
Vamos percorrer cada aba da interface e explicar como você pode usá-la para depurar o seu site WordPress.
Overview
A aba Overview (Visão geral) exibe mais detalhes do resumo da barra de administração e algumas informações gerais do ambiente.
Por exemplo, ao invés de apenas ver o pico de uso de memória, a aba Visão Geral vai um passo além para ver como esse pico de uso se compara ao seu servidor e aos limites de memória do WordPress.
Queries
A aba Queries (Consultas) permite que você investigue cada consulta ao banco de dados para a página que você está visualizando. É uma das áreas com maior quantidade de informações no Query Monitor, o que faz sentido quando se considera o nome do plugin.
Para cada consulta, você pode ver as seguintes informações:
- A consulta completa
- Chamador de consulta
- Componente de consulta (por exemplo, se ele vem do núcleo, de um tema ou de um plugin)
- Número de linhas retornadas pela consulta
- O tempo que a consulta levou para ser executada
Além da depuração geral, você pode usar isso para encontrar consultas de carregamento lento que estão afetando o desempenho do seu site.
O Query Monitor irá separar as consultas por tema e plugins individuais, para que você possa ver o impacto de cada extensão.
Suponha que um plugin específico esteja causando várias consultas de carregamento lento. Nesse caso, você precisará encontrar uma maneira de corrigir isso – seja otimizando alguma configuração do plugin ou da configuração do servidor (por exemplo, usando o cache de banco de dados ou de objetos), ou trocando para um plugin diferente que seja mais eficiente.
Na aba principal, você pode ver todas as informações de alto nível para cada consulta.
Se você quiser saber mais sobre uma consulta específica, clique no ícone mais para expandir informações mais detalhadas.
Se você está vendo números anormalmente baixos aqui, isso pode ser devido a algum tipo de cache – por exemplo, cache de páginas ou cache de plugins em seu banco de dados. Por essa razão, pode ser útil desativar o cache enquanto você está depurando as coisas.
Há também alguns sub-menus nesta área que ajudam você a encontrar tipos específicos de consultas:
- Duplicate Queries (Consultas Duplicadas)
- Queries by Caller (Consultas por Chamador)
- Queries by Component (Consultas por Componente)
Duplicate Queries
A área de Duplicate Queries (Consultas duplicadas) destaca as consultas duplicadas e lista os “potenciais causadores de problemas” para ajudá-lo a depurá-las e acelerar as coisas.
Queries by Caller
A área Queries by Caller (Consultas por Chamador) permite que você visualize todos os chamadores nesta página. Se você clicar em um deles, poderá ver uma lista de consultas para esse chamador específico.
Queries by Component
A área Queries by Component (Consultas por Componente) mostra uma lista de todos os componentes que fizeram consultas, incluindo o núcleo do WordPress, seu tema e plugins individuais.
Você pode clicar em um componente específico para visualizar todas as suas consultas.
Novamente, este é um dos relatórios mais valiosos porque permite que você encontre plugins específicos que prejudicam o desempenho do seu site com consultas lentas.
Leia isso se você não ver as informações “Queries by Component”
Se você não estiver vendo as informações de componente no Query Monitor, provavelmente é porque o Query Monitor não pode criar um link simbólico para o arquivo db.php. Nessas situações, você verá uma mensagem de erro como a abaixo.
Há duas causas prováveis aqui:
- As permissões de arquivo da pasta wp-content do seu site.
- O arquivo wp-content/db.php já existe (talvez devido a um plugin de cache como o W3 Total Cache).
Você pode ver algumas correções e soluções neste artigo do GitHub. Se você se sente confortável conectando-se ao seu servidor via SSH, você pode corrigir o problema com um comando WP-CLI (embora existam outros métodos).
A maioria das funcionalidades do Query Monitor ainda funcionarão com este problema, mas você não poderá ver nenhuma das informações dos componentes até você corrigir isso.
Logs
A aba Logs (Registros) é uma aba avançada que permite que você configure suas mensagens e variáveis para logar. Isso pode ajudá-lo a depurar problemas técnicos ou ficar de olho no seu site para detectar problemas.
Quando você instalar o Query Monitor pela primeira vez, esta aba não exibirá nada porque você não terá configurado nenhuma variável de registro.
Entretanto, se você quiser configurar variáveis de registro personalizadas, você pode fazer isso usando uma sintaxe simples como essa:
do_action( 'qm/debug', 'This happened!' );
O Query Monitor suporta as seguintes ações, que permitem que você registre problemas em diferentes níveis:
- qm/emergency
- qm/alert
- qm/critical
- qm/error
- qm/warning
- qm/notice
- qm/info
- qm/debug
Se você gostaria de aprender mais e ver alguns exemplos, confira a página Query Monitor Logging Variables.
Request
A aba principal Request (Solicitação) mostra as variáveis de consulta para a solicitação atual.
Há também sub-menus para ver os Cabeçalhos de Pedido e Cabeçalhos de Resposta, que provavelmente são mais úteis para a depuração do desempenho.
Por exemplo, talvez você queira depurar o comportamento de cache ou o comportamento de CDN. No sub-menu Cabeçalhos de Resposta, você pode ver o comportamento do Cache-Control, permitindo que você depure o cache do navegador em seu site.
Blocks
A aba Blocks (Blocos) só é visível se você olhar para uma página construída com o editor de blocos nativo do WordPress (também conhecido como Gutenberg).
Nessas situações, esta página listará cada bloco individual da página, juntamente com informações detalhadas sobre esse bloco.
Uma coisa inteligente aqui é que ele vai lhe dizer se o bloco veio do núcleo do WordPress ou de um plugin diferente.
Template
A aba Template só estará visível se você estiver usando o Query Monitor no frontend do seu site. Ela ajuda você a visualizar e depurar a hierarquia de templates para a página que você está olhando.
Você pode ver o arquivo de template específico para aquela página e as várias partes do template e classes de corpo.
Isso não tem nada a ver com desempenho, mas pode ser benéfico para o desenvolvimento de temas personalizados.
Admin Screen
A aba Admin Screen (Tela de Administração) só estará visível se você usar o Query Monitor no painel de controle do WordPress. Você provavelmente não irá usá-la com tanta frequência, mas ela pode ser útil se você precisar depurar o comportamento em uma tela de administração personalizada.
Se você olhar para uma tela de administração com uma tabela de listagem, o Query Monitor irá mostrar os filtros de coluna personalizados e ações disponíveis. Ela também mostrará o estado da tela get_current_screen.
Scripts
Após a aba Queries, a aba Scripts é provavelmente a próxima área de depuração de performance mais útil no Query Monitor.
Esta aba exibe todos os scripts JavaScript consultados na página e suas dependências e dependentes. Você também recebe filtros para encontrar rapidamente scripts de um host específico ou com dependências/dependentes explícitas.
Como regra geral, mais scripts equivalem a um site mais lento porque eles aumentam o tamanho da página e adicionam pedidos HTTP.
Você pode usar esta área para descobrir o impacto de diferentes extensões e encontrar maneiras de reduzir o número de scripts enfileirados que são carregados em cada página.
O Query Monitor não mostra o tempo de carregamento de todos esses scripts. Se você quiser ver isso, você precisará usar uma ferramenta de teste de velocidade e analisar a análise de cascata (waterfall analysis). – Pingdom e GTmetrix são ambas excelentes opções.
Se você precisa de ajuda para otimizar os scripts do seu site, temos muitos guias valiosos para otimizar o JavaScript no WordPress:
- Como diferir o JavaScript parsing
- Como eliminar o JavaScript render-blocking
- Como fazer menos solicitações HTTP
Styles
A aba Styles (Estilos) é como a aba Scripts, mas ela mostra CSS em vez de JavaScript. É outra aba útil para depuração de performance no seu site.
Semelhante aos scripts, carregar mais folhas de estilo (stylesheets) em uma página leva a um site com carregamento mais lento como regra geral.
Nesta área, você pode descobrir o impacto de diferentes extensões em seu site. Você pode usar esta informação para reduzir o número de folhas de estilo que precisam ser carregadas na página, o que reduzirá o tamanho do arquivo e os pedidos HTTP necessários para carregar a página.
Assim como os scripts, o Query Monitor não lhe dará uma análise detalhada de como o seu CSS carrega e se ele está bloqueando partes críticas do seu site de carregar. Para isso, você precisará usar a análise da cascata novamente.
Nós temos alguns artigos úteis para ajudar você a otimizar o CSS do seu site:
Hooks & Actions
A aba Hooks & Actions lista todos os hooks e ações da página atual, juntamente com sua prioridade.
Para ações, você pode expandir uma ação individual para ver o arquivo real e a linha de código associada com aquela ação. Você também pode filtrar ações por componente para encontrar ações do núcleo do WordPress, plugins e temas.
Esta área não está realmente focada no desempenho, mas é conveniente para o desenvolvimento personalizado.
Languages
A aba Languages mostra a linguagem e os domínios de texto em seu site e o arquivo de linguagem usado para cada extensão.
Isso não é muito útil se você tiver um site em inglês em um único idioma. Entretanto, esta guia pode ser útil se você tiver um site multilíngue e/ou se o seu site estiver em um idioma que pode não ter cobertura completa de pacotes de tradução.
HTTP API Calls
A aba HTTP API Calls mostra todas as solicitações HTTP do lado do servidor que ocorreram durante o carregamento da página, incluindo os detalhes da solicitação, o tempo e o código de status HTTP.
Se um plugin ou tema está fazendo chamadas lentas de API HTTP, isso muitas vezes pode ser uma causa “oculta” de mau desempenho, e você vai querer encontrar uma maneira de corrigir isso, seja mudando algo nas configurações da extensão ou mudando para uma extensão diferente.
Para muitas páginas, você deve ver “No HTTP API calls”, o que é um bom sinal, pois significa que nada está atrapalhando o desempenho do seu site.
Capability Checks
A área de Capability Checks (Verificação de Capacidade) permite que você veja quais capacidades do usuário podem acessar o conteúdo atual que você está olhando. Isso pode ser útil para ver se diferentes usuários podem acessar determinado conteúdo frontend ou backend.
Este recurso é desativado por padrão por razões de desempenho. Se você deseja ativá-la, você precisará editar o arquivo wp-config.php do seu site e adicionar o seguinte trecho de código:
define( 'QM_ENABLE_CAPS_PANEL', true );
Environment
A aba Environment fornece um resumo detalhado dos ambientes do seu site, inclusive:
- PHP
- Banco de dados
- WordPress
- Servidor
Você pode ver detalhes importantes, limites, números de versão, configurações, etc.
Isso também pode informar decisões importantes sobre o desempenho.
Por exemplo, se você ver que o limite de memória do seu site é limitado, você pode querer aumentar o limite de memória para evitar erros relacionados ao limite de memória.
Da mesma forma, se você ver que está usando uma versão antiga do PHP, você pode querer atualizar para a versão mais recente para melhorar a performance.
Conditionals
A aba Conditionals (Condicionais) ajuda você a ver quais declarações de condições se aplicam à página que você está olhando, o que pode ser útil no desenvolvimento personalizado.
Você pode ver tanto os condicionamentos “Verdadeiros” quanto os “Falsos” condicionamentos.
Como visualizar informações do Query Monitor como um usuário não administrador
Você pode querer ver as informações do Query Monitor como uma função diferente do usuário ou como um usuário logado em algumas situações. Isso pode ser muito útil para lojas WooCommerce, sites de membros e sites similares.
Você precisa definir um cookie de autenticação em seu navegador para conseguir isso. Uma vez que você tenha definido esse cookie, você conseguirá visualizar as informações do Query Monitor sempre que visitar o site, mesmo que você esteja desconectado.
Para definir o cookie de autenticação, clique no ícone do equipamento no canto superior direito do painel Query Monitor. Então, clique no botão Set authentication cookie.
Se você quiser desativar esta funcionalidade, você pode voltar a esta interface e clicar no botão Clear authentication cookie para remover o cookie.
Se você combinar isso com o User Switching, outro plugin útil do mesmo desenvolvedor, você pode alternar rapidamente entre diferentes funções do usuário em seu site.
Como estender o Query Monitor com complementos
Até agora, nos concentramos exclusivamente nas funcionalidades e opções de análise no plugin principal do Query Monitor. No entanto, existem diversos complementos de terceiros que podem estender ainda mais o Query Monitor.
Estes podem adicionar suporte para tecnologias de desempenho específicas, como Memcached e Redis, bem como plugins específicos de WordPress, como WooCommerce ou GiveWP.
O Query Monitor também suporta todos os complementos para o plugin Debug Bar, que adiciona integrações para ElasticPress, Elementor, Cache Lookup, e muito mais.
Você pode ver uma lista completa de complementos do Query Monitor nesta página do GitHub.
Outras ferramentas úteis para depurar e melhorar o desempenho do WordPress
Embora o Query Monitor seja uma ferramenta útil e gratuita para depurar o desempenho do WordPress, ele não cobre tudo. Existem algumas outras ferramentas úteis que você deve considerar para analisar diferentes áreas de desempenho do WordPress.
Kinsta APM (Application Performance Monitoring)
Se você hospedar seu site na Kinsta, você terá acesso gratuito ao Monitoramento de desempenho de aplicativos (APM) da Kinsta.
Uma ferramenta APM como o Kinsta APM vai ainda mais adiante do que o Query Monitor com os seguintes tipos de análises:
- Processos lentos de PHP
- Consultas lentas do banco de dados
- Chamadas API longas
- Solicitações de URLs externas longas
- Rastreamentos de Full-Stack em áreas problemáticas
Você também pode ver como essa informação muda com o tempo, o que é algo que o Query Monitor não pode fazer. Além disso, você pode analisar seu site inteiro ao invés de ir página por página.
Para obter um tutorial geral, você pode seguir nosso guia Kinsta APM.
Também temos guias específicos sobre o uso do APM para otimizar sites WordPress com uso intensivo de recursos:
New Relic
A New Relic é outra ferramenta útil de monitoramento de desempenho similar ao Kinsta APM.
Se você não estiver hospedado na Kinsta, pode ser uma ótima maneira de acessar tipos similares de análises. Mesmo se você estiver hospedando na Kinsta, você ainda pode habilitar o rastreamento do New Relic, se necessário, embora você precise ter sua própria licença.
Para aprender como usar a New Relic, você pode seguir nosso tutorial de desempenho New Relic.
Uma ferramenta de teste de velocidade de qualidade
Mencionamos isso anteriormente quando falamos sobre a análise em cascata, mas uma boa ferramenta de teste de velocidade pode ser inestimável para depurar o que seu site carrega e como ele carrega.
Para ajudá-lo a usar qualquer ferramenta que você escolher, temos um guia dedicado sobre a maneira correta de executar um teste de velocidade. Também temos artigos focados em algumas das ferramentas mais populares:
Modo de depuração WordPress
O WordPress inclui seu próprio modo de depuração integrado para ver todos os erros, avisos e advertências do PHP. Você também tem a opção de salvar esses problemas em um arquivo de registro.
Para mais detalhes, confira nosso guia completo para o modo de depuração do WordPress.
Ferramentas de desenvolvedor do navegador da web
O Chrome inclui ferramentas de desenvolvedor muito detalhadas que podem ajudá-lo a depurar o desempenho do seu site, assim como alguns outros navegadores.
Por exemplo, a aba Network permite que você veja os horários de cada solicitação HTTP em seu site, assim como a análise da cascata. A aba Performance lhe dá uma análise de performance muito detalhada.
Você também pode executar auditorias do Lighthouse a partir da aba Lighthouse. É o mesmo algoritmo de teste de desempenho que o PageSpeed Insights usa.
Se você quer aprender como usar as ferramentas de desenvolvimento Chrome para depurar o desempenho, este centro de ajuda é um ótimo lugar para começar.
Resumo
Se você quiser depurar problemas de desempenho e desenvolvimento em seu site WordPress, o plugin Query Monitor é uma das melhores ferramentas gratuitas.
Para analisar o desempenho do seu site, você provavelmente vai querer focar o máximo nestas áreas da interface:
- Visão geral
- Consultas
- Registros (para usuários mais avançados)
- Scripts
- Estilos
- Chamadas API HTTP
- Ambiente
No entanto, as outras áreas também podem ser convenientes se você desenvolver sites WordPress.
Experimente o Query Monitor hoje mesmo e veja como ele ajuda. Se você não quiser instalá-lo em seu site de produção, você pode sempre criar um site de teste e instalá-lo lá para ver o que está acontecendo por baixo do capô do seu site.
Jon é o Diretor de Operações na Kinsta e está envolvido diariamente com as equipes de vendas, atendimento ao cliente e suporte técnico da Kinsta. Jon é um homem de família. Então, quando não está digitando freneticamente no laptop, geralmente está ajudando um de seus filhos a consertar uma bicicleta ou configurando a Netflix para uma criança impaciente.
Deixe um comentário