Profiling dei Componenti React: Analisi delle Prestazioni di Rendering

Nel panorama digitale odierno, in rapida evoluzione, fornire un'esperienza utente fluida e reattiva è fondamentale. Per le applicazioni React, ciò significa garantire prestazioni ottimali, in particolare nel modo in cui i componenti vengono renderizzati. Questa guida completa approfondisce il mondo del profiling dei componenti React, offrendo strategie pratiche e spunti concreti per analizzare e migliorare le prestazioni di rendering della tua applicazione.

Comprendere le Prestazioni di Rendering e la Loro Importanza

Prima di immergersi nel profiling, è fondamentale comprendere il significato delle prestazioni di rendering. Quando un componente React esegue il rendering, genera un nuovo DOM virtuale, che viene poi confrontato con quello precedente. Se esistono differenze, React aggiorna il DOM effettivo per riflettere queste modifiche. Questo processo, sebbene efficiente, può diventare un collo di bottiglia se non gestito in modo efficace. Tempi di rendering lenti possono portare a:

• UI a scatti (Janky): Gli utenti riscontrano ritardi o blocchi evidenti.
• Esperienza Utente Scadente: Le interazioni lente frustrano gli utenti.
• Aumento dell'Utilizzo della CPU: Il rendering dei componenti consuma preziosa potenza di elaborazione.
• Reattività dell'Applicazione Ridotta: L'applicazione risulta lenta e poco reattiva.

Ottimizzare le prestazioni di rendering si traduce direttamente in un'esperienza utente più fluida e piacevole, che è cruciale per la fidelizzazione degli utenti e il successo complessivo dell'applicazione. In un contesto globale, questo è ancora più importante. Utenti di tutto il mondo accedono alle applicazioni su una vasta gamma di dispositivi e velocità di rete. L'ottimizzazione delle prestazioni garantisce un'esperienza coerente, indipendentemente dalla loro posizione o tecnologia.

Strumenti e Tecniche per il Profiling dei Componenti React

React fornisce diversi potenti strumenti e tecniche per analizzare e ottimizzare le prestazioni di rendering. Ecco una panoramica dei metodi principali:

1. React DevTools Profiler

Il React DevTools Profiler è il tuo principale alleato nell'analisi delle prestazioni. È una funzionalità integrata nell'estensione per browser React DevTools (disponibile per Chrome e Firefox). Il Profiler ti aiuta a registrare e analizzare i dati sulle prestazioni, tra cui:

• Durate di rendering: Tempo impiegato da ciascun componente per il rendering.
• Gerarchia dei componenti: Visualizza l'albero dei componenti e identifica i colli di bottiglia nel rendering.
• Perché un componente è stato renderizzato?: Comprendi le ragioni dietro i ri-rendering dei componenti.
• Aggiornamenti dei componenti: Tieni traccia degli aggiornamenti dei componenti e identifica i problemi di prestazione.

Come usare il React DevTools Profiler:

1. Installa l'estensione React DevTools per il tuo browser.
2. Apri la tua applicazione React nel browser.
3. Apri il pannello DevTools.
4. Vai alla scheda 'Profiler'.
5. Fai clic sul pulsante 'Start' per iniziare a registrare un profilo di prestazioni.
6. Interagisci con la tua applicazione per attivare i ri-rendering.
7. Fai clic sul pulsante 'Stop' per analizzare i dati registrati.

Il Profiler fornisce un grafico a fiamma (flame chart) che rappresenta visivamente i tempi di rendering di ciascun componente. Puoi approfondire componenti specifici per identificare i colli di bottiglia delle prestazioni. La sezione 'Why did this render?' ('Perché questo è stato renderizzato?') è particolarmente utile per comprendere le cause alla radice dei ri-rendering.

Esempio: Immagina un sito di e-commerce globale in cui i dettagli del prodotto si aggiornano dinamicamente in base alle selezioni dell'utente. Il DevTools Profiler può aiutare a identificare se un componente specifico che mostra le informazioni sul prodotto si sta ri-renderizzando inutilmente quando cambia solo una piccola parte dei dati. Questo potrebbe accadere se il componente non utilizza `React.memo` o `useMemo` in modo efficace.

2. `React.memo`

