Monitoraggio dei punteggi Lighthouse e dei principali Web Vital con DebugBear

DebugBear bastano pochi secondi per iniziare a utilizzare. Lo indichi letteralmente a un URL che desideri guardare e inizierà a guardarlo. Non installi nulla.

Inizierà a eseguire i test e avrai immediatamente i grafici delle prestazioni che puoi iniziare a guardare che vengono monitorati nel tempo, non solo pezzi unici.

Ho i rapporti completi di Lighthouse proprio lì, che mi mostrano cose su cui devo davvero lavorare.

Poiché tutti questi cambiamenti vengono monitorati nel tempo, puoi vedere esattamente cosa è cambiato e quando. È piuttosto grande. Le dimensioni del tuo pacchetto JavaScript sono aumentate? Quando? Perché? Il tuo punteggio SEO ha subito un calo? Quando? Perché?

Un'altra cosa fantastica: DebugBear ti invierà un'e-mail (o invierà un messaggio Slack) quando hai regressioni. Quindi, anche se le classifiche sono fantastiche, non è che devi accedere ogni volta per vedere cosa succede. Puoi anche impostare budget di prestazione molto chiari da confrontare con:

Rompere un budget prestazionale? Riceverai una notifica:

Vuoi confrontare diverse aree/pagine del tuo sito? (Puoi comunque accedervi prima di testarli.) O confrontarti con i concorrenti per assicurarti di non rimanere indietro? Nessun problema, monitora anche quelli:

Testare la produzione è un’ottima cosa. Sta misurando la realtà e puoi iniziare rapidamente. Ma può anche essere un’ottima cosa misurare le cose prima diventano un problema. Sai come ottenere anteprime di distribuzione su servizi come Netlify e Vercel? Bene, DebugBear ha integrazioni create appositamente per servizi come Netlify ed vercel.

Ora, quando hai una richiesta pull con un'anteprima di distribuzione, puoi vedere proprio su GitHub se i parametri sono in linea.

È un valore enorme per pochissimo lavoro. Ma non lasciarti ingannare dalla semplicità: ci sono tutti i tipi di cose avanzate che puoi fare. Puoi riscaldare la cache. Puoi testare da diverse geolocalizzazioni. Puoi scrivere uno script per un login che prenda i selettori CSS per gli input e i valori da inserire in essi. Puoi anche fargli eseguire il tuo JavaScript per fare cose speciali per prepararlo per i test, come modalità aperte, iniezione peformance.mark metriche o eseguire altre operazioni di navigazione. 🎉

Fonte: https://css-tricks.com/monitoring-lighthouse-scores-and-core-web-vitals-with-debugbear/