App fatta con l'AI lenta? Come capire perché e velocizzarla

Se la tua app fatta con l'AI è lenta (pagine che restano bianche per secondi, liste che caricano a fatica, pulsanti che rispondono in ritardo) quasi sempre il motivo rientra in una di queste quattro voci: immagini troppo pesanti, troppe richieste al server, query al database che scaricano più dati del necessario o codice caricato tutto insieme. La buona notizia è che puoi capire da solo qual è il tuo caso, con strumenti gratuiti e senza saper programmare. Poi si interviene sul punto giusto, invece di chiedere all'AI di "ottimizzare tutto".

Prima di tutto: lenta dove?

"L'app è lenta" può voler dire cose molto diverse. Prima di cercare una soluzione, prova a capire in quale situazione ti trovi:

• La prima apertura è lenta, poi va bene: di solito c'entrano immagini, codice pesante o un server che si "sveglia".
• La pagina compare, ma i dati arrivano dopo secondi: quasi sempre è un problema di richieste o di database.
• Tutto è lento solo da cellulare: connessione più debole e immagini pensate per schermi grandi.
• Era veloce e ora non lo è più: i dati sono cresciuti e le richieste non erano pensate per tanti record.
• È lenta un'azione precisa (salvare, cercare, generare un testo con l'AI): il problema è in quel punto, non in tutta l'app.

App lenta: perché succede con le app create con l'AI

Per capire le cause ci serve un'immagine semplice. Pensa a un ristorante: il frontend è la sala, cioè quello che vedi nel browser; il backend è la cucina, il server che prepara le risposte; il database è la dispensa, dove sono conservati i dati. L'app è lenta quando uno di questi tre passaggi si inceppa.

Immagini troppo pesanti

È la causa più frequente e la più facile da sistemare. Una foto scattata col telefono può pesare diversi megabyte. Se la carichi così com'è e la mostri in un riquadro di 300 pixel, il browser scarica comunque tutto il file.

Troppe richieste, o richieste ripetute

Il codice generato dall'AI a volte chiede i dati al server molte più volte del necessario. Un esempio tipico: una lista di 50 prodotti in cui, per ogni prodotto, parte una richiesta separata per sapere la categoria. Sono 51 viaggi tra sala e cucina invece di uno. Altre volte la stessa richiesta parte due o tre volte a ogni apertura della pagina.

Query al database senza filtri e senza indici

Una query è una domanda che l'app fa al database ("dammi gli ordini di questo cliente"). Se la domanda è "dammi tutti gli ordini" e poi il filtro lo fa il browser, l'app scarica l'intera tabella ogni volta. Un altro problema sono gli indici: funzionano come l'indice di un libro. Senza, il database deve sfogliare tutte le pagine per trovare quello che cerchi.

Codice JavaScript troppo pesante

Durante lo sviluppo con l'AI si aggiungono librerie per grafici, animazioni o editor di testo, e spesso restano lì anche quando non servono più. Il browser deve scaricarle tutte prima di mostrare la pagina.

Server lontani o "addormentati"

Se il database è in America e i tuoi utenti sono in Italia, ogni richiesta fa un lungo viaggio. Inoltre alcuni piani gratuiti mettono in pausa il server dopo un periodo di inattività: la prima persona che arriva aspetta che si riaccenda.

Come capire qual è il tuo caso

Misura con PageSpeed Insights

Vai su PageSpeed Insights (lo strumento gratuito di Google), incolla l'indirizzo della tua pagina e avvia l'analisi. Guarda soprattutto i tre Core Web Vitals, che secondo la documentazione di Google su web.dev hanno queste soglie per un risultato "buono":

• LCP (quanto ci mette a comparire il contenuto principale): entro 2,5 secondi;
• INP (quanto in fretta la pagina risponde a un tocco o a un clic): entro 200 millisecondi;
• CLS (quanto "saltano" gli elementi mentre la pagina carica): 0,1 o meno.

