Skip to main content

​
Controllare le performance della tua app

Le performance della tua app influenzano quanto velocemente si carica e risponde alle persone. 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 dell’editor dell’app. I punteggi di performance sono più accurati quando testi la versione live sia su desktop sia su mobile.
Pannello delle performance di Chrome DevTools che mostra LCP, CLS e INP

Misurare le performance dell'app in Chrome DevTools

​
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 aggiunge 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 aggiorna 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 ottimizza 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 o 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 applica 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.