Speed Auditor: scoprite cosa ostacola il vostro WordPress

Alcuni amministratori di siti WordPress sono ossessionati da PageSpeed Insights o GTmetrix. Il mio consiglio, e quello di molti altri che ne sanno molto di più, è di non dare a queste metriche più importanza di quanta ne abbiano.

Se la velocità di caricamento percepita è buona, non è necessario mettere tutto "in verde". In molti casi è addirittura controproducente, perché si può cadere in una sovraottimizzazione o, peggio, si può finire per rovinare diverse cose cercando di sistemarne una.

Tuttavia, che siate appassionati di WPO, di ottimizzazione o semplicemente vogliate cercare di migliorare la reattività del vostro sito, questi strumenti sono quasi indispensabili. Il problema è che offrono "immagini fisse" prese da server esterni. Ma cosa succede quando voi, in qualità di amministratori, navigate sul vostro sito, che ne dite di quegli annunci che si caricano in ritardo o di quel menu che salta proprio quando state per cliccare?

Origine

Speed Auditor è nato come risposta a un'esigenza personale di avere diversi strumenti di diagnostica locale semplici ma potenti. Non è un plugin di ottimizzazione (non cambia nulla nel codice), ma un plugin di verifica in tempo reale.

Se cercate un buon plugin a pagamento per WPO, forse il migliore, con cui apportare modifiche e regolazioni fini, date un'occhiata a Perfmatters. Se, invece, cercate qualcosa di gratuito e semplice, che non vi faccia perdere la testa con le impostazioni e le regolazioni, ma che offra molte possibilità, potete provare WPO Rocket Tweaks di Fernando Tellado, disponibile nel repository di WordPress.

Se non sapete cosa sia un nodo DOM o una metrica di latenza, non preoccupatevi. Speed Auditor è stato progettato per aiutarvi a capire il vostro sito web a colpo d'occhio:

• L'indicatore intelligente: Nella barra di amministrazione appare un'icona che cambia colore. Se è verde, l'LCP (il tempo necessario per vedere le cose più importanti) è ottimale. Se diventa arancione o rossa, qualcosa richiede la vostra attenzione.

• Audit mentre si naviga: Non è necessario configurare nulla di complesso. Attivate il plugin e, mentre controllate i vostri post, questo lavora in background analizzando se le vostre immagini sono troppo pesanti o se il vostro server risponde in modo lento.
• Rapporti più umani: Con un solo clic, scaricate un file .txt da inviare al vostro sviluppatore o da salvare per confrontare i risultati dopo l'applicazione delle modifiche.

Sotto il cofano

La versione 1.1.8 tenta di fornire una certa profondità di diagnostica per risparmiare tempo nella console del browser.

• Identificazione precisa dell'LCP: Il plugin rileva esattamente quale elemento (immagine o blocco di testo) ha attivato il Largest Contentful Paint.
• Analisi della profondità del DOM: Fondamentale per evitare "dimensioni eccessive del DOM". Speed Auditor suddivide il numero di nodi per zone (Intestazione, Contenuto, Piè di pagina) e avverte se la nidificazione supera i 15-20 livelli.
• Media Latency Monitor: Misura il tempo di trasferimento effettivo (Resource Timing API) delle immagini. Se un'immagine impiega 500 ms per essere scaricata, il plugin la contrassegna come critica.
• Impatto zero sul server: Tutta l'elaborazione avviene sul lato client (browser). Non ci sono pesanti query di database o processi PHP che rallentano il sito.

Il grande salto. Prossimamente: Speed Auditor 1.1.9 (con "Radar CLS")

Fino ad oggi, il Cumulative Layout Shift (CLS) era una figura astratta in un report. Si sapeva che qualcosa si stava muovendo, ma non sempre si sapeva cosa. Molto presto, con la versione 1.1.9, le cose cambieranno.

Viene introdotto il pulsante "Highlighter" del radar o del CLS visivo.

