Che cos'è AJAX e come utilizzarlo in WordPress (una guida passo passo)

AJAX è una tecnologia popolare utilizzata nello sviluppo di siti Web che consente di recuperare i dati dal backend e aggiornare la vista senza la necessità di ricaricare la pagina Web. Quindi, ti aiuta a migliorare l'interattività, la velocità e l'usabilità del tuo sito web. AJAX funziona ogni volta che esegui azioni come lasciare un commento o pubblicare un tweet.

In questo articolo, ti dirò cos'è AJAX e come utilizzare AJAX in WordPress (noto anche come WP AJAX). Continua a leggere!

Cos'è l'AJAX?

AJAX sta per Asynchronous JavaScript And XML, una tecnologia che consente di effettuare richieste al server in modo asincrono e apportare modifiche alle nostre pagine senza doverle ricaricare. Lo script AJAX richiede al server di restituire alcuni dati e quindi modifica le pagine Web con i dati ottenuti.

Ad esempio, immagina un menu a discesa in cui selezioni la data dell'appuntamento e un altro elenco a discesa mostra dinamicamente le ore disponibili per la prenotazione. Tramite uno script sono state richieste al server le ore a disposizione per la selezione del menù a tendina del trattamento.

Come funziona AJAX?

La missione di AJAX è quella di fungere da ponte tra il tuo sito Web e il server. Il cuore di questa tecnologia asincrona è l'oggetto XMLHttpRequest, che consente lo scambio di dati. Questi sono i passaggi di base per effettuare una chiamata AJAX:

– Fonte: W3Schools

• Specificare le informazioni da inviare
• Fissa la chiamata
• Usa l'oggetto XMLHttpRequest per inviare i dati
• Ricevi ed elabora la risposta dal server

La cosa buona è che questo processo può essere semplificato utilizzando la libreria jQuery.

Come usare AJAX in WordPress?

WordPress supporta AJAX in modo nativo. Puoi vedere "admin-ajax.php" all'interno della cartella wp-admin.

Inizialmente è stato creato per tutte le funzioni che effettuano richieste AJAX dall'amministratore di WordPress. Viene utilizzato anche per la parte pubblica del web.

Tutte le richieste AJAX di WordPress devono passare attraverso uno script PHP. In altre parole, admin-ajax.php dovrebbe essere il file PHP attraverso il quale viene chiamata un'azione che restituisce il contenuto.

Nel 2013, WordPress ha introdotto l'API WordPress Heartbeat che ha fornito diverse funzionalità importanti, come la funzione di salvataggio automatico, la scadenza del login e l'avviso di blocco del post mentre un altro utente scrive o modifica un post di WordPress.

Due caratteristiche molto importanti dell'API Heartbeat sono:

1. Salvataggio automatico

Quando salvi una bozza di un articolo o continui a lavorarci sopra, WordPress salva automaticamente le modifiche. C'è una chiara differenza tra il salvataggio automatico e il salvataggio manuale della bozza. Guarda la seguente schermata che mostra entrambi i tipi di salvataggi:

– Salvataggio automatico in WordPress

2. Post Lock

Quando provi a modificare un post su cui sta già lavorando un altro utente, verrà visualizzato un avviso pop-up sulla situazione. Ci sono tre azioni visibili per te.

– Post Lock in WordPress

Le funzionalità sopra menzionate sono rese possibili grazie all'API WordPress Heartbeat che crea una connessione tra il server e il browser per comunicazioni e risposte appropriate.

L'API Heartbeat di WordPress genera richieste di comunicazione con il server e attiva eventi alla ricezione di dati/risposte. Questo di solito aumenta il carico sul server e alla fine rallenta l'amministratore di WordPress.

Un esempio dal vivo

Accedo alla mia dashboard di WordPress e inizio a redigere un post. Successivamente, lascio aperta la scheda per alcuni minuti e inizio a sfogliare altre schede. La dashboard è ancora connessa e puoi vedere che admin-ajax invia continuamente richieste.

