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, velocidade e usabilidade do seu site. AJAX é funcional sempre que você executa 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 continuar lendo!

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 ter que 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, é solicitado ao servidor os horários disponíveis para a seleção do drop-down de tratamento.

Como funciona o AJAX?

A missão do AJAX é servir como uma ponte entre o 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 enviar
• 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?

WordPress oferece suporte nativo para AJAX. Você pode ver “admin-ajax.php” dentro da pasta wp-admin.

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

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

Em 2013, o WordPress introduziu a API WordPress Heartbeat que fornecia 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 o rascunho de uma postagem ou continua trabalhando nele, o WordPress salva automaticamente as alterações. Há uma diferença clara entre salvar automaticamente e salvar manualmente o rascunho. Confira a seguinte captura de tela que mostra os dois tipos de salvamento:

- Salvamento automático em WordPress

2. Post Lock

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

- Post Lock no WordPress

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

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

Um exemplo ao vivo

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

- admin-ajax.php Enviando solicitações ao servidor

De acordo com o tíquete mencionado acima, 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 plug-ins sobrecarregam admin-ajax.php?

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

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

Como diagnosticar um plugin no WordPress?

É importante diagnosticar o plug-in corretamente para identificar seu impacto no arquivo admin-ajax.php, que 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 examinar a lista de perto, você pode ver as solicitações POST feitas pelo arquivo admin-ajax.php.

- Diagnóstico de Plugin em WordPress

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

Expanda a guia para obter informações detalhadas. A guia de resposta mostra o ponto 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 dá a você uma visão 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, certifique-se de que o plugin que você está usando esteja atualizado. Se não estiver, 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 que é atualizado e não sobrecarrega o arquivo admin-ajax.php.

Executar um diagnóstico completo é importante antes de se livrar de qualquer plugin, pois alguns deles são essenciais 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 abordagem é desabilitar a API Heartbeat ou, pelo menos, definir um intervalo de tempo mais longo para que ela não atinja o servidor após alguns segundos.

Instale o plug-in de controle de pulsação

- Plugin de controle de pulsação

Faça login no seu painel de administração do WordPress. Navegue até Plugins → Adicionar Novo. Pesquise por controle de pulsação. Instale e ative-o.

- Instale o controle de pulsação no WordPress

Configurar o plugin de controle de pulsação

Navegue até Configurações → Configurações de controle de pulsação. Lá você encontrará três menus suspensos para configurar o plugin.

1. Permitir pulsação

Você pode selecionar as áreas em que a API Heartbeat funcionará. Existem três opções para escolher:

• Painel do WordPress: Isso ativará a API Heartbeat para o painel do WordPress.
• Frontend: Isso habilitará a API no frontend.
• Editor de postagem: marque esta caixa de seleção se desejar permitir que a API Heartbeat seja habilitada para salvamento automático e recursos de bloqueio posterior.

- Permitir batimento cardíaco do controle de batimento cardíaco

2. Desative o batimento cardíaco

Selecione esta opção se desejar que a API do WordPress Heartbeat desabilite locais específicos. Tenha cuidado ao escolher os locais porque outros plug-ins também podem estar usando a API WordPress Heartbeat. Se você for o único usuário do back-end do WordPress, sugiro desabilitá-lo em todos os lugares e, em seguida, verificar se ele danifica o site.

No entanto, se o seu site tiver mais de um usuário que contribui regularmente, proponho que você permita a API Heartbeat apenas nas páginas de edição de postagem.

- Desativar Heartbeat no Heartbeat Control

3. Modifique a pulsação

Este menu suspenso permite definir o intervalo de tempo, variando de 0 a 300 segundos para executar solicitações admin-ajax. Definindo-o para 120 segundos, a solicitação será gerada a cada 120 segundos. Isso reduzirá drasticamente a carga no servidor. Ajuste de acordo com suas necessidades.

- Modificar Heartbeat no Heartbeat Control

Crie várias regras

Você pode criar várias regras com base em seus requisitos. Por exemplo, você pode querer que o WordPress Dashboard seja acionado em 120 segundos, mas o Post Editor seja acionado em 60 segundos. Para fazer isso, você precisa criar duas regras: uma para o painel do WordPress e outra para o editor de postagem. Defina suas frequências para 120 e 60, respectivamente.

Detectar plug-ins que usam a API Heartbeat

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

Vá para GTmetrix e digite a URL do seu site. A análise do site demorará alguns instantes. 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. Em caso afirmativo, expanda-o e navegue até a guia Postagem. 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 solicitações ao 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 e do front-end do WordPress, enviando para lá e para cá solicitações Ajax do WordPress.

Existem apenas duas soluções para esse problema. Você pode desabilitar a API Heartbeat / habilitá-la em alguns locais apenas - 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.