Lo stato del web

Una guida per miglioramenti delle prestazioni di grande impatto

Internet sta crescendo in modo esponenziale, così come la piattaforma Web che creiamo. Spesso, sebbene non riusciamo a riflettere sul quadro più ampio della connettività e dei contesti in cui il pubblico del nostro lavoro potrebbe trovarsi. Anche una breve occhiata allo stato del World Wide Web mostra che non stiamo costruendo con empatia, consapevolezza della variabilità della situazione , figuriamoci in mente delle prestazioni.

Allora, qual è lo stato del Web oggi?

Solo il 46% di 7,4 miliardi di persone su questo pianeta ha accesso a Internet. La velocità media della rete si riduce a 7 Mb / s non impressionanti. Ancora più importante, il 93% degli utenti di Internet passa online tramite dispositivi mobili: diventa ingiustificabile non soddisfare i palmari. Spesso i dati sono più costosi di quanto ipotizziamo: potrebbero volerci da un'ora a 13 ore per acquistare un pacchetto da 500 MB (Germania contro Brasile; per statistiche più intriganti sulla connettività, vai a Beyond the Bubble: The Real World Performance di Ben Schwarz.

Nemmeno i nostri siti Web sono in una forma perfetta: il sito medio ha le dimensioni del gioco Doom originale (circa 3 MB) (si prega di notare che per la precisione statistica si dovrebbero usare mediane, leggi l'eccellente Ilya Grigorik La "Pagina media" è un mito. La dimensione media del sito è attualmente di 1,4 MB). Le immagini possono facilmente rappresentare 1,7 MB di larghezza di banda e medie JavaScript a 400 KB. Questo non è un problema specifico solo per la piattaforma Web. Le applicazioni native non sono migliori; ricordi quella volta che hai dovuto scaricare 200 MB per ottenere correzioni di bug non specificate?

Come tecnologi spesso ci troviamo nella posizione di privilegio. Con laptop, telefoni di fascia alta e telefoni moderni aggiornati e connessione Internet via cavo veloce, diventa fin troppo facile dimenticare che non è così per tutti (in realtà, è vero per pochissimi).

Se stiamo costruendo la piattaforma web dal punto di vista del privilegio e della mancanza di empatia, si traducono in esperienze esclusive e scadenti.

Come possiamo fare meglio progettando e sviluppando pensando alle prestazioni?

Ottimizzare tutte le risorse

Uno dei modi più potenti, ma poco utilizzati per migliorare significativamente le prestazioni, inizia con la comprensione di come il browser analizza e serve le risorse. Si scopre che i browser sono abbastanza bravi a scoprire risorse mentre analizzano e determinano la loro priorità al volo. Ecco dove arriva la richiesta critica.

Una richiesta è fondamentale se contiene risorse necessarie per eseguire il rendering del contenuto all'interno del viewport degli utenti.

Per la maggior parte dei siti, sarebbe HTML, CSS necessario, un logo, un carattere web e forse un'immagine. Si scopre che in molti casi, dozzine di altre, irrilevanti al momento sono richieste risorse (JavaScript, codici di monitoraggio, annunci, ecc.). Fortunatamente, siamo in grado di controllare questo comportamento raccogliendo con cura le risorse cruciali e regolandone la priorità.

Con siamo in grado di forzare manualmente la priorità delle risorse su Alta assicurando che i contenuti desiderati vengano resi in tempo. Questa tecnica può apportare miglioramenti significativi nella metrica Time to Interactive, rendendo possibile un'esperienza utente ottimale.

Le richieste critiche sembrano ancora una scatola nera per molti, e la mancanza di materiali condivisibili non aiuta a cambiarlo. Fortunatamente, Ben Schwarz ha pubblicato un articolo incredibilmente completo e accessibile sull'argomento: The Critical Request. Inoltre, controlla il precarico, il prefetch e le priorità di Addy in Chrome.

Abilitazione delle priorità negli strumenti per sviluppatori di Chrome

🛠 Per monitorare il rendimento delle priorità nelle richieste, utilizza lo strumento per le prestazioni di Lighthouse e l'audit delle catene di richieste critiche o controlla la priorità delle richieste nella scheda Rete in Strumenti per gli sviluppatori di Chrome.

Elenco di controllo generale delle prestazioni

  1. Cache in modo aggressivo
  2. Abilita la compressione
  3. Dai la priorità alle risorse critiche
  4. Usa le reti di distribuzione dei contenuti

Ottimizzazione delle immagini

Le immagini spesso rappresentano la maggior parte del payload trasferito di una pagina Web, motivo per cui l'ottimizzazione delle immagini può apportare i maggiori miglioramenti delle prestazioni. Esistono molte strategie e strumenti esistenti per aiutarci a rimuovere i byte extra, ma la prima domanda da porsi è: "Questa immagine è essenziale per trasmettere il messaggio e l'effetto che sto cercando?". Se è possibile eliminarlo, non solo stiamo risparmiando larghezza di banda, ma anche richieste.

In alcuni casi, risultati simili possono essere raggiunti con tecnologie diverse. CSS ha una gamma di proprietà per la direzione artistica, come ombre, sfumature, animazioni o forme che ci consentono di scambiare risorse con elementi DOM in stile appropriato.

Scegliere il formato giusto

Se non è possibile rimuovere una risorsa, è importante determinare quale formato sarà appropriato. La scelta iniziale è compresa tra grafica vettoriale e grafica raster:

  • Vettore: indipendente dalla risoluzione, di solito di dimensioni significativamente inferiori. Perfetto per loghi, iconografia e risorse semplici costituite da forme di base (linee, poligoni, cerchi e punti).
  • Raster: offre risultati molto più dettagliati. Ideale per le fotografie.

Dopo aver preso questa decisione, ci sono molti formati tra cui scegliere: JPEG, GIF, PNG – 8, PNG – 24 o formati più recenti come WEBP o JPEG-XR. Con un'abbondanza di opzioni, come possiamo assicurarci di scegliere quella giusta? Ecco un modo di base per trovare il formato migliore con cui andare:

  • JPEG: immagini con molti colori (ad es. Foto)
  • PNG – 8: immagini con pochi colori
  • PNG – 24: immagini con trasparenza parziale
  • GIF: immagini animate

Photoshop può ottimizzare ciascuno di questi all'esportazione attraverso varie impostazioni come la riduzione della qualità, la riduzione del rumore o il numero di colori. Garantire che i progettisti siano a conoscenza delle pratiche prestazionali e possano preparare il giusto tipo di risorsa con i predefiniti di ottimizzazione corretti. Se desideri saperne di più su come sviluppare immagini, vai al prezioso Designing for Performance di Lara Hogan.

Sperimentare con nuovi formati

Ci sono alcuni giocatori più recenti nello spettro dei formati di immagine, vale a dire WebP, JPEG 2000 e JPEG-XR. Tutti sono sviluppati dai fornitori di browser: WebP di Google, JPEG 2000 di Apple e JPEG-XR di Microsoft.

WebP è facilmente il contendente più popolare, supporta sia la compressione lossless che lossy, il che lo rende incredibilmente versatile. Lossless WebP è il 26% più piccolo dei PNG e il 25–34% più piccolo dei JPG. Con il 74% di supporto browser, può essere tranquillamente utilizzato con fallback, introducendo fino a 1/3 di risparmio nei byte trasferiti. JPG e PNG possono essere convertiti in WebP in Photoshop e altre app di elaborazione delle immagini, nonché attraverso interfacce da riga di comando (brew install webp).

Se desideri esplorare differenze visive (minori) tra questi formati, ti consiglio questa bella demo su Github.

Ottimizzazione con strumenti e algoritmi

Anche l'utilizzo di formati di immagine incredibilmente efficienti non garantisce l'ottimizzazione della post-elaborazione. Questo passaggio è cruciale.

Se hai scelto SVG, che di solito sono di dimensioni relativamente ridotte, anche loro devono essere compressi. SVGO è uno strumento da riga di comando in grado di ottimizzare rapidamente gli SVG eliminando metadati non necessari. In alternativa, usa SVGOMG di Jake Archibald se preferisci un'interfaccia web o sei limitato dal tuo sistema operativo. Poiché SVG è un formato basato su XML, può anche essere soggetto a compressione GZIP sul lato server.

ImageOptim è una scelta eccellente per la maggior parte degli altri tipi di immagine. Composto da pngcrush, pngquant, MozJPEG, Google Zopfli e altri, raggruppa un sacco di ottimi strumenti in un pacchetto completo e open source. Disponibile come app per Mac OS, interfaccia a riga di comando e plug-in Sketch, ImageOptim può essere facilmente implementato in un flusso di lavoro esistente. Per quelli su Linux o Windows, la maggior parte delle CLI su cui si basa ImageOptim può essere utilizzata sulla tua piattaforma.

Se sei propenso a provare gli encoder emergenti, all'inizio di quest'anno, Google ha rilasciato Guetzli, un algoritmo Open Source derivante dai suoi apprendimenti con WebP e Zopfli. Guetzli dovrebbe produrre JPEG più piccoli del 35% rispetto a qualsiasi altro metodo di compressione disponibile. L'unico aspetto negativo: tempi di elaborazione lenti (un minuto di CPU per megapixel).

Quando scegli gli strumenti, assicurati che producano i risultati desiderati e si adattino al flusso di lavoro dei team. Idealmente, automatizza il processo di ottimizzazione, quindi nessuna immagine scivola attraverso le fessure non ottimizzate.

Immagini responsabili e reattive

Un decennio fa avremmo potuto rinunciare a una risoluzione per servire tutti, ma il panorama della rete in continua evoluzione e reattiva è molto diverso oggi. Ecco perché dobbiamo prestare particolare attenzione all'implementazione delle risorse visive che abbiamo così accuratamente ottimizzato e assicurandoci che soddisfino la varietà di viewport e dispositivi. Fortunatamente, grazie a Responsive Images Community Group siamo perfettamente attrezzati per farlo con l'elemento immagine e l'attributo srcset (entrambi hanno l'85% + supporto).