– admin-ajax.php Invio di richieste al server

Secondo il ticket di cui sopra, admin-ajax.php in WordPress genera richieste ogni 15 secondi. La richiesta può essere qualsiasi comunicazione con il server.

In che modo i plugin sovraccaricano admin-ajax.php?

La maggior parte dei problemi in admin-ajax.php in WordPress possono essere attribuiti alle richieste fatte dai plugin installati. Questi plugin rallentano l'amministratore di WordPress inviando richieste per ottenere una determinata funzionalità, come l'attivazione di un pop-up o l'aggiornamento di un contatore di condivisione social.

Detto questo, le richieste non aumenteranno necessariamente il file admin-ajax.php. Se le richieste vengono gestite correttamente e gli sviluppatori di plug-in seguono le migliori pratiche nell'utilizzo delle chiamate AJAX nei loro plug-in, il file admin-ajax.php andrà bene. Quindi, è anche importante diagnosticare qualsiasi plugin prima di disattivarlo.

Come diagnosticare un plugin in WordPress?

È importante diagnosticare correttamente il plug-in per identificare il suo impatto sul file admin-ajax.php, che potrebbe rallentare l'amministratore di WordPress. Per fare ciò, utilizzeremo due strumenti: GTmetrix e WebPageTest.

Nel caso di GTmetrix, vai alla sua scheda Cascata per un elenco completo delle richieste. Guardando da vicino l'elenco, puoi vedere le richieste POST fatte dal file admin-ajax.php.

– Diagnosi Plugin in WordPress

Nel mio caso, queste richieste sono state fatte principalmente da un plugin di condivisione social. Questo particolare plug-in invia una richiesta Ajax agli account dei social media tramite API ogni 15 secondi per recuperare un conteggio di condivisione aggiornato.

Espandi la scheda per informazioni dettagliate. La scheda di risposta mostra il punto esatto che attiva queste richieste.

Chrome è dotato di strumenti per sviluppatori che possono aiutare ad analizzare le richieste effettuate da vari plug-in. Per verificarlo, apri il sito Web in Chrome, fai clic su CTRL + Maiusc + I e fai clic sulla scheda Rete.

– Richieste admix-ajax.php in Chrome

Ricarica la pagina e guarda l'elenco popolato con le richieste aggiornate. Nella casella del filtro, digita ajax o admin-ajax per filtrare i file richiesti. Questo ti dà informazioni sul numero di richieste, sulla loro frequenza e sull'origine della richiesta.

Quindi, fare clic sul file per visualizzare ulteriori informazioni. Nella scheda di risposta, ti dà qualche suggerimento sul plugin che causa questa richiesta. Nel mio caso, questa volta è stato attivato dal plug-in WP Popular (WPP), un plug-in che mette in evidenza il post più popolare in un determinato periodo di tempo.

Per evitare ciò, assicurati che il plugin che stai utilizzando sia aggiornato. In caso contrario, prova ad aprire un ticket di supporto in modo che i suoi sviluppatori possano risolvere il problema. Se possibile, puoi anche sostituirlo con un altro plugin che è aggiornato e non sovraccarica il file admin-ajax.php.

Eseguire una diagnosi approfondita è importante prima di sbarazzarsi di qualsiasi plug-in, poiché alcuni plug-in sono fondamentali per il tuo sito WordPress. Questi strumenti possono aiutarti a trovare la causa principale e a scegliere la migliore soluzione possibile per risolverla.

Nella prossima sezione, vedremo come possiamo ridurre queste richieste ed evitare che il file admin-ajax.php venga sovraccaricato.

Velocizza la dashboard di WordPress

Per velocizzare il backend di WordPress, l'approccio migliore è disabilitare l'API Heartbeat, o almeno impostare un intervallo di tempo più lungo in modo che non colpisca il server dopo pochi secondi.

Installa il plugin Heartbeat Control

