Qué es AJAX y cómo usarlo en WordPress (una guía paso a paso)

AJAX es una tecnología popular utilizada en el desarrollo de sitios web que le permite recuperar datos del backend y actualizar la vista sin la necesidad de volver a cargar la página web. Por lo tanto, le ayuda a mejorar la interactividad, la velocidad y la usabilidad de su sitio web. AJAX es funcional cada vez que realiza acciones como dejar un comentario o publicar un tweet.

En este artículo, te diré qué es AJAX y cómo usar AJAX en WordPress (también conocido como WP AJAX). ¡Sigamos leyendo!

¿Qué es AJAX?

AJAX son las siglas de Asynchronous JavaScript And XML, una tecnología que le permite realizar solicitudes al servidor de forma asincrónica y realizar cambios en nuestras páginas sin tener que volver a cargarlas. El script AJAX solicita al servidor que devuelva algunos datos y luego modifica las páginas web con los datos obtenidos.

Por ejemplo, imagina un menú desplegable donde seleccionas la fecha de tu cita y otra lista desplegable te muestra dinámicamente las horas disponibles para reservar. A través de un script, se ha solicitado al servidor las horas disponibles para la selección del desplegable de tratamientos.

¿Cómo funciona AJAX?

La misión de AJAX es servir como puente entre su sitio web y el servidor. El núcleo de esta tecnología asincrónica es el objeto XMLHttpRequest, que permite el intercambio de datos. Estos son los pasos básicos para realizar una llamada AJAX:

- Fuente: W3Schools

• Especifica la información a enviar
• Configurar la llamada
• Utilice el objeto XMLHttpRequest para enviar los datos
• Recibir y procesar la respuesta del servidor

Lo bueno es que este proceso se puede simplificar usando la biblioteca jQuery.

¿Cómo usar AJAX en WordPress?

WordPress es compatible con AJAX de forma nativa. Puede ver "admin-ajax.php" dentro de la carpeta wp-admin.

Inicialmente fue creado para todas las funciones que realizan solicitudes AJAX desde el administrador de WordPress. También se utiliza para la parte pública de la web.

Todas las solicitudes de WordPress AJAX deben pasar por un script PHP. En otras palabras, admin-ajax.php debería ser el archivo PHP a través del cual se llama a una acción que devuelve contenido.

En 2013, WordPress introdujo la API Heartbeat de WordPress que proporcionaba varias funcionalidades importantes, como la función de guardado automático, la expiración del inicio de sesión y la advertencia de bloqueo posterior mientras otro usuario está escribiendo o editando una publicación de WordPress.

Dos características muy destacadas de Heartbeat API son:

1. Autoguardado

Cuando guarda un borrador de una publicación o continúa trabajando en ella, WordPress guarda automáticamente los cambios. Existe una clara diferencia entre el guardado automático y el guardado manual del borrador. Consulte la siguiente captura de pantalla que muestra ambos tipos de guardado:

- Autoguardado en WordPress

2. Post bloqueo

Cuando intentas editar una publicación en la que otro usuario ya está trabajando, aparecerá una advertencia emergente sobre la situación. Hay tres acciones visibles para ti.

- Publicar bloqueo en WordPress

Las características mencionadas anteriormente son posibles gracias a la API Heartbeat de WordPress que crea una conexión entre el servidor y el navegador para la comunicación y las respuestas adecuadas.

La API Heartbeat de WordPress genera solicitudes de comunicación con el servidor y desencadena eventos al recibir datos / respuesta. Esto generalmente aumenta la carga en el servidor y eventualmente ralentiza el administrador de WordPress.

Un ejemplo vivo

Entro en mi panel de WordPress y comienzo a redactar una publicación. A continuación, dejo la pestaña abierta durante varios minutos y empiezo a navegar por otras pestañas. El panel todavía está conectado y puede ver que admin-ajax envía solicitudes continuamente.

- admin-ajax.php Envío de solicitudes al servidor

Según el ticket mencionado anteriormente, admin-ajax.php en WordPress genera solicitudes cada 15 segundos. La solicitud puede ser cualquier comunicación con el servidor.

¿Cómo sobrecargan los complementos admin-ajax.php?

La mayoría de los problemas en admin-ajax.php en WordPress se pueden atribuir a las solicitudes realizadas por los complementos instalados. Estos complementos ralentizan al administrador de WordPress al enviar solicitudes para lograr una determinada funcionalidad, como abrir una ventana emergente o actualizar un contador de intercambio social.

Dicho esto, las solicitudes no necesariamente aumentarán el archivo admin-ajax.php. Si las solicitudes se manejan correctamente y los desarrolladores de complementos siguen las mejores prácticas para utilizar las llamadas AJAX en sus complementos, el archivo admin-ajax.php estará bien. Por lo tanto, también es importante diagnosticar cualquier complemento antes de desactivarlo.

¿Cómo diagnosticar un complemento en WordPress?

Es importante diagnosticar el complemento correctamente para identificar su impacto en el archivo admin-ajax.php, que posiblemente puede ralentizar el administrador de WordPress. Para hacerlo, usaremos dos herramientas: GTmetrix y WebPageTest.

En el caso de GTmetrix, navegue a su pestaña Cascada para obtener una lista completa de solicitudes. Al mirar la lista de cerca, puede ver las solicitudes POST realizadas por el archivo admin-ajax.php.

- Diagnóstico de complementos en WordPress

En mi caso, estas solicitudes se realizaron principalmente mediante un complemento para compartir en redes sociales. Este complemento en particular envía una solicitud ajax a las cuentas de redes sociales a través de API cada 15 segundos para obtener un recuento de uso compartido actualizado.

