Core/Dash Diagnosi

CoreDash Diagnosi: Il motore delle cause radici

Il Real User Monitoring ti fornisce i parametri vitali. Il tuo LCP è di 3,2 secondi. Il tuo CLS è 0,25. Il tuo INP è insufficiente. Questo è esattamente ciò per cui il RUM è progettato. Mostra le metriche che contano. Ti dice che le prestazioni sono degradate e dove concentrarsi. È il primo ed essenziale passo per correggere i Core Web Vitals.

Ma una volta ottenuti i dati, inizia il vero lavoro. Un LCP insufficiente potrebbe dipendere da un server lento, un'immagine sovradimensionata, uno script render blocking o da tutti e tre. Il RUM mostra il sintomo. Il passo logico successivo è la diagnosi.

CoreDash Diagnosi è il livello di intelligenza che trasforma le metriche in correzioni. Estende i tuoi dati RUM con un'analisi forense automatizzata delle prestazioni, catturando profili di esecuzione dettagliati dal browser per identificare l'esatto collo di bottiglia e generare la soluzione esatta su misura per il tuo CMS!.

Dalla misurazione alla causa radice

Hai la dashboard. LCP: 3,2s. Sai dove si trova il problema. Ora devi sapere perché. È l'immagine hero? Gli script di terze parti? Il tempo di risposta del server? Potresti passare ore a esaminare il waterfall, profilare il main thread e testare ipotesi. Oppure lasciare che sia il motore diagnostico a farlo per te.

CoreDash Diagnosi compie il passo logico successivo. Non si limita a misurare le prestazioni. Ricostruisce a ritroso il fallimento.

Diagnosi del LCP: quattro fasi, una sola risposta

Scomponiamo il Largest Contentful Paint nelle sue quattro fasi costitutive: TTFB, Load Delay, Load Duration e Render Delay. Quando una fase fallisce, non ci limitiamo a segnalarla. La spieghiamo.

• Attribuzione ai vendor: Non segnaliamo un "tempo di scripting elevato". Segnaliamo che lo script di tracciamento di HubSpot ha bloccato il paint per 150ms o che Google Tag Manager ha ritardato il render di 300ms. Vedi il vendor, il costo e l'impatto.
• Rilevamento degli anti-pattern: Scansioniamo il sito alla ricerca di 14 specifici errori architetturali: il lazy loading dell'immagine LCP, la sua presenza in uno sfondo CSS, il caricamento da una CDN non ottimizzata. Individuiamo gli errori che sfuggono agli audit.
• Risoluzione a livello di codice: Generiamo la correzione. Se la tua immagine LCP non ha un priority hint, scriviamo il tag <link rel="preload"> per te. Se uno script blocca il rendering, ti mostriamo dove aggiungere defer. La correzione è pronta per il copia-incolla.

Diagnosi del CLS: cattura il bug fantasma

I layout shift sono i bug più difficili da riprodurre. Un font si carica in ritardo su una determinata connessione. Un annuncio viene renderizzato più lentamente su mobile. Lo shift avviene una volta sola e non lo vedi mai più.

CoreDash Diagnosi cattura ogni frame. Registriamo lo shift, identifichiamo l'elemento e tracciamo la causa radice.

• L'elemento: Ti diciamo esattamente quale nodo DOM si è spostato. Non "da qualche parte nell'header". Il <div> specifico con la classe specifica.
• Il trigger: Ti diciamo perché si è spostato. Un web font sostituito senza una dichiarazione di fallback. Un banner pubblicitario inserito senza spazio riservato. Un'immagine caricata senza dimensioni.
• La soluzione: Scriviamo il CSS. Aggiungi aspect-ratio: 16/9 all'immagine. Imposta font-display: swap sul font face. Riserva min-height: 250px per il contenitore dell'annuncio. Lo shift non si verificherà mai più.

Diagnosi dell'INP: individua il blocco

L 'Interaction to Next Paint misura la reattività. Quando fallisce, l'interfaccia si blocca. L'utente clicca su un pulsante e non succede nulla.

I dati RUM ti dicono che l'INP è insufficiente e dove i visitatori hanno interagito con la tua pagina.  Noi ti diciamo quale funzione sta bloccando il main thread e come risolverlo!

• Isola l'interazione: Identifichiamo l'esatto evento di input: il clic su un pulsante, l'invio di un modulo, la pressione di un tasto. Sappiamo quale interazione è fallita.
• Profila l'handler: Misuriamo il tuo event listener. Ti mostriamo il tempo di esecuzione del tuo codice, fino alla singola funzione. Se il tuo handler di clic esegue un'operazione sincrona da 200ms, ti mostriamo quei 200ms.
• Rileva le interferenze: A volte il tuo codice è veloce, ma il browser è semplicemente occupato. Una libreria di analytics di terze parti sta elaborando dati. Un pixel di tracciamento sta inviando una richiesta di rete. Segnaliamo il task in background che sta sottraendo cicli all'interazione dell'utente.

Smetti di ottimizzare alla cieca. Ottimizzi la funzione che sta effettivamente causando il blocco.

Soluzioni specifiche per piattaforma

Le raccomandazioni generiche sono inutili.

"Pubblica le immagini in formati di nuova generazione" non aiuta un merchant Shopify che non controlla la CDN. "Riduci il tempo di esecuzione di JavaScript" non aiuta il proprietario di un sito WordPress che non sa quale sia il plugin a causare il problema.

CoreDash Diagnosi rileva il tuo stack e genera codice nativo.

WordPress? Ti forniamo lo snippet PHP o la specifica impostazione del plugin da modificare.
Next.js? Ti forniamo la modifica per il file next.config.js.
Shopify? Ti diciamo quale template Liquid modificare e ti mostriamo l'esatta riga da aggiungere.

Supportiamo Shopify, WordPress, WooCommerce, Magento, Drupal, Squarespace, Wix, Next.js, React, Vue.js e Nuxt.js.

La raccomandazione non è teorica. È eseguibile.

La differenza tra vedere e risolvere

Il RUM ti dice che il tuo sito è lento.

CoreDash Diagnosi ti dice che il widget di chat di Intercom blocca il main thread per 200ms durante il paint iniziale, ed ecco il tag script da modificare per posticiparne il caricamento.

Questa è la differenza tra una metrica e una soluzione.