L'attributo srcset

Srcset funziona meglio nello scenario di commutazione della risoluzione, quando vogliamo visualizzare le immagini in base alla densità e alle dimensioni dello schermo degli utenti. Sulla base di una serie di regole predefinite negli attributi srcset e size, il browser sceglierà l'immagine migliore da pubblicare in base alla finestra. Questa tecnica può portare grande larghezza di banda e richiedere risparmi, soprattutto per il pubblico mobile.

Un esempio di utilizzo di srcset

L'elemento dell'immagine

L'elemento immagine e l'attributo media sono progettati per semplificare la direzione artistica. Fornendo fonti diverse per condizioni diverse (testate tramite media query), siamo sempre in grado di mantenere in primo piano gli elementi più importanti delle immagini, indipendentemente dalla risoluzione.

Un esempio di utilizzo dell'elemento immagine

Assicurati di leggere la guida di Responsive Images 101 di Jason Grigsby per una spiegazione approfondita di entrambi gli approcci.

Consegna con CDN di immagini

L'ultimo passo del nostro viaggio verso immagini performanti è la consegna. Tutte le risorse possono trarre vantaggio dall'uso di una rete di distribuzione dei contenuti, ma esistono strumenti specifici destinati alle immagini, come Cloudinary o imgx. Il vantaggio derivante dall'utilizzo di tali servizi va oltre la riduzione del traffico sui server e la riduzione significativa della latenza di risposta.