– Plugin per il controllo del battito cardiaco

Accedi alla dashboard di amministrazione di WordPress. Vai a Plugin → Aggiungi nuovo. Cerca il controllo del battito cardiaco. Installalo e attivalo.

– Installa Heartbeat Control in WordPress

Configura il plugin per il controllo del battito cardiaco

Vai a Impostazioni → Impostazioni controllo battito cardiaco. Lì troverai tre menu a discesa per la configurazione del plugin.

1. Consenti battito cardiaco

È possibile selezionare le aree in cui funzionerà l'API Heartbeat. Ci sono tre opzioni tra cui scegliere:

• Dashboard di WordPress: questo abiliterà l'API Heartbeat per il dashboard di WordPress.
• Frontend: questo abiliterà l'API sul frontend.
• Editor dei post: selezionare questa casella di controllo se si desidera abilitare l'API Heartbeat per le funzioni di salvataggio automatico e blocco dei post.

– Consenti il ​​controllo del battito cardiaco del battito cardiaco

2. Disabilita il battito cardiaco

Seleziona questa opzione se desideri che l'API Heartbeat di WordPress disabiliti posizioni particolari. Fai attenzione quando scegli le posizioni perché anche altri plug-in potrebbero utilizzare l'API Heartbeat di WordPress. Se sei l'unico utente del backend di WordPress, ti suggerirei di disabilitarlo ovunque e quindi verificare se interrompe il sito Web.

Tuttavia, se il tuo sito ha più di un utente che contribuisce regolarmente, ti suggerirei di consentire l'API Heartbeat solo nelle pagine di modifica dei post.

– Disabilita il battito cardiaco in Controllo battito cardiaco

3. Modifica battito cardiaco

Questo menu a discesa consente di impostare l'intervallo di tempo, compreso tra 0 e 300 secondi, per eseguire le richieste admin-ajax. Impostandolo a 120 secondi, la richiesta verrà generata ogni 120 secondi. Ciò ridurrà drasticamente il carico sul server. Regolalo in base alle tue esigenze.

– Modifica battito cardiaco in Controllo battito cardiaco

Crea più regole

Puoi creare più regole in base alle tue esigenze. Ad esempio, potresti voler attivare la dashboard di WordPress in 120 secondi, ma l'editor dei post deve essere attivato in 60 secondi. Per fare ciò, devi creare due regole: una per la dashboard di WordPress e l'altra per l'editor dei post. Imposta le loro frequenze rispettivamente su 120 e 60.

Rileva i plugin che utilizzano l'API Heartbeat

Ora che hai impostato tutto, è il momento di verificare quali plugin utilizzano il file admin-ajax.php e rallentano il sito web.

Vai su GTmetrix e inserisci l'URL del tuo sito. Ci vorranno alcuni istanti per analizzare il sito. Una volta terminato, vai alla scheda Cascata e vedrai quanto tempo impiega un file per connettersi e rispondere. Scorri un po' verso il basso e vedi se c'è una voce per POST admin-ajax.php. Se sì, espandilo e vai alla scheda Pubblica. Da qui, puoi identificare il plugin colpevole.

Nel mio caso, il plugin "desktop switch" utilizza il file admin-ajax.php e invia continuamente richieste al server. Questo è il momento di prendere una decisione; sostituiscilo con un altro plugin o incrocia le dita.

– POST admin-ajax.php

Riepilogo

Considerando il suo set di funzionalità, l'API Heartbeat è molto utile sul tuo sito Web WordPress. Tuttavia, se non utilizzato correttamente, può aumentare il tempo di caricamento di un backend e del front-end di WordPress inviando da e verso le richieste Ajax di WordPress.

Ci sono solo due soluzioni a questo problema. È possibile disabilitare l'API Heartbeat/abilitarla solo in alcune posizioni, oppure eseguire l'aggiornamento a un hosting gestito in grado di gestire il carico delle richieste e ridurre anche i tempi di risposta del server.