React.memo è un componente di ordine superiore (higher-order component) che memoizza i componenti funzionali. Previene i ri-rendering se le props non sono cambiate. Questa è una tecnica potente per ottimizzare le prestazioni dei componenti che vengono renderizzati frequentemente. È simile a `PureComponent` per i componenti di classe, ma più semplice da usare per i componenti funzionali.

Esempio:

            import React from 'react';

const MyComponent = React.memo(({ prop1, prop2 }) => {
  console.log('MyComponent rendered');
  return (
    <div>
      <p>Prop 1: {prop1}</p>
      <p>Prop 2: {prop2}</p>
    </div>
  );
});

export default MyComponent;

            

              
                Copy
              
            
          

In questo esempio, `MyComponent` si ri-renderizzerà solo se `prop1` o `prop2` cambiano. Se le props rimangono le stesse, React salterà il ri-rendering, risparmiando tempo di elaborazione prezioso. Ciò è particolarmente utile per i componenti che ricevono molte props.

3. `useMemo` e `useCallback`

useMemo e useCallback sono hook di React progettati per ottimizzare le prestazioni memoizzando rispettivamente valori e funzioni. Impediscono la ri-creazione non necessaria di calcoli costosi o definizioni di funzioni. Questi hook sono cruciali per ottimizzare il rendering nei componenti che utilizzano calcoli pesanti o logiche complesse.

useMemo: Memoizza il risultato di una funzione. Ricalcola il valore solo se una delle dipendenze cambia.

Esempio:

            import React, { useMemo } from 'react';

function MyComponent({ data }) {
  const sortedData = useMemo(() => {
    return data.sort((a, b) => a.value - b.value);
  }, [data]);

  // ...
}

            

              
                Copy
              
            
          

In questo caso, `sortedData` viene ricalcolato solo quando la prop `data` cambia. Ciò previene operazioni di ordinamento non necessarie ad ogni rendering.

useCallback: Memoizza una funzione. Restituisce la stessa istanza della funzione se le dipendenze non sono cambiate.

Esempio:

            import React, { useCallback } from 'react';

function MyComponent({ onClick, data }) {
  const handleClick = useCallback(() => {
    // Perform some action using data
    onClick(data);
  }, [onClick, data]);

  return <button onClick={handleClick}>Click me</button>;
}

            

              
                Copy
              
            
          

Qui, `handleClick` viene ricreata solo se `onClick` o `data` cambiano. Ciò previene ri-rendering non necessari dei componenti figli che ricevono questa funzione come prop.

4. Code Splitting

Il code splitting è una tecnica che suddivide il tuo bundle JavaScript in blocchi più piccoli. Questo riduce il tempo di caricamento iniziale della tua applicazione, poiché viene scaricato solo il codice necessario per il rendering iniziale. I blocchi successivi vengono caricati su richiesta man mano che l'utente interagisce con l'applicazione.

Esempio: Utilizzo di `React.lazy` e `Suspense`:

            import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

            

              
                Copy
              
            
          

In questo esempio, `MyComponent` viene caricato in modo pigro (lazily). Il componente `Suspense` mostra un fallback (ad es. uno spinner di caricamento) mentre il componente viene caricato. Ciò è particolarmente vantaggioso nelle grandi applicazioni con molti componenti, che potrebbero aumentare significativamente il tempo di caricamento iniziale. Questo è importante per un pubblico globale, poiché gli utenti possono accedere alle applicazioni con diverse velocità di rete e capacità dei dispositivi. Il code splitting garantisce che l'esperienza di caricamento iniziale sia la più rapida possibile.

5. Virtualizzazione

La virtualizzazione è una tecnica per renderizzare solo gli elementi visibili in una lunga lista o tabella. Invece di renderizzare tutti gli elementi, renderizza solo quelli attualmente visibili nella viewport, più alcuni elementi extra sopra e sotto. Ciò riduce drasticamente il numero di elementi DOM e migliora le prestazioni.

Librerie per la Virtualizzazione:

• react-window: Una libreria popolare ed efficiente per il windowing.
• react-virtualized: Un'altra libreria consolidata che offre vari componenti di virtualizzazione. (Nota: questa libreria non è più mantenuta attivamente, considera alternative come react-window.)

Esempio (usando `react-window`):

            import React from 'react';