Le CDN possono eliminare molta complessità dal servire asset reattivi e ottimizzati su siti ricchi di immagini. Le offerte differiscono (e lo stesso vale per i prezzi) ma la maggior parte gestisce il ridimensionamento, il ritaglio e la determinazione del formato migliore da offrire ai clienti in base a dispositivi e browser. Ancora di più: comprimono, rilevano la densità dei pixel, la filigrana, riconoscono i volti e consentono la post-elaborazione. Con queste potenti funzionalità e la possibilità di aggiungere parametri agli URL che offrono immagini incentrate sull'utente diventa un gioco da ragazzi.

Elenco di controllo delle prestazioni dell'immagine

  1. Scegli il formato giusto
  2. Usa il vettore ove possibile
  3. Ridurre la qualità se il cambiamento è impercettibile
  4. Sperimenta con nuovi formati
  5. Ottimizza con strumenti e algoritmi
  6. Informazioni su srcset e foto
  7. Usa un'immagine CDN

Ottimizzazione dei caratteri Web

La possibilità di utilizzare caratteri personalizzati è uno strumento di progettazione incredibilmente potente. Ma con il potere derivano molte responsabilità. Con l'enorme 68% dei siti Web che sfruttano i caratteri Web, questo tipo di risorsa è uno dei più grandi trasgressori delle prestazioni (con una media di 100 KB, a seconda del numero di varianti e caratteri tipografici).