I dati degli utenti reali compaiono solo se il sito ha abbastanza traffico. Altrimenti vedrai una simulazione, comunque utile per capire dove intervenire. Più in basso, la sezione con i suggerimenti indica spesso proprio le immagini più pesanti.

Guarda la scheda Rete del browser

In Chrome fai clic con il tasto destro sulla pagina, scegli Ispeziona e apri la scheda Rete (o Network). Ricarica la pagina e osserva:

• quante richieste partono: se sono centinaia, qualcosa non va;
• quali file pesano di più: ordina per dimensione e guarda in cima alla lista;
• richieste uguali ripetute: lo stesso indirizzo che compare più volte di fila;
• risposte enormi: filtra per Fetch/XHR (le richieste di dati) e controlla se qualcuna restituisce migliaia di righe quando la pagina ne mostra dieci.

Sintomi, cause e cosa fare

Cosa puoi fare tu, passo per passo

1. Sistema le immagini. Ridimensionale alla misura in cui vengono mostrate e convertile in WebP o AVIF, formati più leggeri a parità di qualità. Per le immagini più in basso nella pagina, chiedi all'AI di aggiungere il caricamento differito (loading="lazy"), così vengono scaricate solo quando servono.
2. Chiedi di caricare solo i dati necessari. Filtri e ordinamenti vanno fatti dal database, non nel browser. Per le liste lunghe chiedi la paginazione: 20 elementi alla volta invece di tutti.
3. Elimina le richieste doppie. Descrivi all'AI cosa hai visto nella scheda Rete, con esempi concreti. Per esempio:

Nella pagina /ordini, la scheda Rete mostra una richiesta separata
per ogni ordine per recuperare il nome del cliente. Modifica il
caricamento in modo che ordini e nomi dei clienti arrivino con una
sola richiesta, al massimo 20 ordini per volta. Non toccare altre pagine.

1. Aggiungi gli indici giusti, con prudenza. Se le liste si filtrano sempre per una colonna (per esempio l'utente o la data), chiedi all'AI di creare un indice su quella colonna. Fallo dopo aver verificato di avere un backup del database e, se possibile, prova prima su una copia. Se compaiono errori strani dal database, la guida agli errori Supabase più comuni ti aiuta a leggerli.
2. Controlla dove sono il server e il database. Nelle impostazioni del progetto cerca la regione: se i tuoi utenti sono in Italia, una regione europea riduce i tempi di ogni richiesta. Spostare un database esistente però non è sempre semplice: valutalo con calma.
3. Dai un segnale di attesa. Dove l'attesa è inevitabile (una generazione con l'AI, un caricamento di file) mostra un indicatore di avanzamento o una sagoma della pagina. Non rende l'app più veloce, ma la fa sembrare meno bloccata.

Se il problema è soprattutto da cellulare, controlla anche perché l'app non si vede bene da mobile: impaginazione e peso delle immagini spesso vanno di pari passo. E prima di passare a un piano più costoso, dai un'occhiata a quanto costa davvero tenere online un'app fatta con l'AI, per capire quali voci pesano.

Quando conviene farti aiutare

Immagini e piccoli aggiustamenti li puoi gestire tu. È più delicato quando:

• la lentezza viene dal database e serve riscrivere le query o aggiungere indici su dati reali;
• l'AI ha generato richieste intrecciate tra loro e ogni modifica ne rompe un'altra;
• l'app è già usata da clienti e non puoi rischiare di fermarla;
• hai provato le soluzioni più ovvie e non è cambiato niente.

In questi casi di solito misuriamo dove si perde il tempo, sistemiamo i punti che pesano di più e verifichiamo il risultato con numeri alla mano, non a sensazione. Se vuoi capire da dove partire, prenota una call gratuita di 20 minuti: guardiamo insieme la tua app e ti diciamo cosa conviene fare per prima cosa.