import { FixedSizeList } from 'react-window';

const MyComponent = ({ items }) => {
  const renderItem = ({ index, style }) => (
    <div style={style} key={index}>
      {items[index]}
    </div>
  );

  return (
    <FixedSizeList
      height={150}
      itemCount={items.length}
      itemSize={35}
      width={300}
    >
      {renderItem}
    </FixedSizeList>
  );
};

            

              
                Copy
              
            
          

La virtualizzazione è particolarmente vantaggiosa quando si ha a che fare con grandi set di dati, come una lista di prodotti o un lungo elenco di risultati di ricerca. Questo è rilevante per le piattaforme di e-commerce globali che gestiscono ampi cataloghi di prodotti. Virtualizzando queste liste, le applicazioni possono mantenere la reattività anche con migliaia di articoli.

6. Ottimizzazione degli Aggiornamenti dei Componenti

Analizza perché i componenti si ri-renderizzano. A volte, i componenti si ri-renderizzano inutilmente a causa di modifiche alle props provenienti dal componente genitore. Usa le seguenti tecniche per prevenire ri-rendering non necessari:

• Prop Drilling: Se una prop non viene utilizzata direttamente da un componente ma deve essere passata a un componente figlio, considera l'utilizzo di Context o Redux (o una libreria di gestione dello stato simile) per evitare il prop drilling. Il prop drilling può attivare un ri-rendering in tutti i componenti lungo la catena delle props, anche quando un componente non ne ha bisogno.
• Strutture Dati Immutabili: Usa strutture dati immutabili per garantire che React possa confrontare le props in modo efficiente. Librerie come Immer possono semplificare gli aggiornamenti immutabili. Considera l'uso di `Object.freeze()` per strutture dati semplici che sono note per essere immutabili.
• Usa `shouldComponentUpdate` (Componenti di Classe, anche se meno comuni ora): Nei componenti di classe (sebbene React stia incoraggiando i componenti funzionali con hook), il metodo del ciclo di vita `shouldComponentUpdate` ti permette di controllare se un componente si ri-renderizza in base alle nuove props e al nuovo stato. Nei componenti funzionali con hook, usa `React.memo` o meccanismi simili.
• Evita le Funzioni Inline: Definisci le funzioni al di fuori del metodo di rendering o usa `useCallback` per evitare che la funzione venga ricreata ad ogni rendering.

Queste ottimizzazioni sono cruciali per ridurre il tempo di rendering complessivo della tua applicazione. Tienile in considerazione quando costruisci nuovi componenti e rifattorizzi quelli esistenti.

Tecniche e Strategie di Profiling Avanzate

1. Hook Personalizzati per il Monitoraggio delle Prestazioni

Crea hook personalizzati per tracciare i tempi di rendering e identificare problemi di prestazione. Questo può aiutarti a monitorare le prestazioni dei componenti in tutta la tua applicazione e a individuare più efficacemente i componenti problematici.

Esempio:

            import { useRef, useLayoutEffect } from 'react';

function useRenderCounter(componentName) {
  const renderCount = useRef(0);

  useLayoutEffect(() => {
    renderCount.current++;
    console.log(`${componentName} rendered ${renderCount.current} times`);
  });

  return renderCount.current;
}

// Usage in a component:
function MyComponent() {
  const renderCount = useRenderCounter('MyComponent');
  // ...
}

            

              
                Copy
              
            
          

Questo hook personalizzato ti aiuta a tracciare il numero di volte in cui un componente viene renderizzato, fornendo spunti su potenziali problemi di prestazione. Questa strategia è utile per monitorare la frequenza di rendering in tutta l'applicazione, aiutando a prioritizzare gli sforzi di ottimizzazione.

2. Raggruppamento degli Aggiornamenti (Batching)