Anche quando il peso non è il problema più importante, Flash of Invisible Text (FOIT) lo è. FOIT si verifica quando i caratteri Web sono ancora in fase di caricamento o non sono stati recuperati, il che si traduce in una pagina vuota e, quindi, nel contenuto inaccessibile. Potrebbe valere la pena esaminare attentamente se abbiamo bisogno dei font web in primo luogo. In tal caso, ci sono alcune strategie per aiutarci a mitigare l'effetto negativo sulle prestazioni.

Scegliere il formato giusto

Esistono quattro formati di caratteri Web: EOT, TTF, WOFF e WOFF2 più recente. TTF e WOFF sono i più utilizzati, con oltre il 90% di supporto browser. A seconda del supporto a cui ti rivolgi, è molto sicuro offrire WOFF2 e ricorrere a WOFF per i browser più vecchi. Il vantaggio dell'utilizzo di WOFF2 è un insieme di algoritmi personalizzati di preelaborazione e compressione (come Brotli) che si traducono in ca. Riduzione delle dimensioni del file del 30% e capacità di analisi migliorate.

Quando si definiscono le origini dei caratteri Web in @ font-face, utilizzare il suggerimento format () per specificare quale formato deve essere utilizzato.

Se stai utilizzando Google Fonts o Typekit per servire i tuoi caratteri, entrambi questi strumenti hanno implementato alcune strategie per mitigare il loro footprint delle prestazioni. Typekit ora serve tutti i kit in modo asincrono, prevenendo FOIT e consentendo un periodo di cache esteso di 10 giorni per il loro codice kit JavaScript (anziché 10 minuti predefiniti). Google Fonts serve automaticamente il file più piccolo, in base alle capacità del dispositivo degli utenti.

Controlla la selezione del carattere

Indipendentemente dal fatto che il self-hosting o meno, il numero di caratteri tipografici, pesi dei caratteri e stili influenzerà in modo significativo i budget delle prestazioni.

Idealmente, possiamo cavarcela con un carattere tipografico che presenta varianti stilistiche normali e audaci. Se non sei sicuro di come effettuare le scelte di selezione dei caratteri, fai riferimento all'estetica e alle prestazioni di pesatura di Lara Hogan.

Utilizzare il sottoimpostazione dell'intervallo Unicode

Il sottoinsieme della gamma Unicode consente di dividere caratteri grandi in set più piccoli. È una strategia relativamente avanzata ma potrebbe portare risparmi significativi soprattutto quando si prendono di mira le lingue asiatiche (sapevi che i caratteri cinesi hanno una media di 20.000 glifi?). Il primo passo è limitare il carattere alla lingua impostata, come latino, greco o cirillico. Se un font web è richiesto solo per l'utilizzo del logotipo, vale la pena utilizzare il descrittore dell'intervallo Unicode per selezionare caratteri specifici.

