O que é AJAX e como usá-lo no WordPress (um guia passo a passo)

AJAX é uma tecnologia popular usada no desenvolvimento de sites que permite recuperar dados do back-end e atualizar a visualização sem a necessidade de recarregar a página da web. Portanto, ajuda a melhorar a interatividade, a velocidade e a usabilidade do seu site. AJAX é funcional toda vez que você realiza ações como deixar um comentário ou postar um tweet.

Neste artigo, vou dizer o que é AJAX e como usar AJAX no WordPress (também conhecido como WP AJAX). Vamos ler!

O que é AJAX?

AJAX significa Asynchronous JavaScript And XML, uma tecnologia que permite fazer solicitações ao servidor de forma assíncrona e fazer alterações em nossas páginas sem precisar recarregá-las. O script AJAX solicita que o servidor retorne alguns dados e então modifica as páginas da web com os dados obtidos.

Por exemplo , imagine um menu suspenso onde você seleciona a data do seu compromisso e outra lista suspensa mostra dinamicamente as horas disponíveis para reserva. Por meio de um script, foi solicitado ao servidor as horas disponíveis para a seleção do menu suspenso de tratamento.

Como funciona o AJAX?

A missão do AJAX é servir como uma ponte entre seu site e o servidor. O núcleo dessa tecnologia assíncrona é o objeto XMLHttpRequest, que permite a troca de dados. Estas são as etapas básicas para fazer uma chamada AJAX:

– Fonte: W3Schools

• Especifique as informações a serem enviadas
• Configurar a chamada
• Use o objeto XMLHttpRequest para enviar os dados
• Receba e processe a resposta do servidor

O bom é que esse processo pode ser simplificado usando a biblioteca jQuery.

Como usar AJAX no WordPress?

O WordPress suporta AJAX nativamente. Você pode ver “admin-ajax.php” dentro da pasta wp-admin.

Ele foi criado inicialmente para todas as funções que fazem solicitações AJAX do administrador do WordPress. Também é usado para a parte pública da web.

Todas as solicitações do WordPress AJAX devem passar por um script PHP. Em outras palavras, admin-ajax.php deve ser o arquivo PHP através do qual uma ação que retorna conteúdo é chamada.

Em 2013, o WordPress introduziu a API WordPress Heartbeat que forneceu várias funcionalidades importantes, como o recurso de salvamento automático, expiração de login e aviso de bloqueio de postagem enquanto outro usuário está escrevendo ou editando uma postagem do WordPress.

Dois recursos muito importantes da API Heartbeat são:

1. Salvamento automático

Quando você salva um rascunho de um post ou continua trabalhando nele, o WordPress salva automaticamente as alterações. Há uma clara diferença entre o salvamento automático e o salvamento manual do rascunho. Confira a captura de tela a seguir que mostra os dois tipos de salvamento:

– Salvamento automático no WordPress

2. Bloqueio Postal

Quando você tenta editar uma postagem na qual outro usuário já está trabalhando, aparecerá um aviso pop-up sobre a situação. Há três ações visíveis para você.

– Bloqueio de postagem no WordPress

Os recursos mencionados acima são possíveis devido à API do WordPress Heartbeat que cria uma conexão entre o servidor e o navegador para comunicação e respostas apropriadas.

A API do WordPress Heartbeat gera solicitações de comunicação com o servidor e aciona eventos ao receber dados/resposta. Isso geralmente aumenta a carga no servidor e, eventualmente, diminui a velocidade do administrador do WordPress.

Um exemplo ao vivo

Entro no meu painel do WordPress e começo a redigir um post. Em seguida, deixo a aba aberta por alguns minutos e começo a navegar em outras abas. O painel ainda está conectado e você pode ver que o admin-ajax está enviando solicitações continuamente.

– admin-ajax.php Enviando Solicitações ao Servidor

De acordo com o ticket mencionado acima, o admin-ajax.php no WordPress gera solicitações a cada 15 segundos. A solicitação pode ser qualquer comunicação com o servidor.

Como os plugins sobrecarregam o admin-ajax.php?

A maioria dos problemas no admin-ajax.php no WordPress podem ser atribuídos às solicitações feitas pelos plugins instalados. Esses plugins tornam o administrador do WordPress lento ao enviar solicitações para obter uma determinada funcionalidade, como disparar um pop-up ou atualizar um contador de compartilhamento social.

Dito isso, os pedidos não vão necessariamente aumentar o arquivo admin-ajax.php. Se as solicitações forem tratadas corretamente e os desenvolvedores de plug-ins seguirem as práticas recomendadas ao utilizar as chamadas AJAX em seus plug-ins, o arquivo admin-ajax.php ficará bem. Portanto, também é importante diagnosticar qualquer plug-in antes de desativá-lo.

Como diagnosticar um plugin no WordPress?

É importante diagnosticar o plugin corretamente para identificar seu impacto no arquivo admin-ajax.php, o que possivelmente pode tornar o administrador do WordPress mais lento. Para isso, usaremos duas ferramentas: GTmetrix e WebPageTest.