React spesso raggruppa gli aggiornamenti di stato per migliorare le prestazioni. Tuttavia, in alcuni casi, gli aggiornamenti potrebbero non essere raggruppati automaticamente. Puoi usare `ReactDOM.unstable_batchedUpdates` (generalmente sconsigliato a meno che tu non sappia cosa stai facendo e ne comprenda le implicazioni, perché è considerata un'API 'privata') per raggruppare manualmente gli aggiornamenti.

Attenzione: Usa questa tecnica con cautela, poiché a volte può portare a comportamenti inaspettati se non implementata correttamente. Considera alternative come `useTransition` se possibile.

3. Memoizzazione di Calcoli Costosi

Identifica e memoizza i calcoli costosi usando useMemo per evitare che vengano eseguiti ad ogni rendering. Analizza i tuoi componenti alla ricerca di calcoli ad alta intensità di risorse e applica tecniche di memoizzazione per ottimizzare le prestazioni.

Esempio:

            import { useMemo } from 'react';

function MyComponent({ items }) {
  const expensiveCalculation = useMemo(() => {
    // Perform a complex calculation
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]); // Recalculate only when 'items' changes

  return (
    <div>
      <p>Result: {expensiveCalculation}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Questo esempio dimostra la memoizzazione di un calcolo ad alta intensità di risorse. Utilizzando useMemo, il calcolo viene eseguito solo quando la prop items cambia, migliorando significativamente le prestazioni.

4. Ottimizza Immagini e Asset

Immagini e asset non ottimizzati possono influire significativamente sulle prestazioni di rendering. Assicurati di utilizzare formati di immagine ottimizzati (es. WebP), comprimere le immagini e caricarle in modo pigro (lazy load) per migliorare le prestazioni.

• Strumenti di Ottimizzazione delle Immagini: Usa strumenti come TinyPNG, ImageOptim (macOS) o servizi online per comprimere le immagini.
• Lazy Loading: Usa l'attributo loading="lazy" sui tag <img> o librerie come react-lazyload.
• Immagini Reattive: Fornisci diverse dimensioni di immagine in base alle dimensioni dello schermo utilizzando l'elemento <picture> o l'attributo srcset.

Queste tecniche di ottimizzazione sono applicabili a qualsiasi applicazione globale, indipendentemente dalla posizione dell'utente. Migliorano i tempi di caricamento percepiti e contribuiscono a una migliore esperienza utente.

5. Rendering Lato Server (SSR) e Generazione di Siti Statici (SSG)

Considera il Rendering Lato Server (SSR) o la Generazione di Siti Statici (SSG) per la tua applicazione React, specialmente se il contenuto è in gran parte statico o focalizzato sulla SEO. SSR e SSG possono migliorare significativamente i tempi di caricamento iniziali renderizzando l'HTML iniziale sul server, riducendo la quantità di lavoro che il browser deve fare. Framework come Next.js e Gatsby forniscono un eccellente supporto per SSR e SSG.

Vantaggi di SSR/SSG:

• Caricamento Iniziale Più Veloce: Il server fornisce HTML pre-renderizzato.
• SEO Migliorata: I motori di ricerca possono facilmente scansionare e indicizzare il contenuto.
• Prestazioni Migliori: Riduce il carico sul browser dell'utente.

Per le applicazioni che si rivolgono a un pubblico globale, ridurre il tempo fino al primo contenuto significativo (first meaningful paint) è cruciale. SSR e SSG contribuiscono direttamente a questo, fornendo un beneficio immediato agli utenti indipendentemente dalla loro posizione.

Esempi Pratici e Casi di Studio

Esempio 1: Ottimizzazione di un Componente di Elenco Prodotti

Considera un'applicazione di e-commerce che mostra un elenco di prodotti. Inizialmente, il componente dell'elenco prodotti si renderizza lentamente a causa del gran numero di prodotti и dei calcoli complessi eseguiti per ogni scheda prodotto. Ecco come puoi migliorare le prestazioni:

1. Implementa la Virtualizzazione: Usa una libreria come `react-window` per renderizzare solo i prodotti visibili.
2. Memoizza il Componente Scheda Prodotto: Avvolgi il singolo componente della scheda prodotto con `React.memo` per prevenire ri-rendering non necessari se i dati del prodotto не sono cambiati.
3. Ottimizza il Caricamento delle Immagini: Usa il lazy loading per le immagini dei prodotti.
4. Code Splitting: Se il componente dell'elenco prodotti è necessario solo su una pagina specifica, usa il code splitting per ritardarne il caricamento finché non è necessario.

Implementando queste strategie, puoi migliorare significativamente la reattività del componente dell'elenco prodotti, fornendo un'esperienza di navigazione molto più fluida, cruciale per gli utenti a livello globale.

Esempio 2: Ottimizzazione di un'Applicazione di Chat

Le applicazioni di chat sono spesso in tempo reale e si aggiornano frequentemente. I continui ri-rendering possono influire negativamente sulle prestazioni. Ottimizza le applicazioni di chat utilizzando le seguenti tecniche:

1. Memoizza i Componenti dei Messaggi: Avvolgi i singoli componenti dei messaggi in `React.memo` per prevenire ri-rendering se il contenuto del messaggio non è cambiato.
2. Usa `useMemo` e `useCallback`: Ottimizza qualsiasi calcolo o gestore di eventi relativo ai messaggi, come la formattazione dei timestamp o la gestione delle interazioni dell'utente.
3. Debounce/Throttle degli Aggiornamenti: Se i messaggi vengono inviati in rapida successione, considera il debouncing o il throttling degli aggiornamenti all'interfaccia della chat per ridurre i rendering non necessari.
4. Virtualizza la Finestra della Chat: Mostra solo i messaggi visibili e virtualizza l'area scorrevole per la cronologia della chat.

Queste tecniche miglioreranno significativamente la reattività dell'applicazione di chat, specialmente su dispositivi con potenza di elaborazione limitata. Ciò è particolarmente importante per le applicazioni con utenti in regioni con reti più lente.

Caso di Studio: Miglioramento delle Prestazioni in una Piattaforma di Social Media Globale

Una piattaforma di social media globale ha riscontrato problemi di prestazioni relativi al rendering dei feed degli utenti. Hanno utilizzato una combinazione di tecniche per risolvere questo problema. Ecco cosa hanno fatto:

• Identificato i Colli di Bottiglia con React DevTools Profiler: Hanno identificato i componenti che si ri-renderizzavano frequentemente.
• Implementato `React.memo` sui componenti chiave: Componenti come i post degli utenti e i commenti sono stati memoizzati.
• Usato `useMemo` e `useCallback` per ottimizzare l'elaborazione dei dati e i gestori di eventi: Calcoli costosi e definizioni di funzioni sono stati memoizzati.
• Ottimizzato il Caricamento delle Immagini e la Consegna degli Asset: Hanno utilizzato formati di immagine ottimizzati, lazy loading e una CDN per distribuire gli asset in modo efficiente.
• Implementato la Virtualizzazione: Hanno usato la virtualizzazione per migliorare le prestazioni per lunghe liste di post.

Risultati: La piattaforma ha registrato una significativa diminuzione dei tempi di rendering, portando a un maggiore coinvolgimento degli utenti e a un'esperienza utente più fluida per tutti i loro utenti, a livello globale. Hanno riportato una riduzione del 40% del time to interactive e una significativa riduzione dell'utilizzo della CPU, che ha migliorato direttamente le prestazioni sui dispositivi mobili, un aspetto critico in molte regioni internazionali.

Migliori Pratiche e Suggerimenti per la Risoluzione dei Problemi

1. Esegui regolarmente il Profiling della Tua Applicazione

Il profiling delle prestazioni non è un'attività da fare una sola volta. Rendilo una parte regolare del tuo flusso di lavoro di sviluppo. Esegui il profiling della tua applicazione frequentemente, specialmente dopo aver aggiunto nuove funzionalità o apportato modifiche significative al codice. Questo approccio proattivo ti aiuta a identificare e risolvere i problemi di prestazione in anticipo, prima che influenzino gli utenti.

2. Monitora le Prestazioni in Produzione

Sebbene gli strumenti di sviluppo siano utili, è fondamentale monitorare le prestazioni nel tuo ambiente di produzione. Usa strumenti come Sentry, New Relic o i tuoi strumenti di monitoraggio delle prestazioni preferiti. Questi strumenti ti permettono di tracciare metriche di performance del mondo reale e di identificare problemi che potrebbero non essere evidenti in fase di sviluppo. Questo è essenziale per identificare come si comporta la tua applicazione per utenti in diverse regioni geografiche, su diversi dispositivi e con diverse condizioni di rete. Ciò aiuta a identificare potenziali colli di bottiglia. Considera di effettuare test A/B su diverse strategie di ottimizzazione per valutarne l'impatto reale.

3. Semplifica i Componenti

Mantieni i tuoi componenti il più semplici possibile. I componenti complessi hanno maggiori probabilità di avere problemi di prestazioni. Suddividi i componenti complessi in componenti più piccoli e più gestibili. Questo approccio modulare rende più facile identificare e ottimizzare le prestazioni di rendering.

4. Evita i Ri-rendering Non Necessari

La chiave per buone prestazioni è ridurre al minimo i ri-rendering. Usa React.memo, `useMemo` e `useCallback` in modo strategico per prevenire ri-rendering non necessari. Analizza sempre il motivo per cui un componente si sta ri-renderizzando e affronta la causa alla radice.

5. Ottimizza le Librerie di Terze Parti

Le librerie di terze parti possono influire significativamente sulle prestazioni della tua applicazione. Scegli le librerie con attenzione e analizza il loro impatto sulle prestazioni. Considera il lazy loading o il code splitting se una libreria è ad alta intensità di risorse. Aggiorna regolarmente le librerie di terze parti per sfruttare i miglioramenti delle prestazioni.

6. Revisioni del Codice e Audit delle Prestazioni

Incorpora le revisioni del codice e gli audit delle prestazioni nel tuo processo di sviluppo. Le revisioni del codice tra pari possono aiutare a identificare potenziali problemi di prestazione. Gli audit delle prestazioni da parte di sviluppatori esperti possono fornire preziose intuizioni e raccomandazioni per l'ottimizzazione. Ciò garantisce che tutti gli sviluppatori siano a conoscenza delle migliori pratiche e lavorino attivamente per migliorare le prestazioni.

7. Considera il Dispositivo e la Rete dell'Utente

Quando ottimizzi per un pubblico globale, tieni a mente i dispositivi e le condizioni di rete che i tuoi utenti probabilmente sperimenteranno. Dispositivi mobili e reti più lente sono comuni in molte regioni. Ottimizza la tua applicazione per funzionare bene su questi dispositivi e reti. Considera tecniche come l'ottimizzazione delle immagini, il code splitting e la virtualizzazione per migliorare l'esperienza utente.

8. Sfrutta le Ultime Funzionalità di React

Rimani aggiornato con le ultime funzionalità e le migliori pratiche di React. React è in continua evoluzione e nuove funzionalità sono spesso progettate per migliorare le prestazioni. Ad esempio, l'introduzione delle modalità di rendering concorrente e delle transizioni. Ciò garantisce che tu stia sfruttando gli strumenti più efficienti disponibili.

9. Ottimizza Animazioni e Transizioni

Animazioni e transizioni possono influire significativamente sulle prestazioni, specialmente su dispositivi meno potenti. Assicurati che le tue animazioni siano fluide ed efficienti. Usa l'accelerazione hardware dove possibile ed evita animazioni complesse. Ottimizza le animazioni CSS per le migliori prestazioni. Considera l'uso della proprietà `will-change` per dire al browser quali proprietà cambieranno, migliorando potenzialmente le prestazioni di rendering.

10. Monitora la Dimensione del Bundle

Bundle di grandi dimensioni possono aumentare significativamente il tempo di caricamento iniziale della tua applicazione. Usa strumenti come webpack bundle analyzer per comprendere la dimensione del tuo bundle e identificare opportunità di ottimizzazione. Il code splitting, il tree shaking e la rimozione del codice non utilizzato possono aiutare a ridurre la dimensione del bundle.

Conclusione

Il profiling dei componenti React è una competenza essenziale per qualsiasi sviluppatore front-end che mira a costruire applicazioni performanti e reattive. Utilizzando le tecniche e le strategie delineate in questa guida, puoi analizzare, identificare e risolvere i colli di bottiglia delle prestazioni di rendering nelle tue applicazioni React. Ricorda che l'ottimizzazione delle prestazioni è un processo continuo, quindi esegui regolarmente il profiling della tua applicazione, monitora le prestazioni in produzione e rimani aggiornato con le ultime funzionalità e le migliori pratiche di React. Questo impegno per le prestazioni offrirà un'esperienza utente notevolmente migliorata su una vasta gamma di dispositivi e condizioni di rete, portando infine a una maggiore soddisfazione dell'utente e al successo dell'applicazione, a livello globale.