Il gruppo Filament ha rilasciato un'utilità da riga di comando Open Source, un glifo che può generare un elenco di glifi necessari basato su file o URL. In alternativa, Font Squirrel Web Font Generator basato sul Web offre opzioni avanzate di ottimizzazione e subsetting. Se si utilizza Google Fonts o Typekit la scelta di un sottoinsieme di lingue è integrato nell'interfaccia di selezione dei caratteri, rendendo più semplice il sottoinsieme di base.

Stabilire una strategia di caricamento dei caratteri

I caratteri bloccano il rendering - perché il browser deve prima creare sia DOM che CSSOM; i caratteri web non verranno scaricati prima di essere utilizzati in un selettore CSS che corrisponde a un nodo esistente. Questo comportamento ritarda significativamente il rendering del testo, causando spesso il Flash of Invisible Text (FOIT) di cui sopra. FOIT è ancora più pronunciato su reti e dispositivi mobili più lenti.

L'implementazione di una strategia di caricamento dei caratteri impedisce agli utenti di non poter accedere ai tuoi contenuti. Spesso, optando per Flash of Unstyled Text (FOUT) è la soluzione più semplice ed efficace.

font-display è una nuova proprietà CSS che fornisce una soluzione non JavaScript. Sfortunatamente, ha un supporto parziale (solo Chrome e Opera) ed è attualmente in fase di sviluppo in Firefox e WebKit. Tuttavia, può e dovrebbe essere usato in combinazione con altri meccanismi di caricamento dei caratteri.

proprietà display font in azione

Fortunatamente, Web Font Loader di Typekit e Font Face Observer di Bram Stein possono aiutare a gestire il comportamento di caricamento dei caratteri. Inoltre, Zach Leatherman, un esperto delle prestazioni dei caratteri web, ha pubblicato Una guida completa alle strategie di caricamento dei caratteri che aiuterà nella scelta del giusto approccio per il tuo progetto.

Elenco di controllo delle prestazioni dei caratteri Web

  1. Scegli il formato giusto
  2. Controlla la selezione del carattere
  3. Utilizzare il sottoimpostazione dell'intervallo Unicode
  4. Stabilire una strategia di caricamento dei caratteri

Ottimizzare JavaScript

Al momento, la dimensione media del bundle JavaScript è di 446 KB, il che lo rende già il secondo tipo più grande di un asset in termini di dimensioni (seguenti immagini).

Ciò che potremmo non renderci conto è che c'è un collo di bottiglia delle prestazioni molto più sinistro nascosto dietro il nostro amato JavaScript.

Monitora la quantità di JavaScript fornita

L'ottimizzazione della consegna è solo un passo nella lotta contro il gonfiamento della pagina web. Dopo aver scaricato JavaScript, deve essere analizzato, compilato ed eseguito dal browser. Una rapida occhiata ad alcuni siti popolari e diventa ovvio che JS compresso diventa almeno tre volte più grande dopo il disimballaggio. In effetti, stiamo inviando grosse chiazze di codice lungo il filo.

Tempi di analisi per 1 MB di JavaScript su diversi dispositivi. Immagine gentilmente concessa da Addy Osmani e dal suo articolo JavaScript Start-up Performance.

L'analisi dei tempi di analisi e compilazione diventa cruciale per capire quando le app sono pronte per essere interagite. Questi tempi variano in modo significativo in base alle capacità hardware del dispositivo degli utenti. Analizza e compila può essere facilmente 2-5 volte più alto sui cellulari di fascia bassa. La ricerca di Addy conferma che su un telefono medio un'app impiegherà 16 secondi per raggiungere uno stato interattivo, rispetto agli 8 secondi su un desktop. È fondamentale analizzare queste metriche e, fortunatamente, possiamo farlo tramite Chrome DevTools.