Expanda la pestaña para obtener información detallada. La pestaña de respuesta muestra el lugar exacto que desencadena estas solicitudes.

Chrome viene con herramientas para desarrolladores que pueden ayudar a analizar las solicitudes realizadas por varios complementos. Para verificar esto, abra el sitio web en Chrome, haga clic en CTRL + Shift + I, y haga clic en la pestaña Red.

- Solicitudes admix-ajax.php en Chrome

Vuelva a cargar la página y vea que la lista se completa con solicitudes actualizadas. En el cuadro de filtro, escriba ajax o admin-ajax para filtrar los archivos requeridos. Esto le brinda información sobre la cantidad de solicitudes, así como su frecuencia y el origen de la solicitud.

A continuación, haga clic en el archivo para ver más información. En la pestaña de respuesta, le da una pista del complemento que está causando esta solicitud. En mi caso, esta vez fue activado por el complemento WP Popular (WPP), un complemento que destaca la publicación más popular durante un período de tiempo específico.

Para evitar esto, asegúrese de que el complemento que está utilizando esté actualizado. Si no es así, intente abrir un ticket de soporte para que sus desarrolladores puedan solucionar el problema. Si es posible, también puede reemplazarlo con otro complemento que esté actualizado y no sobrecargue el archivo admin-ajax.php.

Es importante realizar un diagnóstico completo antes de deshacerse de cualquier complemento, ya que algunos son fundamentales para su sitio de WordPress. Estas herramientas pueden ayudarlo a encontrar la causa raíz y elegir la mejor solución posible para solucionarlo.

En la siguiente sección, veremos cómo podemos reducir estas solicitudes y evitar que el archivo admin-ajax.php se sobrecargue.

Acelere el panel de WordPress

Para acelerar el backend de WordPress, el mejor enfoque es deshabilitar la API Heartbeat, o al menos establecer un intervalo de tiempo más largo para que no llegue al servidor cada pocos segundos.

Instalar el complemento Heartbeat Control

- Complemento de control de latidos

Inicie sesión en su panel de administración de WordPress. Vaya a Complementos → Agregar nuevo. Busque Heartbeat Control. Instalarlo y activarlo.

- Instalar Heartbeat Control en WordPress

Configurar el complemento Heartbeat Control

Vaya a Configuración → Configuración de control de latidos. Allí encontrará tres menús desplegables para configurar el complemento.

1. Permitir latido

Puede seleccionar las áreas donde funcionará la API Heartbeat. Hay tres opciones para elegir:

• Tablero de WordPress: Esto habilitará la API Heartbeat para el tablero de WordPress.
• Frontend: esto habilitará la API en la interfaz.
• Editor de publicaciones: marque esta casilla de verificación si desea permitir que la API Heartbeat se habilite en las funciones de guardado automático y bloqueo de publicaciones.

- Permitir Heartbeat of Heartbeat Control

2. Deshabilitar Heartbeat

Seleccione esto si desea que la API Heartbeat de WordPress deshabilite ubicaciones particulares. Tenga cuidado al elegir las ubicaciones porque otros complementos también pueden estar utilizando la API Heartbeat de WordPress. Si usted es el único usuario del backend de WordPress, le sugiero que lo desactive en todas partes y luego verifique si rompe el sitio web.

Sin embargo, si su sitio tiene más de un usuario que contribuye regularmente, le propongo que permita la API Heartbeat solo en las páginas de edición de publicaciones.

- Desactivar Heartbeat en Heartbeat Control

3. Modificar Heartbeat

Este menú desplegable le permite establecer el intervalo de tiempo, que va de 0 a 300 segundos para ejecutar solicitudes de admin-ajax. Al establecerlo en 120 segundos, la solicitud se generará cada 120 segundos. Eso reducirá drásticamente la carga en el servidor. Ajústelo según sus necesidades.

- Modificar Heartbeat en Heartbeat Control

Crear varias reglas

Puede crear varias reglas según sus requisitos. Por ejemplo, es posible que desee que el panel de WordPress se active en 120 segundos, pero que el Editor de publicaciones se active en 60 segundos. Para hacer esto, necesita crear dos reglas: una para el Tablero de WordPress y la otra para el Editor de publicaciones. Establezca sus frecuencias en 120 y 60 respectivamente.

Detectar complementos que utilizan la API Heartbeat

Ahora que ha configurado todo, es hora de verificar qué complementos están usando el archivo admin-ajax.php y ralentizando el sitio web.

Vaya a GTmetrix e ingrese la URL de su sitio. Tomará unos minutos analizar el sitio. Una vez hecho esto, navegue hasta la pestaña Cascada y verá cuánto tiempo tarda un archivo en conectarse y responder. Desplácese hacia abajo un poco y vea si hay una entrada para POST admin-ajax.php. En caso afirmativo, amplíelo y navegue hasta la pestaña Publicar. Desde aquí, puede identificar el complemento culpable.

En mi caso, el complemento "conmutador de escritorio" está usando el archivo admin-ajax.php y continuamente envía solicitudes al servidor. Este es el momento de tomar una decisión; reemplácelo con otro complemento o cruce los dedos.

- POST admin-ajax.php

Resumen

Teniendo en cuenta su conjunto de funciones, la API Heartbeat es muy útil en su sitio web de WordPress. Sin embargo, si no se usa correctamente, puede aumentar el tiempo de carga de un backend de WordPress y el front-end enviando solicitudes Ajax de WordPress de ida y vuelta.

Solo hay dos soluciones para este problema. Puede deshabilitar la API Heartbeat / habilitarla solo en algunas ubicaciones, o actualizar a un alojamiento administrado que pueda manejar la carga de las solicitudes y también reducir el tiempo de respuesta del servidor.