No caso do GTmetrix, navegue até a guia Waterfall para obter uma lista completa de solicitações. Ao olhar a lista de perto, você pode ver as solicitações POST feitas pelo arquivo admin-ajax.php.

– Diagnóstico de plugins no WordPress

No meu caso, essas solicitações foram feitas principalmente por um plugin de compartilhamento social. Este plugin específico envia uma solicitação ajax para contas de mídia social via API a cada 15 segundos para buscar uma contagem de compartilhamento atualizada.

Expanda a guia para obter informações detalhadas. A guia de resposta mostra o local exato que aciona essas solicitações.

O Chrome vem com ferramentas de desenvolvedor que podem ajudar a analisar as solicitações feitas por vários plug-ins. Para verificar isso, abra o site no Chrome, clique em CTRL + Shift + I e clique na guia Rede.

– Solicitações admix-ajax.php no Chrome

Recarregue a página e veja a lista sendo preenchida com solicitações atualizadas. Na caixa de filtro, digite ajax ou admin-ajax para filtrar os arquivos necessários. Isso fornece informações sobre o número de solicitações, bem como sua frequência e a origem da solicitação.

Em seguida, clique no arquivo para ver mais informações. Na guia de resposta, ele fornece algumas dicas do plug-in que está causando essa solicitação. No meu caso, desta vez foi acionado pelo plugin WP Popular (WPP), um plugin que destaca a postagem mais popular em um determinado período de tempo.

Para evitar isso, verifique se o plug-in que você está usando está atualizado. Se não for, tente abrir um tíquete de suporte para que seus desenvolvedores possam corrigir o problema. Se possível, você também pode substituí-lo por outro plugin atualizado e que não sobrecarregue o arquivo admin-ajax.php.

Executar um diagnóstico completo é importante antes de se livrar de qualquer plugin, pois alguns plugins são críticos para o seu site WordPress. Essas ferramentas podem ajudá-lo a encontrar a causa raiz e escolher a melhor solução possível para corrigi-la.

Na próxima seção, veremos como podemos reduzir essas solicitações e evitar que o arquivo admin-ajax.php fique sobrecarregado.

Acelere o painel do WordPress

Para acelerar o back-end do WordPress, a melhor prática é desabilitar a API Heartbeat ou, pelo menos, definir um intervalo de tempo maior para que ela não atinja o servidor após alguns segundos.

Instale o plug-in da API Heartbeat

Faça login no seu painel de administração do WordPress. Navegue até Plugins → Adicionar novo → procure por Breeze → Instalar e ativar.

– Instale o Breeze no WordPress

Configurar o plug-in do Breeze

Navegue até Configurações → Breeze → API Heartbeat. Lá você encontrará 4 opções diferentes para configurar o Heartbeat.

1. Controle Heartbeat: Você pode alternar o botão para ativar ou desativar a API Heartbeat para seu back-end, editor de postagem e front-end.
2. Heartbeat Frontend: isso permitirá que você altere o comportamento do seu Front-end ou o desative completamente.
3. Heartbeat Post Editor: isso permitirá que você altere o comportamento do seu WP Post Editor ou o desative completamente.
4. Heartbeat Backend: isso permitirá que você altere o comportamento do seu Backend ou o desative completamente.

– Configurações da API Heartbeat no Breeze

Criar várias regras

Por padrão, você obtém a frequência padrão da API Heartbeat do WordPress, mas pode criar várias regras com base em seus requisitos. Por exemplo, você pode querer que o WordPress Backend (Dashboard) seja acionado em 2 minutos (120 segundos), mas o Post Editor seja acionado em 3 minutos (180 segundos). Para fazer isso, você precisa criar duas regras: uma para o WordPress Dashboard e outra para o Post Editor. Defina suas frequências para 2 e 3 minutos, respectivamente.

Detectar plug-ins que usam a API Heartbeat

Agora que você configurou tudo, é hora de verificar quais plugins estão usando o arquivo admin-ajax.php e deixando o site mais lento.

Vá para GTmetrix e insira a URL do seu site. Levará alguns momentos para analisar o site. Uma vez feito isso, navegue até a guia Waterfall e você verá quanto tempo um arquivo está levando para se conectar e responder. Role um pouco para baixo e veja se há uma entrada para POST admin-ajax.php. Se sim, expanda-o e navegue até a guia Postar. A partir daqui, você pode identificar o plugin culpado.

No meu caso, o plugin “desktop switch” está usando o arquivo admin-ajax.php e está continuamente enviando requisições para o servidor. Este é o momento de tomar uma decisão; substitua-o por outro plugin ou cruze os dedos.

– POST admin-ajax.php

Resumo

Considerando seu conjunto de recursos, a API Heartbeat é muito útil em seu site WordPress. No entanto, se não for usado corretamente, pode aumentar o tempo de carregamento de um back-end do WordPress e do front-end enviando solicitações de ida e volta do WordPress Ajax.

Existem apenas duas soluções para este problema. Você pode desabilitar a API Heartbeat/habilitá-la apenas em alguns locais - ou - atualizar para uma hospedagem gerenciada que possa lidar com a carga das solicitações e também reduzir o tempo de resposta do servidor.

perguntas frequentes