Analisi e compilazione in Chrome Dev Tools

Assicurati di leggere la descrizione dettagliata di Addy Osmani sulle prestazioni di avvio di JavaScript.

Sbarazzarsi di dipendenze inutili

Il modo in cui funzionano i moderni gestori di pacchetti può oscurare facilmente il numero e la dimensione delle dipendenze. webpack-bundle-analyzer e Bundle Buddy sono ottimi strumenti visivi che aiutano a identificare la duplicazione del codice, i più grandi trasgressori delle prestazioni e le dipendenze obsolete e non necessarie.

Analizzatore di bundle Webpack in azione.

Possiamo rendere i costi dei pacchetti importati ancora più visibili con l'estensione dei costi di importazione in VS Code e Atom.

Codice di importazione VS Estensione del codice.

Implementare la suddivisione del codice

Ove possibile, dovremmo servire solo le risorse necessarie per creare l'esperienza utente desiderata. L'invio di un file bundle.js completo all'utente, comprese le interazioni di gestione del codice che potrebbero non vedere mai, è tutt'altro che ottimale (immagina di scaricare JavaScript gestendo un'intera app quando visiti una pagina di destinazione). Allo stesso modo, non dovremmo offrire universalmente codice destinato a browser o agenti utente specifici.

Webpack, uno dei bundler di moduli più popolari, include il supporto per la suddivisione del codice. La suddivisione del codice più semplice può essere implementata per pagina (home.js per una pagina di destinazione, contact.js per una pagina di contatto, ecc.), Ma Webpack offre alcune strategie avanzate come importazioni dinamiche o caricamento lento che potrebbe valere la pena esaminare anche .

Prendi in considerazione alternative quadro

I framework front-end JavaScript sono in costante aumento. Secondo il sondaggio sullo stato di JavaScript 2016, React è l'opzione più popolare. Il controllo accurato delle scelte di architettura potrebbe tuttavia mostrare che staresti meglio con un'alternativa molto più leggera come Preact (nota che Preact non sta cercando di essere una reimplementazione completa di React, ma solo una libreria DOM virtuale altamente performante e con meno funzionalità). Allo stesso modo, possiamo scambiare librerie più grandi con alternative più piccole - moment.js per date-fns (o in caso particolare di moment.js rimuovere le lingue non utilizzate).

Prima di iniziare un nuovo progetto, vale la pena determinare quale tipo di funzionalità sono necessarie e scegliere il framework più performante per le tue esigenze e i tuoi obiettivi. A volte ciò potrebbe significare optare per la scrittura di più JavaScript vaniglia invece.

Elenco di controllo delle prestazioni JavaScript

  1. Monitora la quantità di JavaScript fornita
  2. Sbarazzarsi di dipendenze inutili
  3. Implementare la suddivisione del codice
  4. Prendi in considerazione alternative quadro

Monitoraggio delle prestazioni e della strada da percorrere

Abbiamo parlato di diverse strategie che nella maggior parte dei casi produrranno cambiamenti positivi nell'esperienza utente dei prodotti che stiamo costruendo. Tuttavia, le prestazioni possono essere una bestia difficile ed è necessario tenere traccia dei risultati a lungo termine delle nostre modifiche.

Metriche delle prestazioni incentrate sull'utente

Le grandi metriche delle prestazioni mirano ad essere il più vicino possibile alla rappresentazione dell'esperienza dell'utente. OnLoad, onContentLoaded o SpeedIndex da tempo affermati ci dicono molto poco su quanto presto i siti possono essere interagiti. Quando ci si concentra solo sulla consegna degli asset, non è facile quantificare il rendimento percepito. Fortunatamente, ci sono alcuni tempi che dipingono un quadro abbastanza completo di quanto presto il contenuto sia visibile e interattivo.

Queste metriche sono First Paint, First Signful Paint, Visually Complete e Time to Interactive.

  • First Paint: il browser è passato da una schermata bianca alla prima modifica visiva.
  • Prima pittura significativa: testo, immagini e oggetti principali sono visualizzabili.
  • Visivamente completo: tutto il contenuto nella finestra è visibile.
  • Time to Interactive: tutto il contenuto nel viewport è visibile e pronto per interagire con (nessuna attività JavaScript principale del thread principale).

Questi tempi corrispondono direttamente a ciò che gli utenti vedono quindi sono ottimi candidati per il monitoraggio. Se possibile, registra tutto, altrimenti scegline uno o due per comprendere meglio le prestazioni percepite. Vale la pena tenere d'occhio anche altre metriche, in particolare il numero di byte (ottimizzati e decompressi) che stiamo inviando.

Impostazione dei budget delle prestazioni

Tutte queste figure potrebbero rapidamente diventare confuse e ingombranti da capire. Senza obiettivi e traguardi attuabili, è facile perdere la traccia di ciò che stiamo cercando di raggiungere. Qualche anno fa Tim Kadlec ha scritto sul concetto di budget prestazionali.

Sfortunatamente, non esiste una formula magica per impostarli. Spesso i budget prestazionali si riducono all'analisi competitiva e agli obiettivi di prodotto, che sono unici per ogni azienda.

Quando si impostano i budget, è importante puntare a una differenza evidente, che di solito equivale a un miglioramento di almeno il 20%. Sperimenta e ripeti i tuoi budget, sfruttando l'approccio di Lara Hogan ai nuovi progetti con un budget prestazionale come riferimento.

🛠 Provare l'estensione Calcolatore del budget delle prestazioni o delle calorie del browser per facilitare la creazione di budget.

Monitoraggio continuo

Il monitoraggio delle prestazioni non dovrebbe essere manuale. Esistono alcuni potenti strumenti che offrono rapporti completi.

Google Lighthouse è un progetto Open Source che controlla le prestazioni, l'accessibilità, le app web progressive e altro ancora. È possibile utilizzare Lighthouse nella riga di comando o, come recentemente, direttamente in Strumenti per gli sviluppatori di Chrome.

Faro che esegue un controllo delle prestazioni.

Per il tracciamento continuo opt-in per Calibre che offre budget prestazionali, emulazione dei dispositivi, monitoraggio distribuito e molte altre funzionalità che sono impossibili da ottenere senza costruire con cura la propria suite di prestazioni.

Monitoraggio completo delle prestazioni in Calibre.

Ovunque tu stia monitorando, assicurati di rendere i dati trasparenti e accessibili a tutto il team, o nelle organizzazioni più piccole, all'intera azienda.

Le prestazioni sono una responsabilità condivisa, che si estende oltre i team di sviluppatori: siamo tutti responsabili per l'esperienza dell'utente che stiamo creando, indipendentemente dal ruolo o dal titolo.

È incredibilmente importante sostenere la velocità e stabilire processi di collaborazione per colmare eventuali strozzature già nelle decisioni sui prodotti o nelle fasi di progettazione.

Costruire consapevolezza delle prestazioni ed empatia

Preoccuparsi delle prestazioni non è solo un obiettivo aziendale (ma se è necessario venderlo attraverso le statistiche delle vendite, farlo con le statistiche PWA). Si tratta di empatia fondamentale e di mettere al primo posto l'interesse degli utenti.

Come tecnici, è nostra responsabilità non dirottare l'attenzione e il tempo che le persone potrebbero trascorrere felicemente altrove. Il nostro obiettivo è costruire strumenti che siano consapevoli del tempo e dell'attenzione umana.

Sostenere la consapevolezza delle prestazioni dovrebbe essere l'obiettivo di tutti. Costruiamo un futuro migliore e più consapevole per tutti noi, tenendo conto delle prestazioni e dell'empatia.