Vai al contenuto principale

​
Controllare le performance della tua app

Le performance della tua app influenzano quanto velocemente si carica e risponde agli utenti. Puoi misurarle usando i Developer Tools del tuo browser. Le metriche chiave di performance includono: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP).
Controlla sempre la tua app pubblicata, non l’anteprima del builder. I punteggi di performance sono più accurati quando testi la versione live sia su desktop sia su mobile.
Example of Chrome DevTools showing performance metrics for LCP, CLS, and INP. Esempio di Chrome DevTools che mostra le metriche di performance locali per LCP, CLS e INP.

​
Ottimizzare le performance della tua app

Ottimizza le performance della tua app concentrandoti sulle metriche chiave che influenzano quanto velocemente si carica, gira e risponde. Ognuna evidenzia un aspetto diverso dell’esperienza utente e puoi chiedere alla chat IA di Base44 di ottimizzarle direttamente.

​
Largest Contentful Paint (LCP)

LCP misura il tempo che il più grande elemento visibile (immagine, testo o video) sopra la piega impiega ad apparire. Per ottimizzare LCP:
  • Mantieni leggero e veloce il contenuto visibile sopra la piega.
  • Sposta elementi pesanti (video, iFrame, griglie, liste) sotto la piega.
  • Ottimizza e comprimi le immagini prima di caricarle.
  • Usa lazy loading per le immagini fuori schermo.
Chiedi all’IA: “Apply lazy loading to images and videos below the fold.”
L’IA aggiungerà automaticamente gli attributi corretti o gli import dinamici.

​
Cumulative Layout Shift (CLS)

CLS misura movimenti inattesi nel layout della tua app durante il caricamento. Per ottimizzare CLS:
  • Aggiungi definizioni di dimensioni: Dai a ogni immagine e video altezza e larghezza fisse per evitare spostamenti durante il caricamento.
  • Ottimizza i font personalizzati: Usa la proprietà font-display: swap; nel tuo CSS per evitare testo invisibile durante il caricamento del font.
  • Riserva spazio per contenuti dinamici: Imposta spazi fissi per annunci, pop-up o qualsiasi cosa che si carica dopo il render iniziale.
  • Minimizza gli aggiornamenti DOM: Limita i cambi di layout causati da script automatici.
Chiedi all’IA:
  • “Set fixed height and width for all media elements.”
  • “Prevent layout shifts while fonts load.”
L’IA aggiornerà automaticamente gli stili dei componenti o il CSS.

​
Interaction to Next Paint (INP)

INP misura quanto velocemente la tua app risponde a click, tap o input da tastiera. Per ottimizzare INP:
  • Evita script a lunga esecuzione attivati da azioni utente.
  • Rinvia o rimuovi script non essenziali dal caricamento iniziale.
  • Mantieni i layout semplici e le animazioni minime.
  • Monitora la reattività nella scheda Performance.
Chiedi all’IA: “Defer non-critical scripts until after interaction” oppure “Simplify animations for better responsiveness.” L’IA ottimizzerà l’ordine di esecuzione del codice e le animazioni durante la generazione.

​
Content Delivery Network (CDN) e caching

Una Content Delivery Network (CDN) distribuisce copie della tua app da server più vicini alla posizione dell’utente, migliorando i tempi di caricamento. Base44 usa automaticamente Cloudflare CDN per caching e distribuzione.
Chiedi all’IA: “Republish my app to refresh cached files.”
Ripubblicare attiva l’aggiornamento automatico della cache Cloudflare di Base44.
Al momento, non puoi svuotare manualmente la cache CDN.

​
FAQ

Clicca su una domanda qui sotto per saperne di più sull’ottimizzazione delle performance del sito.
Puoi controllare le performance della tua app usando Chrome DevTools o Google PageSpeed Insights.Per controllare con Chrome:
  • Controllo rapido:
    1. Apri la tua app pubblicata.
    2. Clicca destro ovunque e seleziona Inspect.
    3. Nel pannello destro, Chrome mostra le metriche locali per Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP).
      Questo ti dà una vista istantanea di come si comporta la tua pagina live.
  • Controllo dettagliato:
    1. Apri Chrome DevTools.
    2. Clicca sulla scheda Performance.
    3. Clicca su Record, ricarica la pagina e ferma la registrazione quando finisce il caricamento.
    4. Rivedi la timeline completa delle performance, inclusi First Contentful Paint (FCP), LCP e attività del main thread.
Per controllare con PageSpeed:
  1. Vai su PageSpeed Insights.
  2. Inserisci l’URL della tua app e clicca su Analyze.
  3. Rivedi le sezioni Insights e Diagnostics per modi per migliorare le performance della tua app.
Punta a soddisfare o superare questi punteggi consigliati per la migliore esperienza:
  • Largest Contentful Paint (LCP): 2,5 secondi o meno.
  • Cumulative Layout Shift (CLS): 0,1 o meno.
  • Interaction to Next Paint (INP): 200 millisecondi o meno.
Questi benchmark seguono gli standard di Google per performance eccellenti del sito e aiutano a garantire che la tua app giri veloce, rimanga stabile e risponda in modo fluido.
Un punteggio di performance basso di solito significa che alcuni elementi del tuo sito impiegano più tempo del previsto a caricarsi. Contenuti pesanti sopra la piega, script grandi o media non ottimizzati sono le cause più comuni.Per risolvere il problema:
  1. Esegui la tua app in Google PageSpeed Insights e controlla:
    • Risorse che bloccano il rendering: sposta gli script su async o defer.
    • Bundle JavaScript grandi: semplifica o dividi il codice vendor.
    • Immagini non ottimizzate: comprimi e ricarica.
  2. In Chrome DevTools, apri la scheda Network e clicca su Reload per vedere come si caricano i tuoi file in tempo reale.
    • Osserva i file che impiegano più di 1-2 secondi a caricarsi, probabilmente stanno rallentando la tua app.
Soluzioni rapide:
  • Sposta video, liste di dati o sezioni pesanti sotto la piega.
  • Comprimi e ridimensiona le immagini prima di caricarle.
  • Rimuovi script o CSS non usati.
  • Ripubblica la tua app per aggiornare il caching CDN.
Chiedi all’IA: “Optimize my app for faster LCP and INP” oppure “Reduce above-the-fold load size.” L’IA applicherà automaticamente lazy loading e defer degli script dove rilevante.
  • Ospita i video esternamente (ad esempio su Vimeo o YouTube).
  • Aggiungi loading="lazy" a video o iframe incorporati.
  • Posiziona i video sotto la piega per dare priorità a testo e immagini.
  • Disabilita autoplay o loop per video di sfondo grandi.
I test mobile girano su reti e dispositivi più lenti, quindi i punteggi sono di solito più bassi rispetto al desktop. Concentrati prima sull’ottimizzazione del tuo LCP e INP per mobile riducendo media pesanti, rinviando script non critici e semplificando i layout.
Questa pagina è stata tradotta utilizzando l’IA. Per informazioni più accurate e aggiornate, consulta la versione inglese.