Immaginate di attivare una modalità "radar" che disegna dei riquadri rossi su ogni elemento che si muove durante lo scorrimento. Questo, che alcune estensioni già fanno, con più o meno successo, è sempre un aiuto visivo molto utile per cercare di catturare quegli "overflow" che a volte sfuggono all'occhio.

• Si tratta di un banner AdSense che spinge il vostro contenuto? Lo vedrete con un riquadro rosso. Potete approfondire questo problema qui.
• È un'immagine senza dimensioni definite? Il radar la catturerà.
• Persistenza totale: Potrete navigare l'intero sito web con il radar acceso; il plugin ricorderà che volete continuare a controllare visivamente ogni angolo.

Questo aggiornamento includerà anche un breve glossario tecnico, che sarà ampliato per includere suggerimenti e tutorial, integrati nella dashboard di WordPress, in modo che termini come ins, iframe o figure non siano più un mistero.

L'idea è di migliorare sia la risposta dell'analisi sia i rapporti generati man mano che la provo in diversi scenari e che ricevo suggerimenti per il miglioramento o segnalazioni di errori.

La versione 1.1.8 è ora disponibile per riordinare le metriche e presto la 1.1.9 renderà ancora più facile sistemare la stabilità visiva di WordPress. Se lo installate ora, riceverete l'aggiornamento a breve.

Come funziona?

Il codice segue queste tre fasi:

1. L'Osservatore di prestazioni

Il browser (Chrome, Edge, Opera) dispone di un'API nativa chiamata Performance API. Il plugin registra un "osservatore" chiamato PerformanceObserver specificamente configurato per il tipo di input layout-shift.

Ogni volta che qualcosa si muove sullo schermo dopo essere stato dipinto inizialmente, il browser genera un evento. Il plugin cattura questo evento ed estrae due dati chiave:

• Il valore dell'offset: (questo numero è 0,0145).
• L'elemento colpevole: Il browser indica al plugin esattamente quale nodo HTML è stato spostato.

2. Il filtro "Interazione recente

È qui che il plugin cerca di essere intelligente. Non tutti gli spostamenti sono "cattivi". Se si fa clic su un menu a discesa e il contenuto scorre verso il basso, si tratta di una mossa attesa dall'utente.

Il plugin controlla una proprietà chiamata hadRecentInput. Se si è toccato un tasto o si è fatto clic negli ultimi 500 ms, il browser segna quel movimento come "atteso" e il plugin lo ignora per evitare falsi positivi. Rileva solo i movimenti che si verificano in modo inaspettato (come la comparsa improvvisa di un annuncio pubblicitario).

3. Rendering visivo (i riquadri rossi)

Una volta che il plugin ha l'elemento che è stato spostato, entra in gioco la parte visiva:

1. Calcolo delle coordinate: Utilizza una funzione chiamata getBoundingClientRect() per scoprire dove si trova l'elemento sullo schermo in quel preciso momento (pixel in alto, pixel a sinistra).
2. Iniezione di frame: Creare un div con posizione assoluta, un bordo rosso di 2px e uno z-index molto alto per disegnare sopra tutto.
3. L'etichetta: Aggiungere un piccolo riquadro in alto a sinistra del riquadro rosso con il nome dell'etichetta (ins, img, div) e il valore del CLS accumulato.

Perché è meglio di un rapporto esterno?

Strumenti come PageSpeed a volte non rilevano i CLS perché non scorrono fino in fondo o non attendono il caricamento di alcuni annunci.

Il plugin, utilizzando la persistenza, misura il CLS accumulato durante la sessione di navigazione dell'utente. Se un elemento si muove un po' all'inizio e un po' durante lo scorrimento, il plugin lo somma e lo evidenzia, fornendo la cifra reale più approssimativa che Google finirà per visualizzare nel suo rapporto"Chrome User Experience" (CrUX).