> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Ottimizzare le performance dell'app
> Controlla le metriche di performance della tua app e ottimizza la velocità di caricamento e la reattività.
## 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.
*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](https://pagespeed.web.dev).
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](https://pagespeed.web.dev) 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](/).