Quando si lavora a un progetto di sviluppo di WordPress con decine o più plugin installati, è comune incontrare problemi di prestazioni. Tuttavia, individuare la causa del problema non è sempre facile.
Avete eliminato i soliti sospetti: l’hosting è adeguato, non ci sono errori JavaScript o PHP e non c’è nient’altro che non vada. Sospettate che la colpa sia di uno o più plugin che avete installato, ma come fate a capire quale plugin sta causando il problema?
Il metodo abituale per identificare un plugin problematico è quello di disattivare i plugin fino a quando non trovate il collo di bottiglia delle prestazioni.
Tuttavia, esiste un metodo più rapido ed efficiente. Questo è lo scenario che il plugin gratuito Query Monitor è stato creato per risolvere. Può aiutarvi a individuare i problemi di prestazioni, a sviluppare siti in modo più efficiente e a gestire meglio il vostro sito WordPress.
In questa guida scoprirete tutto quello che c’è da sapere su Query Monitor: cos’è, cosa fa e come si usa.
Cos’È Query Monitor?
Query Monitor è un plugin gratuito al 100% che vi aiuta a eseguire il debug delle prestazioni e dello sviluppo del vostro sito WordPress.
Potete considerarlo come gli Strumenti per sviluppatori di Chrome, ma in modo specifico per WordPress. Potete esaminare le query del database, gli script, le tempistiche e molto altro ancora. Inoltre, potete visualizzare tonnellate di informazioni utili, come le informazioni generali sull’ambiente e i dettagli di pagine specifiche.
Query Monitor presenta tutte queste informazioni in un modo facilmente accessibile a cui accedere da qualsiasi punto del vostro sito.
Query Monitor è gestito da John Blackbourn, ingegnere web di Human Made. Ha creato anche molti altri plugin utili, tra cui WP Crontrol (ottimo per il debug di wp-cron) e User Switching (ottimo per il debug delle esperienze di diversi ruoli utente).
John è molto attivo e lavora costantemente per mantenere e migliorare Query Monitor. Automattic e altri sponsor sostengono il suo lavoro.
Se, dopo aver letto questo articolo, trovate utile il plugin potete sostenere Query Monitor sponsorizzando il progetto su GitHub a partire da 1 dollaro al mese.
Cosa Fa Query Monitor?
Query Monitor può aiutarvi a eseguire il debug non solo delle query al database di WordPress, nonostante il nome.
Non fraintendeteci: il debug delle query del database è un’attività che Query Monitor svolge egregiamente e rappresenta uno dei vantaggi più significativi del plugin.
Tuttavia, si occupa anche di molte altre aree, tra cui il debug delle prestazioni e il debug generale dello sviluppo.
Ecco un esempio dei molti dettagli con cui Query Monitor può aiutarvi per l’analisi e il debug:
- Query del database, anche mostrando le query di plugin specifici
- Errori PHP
- Utilizzo della memoria
- Chiamate API HTTP
- Script e stili in attesa, incluse le dipendenze
- Hooks e actions
- File di template del tema
- Lingue e traduzioni
- Regole di riscrittura
- Blocchi dell’editor di blocchi
- Informazioni generali sull’ambiente
- Schermate dell’amministrazione di WordPress
Una limitazione notevole di Query Monitor è che serve soprattutto per il debug “sul momento”. Quando vi mostra le query del database, i tempi e così via, lo fa solo per il caricamento della pagina corrente.
In genere non tiene traccia delle informazioni storiche o dei trend, anche se John dice che questa funzione è prevista per le versioni future.
Come Usare Query Monitor per Fare il Debug di WordPress e Migliorare le Prestazioni
Ora che sapete cos’è e cosa fa Query Monitor, vediamo come usarlo per eseguire il debug delle prestazioni del vostro sito e alcuni altri strumenti per il debug generale dello sviluppo.
Vi daremo un’introduzione generale all’interfaccia di Query Monitor e al suo funzionamento. Poi approfondiremo ogni area dell’interfaccia.
Ci sono più di 12 diverse aree di alto livello dell’interfaccia, quindi c’è molto da dire. Tuttavia, il numero esatto di menu dell’interfaccia che vedrete dipenderà dalla pagina che state analizzando.
Vediamo di approfondire l’argomento.
Introduzione all’Interfaccia di Query Monitor
Query Monitor non ha un’area di interfaccia separata. Al contrario, visualizza nuove informazioni all’interno della barra di amministrazione di WordPress sia nel frontend che nel backend.
Inizialmente Query Monitor visualizza un rapido riepilogo con 4 informazioni:
- Tempo di generazione della pagina – 0,05 s nella schermata.
- Picco di utilizzo della memoria – 7,7 MB nella schermata.
- Tempo totale impiegato dalle query SQL (in secondi) – 0,00 s nella schermata.
- Numero totale di query SQL – 54 nella schermata.
Se fate clic su questo riepilogo, si aprirà l’intera interfaccia di Query Monitor, che viene visualizzata come finestra in sovraimpressione sulla pagina del frontend o del backend che state visualizzando.
Tutte le funzioni e le informazioni offerte da Query Monitor sono contenute in questa finestra in sovrimpressione.
Se preferite cambiare il layout della finestra in sovrimpressione, potete fare clic sul pulsante nell’angolo in alto a destra per passare a un’interfaccia a barre laterali. Potete anche usare il drag-and-drop per modificare le dimensioni della finestra.
L’interfaccia di Query Monitor e le sue informazioni sono visibili solo ad Admin (o Super Admin su WordPress multisito).
C’è anche la possibilità di impostare un cookie di autenticazione per visualizzare l’output di Query Monitor anche quando non siete connessi (o siete connessi come utente con un ruolo inferiore). Vi spiegheremo come fare più avanti nella guida.
Passiamo in rassegna ogni scheda dell’interfaccia e vi spieghiamo come potete utilizzarla per eseguire il debug del vostro sito WordPress.
Overview
La scheda Overview mostra ulteriori dettagli del riepilogo della barra di amministrazione e alcune informazioni generali sull’ambiente.
Per esempio, invece di vedere solo il picco di utilizzo della memoria, la scheda Panoramica fa un passo avanti per vedere in che modo questo picco di utilizzo si relazione con i limiti di memoria del vostro server e di WordPress.
Non c’è nulla di troppo dettagliato: è, appunto, solo una panoramica (da qui il nome).
Queries
La scheda Queries vi permette di approfondire ogni query del database per la pagina che state guardando. È una delle aree più ricche di informazioni di Query Monitor, il che ha senso se si considera il nome del plugin.
Per ogni query, potete vedere le seguenti informazioni:
- La query completa
- Il caller della query
- Componente della query (per esempio se proviene dal core, da un tema o da un plugin)
- Numero di righe
- Il tempo impiegato dalla query
Oltre al debugging generale, potete usarlo per trovare le query lente che bloccano le prestazioni del vostro sito.
Query Monitor suddivide le query in base al tema e ai singoli plugin, in modo che possiate vedere l’impatto di ogni estensione.
Supponiamo che un plugin specifico stia causando molte query lente. In questo caso, dovrete trovare un modo per risolvere il problema, ottimizzando le impostazioni del plugin o la configurazione del vostro server (per esempio usando la cache del database o degli oggetti) o passando a un altro plugin più efficiente.
Nella scheda principale potete vedere tutte le informazioni di alto livello per ogni query.
Se volete saperne di più su una specifica query, fate clic sull’icona più per espandere le informazioni più dettagliate.
Se vedete numeri anormalmente bassi, potrebbe essere a causa di un qualche tipo di caching, per esempio il caching della pagina o un plugin che memorizza le query del database. Per questo motivo, può essere utile disabilitare la cache durante il debug.
In quest’area ci sono anche alcuni sottomenu che vi aiutano a trovare tipi specifici di query:
- Duplicate Queries
- Queries by caller
- Queries by components
Duplicate Queries
L’area Duplicate Queries evidenzia le query duplicate ed elenca i “potenziali problemi” per aiutarvi a risolvere i problemi e a semplificare le cose.
Queries by Caller
L’area Queries by Caller vi permette di visualizzare tutti i caller di questa pagina. Se fate clic su uno di essi, potete vedere l’elenco delle query per quel caller.
Queries by Components
L’area Queries by Components mostra un elenco di tutti i componenti che hanno effettuato query, tra cui il core di WordPress, il vostro tema e i singoli plugin.
Potete fare clic su un componente specifico per visualizzare tutte le sue query.
Anche in questo caso, si tratta di uno dei report più preziosi perché vi permette di individuare i plugin specifici che peggiorano le prestazioni del vostro sito con query lente.
Leggete Qui Se Non Vedete le Query per Componente
Se non vedete le informazioni sui componenti in Query Monitor, è probabile che Query Monitor non riesca a collegarsi al file db.php. In questi casi vedrete un messaggio di errore come quello che segue.
Ci sono due probabili cause:
- I permessi dei file della cartella wp-content del vostro sito.
- Il file wp-content/db.php esiste già (forse a causa di un plugin di caching come W3 Total Cache).
Potete vedere alcune correzioni e soluzioni in questo articolo di GitHub. Se vi sentite a vostro agio nel connettervi al vostro server tramite SSH, potete risolvere il problema con un comando WP-CLI (anche se esistono altri metodi).
La maggior parte delle funzionalità di Query Monitor continuerà a funzionare anche con questo problema, ma non potrete vedere le informazioni sui componenti finché non risolverete il problema.
Logs
La scheda Logs è una scheda avanzata che vi permette di impostare i messaggi e le variabili da registrare. Questo può aiutarvi a risolvere problemi tecnici o a tenere sotto controllo il vostro sito per individuare eventuali problemi.
Quando installate Query Monitor per la prima volta, questa scheda non visualizzerà nulla perché non avrete impostato alcuna variabile di log.
Tuttavia, se volete impostare delle variabili di log personalizzate, potete farlo usando una semplice sintassi come questa:
do_action( 'qm/debug', 'This happened!' );
Query Monitor supporta le seguenti azioni, che vi permettono di registrare i problemi a diversi livelli:
- qm/emergency
- qm/alert
- qm/critical
- qm/error
- qm/warning
- qm/notice
- qm/info
- qm/debug
Se volete saperne di più e vedere alcuni esempi, consultate la pagina Query Monitor Logging Variable.
Request
La scheda principale Request mostra le variabili della query per la richiesta corrente.
Ci sono anche dei sottomenu per vedere le intestazioni della richiesta (Request Headers) e le intestazioni di risposta (Response Headers), che probabilmente sono più utili per il debug delle prestazioni.
Per esempio, potreste voler eseguire il debug del comportamento del caching o del CDN. Nel sottomenu Response Headers potete vedere il comportamento Cache-Control, che vi permette di eseguire il debug del caching del browser sul vostro sito.
Blocks
La scheda Blocks è visibile solo se guardate una pagina costruita con l’editor di blocchi nativo di WordPress (AKA Gutenberg).
In questi casi, questa pagina elencherà ogni singolo blocco della pagina, insieme a informazioni dettagliate su quel blocco.
Una cosa intelligente è che vi dirà se il blocco proviene dal core di WordPress o da un altro plugin.
Template
La scheda Template sarà visibile solo se state usando Query Monitor sul frontend del vostro sito. Vi aiuta a visualizzare e a fare il debug della gerarchia dei template della pagina che state guardando.
Potete vedere il file del template specifico per quella pagina e le varie parti del template e le classi del corpo.
Questo non ha nulla a che fare con le prestazioni, ma può essere utile per lo sviluppo di temi personalizzati.
Admin Screen
La scheda Admin Screen sarà visibile solo se usate Query Monitor nella bacheca di amministrazione di WordPress. Probabilmente non la userete spesso, ma può essere utile se dovete eseguire il debug di un comportamento in una schermata di amministrazione personalizzata.
Se guardate una schermata di amministrazione con una tabella di annunci, vi mostrerà i filtri e le azioni delle colonne personalizzate. Vi mostrerà anche lo stato di get_current_screen.
Script
Dopo la scheda Queries, la scheda Scripts è probabilmente l’area di debug delle prestazioni più utile in Query Monitor.
Questa scheda mostra tutti gli script JavaScript in attesa sulla pagina e le loro dipendenze. Potete anche disporre di filtri per trovare rapidamente gli script provenienti da un host specifico o con dipendenze esplicite.
In linea di massima, più script equivalgono a un sito web più lento perché aumentano le dimensioni della pagina e aggiungono richieste HTTP.
Potete usare quest’area per scoprire l’impatto delle diverse estensioni e trovare il modo di ridurre il numero di script in attesa che vengono caricati su ogni pagina.
Query Monitor non mostra però i tempi di caricamento di tutti questi script. Se volete vedere questo aspetto, dovete usare uno strumento di test della velocità e approfondire l’analisi a cascata: Pingdom e GTmetrix sono due ottime opzioni.
Se avete bisogno di aiuto per usare questi dettagli e ottimizzare gli script del vostro sito, abbiamo molte guide utili per ottimizzare JavaScript su WordPress:
- Come rinviare il parsing di JavaScript
- Come eliminare il JavaScript che blocca il rendering
- Come ridurre le richieste HTTP
Styles
La scheda Styles è come la scheda Script, ma mostra i CSS in attesa invece di JavaScript. È un’altra scheda utile per il debug delle prestazioni del vostro sito.
Come per gli script, il caricamento di un maggior numero di fogli di stile in una pagina comporta, in linea di massima, un caricamento più lento del sito.
In quest’area potete scoprire l’impatto delle diverse estensioni sul vostro sito. Potete usare queste informazioni per ridurre il numero di fogli di stile da caricare sulla pagina, riducendo così le dimensioni del file e le richieste HTTP necessarie per caricare la pagina.
Come per gli script, Query Monitor non vi fornirà un’analisi approfondita del caricamento dei CSS e se questi bloccano il caricamento di parti critiche del vostro sito. Per questo, dovrete usare nuovamente l’analisi a cascata.
Abbiamo alcuni post utili che vi aiutano a ottimizzare il CSS del vostro sito:
Hooks & Actions
La scheda Hooks & Actions elenca tutti gli hooks e la action della pagina corrente, insieme alla loro priorità.
Per le azioni, potete espandere una singola azione per vedere il file e la riga di codice associati a quell’azione. Potete anche filtrare le azioni per componente per trovare le azioni del core di WordPress, dei plugin e dei temi.
Quest’area non è realmente incentrata sulle prestazioni, ma è comoda per lo sviluppo personalizzato.
Languages
La scheda Languages mostra i domini di lingua e di testo del vostro sito e il file di lingua utilizzato per ogni estensione.
Non è molto utile se avete un sito in una sola lingua, l’inglese. Tuttavia, questa scheda può essere utile se gestite un sito multilingue e/o se il vostro sito è in una lingua che potrebbe non avere una copertura completa del pacchetto di traduzione.
HTTP API Calls
La scheda HTTP API Calls mostra tutte le richieste HTTP lato server che si sono verificate durante il caricamento della pagina, compresi i dettagli della richiesta, i tempi e il codice di stato HTTP.
Se un plugin o un tema effettua chiamate HTTP API lente, spesso questa può essere una causa “nascosta” di scarse prestazioni e dovrete trovare un modo per risolverla, cambiando qualcosa nelle impostazioni dell’estensione o passando a un’estensione diversa.
Per molte pagine dovreste vedere “Nessuna chiamata API HTTP” (“No HTTP API calls”), il che è un buon segno perché significa che non c’è nulla che intralcia le prestazioni del vostro sito.
Capability Checks
L’area Capability Checks vi permette di vedere quali capacità dell’utente possono accedere al contenuto che state guardando. Questo può essere utile per vedere se diversi utenti possono accedere a determinati contenuti del frontend o del backend.
Questa funzione è disattivata per impostazione predefinita per motivi di prestazioni. Se volete abilitarla, dovete modificare il file wp-config.php del vostro sito e aggiungere il seguente snippet di codice:
define( 'QM_ENABLE_CAPS_PANEL', true );
Environment
La scheda Environment fornisce un riepilogo dettagliato degli ambienti del vostro sito, tra cui:
- PHP
- Database
- WordPress
- Server
Potete vedere dettagli importanti, limiti, numeri di versione, impostazioni di configurazione, ecc.
Questo può essere utile per prendere decisioni importanti sulle prestazioni.
Per esempio, se vedete che il limite di memoria del vostro sito è limitato, potreste voler aumentare il limite di memoria per evitare errori legati al limite di memoria.
Allo stesso modo, se vedete che state usando una vecchia versione di PHP, potreste voler aggiornare alla versione più recente per migliorare le prestazioni.
Conditionals
La scheda Conditionals vi aiuta a vedere quali dichiarazioni di condizione si applicano alla pagina che state guardando, il che può essere utile nello sviluppo personalizzato.
Potete vedere sia le condizioni “Vero” che quelle “Falso”.
Come Visualizzare le Informazioni di Query Monitor come Utente Non Admin
In alcune situazioni potreste voler visualizzare le informazioni di Query Monitor con un ruolo diverso o come utente disconnesso. Questo può essere molto utile per i negozi WooCommerce, i siti associativi e altri siti simili.
Per farlo, dovete impostare un cookie di autenticazione nel vostro browser. Una volta impostato il cookie, sarete in grado di visualizzare le informazioni di Query Monitor ogni volta che visiterete il sito, anche se siete disconnessi.
Per impostare il cookie di autenticazione, fate clic sull’icona dell’ingranaggio nell’angolo in alto a destra del pannello di Query Monitor. Poi, clic sul pulsante Set authentication cookie.
Se volete disattivare questa funzionalità, potete tornare su questa interfaccia e fare clic sul pulsante Clear authentication cookie per rimuovere il cookie.
Se combinate questa funzionalità con User Switching, un altro utile plugin dello stesso sviluppatore, potete passare rapidamente da un ruolo all’altro sul vostro sito.
Come Estendere Query Monitor con i Componenti Aggiuntivi
Finora ci siamo concentrati esclusivamente sulle funzioni e sulle opzioni di analisi del plugin Query Monitor. Tuttavia, diversi componenti aggiuntivi di terze parti possono estendere ulteriormente Query Monitor.
Questi possono aggiungere il supporto a specifiche tecnologie di performance, come Memcached e Redis, e a specifici plugin di WordPress, come WooCommerce o GiveWP.
Query Monitor supporta anche tutti i componenti aggiuntivi del plugin Debug Bar, che aggiunge integrazioni per ElasticPress, Elementor, Cache Lookup e molti altri.
Potete vedere l’elenco completo dei componenti aggiuntivi di Query Monitor su questa pagina GitHub.
Altri Strumenti Utili per il Debug e il Miglioramento delle Prestazioni di WordPress
Sebbene Query Monitor sia un utile strumento gratuito per il debug delle prestazioni di WordPress, non copre tutto. Ci sono altri strumenti utili che dovreste prendere in considerazione per analizzare diverse aree delle prestazioni di WordPress.
Kinsta APM (Application Performance Monitoring)
Se ospitate il vostro sito su Kinsta, avrete accesso gratuito al Kinsta Application Performance Monitoring (APM).
Uno strumento APM come Kinsta APM va ancora più in profondità di Query Monitor e analizza questi aspetti:
- Processi PHP lenti
- Query di database lente
- Chiamate API lunghe
- Lunghe richieste di URL esterni
- Tracce full-stack delle aree problematiche
Potete anche vedere come queste informazioni cambiano nel tempo, cosa che Query Monitor non può fare. Inoltre, potete analizzare l’intero sito invece di analizzare pagina per pagina.
Per un tutorial generale, seguite la nostra guida su Kinsta APM.
Abbiamo anche delle guide specifiche sull’uso di APM per ottimizzare i siti WordPress ad alta intensità di risorse:
New Relic
New Relic è un altro utile strumento di monitoraggio delle prestazioni simile a Kinsta APM.
Se non avete un hosting su Kinsta, può essere un ottimo strumento per accedere a tipi di analisi simili. Anche se il vostro sito si trova su da Kinsta, potete comunque attivare il monitoraggio di New Relic se necessario, anche se dovete avere una vostra licenza.
Per imparare a usare New Relic, potete seguire il nostro tutorial sulle prestazioni di New Relic.
Uno Strumento di Test della Velocità di Qualità
Ne abbiamo parlato in precedenza quando abbiamo parlato dell’analisi a cascata, ma un buon strumento di test di velocità può essere prezioso per verificare cosa e come carica il vostro sito.
Per aiutarvi a usare qualsiasi strumento scegliate, abbiamo una guida dedicata al modo corretto di eseguire un test di velocità. Abbiamo anche degli articoli dedicati ad alcuni degli strumenti più popolari:
Modalità di Debug di WordPress
WordPress include una modalità di debug integrata per visualizzare tutti gli errori PHP, gli avvisi e le avvertenze. Avete anche la possibilità di salvare questi problemi in un file di log.
Per maggiori dettagli, consultate la nostra guida completa alla modalità di debug di WordPress.
Strumenti per Sviluppatori del Browser Web
Chrome include strumenti di sviluppo molto dettagliati che possono aiutarvi a eseguire il debug delle prestazioni del vostro sito, così come altri browser.
Per esempio, la scheda Rete vi permette di visualizzare i tempi di ogni richiesta HTTP sul vostro sito, oltre a un’analisi a cascata. La scheda Prestazioni vi offre un’analisi molto dettagliata delle prestazioni.
Dalla scheda Lighthouse potete anche eseguire verifiche con Lighthouse. Si tratta dello stesso algoritmo di test delle prestazioni utilizzato da PageSpeed Insights.
Se volete imparare a usare gli Strumenti per sviluppatori di Chrome per eseguire il debug delle prestazioni, questo centro di assistenza è un ottimo punto di partenza.
Riepilogo
Se volete individuare i problemi di prestazioni e di sviluppo del vostro sito WordPress, il plugin Query Monitor è uno dei migliori strumenti gratuiti.
Per analizzare le prestazioni del vostro sito, probabilmente vorrete concentrarvi soprattutto su queste aree dell’interfaccia:
- Panoramica
- Query
- Log (per gli utenti più esperti)
- Script
- Stili
- Chiamate API HTTP
- Ambiente
Tuttavia, anche le altre aree possono essere utili se sviluppate siti WordPress.
Provate Query Monitor oggi stesso e vedrete quanto vi aiuterà. Se non volete installarlo sul vostro sito live, potete sempre creare un sito di staging e installarlo lì per vedere cosa succede sotto il cofano del vostro sito.
Lascia un commento