Continuos Performance

Introduzione
Le applicazioni Web che costruiamo oggigiorno stanno diventando sempre più grandi e le prestazioni sono davvero importanti. Ci sono molte strategie che puoi adottare e molti strumenti su cui puoi sfruttare per assicurarti che la tua webapp sia abbastanza veloce. Come puoi assicurarti che tutti i membri del team seguiranno le linee guida? Come evitare di distribuire in produzione qualcosa che rallenti la tua webapp? Durante questo discorso, vedrai come le prestazioni sono prese sul serio in DAZN. Stiamo definendo un budget prestazionale, configurando Lighthouse ed eseguendolo nell'IC prima di ogni distribuzione. Le metriche seguenti rappresentano punti importanti del ciclo di vita del caricamento della pagina. Ognuno risponde a domande sull'esperienza utente. Quest'analisi è stata discussa in uno speech da Maurizio Mangione durante il Codemotion Milano 2019.

  • Page Bloat: insieme di tecniche per le performance
  • Micro Frontend: metodiche di architettura
  • Metriche basate sul tempo:
    • WebPageTest
    • LightHouse – plugin chrome: Lighthouse è uno strumento utilizzato manualmente o programmaticamente per fornire questo tipo di metriche incentrate sull'utente. Ogni metrica è descritta in modo elaborato nella documentazione di Lighthouse: prendi ad esempio Time to Interactive .
  • Metriche basate sul tempo:
    • Prima pittura contenta: sta succedendo? La navigazione è iniziata correttamente? Il Server ha risposto?
    • Prima pittura significativa: è utile? E stato reso disponibile un contenuto sufficiente per consentire agli utenti di interagire con esso?
    • Tempo per interazioni: e utilizzabile? Gli utenti possono interagire con la pagina o e ancora occupato nel caricamento?
    • Attività lunghe (assenza di): e delizioso? Le interazioni sono fluide e naturali, prive di ritardo e jank?

  • Measure Performance:
    • Quantity based metrics
    • Bundle size: Un altro grande colpevole che ho visto come causa di scarse prestazioni in molti siti Web è il modo in cui le risorse vengono raggruppate e caricate. Ho trovato la tecnica di raggruppare le risorse in blocchi più piccoli per essere abbastanza efficace nel migliorare le prestazioni. Se riesci a farlo oscillare, il caricamento di risorse critiche al caricamento della pagina durante il caricamento di risorse non critiche su richiesta può fare una differenza enorme. Utilizzando ad esempio moderni strumenti di costruzione come Webpack , possiamo ottenere questo risultato con tecniche come la Webpack suddivisione del codice e lo scuotimento degli alberi.
  • Overall page weight
  • Third party
DA DOVE PARTIRE
  • Checklist
  • LightHouse
  • WebpageTest

Utilizzando ad esempio integrazioni Lighthouse come Foo , puoi testare le prestazioni del tuo sito Web automaticamente nel tempo. Fornisce una vista cronologica di metriche importanti come 'Primo disegno significativo', 'Primo CPU inattivo', 'Primo disegno contento', 'Indice velocità', 'Tempo di interattività' e 'Latenza stimata di input'.

Le prestazioni del sito Web hanno acquisito maggiore importanza nello sviluppo web moderno. Considerando i diversi modi in cui gli utenti visualizzano e interagiscono con i siti Web, dobbiamo esaminare le prestazioni del sito Web da una prospettiva incentrata sull'utente.

Maurizio Mangione